/* LSF chrome only; the standard page and its transport remain shared. */
/* Taller stage for the LSF tools, without widening it: a min-height on a
   16/9 box would widen it beyond the page through the aspect ratio. */
.lsf-player .stage { container-type: inline-size; }
.lsf-player .stage-view { aspect-ratio: auto; height: max(490px, 56.25cqw); }
.lsf-overlay { position:absolute; inset:0; z-index:6; pointer-events:none; color:#fff; }
.lsf-overlay [hidden] { display:none !important; }
.lsf-rail { position:absolute; display:flex; gap:8px; pointer-events:auto; }
.lsf-rail--right { right:12px; top:50%; transform:translateY(-56%); flex-direction:column; }
.lsf-bottom-tools { position:absolute; left:14px; bottom:88px; display:flex; align-items:center; gap:28px; }
.lsf-rail--left { position:static; align-items:center; }
.lsf-medallion { cursor:grab; user-select:none; box-sizing:border-box; }
.lsf-medallion.is-dragging { cursor:grabbing; }
.lsf-icon { width:44px; height:44px; border:1px solid transparent; border-radius:50%; display:grid; place-items:center;
  background:rgba(38,38,38,.78); color:#aaa; cursor:pointer; box-shadow:0 2px 10px #0002; }
.lsf-icon::before { content:''; width:27px; height:27px; background:currentColor; mask:var(--lsf-icon) center/contain no-repeat; }
.lsf-icon:hover { background:rgba(20,20,20,.95); color:#fff; }
.lsf-icon:focus-visible { outline:2px solid #85cfff; outline-offset:3px; }
.lsf-icon[aria-pressed=true],.lsf-icon[aria-expanded=true] { color:#aadfff; border-color:#aadfff55; }
.lsf-icon:disabled { opacity:.35; cursor:default; }
.lsf-medallion { --video-size:240px; position:absolute; right:80px; top:8%; width:var(--video-size); aspect-ratio:1;
  border-radius:50%; background:#191919; border:7px solid #3c3c38; box-shadow:0 0 0 8px #ffffff04,0 10px 28px #0004;
  pointer-events:auto; overflow:hidden; touch-action:none; }
.lsf-medallion video { width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block; }
.lsf-video-name { position:absolute; bottom:12px; left:14px; right:14px; text-align:center; font-size:10px;
  text-shadow:0 1px 3px #000; opacity:0; pointer-events:none; }
.lsf-medallion:hover .lsf-video-name,.lsf-medallion:focus-visible .lsf-video-name { opacity:1; }
.lsf-subtitle { position:absolute; left:70px; right:70px; bottom:90px; text-align:center; pointer-events:none; }
.lsf-subtitle span { background:#000b; border-radius:4px; padding:5px 12px; font-size:17px; }
.lsf-popup { position:absolute; z-index:8; pointer-events:auto; background:#202225f5; border:1px solid #ffffff25;
  border-radius:12px; padding:14px; min-width:210px; color:#eee; box-shadow:0 12px 30px #0006; }
.lsf-colors { top:14px; left:14px; width:280px; max-width:calc(100% - 28px); padding:14px; max-height:calc(100% - 108px); overflow:auto;
  color-scheme:dark; scrollbar-width:thin; scrollbar-color:#667181 transparent; }
.lsf-colors::-webkit-scrollbar { width:6px; }
.lsf-colors::-webkit-scrollbar-thumb { background:#667181; border-radius:3px; }
.lsf-colors::-webkit-scrollbar-track { background:transparent; }
.lsf-popup h2 { font-size:14px; margin:0 0 12px; font-weight:600; }
.lsf-popup label { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; margin:9px 0; }
.lsf-popup input[type=color] { width:46px; height:30px; padding:2px; background:none; border:1px solid #ffffff44; cursor:pointer; }
.lsf-popup button { color:#ddd; font:inherit; background:#ffffff10; border:0; border-radius:6px; padding:6px 9px; cursor:pointer; }
.lsf-material-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.lsf-material-header img { width:24px; height:24px; object-fit:contain; }
.lsf-material-header h2 { flex:1; margin:0; font-size:15px; }
.lsf-material-header button { font-size:22px; line-height:24px; width:24px; height:24px; padding:0; background:none; }
.lsf-colors .lsf-material-zone { display:block; margin:0 0 12px; color:#c9d2dd; }
.lsf-material-zone select { display:block; width:100%; margin-top:5px; padding:7px 9px; border:1px solid #ffffff26; border-radius:6px; background:#121820; color:#edf2f7; font:inherit; cursor:pointer; }
.lsf-colors--zones { padding:12px; }
.lsf-colors--zones .lsf-material-header { margin-bottom:6px; }
.lsf-colors--zones .lsf-material-zone { margin-bottom:8px; }
.lsf-colors--zones .lsf-material-zone select { margin-top:0; padding:5px 9px; }
.lsf-colors--zones .lsf-color-plane { height:56px; }
.lsf-colors--zones .lsf-color-value { margin-bottom:8px; }
.lsf-colors--zones .lsf-material-reset { margin-top:8px; }
.lsf-field-title { font-size:12px; font-weight:500; color:#c9d2dd; margin:0 0 6px; }
.lsf-color-plane { height:88px; border-radius:8px; position:relative; cursor:crosshair; touch-action:none;
  background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,var(--picker-hue)); }
.lsf-color-plane:focus-visible { outline:2px solid #aadfff; outline-offset:3px; }
.lsf-color-cursor { position:absolute; width:12px; height:12px; border:2px solid #fff; border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:0 0 0 1px #0009; pointer-events:none; }
.lsf-colors input[type=range] { width:100%; display:block; padding:0; cursor:pointer; accent-color:#aadfff; }
.lsf-colors .lsf-hue { height:12px; margin:8px 0; appearance:none; border-radius:6px;
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); }
.lsf-hue::-webkit-slider-thumb { appearance:none; width:14px; height:14px; background:transparent; border:2px solid white; border-radius:50%; box-shadow:0 0 0 1px #0008; }
.lsf-hue::-moz-range-thumb { width:12px; height:12px; background:transparent; border:2px solid white; border-radius:50%; }
.lsf-color-value { display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.lsf-color-value input[type=color] { width:48px; height:32px; border-radius:6px; }
.lsf-color-value input[type=text] { flex:1; min-width:0; background:#121820; color:#edf2f7; border:1px solid #ffffff26;
  height:32px; border-radius:6px; padding:5px 10px; font-family:var(--font-mono); font-size:12px; }
.lsf-color-value input[aria-invalid=true] { border-color:#ef8d8d; }
.lsf-colors .lsf-smooth-title { margin:0; gap:8px; }
.lsf-smooth-title output { color:#aadfff; font-family:var(--font-mono); font-size:12px; }
.lsf-colors .lsf-smoothness { height:18px; margin:6px 0 0; }
.lsf-smooth-endpoints { display:flex; justify-content:space-between; font-size:10px; color:#939dac; }
.lsf-colors .lsf-material-reset { display:block; width:100%; margin-top:10px; font-size:12px; }
.lsf-material-section + .lsf-material-section { margin-top:14px; padding-top:14px; border-top:1px solid #ffffff20; }
.lsf-video-menu { top:12px; right:78px; max-width:min(360px,70%); max-height:75%; overflow:auto; }
.lsf-video-menu button { display:block; width:100%; text-align:left; margin:4px 0; overflow-wrap:anywhere; }
.lsf-video-menu button[aria-current=true] { color:#aadfff; background:#aadfff18; }
.lsf-video-menu input[type=number] { width:75px; background:#121417; color:#fff; border:1px solid #555; border-radius:4px; padding:5px; }
.lsf-video-menu .lsf-file { border-top:1px solid #ffffff20; padding-top:10px; margin-top:10px; }
.lsf-notice { position:absolute; left:70px; right:70px; top:12px; font-size:12px; text-align:center; pointer-events:none; }
.lsf-notice:empty { display:none; }
.lsf-rail--left .lsf-icon { box-shadow:inset 0 -3px 0 var(--clothing-color,#ffffff10); }
@media(max-width:700px) {
  .lsf-player .stage-view { height:max(420px, 56.25cqw); }
  .lsf-icon { width:36px; height:36px; } .lsf-icon::before { width:23px; height:23px; }
  .lsf-rail--right { right:8px; gap:6px; }
  .lsf-medallion { right:58px; top:16%; --video-size:160px; border-width:5px; }
  .lsf-bottom-tools { left:10px; gap:18px; }
  .lsf-rail--left { gap:5px; }
  .lsf-subtitle span { font-size:14px; }
}

.lsf-environment-tools { display:flex; align-items:center; gap:14px; pointer-events:auto; }
.lsf-environment-button::before { display:none; }
.lsf-environment-button svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.lsf-light-dial { width:64px; height:64px; border:10px solid #ffffff30; border-radius:50%; box-sizing:border-box; background:#20222570; position:relative; cursor:crosshair; touch-action:none; }
.lsf-light-dial:focus-visible { outline:2px solid #aadfff; outline-offset:4px; }
.lsf-light-dial[aria-disabled=true] { opacity:.4; cursor:default; }
.lsf-light-knob { position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px; background:#aadfff; border:2px solid white; border-radius:50%; box-shadow:0 2px 8px #0008; pointer-events:none; }