:root{
    --bg: #0b0d10;
    --panel: #14171b;
    --panel-2: #1c2027;
    --line: #262b33;
    --text: #e7e9ec;
    --muted: #9aa1ab;
    --left-eye: #ff3b3b;
    --right-eye: #35d0ff;
    --accent: #f2c14e;
    --selected: #2ee06f;
    --selected-2: #17b354;
    --selected-glow: rgba(46,224,111,.4);
    --warn: #ff5566;
    --mono: "JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
    --sans: "Inter","Helvetica Neue",Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;}

  /* ===== Tools footer ===== */
  .tools-footer{
    background:var(--bg);
    padding:36px 24px 44px;
    border-top:1px solid var(--line);
  }
  .tools-footer-inner{max-width:1400px;margin:0 auto;}
  .tools-footer h2{
    margin:0 0 18px;
    font-family:var(--mono);
    font-size:13px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
  }
  .tools-row{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
  }
  .tool-pill{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 26px;
    border-radius:999px;
    font-family:var(--sans);
    font-weight:700;
    font-size:16px;
    color:#fff;
    text-decoration:none;
    white-space:nowrap;
    transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  }
  .tool-pill:hover{transform:translateY(-2px);filter:brightness(1.08);}
  .tool-pill svg{width:20px;height:20px;flex-shrink:0;}
  .tool-pill .new-badge{
    position:absolute;
    top:-10px;
    right:-10px;
    background:linear-gradient(180deg,#ffe066,#f2c14e);
    color:#1a1400;
    font-family:var(--sans);
    font-size:11px;
    font-weight:800;
    letter-spacing:.03em;
    padding:3px 10px;
    border-radius:999px;
    box-shadow:0 2px 8px rgba(242,193,78,.55);
  }
  .tool-depthmaker{
    background:linear-gradient(135deg,#b83bff 0%,#9b2fe6 60%,#8425cf 100%);
    box-shadow:0 0 22px rgba(179,60,255,.45), 0 2px 10px rgba(0,0,0,.4);
  }
  .tool-stereomaker{
    background:linear-gradient(135deg,#26c6f5 0%,#1e8fe0 60%,#1a6fdb 100%);
    box-shadow:0 0 22px rgba(38,198,245,.4), 0 2px 10px rgba(0,0,0,.4);
  }
  .tool-stereorig{
    background:linear-gradient(135deg,#ffb020 0%,#f2861f 60%,#e8641a 100%);
    box-shadow:0 0 22px rgba(255,150,30,.4), 0 2px 10px rgba(0,0,0,.4);
  }
  .tool-frameworks{
    background:linear-gradient(135deg,#1fbf83 0%,#16a889 60%,#0f9a8e 100%);
    box-shadow:0 0 22px rgba(31,191,131,.4), 0 2px 10px rgba(0,0,0,.4);
  }
  @media (max-width:640px){
    .tools-row{gap:14px;}
    .tool-pill{padding:12px 20px;font-size:14.5px;}
  }
  body{min-height:100vh;}

  .topbar{
    position:sticky;top:0;z-index:20;
    background:linear-gradient(180deg,#101317,#0b0d10);
    border-bottom:1px solid var(--line);
    padding:14px 28px;
  }
  /* --- Single header row: brand, swap, menu. Viewing modes now live
         below, on the same line as the status readout. --- */
  .topbar-row{display:flex;align-items:center;gap:18px;}
  .brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
  .brand .mark{
    width:32px;height:22px;border-radius:4px;flex-shrink:0;
    background:linear-gradient(90deg,var(--left-eye) 0 49%, var(--panel) 49% 51%, var(--right-eye) 51% 100%);
    box-shadow:0 0 0 1px var(--line);
  }
  .brand h1{font-size:17px;letter-spacing:.04em;margin:0;font-weight:700;white-space:nowrap;}
  .brand span{color:var(--muted);font-size:13px;font-family:var(--mono);white-space:nowrap;}
  .status{font-family:var(--mono);font-size:15px;color:var(--muted);white-space:nowrap;flex-shrink:0;}
  .status b{color:var(--accent);font-weight:600;}
  .status-row{display:flex;align-items:center;gap:16px;font-size:15px;}
  .topbar-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto;}
  .hamburger{
    display:none;flex-shrink:0;background:transparent;color:var(--text);
    border:1px solid var(--line);border-radius:8px;width:42px;height:42px;
    font-size:18px;cursor:pointer;align-items:center;justify-content:center;
  }
  .hamburger:hover{border-color:#3a4150;background:#20242b;}

  /* --- Social badges (X / YouTube), matching 3dstreaming.org --- */
  .social-badges-inline{display:flex;align-items:center;gap:8px;flex-shrink:0;}
  .social-badge{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    background:var(--panel-2);border:1px solid var(--line);color:var(--muted);
    transition:.15s;flex-shrink:0;
  }
  .social-badge svg{width:16px;height:16px;}
  .social-badge:hover{border-color:#3a4150;color:var(--text);background:#20242b;transform:translateY(-1px);}
  .social-badge.badge-x:hover{color:#fff;border-color:#fff;}
  .social-badge.badge-yt:hover{color:#ff0000;border-color:#ff0000;}

  /* --- Second header row: Help button + "keep this tab open" warning,
         mirroring the notice shown on 3dstreaming.org/stereomaker. --- */
  .topbar-notice-row{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap;}
  .help-btn{
    display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
    font-family:var(--sans);font-weight:700;font-size:13.5px;
    background:var(--panel-2);color:var(--text);border:1px solid var(--line);
    padding:8px 16px 8px 10px;border-radius:999px;cursor:pointer;transition:.15s;
  }
  .help-btn .help-icon{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:19px;height:19px;border-radius:50%;
    border:1.5px solid var(--muted);color:var(--muted);
    font-size:11px;font-weight:800;line-height:1;transition:.15s;
  }
  .help-btn:hover{border-color:#3a4150;background:#20242b;transform:translateY(-1px);}
  .help-btn:hover .help-icon{border-color:var(--accent);color:var(--accent);}

  .keep-tab-banner{
    display:flex;align-items:flex-start;gap:10px;flex:1;min-width:220px;max-width:560px;
    background:linear-gradient(135deg, rgba(255,85,102,.14), rgba(120,10,25,.10));
    border:1px solid rgba(255,85,102,.4);border-radius:14px;
    padding:9px 16px;font-size:13px;line-height:1.45;color:#ffd7db;
    animation:warnGlow 3.2s ease-in-out infinite;
  }
  .keep-tab-banner .warn-icon{font-size:15px;flex-shrink:0;margin-top:1px;filter:drop-shadow(0 0 6px rgba(255,176,32,.5));}
  .keep-tab-banner strong{color:#fff;}
  @keyframes warnGlow{
    0%,100%{box-shadow:0 0 0 rgba(255,85,102,0);}
    50%{box-shadow:0 0 16px rgba(255,85,102,.28);}
  }
  @media (prefers-reduced-motion:reduce){ .keep-tab-banner{animation:none;} }
  @media (max-width:640px){
    .keep-tab-banner{font-size:12px;padding:8px 12px;}
    .help-btn{padding:7px 12px 7px 8px;font-size:13px;}
  }

  /* --- Live "currently selected" badge next to the Choose viewing mode
         label, so the active mode is visible without opening the picker. --- */
  .mode-current{
    display:inline-flex;align-items:center;gap:6px;
    background:rgba(46,224,111,.12);border:1px solid rgba(46,224,111,.4);
    color:var(--selected);border-radius:999px;padding:3px 10px 3px 8px;
    font-family:var(--sans);font-size:12px;font-weight:700;text-transform:none;
    letter-spacing:0;white-space:nowrap;
  }
  .mode-current:empty{display:none;}
  .mode-current .dot{
    width:7px;height:7px;border-radius:50%;flex-shrink:0;
    background:var(--selected);box-shadow:0 0 6px var(--selected-glow);
  }

  /* --- Viewing mode: the pill bar is hidden — only the "👓 Viewing"
         toggle button sits next to the status readout. Clicking it opens
         the mode-guide modal (see .mode-sheet) to pick a mode. --- */
  .mode-bar-row{display:flex;align-items:center;gap:10px;flex-shrink:0;}
  .mode-bar-label{
    display:flex;align-items:center;gap:5px;
    font-family:var(--mono);font-size:13px;color:var(--muted);
    text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;flex-shrink:0;
    background:transparent;border:1px solid transparent;border-radius:6px;
    padding:6px 8px;margin:0;cursor:pointer;transition:.15s;
  }
  .mode-bar-label:hover, .mode-bar-label:focus-visible{color:var(--text);border-color:var(--line);background:#171a1f;}
  .mode-bar-label .txt{margin-left:2px;}
  .mode-bar{display:none;}
  .mode-pill{
    flex-shrink:0;display:flex;align-items:center;gap:6px;
    font-family:var(--sans);font-size:13.5px;font-weight:600;
    background:var(--panel-2);color:var(--text);border:1px solid var(--line);
    padding:9px 15px;border-radius:20px;cursor:pointer;transition:.15s;white-space:nowrap;
  }
  .mode-pill:hover{border-color:#3a4150;background:#20242b;}
  .mode-pill.active{
    background:linear-gradient(135deg, var(--selected), var(--selected-2));
    color:#06210f;border-color:var(--selected);
    box-shadow:0 0 0 3px var(--selected-glow), 0 4px 14px rgba(23,179,84,.35);
    animation:modeSelectPop .28s ease;
  }
  .mode-pill:disabled{opacity:.35;cursor:not-allowed;}
  .mode-pill .swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.3);}
  .swap-btn{display:flex;align-items:center;gap:6px;}
  .swap-btn .swap-icon{font-size:16px;}
  .swap-btn.on{background:var(--accent);color:#141414;border-color:var(--accent);}

  /* CTA back to the parent 3Dstreaming.org video-streaming service —
     this tool is one of several 3D-stereoscopy utilities that live under
     that site, so it always gets a way back to "watch" rather than just
     "make/view" 3D media. */
  .watch-btn{
    display:flex;align-items:center;gap:8px;text-decoration:none;
    font-size:14px;font-weight:700;line-height:1;
    background:var(--accent);color:#141414;
    border:1px solid var(--accent);border-radius:20px;padding:8px 16px;
    cursor:pointer;transition:.15s;white-space:nowrap;flex-shrink:0;
  }
  .watch-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
  .watch-btn .watch-icon{font-size:13px;}

  /* Progressively shed non-essential chrome as width shrinks, so the mode
     bar (the primary control) always keeps usable room and stays one row. */
  @media (max-width:1180px){
    .brand span{display:none;}
  }
  @media (max-width:980px){
    .watch-btn .watch-label{display:none;}
    .watch-btn{padding:8px 12px;}
  }
  @media (max-width:900px){
    .topbar{padding:12px 16px;}
    .topbar-row{gap:10px;justify-content:space-between;}
    .mode-bar-row{display:none;}
  }
  @media (max-width:640px){
    .brand h1{font-size:15px;}
    .brand .mark{width:26px;height:18px;}
    .mode-pill{padding:8px 12px;font-size:13px;}
  }

  .layout{display:grid;grid-template-columns:1fr 360px;gap:0;min-height:calc(100vh - 76px);}
  @media (max-width:900px){
    .layout{grid-template-columns:1fr;}
    .hamburger{display:flex;}
  }

  /* --- Viewing-mode guide modal ---
     Opened from either the header's ☰ button (mobile) or the "👓 Viewing"
     label next to the status line (any width). On mobile it's a full-screen
     sheet with generous touch targets; on desktop it's a centered dialog
     over a dimmed backdrop, so people can preview mode descriptions
     without leaving the page. --- */
  .mode-sheet{
    display:none;position:fixed;inset:0;z-index:40;
    background:var(--bg);flex-direction:column;
  }
  .mode-sheet.open{display:flex;}
  .mode-sheet-card{display:flex;flex-direction:column;min-height:0;flex:1;}
  .mode-sheet-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:16px 20px;border-bottom:1px solid var(--line);flex-shrink:0;
    background:linear-gradient(180deg,#101317,#0b0d10);
  }
  .mode-sheet-header h2{margin:0;font-size:15px;letter-spacing:.04em;}
  .mode-sheet-close{
    background:transparent;color:var(--text);border:1px solid var(--line);
    border-radius:8px;width:38px;height:38px;font-size:16px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .mode-sheet-close:hover{border-color:#3a4150;background:#20242b;}
  .mode-sheet-list{flex:1;overflow-y:auto;padding:10px 12px 24px;}
  @media (min-width:901px){
    .mode-sheet{
      background:rgba(6,8,11,.7);backdrop-filter:blur(2px);
      align-items:center;justify-content:center;padding:24px;
    }
    .mode-sheet-card{
      flex:0 1 auto;width:100%;max-width:480px;max-height:min(640px,86vh);
      background:var(--panel);border:1px solid var(--line);border-radius:16px;
      box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden;
    }
    .mode-sheet-header{border-radius:16px 16px 0 0;}
  }
  .mode-sheet-item{
    width:100%;display:flex;align-items:center;gap:14px;text-align:left;
    background:var(--panel-2);color:var(--text);border:1px solid var(--line);
    border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;
  }
  .mode-sheet-item .icon{font-size:22px;flex-shrink:0;width:28px;text-align:center;}
  .mode-sheet-item .swatch{width:16px;height:16px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.3);}
  .mode-sheet-item .txt{flex:1;min-width:0;}
  .mode-sheet-item .txt .label{font-weight:700;font-size:15px;}
  .mode-sheet-item .txt .desc{color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.4;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .mode-sheet-item{transition:border-color .15s, background .15s, box-shadow .15s, transform .15s;}
  .mode-sheet-item:hover:not(:disabled):not(.active){border-color:#3a4150;background:#20242b;}
  .mode-sheet-item .check{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:24px;height:24px;border-radius:50%;font-size:13px;font-weight:800;
    color:#06210f;background:var(--selected);
    box-shadow:0 0 0 3px var(--selected-glow);
    opacity:0;transform:scale(0) rotate(-25deg);transition:opacity .15s;
  }
  .mode-sheet-item.active{
    border-color:var(--selected);
    background:linear-gradient(135deg, rgba(46,224,111,.16), rgba(46,224,111,.05));
    box-shadow:0 0 0 1px var(--selected) inset, 0 4px 18px rgba(46,224,111,.22);
    transform:translateY(-1px);
  }
  .mode-sheet-item.active .txt .label{color:var(--selected);}
  .mode-sheet-item.active .swatch{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--selected);}
  .mode-sheet-item.active .check{opacity:1;transform:scale(1) rotate(0deg);animation:checkPop .32s cubic-bezier(.34,1.56,.64,1);}
  .mode-sheet-item:disabled{opacity:.35;cursor:not-allowed;}

  @keyframes modeSelectPop{
    0%{transform:scale(.9);}
    55%{transform:scale(1.04);}
    100%{transform:scale(1);}
  }
  @keyframes checkPop{
    0%{opacity:0;transform:scale(0) rotate(-25deg);}
    60%{opacity:1;transform:scale(1.25) rotate(8deg);}
    100%{opacity:1;transform:scale(1) rotate(0deg);}
  }
  @media (prefers-reduced-motion:reduce){
    .mode-pill.active, .mode-sheet-item.active .check{animation:none;}
  }

  .help-sheet-card{max-width:520px !important;}
  .help-item{
    width:100%;display:flex;align-items:flex-start;gap:14px;text-align:left;
    background:var(--panel-2);border:1px solid var(--line);
    border-radius:12px;padding:14px 16px;margin-bottom:10px;
  }
  .help-item .icon{font-size:20px;flex-shrink:0;width:26px;text-align:center;line-height:1.3;}
  .help-item .txt{flex:1;min-width:0;}
  .help-item .txt .label{font-weight:700;font-size:14.5px;display:block;margin-bottom:3px;}
  .help-item .txt .desc{color:var(--muted);font-size:13px;line-height:1.5;}
  .help-item:last-child{margin-bottom:0;}

  .help-video-btn{
    width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
    background:var(--accent);color:#141414;font-weight:700;font-size:14.5px;
    border:none;border-radius:12px;padding:14px 16px;margin-top:4px;
    text-decoration:none;cursor:pointer;transition:filter .15s ease, transform .15s ease;
  }
  .help-video-btn:hover{filter:brightness(1.1);}
  .help-video-btn:active{transform:scale(.98);}
  .help-video-btn .icon{font-size:16px;line-height:1;}

  .stage-wrap{padding:24px;display:flex;flex-direction:column;gap:16px;}
  .stage{
    position:relative;width:100%;aspect-ratio:16/9;background:#000;
    border:1px solid var(--line);border-radius:10px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
  }
  .stage.empty{
    background:
      radial-gradient(ellipse at center, rgba(242,193,78,.05), transparent 65%),
      #000;
    border:1px dashed #3a3320;
  }
  .empty-state{
    display:none;position:absolute;inset:0;z-index:2;
    flex-direction:column;align-items:center;justify-content:center;gap:16px;
    padding:24px;pointer-events:none;
  }
  .stage.empty .empty-state{display:flex;}
  .empty-state-icons{display:flex;align-items:center;justify-content:center;gap:18px;}
  .empty-state-icons .empty-icon{
    font-size:44px;line-height:1;
    filter:drop-shadow(0 0 16px rgba(242,193,78,.35));
    animation:emptyPulse 2.4s ease-in-out infinite;
  }
  .empty-state-icons .empty-icon:nth-child(3){animation-delay:.3s;}
  .empty-state-upload{
    pointer-events:auto;cursor:pointer;
    width:64px;height:64px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:26px;line-height:1;
    background:var(--panel-2);color:var(--accent);
    border:1.5px dashed var(--accent);
    transition:.15s;
  }
  .empty-state-upload:hover{
    background:var(--accent);color:#141414;border-style:solid;
    transform:scale(1.06);
  }
  .empty-state-upload:active{transform:scale(.97);}
  .empty-state-text{
    color:var(--accent);
    font-family:var(--sans);font-weight:700;font-size:21px;
    text-align:center;letter-spacing:.01em;line-height:1.5;
    text-shadow:0 0 24px rgba(242,193,78,.18);
  }
  @keyframes emptyPulse{
    0%,100%{opacity:.75;transform:scale(1);}
    50%{opacity:1;transform:scale(1.08);}
  }
  @media (prefers-reduced-motion:reduce){
    .empty-icon{animation:none;}
  }
  /* Letterbox wrapper: sized in JS to the media's true pixel aspect ratio
     and centered inside #stage. Kept as a plain (non-fullscreen) element
     so its explicit size is never fought by the browser's UA fullscreen
     stylesheet, which otherwise forces #stage itself to 100%/100% and
     was the source of the fullscreen stretching. Outside fullscreen it
     simply fills #stage (which already matches the media's own ratio via
     CSS aspect-ratio), so nothing changes there. */
  .stage-inner{position:relative;width:100%;height:100%;overflow:hidden;}
  /* Zoom layer: scaled/positioned independently of the letterbox sizing
     above, so mouse-wheel zoom never disturbs the aspect-ratio math. */
  .stage-zoom{position:relative;width:100%;height:100%;transform-origin:50% 50%;}
  .eye{position:absolute;top:0;height:100%;overflow:hidden;width:50%;}
  .eye.left{left:0;border-right:1px solid rgba(255,255,255,.06);}
  .eye.right{left:50%;}
  .eye video, .eye img{position:absolute;top:0;height:100%;width:auto;max-width:none;}
  .eye-tag{
    position:absolute;top:8px;font-family:var(--mono);font-size:11px;
    padding:3px 8px;border-radius:20px;letter-spacing:.05em;z-index:5;
    background:rgba(0,0,0,.55);
  }
  .eye.left .eye-tag{left:8px;color:var(--left-eye);border:1px solid var(--left-eye);}
  .eye.right .eye-tag{right:8px;color:var(--right-eye);border:1px solid var(--right-eye);}

  canvas.anaglyph{width:100%;height:100%;display:none;object-fit:contain;}

  /* --- Fullscreen viewing-mode tool ---
     Lives inside #stage so it stays visible while #stage is fullscreen
     (elements outside the fullscreen element don't render on screen).
     Hidden entirely outside fullscreen via the :fullscreen pseudo-class. */
  .fs-mode-toggle{
    display:none;position:absolute;top:14px;right:14px;z-index:15;
    width:44px;height:44px;border-radius:50%;
    background:rgba(20,23,27,.85);border:1px solid var(--line);color:var(--text);
    font-size:19px;cursor:pointer;align-items:center;justify-content:center;
    backdrop-filter:blur(6px);
  }
  .fs-mode-toggle:hover{border-color:#3a4150;background:rgba(32,36,43,.9);}
  .stage:fullscreen .fs-mode-toggle,
  .stage:-webkit-full-screen .fs-mode-toggle{display:flex;}

  /* Fullscreen-only swap-eyes button — same floating-pill treatment as
     the viewing-mode toggle, mirrored to the top-left corner. */
  .fs-swap-toggle{
    display:none;position:absolute;top:14px;left:14px;z-index:15;
    width:44px;height:44px;border-radius:50%;
    background:rgba(20,23,27,.85);border:1px solid var(--line);color:var(--text);
    font-size:19px;cursor:pointer;align-items:center;justify-content:center;
    backdrop-filter:blur(6px);
  }
  .fs-swap-toggle:hover{border-color:#3a4150;background:rgba(32,36,43,.9);}
  .fs-swap-toggle.on{background:var(--accent);color:#141414;border-color:var(--accent);}
  .stage:fullscreen .fs-swap-toggle,
  .stage:-webkit-full-screen .fs-swap-toggle{display:flex;}

  .fs-mode-panel{
    display:none;flex-direction:column;position:absolute;top:66px;right:14px;z-index:15;
    width:min(300px, calc(100% - 28px));max-height:calc(100% - 82px);
    background:rgba(11,13,16,.95);border:1px solid var(--line);border-radius:14px;
    overflow:hidden;backdrop-filter:blur(8px);
  }
  .fs-mode-panel.open{display:flex;}
  .fs-mode-panel-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 12px 10px 14px;border-bottom:1px solid var(--line);
    font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
    letter-spacing:.08em;color:var(--muted);flex-shrink:0;
  }
  .fs-mode-panel-close{
    background:transparent;border:none;color:var(--text);font-size:13px;cursor:pointer;
    width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  }
  .fs-mode-panel-close:hover{background:#20242b;}
  .fs-mode-panel-list{overflow-y:auto;padding:8px;scrollbar-width:thin;}
  .fs-mode-item{
    width:100%;display:flex;align-items:center;gap:10px;text-align:left;
    background:var(--panel-2);color:var(--text);border:1px solid var(--line);
    border-radius:10px;padding:9px 12px;margin-bottom:6px;cursor:pointer;font-size:13px;font-weight:600;
  }
  .fs-mode-item .icon{font-size:16px;width:18px;text-align:center;flex-shrink:0;}
  .fs-mode-item .swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 1px rgba(0,0,0,.3);}
  .fs-mode-item .label{flex:1;min-width:0;}
  .fs-mode-item{transition:border-color .15s, background .15s, box-shadow .15s;}
  .fs-mode-item.active{
    border-color:var(--selected);color:var(--selected);
    background:linear-gradient(135deg, rgba(46,224,111,.16), rgba(46,224,111,.05));
    box-shadow:0 0 0 1px var(--selected) inset, 0 3px 12px rgba(46,224,111,.22);
  }
  .fs-mode-item.active .swatch{box-shadow:0 0 0 2px rgba(11,13,16,.95), 0 0 0 3.5px var(--selected);}
  .fs-mode-item:disabled{opacity:.35;cursor:not-allowed;}

  .stage.mode-anaglyph .eye{display:none;}
  .stage.mode-anaglyph canvas.anaglyph{display:block;}
  .stage.mode-sbs canvas.anaglyph{display:none;}
  .stage.mode-sbs .eye{display:block;}

  .transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
  button{
    font-family:var(--sans);font-size:14px;font-weight:600;
    background:var(--panel-2);color:var(--text);border:1px solid var(--line);
    padding:10px 16px;border-radius:7px;cursor:pointer;transition:.15s;
  }
  button:hover{border-color:#3a4150;background:#20242b;}
  button:active{transform:translateY(1px);}
  button.primary{background:var(--accent);color:#141414;border-color:var(--accent);}
  button.primary:hover{filter:brightness(1.08);}
  button.ghost{background:transparent;}
  button:disabled{opacity:.35;cursor:not-allowed;}
  .seek{flex:1;min-width:140px;accent-color:var(--accent);height:20px;}

  .panel{border-left:1px solid var(--line);background:var(--panel);padding:22px;}
  @media (max-width:900px){
    .panel{border-left:none;border-top:1px solid var(--line);}
  }
  .group{margin-bottom:24px;}
  .group h2{
    font-size:12.5px;text-transform:uppercase;letter-spacing:.09em;
    color:var(--muted);margin:0 0 12px;font-weight:700;
  }
  .field{margin-bottom:12px;}
  .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-family:var(--mono);}
  input[type=text], input[type=file]{
    width:100%;background:#0e1114;border:1px solid var(--line);color:var(--text);
    padding:10px 11px;border-radius:6px;font-size:14px;font-family:var(--mono);
  }
  input[type=text]:focus{outline:none;border-color:var(--accent);}
  .url-field{padding:16px 14px;font-size:15.5px;}
  input[type=color]{
    width:100%;height:38px;background:#0e1114;border:1px solid var(--line);
    border-radius:6px;padding:2px;cursor:pointer;
  }
  .row{display:flex;gap:8px;}
  .row > *{flex:1;}
  .seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;}
  .seg button{flex:1;border:none;border-radius:0;background:var(--panel-2);font-size:13px;padding:10px 6px;}
  .seg button.active{background:var(--accent);color:#141414;}
  .seg button + button{border-left:1px solid var(--line);}
  .note{font-size:13px;color:var(--muted);line-height:1.6;margin-top:8px;}
  .note code{background:#0e1114;padding:2px 6px;border-radius:4px;font-family:var(--mono);color:var(--accent);border:1px solid var(--line);}