/* Wonderphase AI — Film Studio v11.1: the work area LEFT ("My shots", or a sticky picker), ONE control box RIGHT.
   Tokens only; rgba / hex literals appear only on top of footage (always-dark overlays) and in neutral shadows.
   Palette 3 "Ember and Ivory": "chosen" = ink (light) / ivory (dark). Ember (--hot) = Generate, plus the small "live"
   signals: a row that is opening / open, recording dots, progress, the Latest tag. Gold (--gold-tx) = credits.
   Confirm and delete buttons are ink outlines. */
body[data-page="film"]{--acc:var(--tx);--acc-tx:var(--tx);--acc-soft:color-mix(in srgb,var(--tx) 8%,transparent);--fs-err:var(--hot);--fs-err-tx:var(--hot-tx);--fs-err-soft:var(--hot-soft);--fs-boxw:clamp(388px,31vw,440px)}
/* the page may not form its own layer here: the phone sheets must be able to cover the sticky top bar */
body[data-page="film"] #view{z-index:auto}
.fs{max-width:1560px;margin:0 auto;padding:16px clamp(16px,2.2vw,32px) 0}
.fs h1,.fs h2,.fs h3,.fs p,.fs ol{margin:0}
.fs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fs .fs-m{display:none}
.fs-quiet{border:0;background:none;padding:3px 2px;font:inherit;font-size:12.5px;font-weight:600;color:var(--mu);cursor:pointer;border-radius:6px;white-space:nowrap}
.fs-quiet:hover{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.fs-quiet[hidden]{display:none}
/* destructive confirms: an ink outline (the ember stays for Generate) */
.fs-danger,.u-btn.fs-danger{background:transparent;border:1.5px solid var(--tx);color:var(--tx);font-weight:700}
.u-btn.fs-danger:hover{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-tx)}
@keyframes fsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fsPick{from{opacity:.55;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes fsUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fsFlash{0%,35%{background:color-mix(in srgb,var(--tx) 13%,transparent)}100%{background:transparent}}

/* ───────── layout: work area left, the control box right (sticky, scrolls on its own) ───────── */
.fs-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--fs-boxw);column-gap:clamp(20px,2.2vw,32px);align-items:start}
.fs-work{grid-column:1;grid-row:1;min-width:0;padding-bottom:64px}
/* desktop: My shots and the picker share one cell. My shots keep their height underneath (so the page never jumps or
   scrolls), and the picker is sticky to the viewport with its own scroll, like the box on the right */
@media (min-width:1024px){
  .fs-work{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
  .fs-shots,.fs-pick{grid-area:1/1;min-width:0}
  .fs-shots{transition:opacity .12s ease,visibility 0s linear 0s}
  .fs.picking .fs-shots{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility 0s linear .12s}
  .fs-pick{position:sticky;top:calc(var(--top) + 14px);z-index:3;max-height:calc(100vh - var(--top) - 28px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-radius:16px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;padding:0 8px 18px;margin:0 -8px}
}
/* the grid runs to the page bottom, so the sticky box is never pushed up under the top bar */
.fs-box{grid-column:2;grid-row:1;position:sticky;top:calc(var(--top) + 14px);max-height:calc(100vh - var(--top) - 28px);display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:var(--p1);box-shadow:var(--edge),var(--lift);overflow:hidden}

/* ───────── the control box ───────── */
.fs-bhead{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px 2px}
.fs-bhead h1{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.25}
.fs-bhead .dot{width:8px;height:8px;border-radius:50%;background:var(--tx);flex:none}
.fs-jump{display:none}
.fs-bbody{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 18px 18px;display:flex;flex-direction:column;gap:18px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.fs-bbody.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
.fs-sec{display:flex;flex-direction:column;gap:8px;min-width:0}
.fs-lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}
.fs-lbl h2{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--mu);line-height:1.2}
.fs-lbl h2 label{cursor:pointer}
.fs-opt{font-size:11.5px;color:var(--dim)}
/* actions on a label line never change its height (no layout shift when they appear) */
.fs-bhead .fs-quiet,.fs-lbl .fs-quiet,.fs-lbl .fs-enh{padding-top:0;padding-bottom:0;line-height:18px}
.fs-bhead{min-height:37px}

/* rows: recipe · the five camera choices · model & format — one look for all of them */
.fs-rows{border:1px solid var(--line);border-radius:14px;background:var(--p1);overflow:hidden}
.fs-crow{position:relative}
.fs-crow+.fs-crow{border-top:1px solid var(--line)}
.fs-rowb{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) 16px;align-items:center;gap:12px;width:100%;min-height:52px;padding:7px 12px 7px 7px;border:0;background:transparent;color:var(--tx);text-align:left;cursor:pointer;font:inherit;transition:background .15s}
.fs-rowb:hover{background:var(--p2)}
.fs-rowb:focus-visible{outline:2px solid var(--tx);outline-offset:-3px;border-radius:13px}
.fs-rowb .th{position:relative;width:62px;aspect-ratio:16/9;border-radius:8px;overflow:hidden;display:grid;place-items:center;color:var(--mu);background:var(--p2);box-shadow:inset 0 0 0 1px var(--line)}
.fs-rowb .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-rowb .th .ic{display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--tx)}
.fs-rowb .th svg{width:19px;height:19px}
.fs-rowb .th .fs-ph em{display:none}
.fs-rowb .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.fs-rowb .tx b{display:flex;align-items:center;gap:7px;min-width:0;font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-rowb .tx small{font-size:12.5px;line-height:1.3;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-crow.has .tx small{color:var(--tx);font-weight:500}
.fs-crow.has .tx{padding-right:30px}
.fs-rowb .chev{display:grid;place-items:center;color:var(--dim);transition:transform .15s,color .15s}
.fs-rowb .chev svg{width:16px;height:16px}
.fs-rowb:hover .chev{color:var(--tx);transform:translateX(2px)}
.fs-crow.on .fs-rowb{background:var(--p2);box-shadow:inset 3px 0 0 var(--tx)}
.fs-crow.on .chev{color:var(--tx)}
.fs-crow.flash .fs-rowb{animation:fsFlash 1.6s ease-out}
/* desktop: every picker opens on the LEFT, so the arrow points there */
@media (min-width:1024px){
  .fs-rowb .chev svg{transform:scaleX(-1)}
  .fs-rowb:hover .chev{transform:translateX(-3px)}
}
/* the open row: an ember edge (the one place in the box, besides Generate, that is "live") */
.fs-rowb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hot);transform:scaleY(0);transform-origin:50% 50%;pointer-events:none;transition:none}
.fs-crow.on .fs-rowb::before{transform:scaleY(1)}
.fs-crow.on .fs-rowb{box-shadow:none}
/* mouse / trackpad: the row the pointer RESTS on opens after 160 ms. The film.js timer adds .arming and the ember bar
   grows over exactly those 160 ms; any travel restarts both, leaving the row removes both (no "opening" lie) */
@media (hover:hover) and (pointer:fine) and (min-width:1024px){
  .fs-crow.arming .fs-rowb::before{transform:scaleY(1);top:8px;bottom:8px;border-radius:0 3px 3px 0;transition:transform .16s linear}
  .fs-crow.on.arming .fs-rowb::before{top:0;bottom:0;border-radius:0;transition:none}
  /* "options ←" beside the title of the row under the pointer, every time */
  .fs-rowb:hover .fs-ohint,.fs-crow.on .fs-ohint{opacity:1;transform:none}
}
.fs-rowb .tx b .nm{min-width:0;overflow:hidden;text-overflow:ellipsis}
.fs-rowb .tx b{position:relative}
.fs-ohint{display:none;position:absolute;right:0;top:0;bottom:0;align-items:center;gap:3px;padding-left:22px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--hot-tx);background:linear-gradient(to right,transparent,var(--p2) 16px);opacity:0;transform:translateX(3px);transition:opacity .15s,transform .15s;pointer-events:none}
.fs-ohint i{font-style:normal;font-size:12px}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){.fs-ohint{display:inline-flex}}
/* first visit: a full-width line that says the rows react to the pointer (gone after the first open) */
.fs-hovhint{display:flex;align-items:center;gap:7px;margin:-2px 0 1px!important;padding:7px 10px;border-radius:10px;background:var(--p2);font-size:12.5px;font-weight:500;line-height:1.35;color:var(--mu);animation:fsIn .3s ease}
.fs-hovhint svg{width:14px;height:14px;flex:none;color:var(--hot-tx)}
.fs-hovhint .s{display:none}
.fs-clr{position:absolute;right:34px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--dim);font-size:10.5px;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s}
.fs-clr:hover{background:var(--p3);color:var(--tx)}
.fs-clr:focus-visible{outline:2px solid var(--tx);outline-offset:1px}
.fs-tagpick{display:inline-flex;align-items:center;flex:none;font-style:normal;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line2);color:var(--mu);border-radius:5px;padding:1px 5px;white-space:nowrap}
.fs-pnote{font-size:12px;color:var(--mu);background:var(--p2);border-radius:9px;padding:7px 9px;line-height:1.4}
.fs-pnote b{color:var(--tx)}

/* your scene */
.fs-prompt textarea{min-height:64px;max-height:220px;font-size:14.5px;line-height:1.5;padding:10px 12px;resize:none;overflow-y:auto}
.fs-prompt.bad{border-color:var(--fs-err);box-shadow:0 0 0 3px var(--fs-err-soft)}
.fs-lact{display:inline-flex;align-items:center;gap:10px;min-width:0}
.fs-enh{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:3px 2px;font:inherit;font-size:12.5px;font-weight:600;color:var(--tx);cursor:pointer;border-radius:6px;white-space:nowrap}
.fs-enh svg{width:12px;height:12px;flex:none}
.fs-enh:hover span{text-decoration:underline;text-underline-offset:3px}
.fs-enh[disabled]{opacity:.6;cursor:wait}
.fs-undo{font-size:12.5px}
.fs-err{color:var(--fs-err-tx);font-size:13px;font-weight:600;line-height:1.4}
.fs-err[hidden]{display:none}
.fs-ideas{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.fs-ideas[hidden]{display:none}
.fs-ideas>span{font-size:12px;color:var(--dim);margin-right:2px}
.fs-ideas button{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--p1);color:var(--tx);border-radius:999px;padding:2px 9px 2px 2px;font:inherit;font-size:12px;cursor:pointer;transition:border-color .15s,background .15s}
.fs-ideas button:hover{border-color:var(--line2);background:var(--p2)}
.fs-ideas img{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none;background:var(--p3)}
.fs-addpic{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;border:0;background:none;padding:2px 0;font:inherit;font-size:13px;font-weight:600;color:var(--tx);cursor:pointer;border-radius:6px}
.fs-addpic .pm{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);font-size:12px;line-height:1;color:var(--tx);flex:none}
.fs-addpic .pm svg{width:10px;height:10px}
.fs-addpic small{font-weight:400;color:var(--dim);font-size:11.5px}
.fs-addpic:hover>span:not(.pm){text-decoration:underline;text-underline-offset:3px}
.fs-pics .slots{margin:2px 0 0}
.fs-pics .slot{min-height:78px;padding:0;background:var(--p2);cursor:default}
.fs-pics .slot label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;padding:8px;text-align:center;color:var(--tx);font-size:12.5px;font-weight:600}
.fs-pics .slot label small{font-weight:400;color:var(--dim);font-size:11px}
.fs-pics .slot label svg{width:17px;height:17px;color:var(--mu)}
.fs-pics .slot:hover{border-color:var(--tx)}
.fs-pics .slot:focus-within{outline:2px solid var(--tx);outline-offset:2px}
.fs-pics .slot.has{border-color:var(--tx);border-style:solid}
.fs-pics .slot .x{color:#fff;z-index:2;cursor:pointer}
.fs-pics .slot.nopic .x{color:var(--tx);background:var(--p3)}
.fs-pics .slot.nopic>span{color:var(--tx)}
.fs-hint{font-size:11.5px;color:var(--dim);line-height:1.45;margin-top:6px!important}
.fs-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}

/* Generate: always visible at the foot of the box */
.fs-bfoot{flex:none;display:flex;flex-direction:column;gap:7px;padding:12px 18px 13px;border-top:1px solid var(--line);background:var(--p1)}
.fs-gen{width:100%;min-height:52px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:15px}
.fs-gen .cost{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;text-transform:none;font-weight:600;background:rgba(0,0,0,.2);padding:4px 9px;border-radius:999px}
.fs-gen .cost svg{width:11px;height:11px}
.fs-gen .cost.free svg{display:none}
.fs-meta{font-size:12px;color:var(--mu);text-align:center;line-height:1.4}
.fs-meta2{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--dim)}
.fs-meta2 b{color:var(--gold-tx);font-weight:700;font-family:var(--mono);font-size:11.5px}
.fs-meta2 a{color:var(--tx);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.fs-meta2 .fs-quiet{font-size:12px}
.fs-exact[hidden]{display:none}
.fs-exact p{font-family:var(--mono);font-size:11px;line-height:1.55;color:var(--mu);background:var(--p2);border:1px solid var(--line);border-radius:10px;padding:9px 10px;overflow-wrap:anywhere;max-height:150px;overflow-y:auto}

/* ───────── LEFT: My shots ───────── */
.fs-shead{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;margin:3px 0 12px}
.fs-shead h2{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.fs-count{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:0;color:var(--tx);background:var(--p2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;line-height:1.5}
.fs-count[hidden]{display:none}
.fs-lib{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap;padding:6px 2px;border-radius:6px}
.fs-lib:hover{text-decoration:underline;text-underline-offset:3px}
/* the left column sizes its own layout (container queries), so the same markup works beside the box and on a phone */
.fs-shots{container:shots/inline-size}
.fs-demoline{font-size:12.5px;line-height:1.45;color:var(--tx);background:var(--p2);border:1px solid var(--line2);border-radius:9px;padding:7px 10px}
.fs-demoline b{font-weight:700}
@keyframes fsPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fsProg{from{width:0}to{width:100%}}
@keyframes fsScan{from{background-position:130% 0}to{background-position:-130% 0}}

/* ── empty: the showreel. A letterboxed 16:9 frame (black bars top and bottom), our own clips cross-fading underneath.
      Text over footage sits on a dark scrim with always-light literals; on a narrow column the copy drops below on tokens. */
.fs-welcome{display:flex;flex-direction:column;gap:22px}
.fs-welcome[hidden]{display:none}
.fs-reel{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--p1);box-shadow:var(--edge),var(--lift)}
.fs-rframe{position:relative;aspect-ratio:16/9;background:#0b0b0b;overflow:hidden}
.fs-rframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease;background:#0b0b0b}
.fs-rframe video.on{opacity:1}
.fs-reel.noclip .fs-rframe{background:radial-gradient(90% 80% at 30% 20%,#2a2724,#0b0b0b)}
.fs-rbar{position:absolute;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;height:9%;min-height:26px;padding:0 16px;background:#050505;color:rgba(250,247,242,.74);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.fs-rbar.rt{top:0}.fs-rbar.rb{bottom:0}
.fs-rslate{display:inline-flex;align-items:center;gap:8px}
.fs-rslate i{width:7px;height:7px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 10px rgba(255,90,60,.8);animation:fsPulse 1.2s ease-in-out infinite}
.fs-rright{display:inline-flex;align-items:center;gap:12px}
.fs-rpause{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border:1px solid rgba(255,244,235,.3);border-radius:999px;background:rgba(255,244,235,.06);color:#faf7f2;font:inherit;font-size:9px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .15s,border-color .15s}
.fs-rpause:hover{background:rgba(255,244,235,.14);border-color:rgba(255,244,235,.6)}
.fs-rpause:focus-visible{outline:2px solid #faf7f2;outline-offset:2px}
.fs-rpause svg{width:11px;height:11px}
.fs-rpause .pl,.fs-rpause.held .ps{display:none}
.fs-rpause.held .pl{display:inline}
.fs-rnow{display:flex;align-items:baseline;gap:10px;min-width:0;overflow:hidden}
.fs-rnow b{color:#faf7f2;font-weight:700;overflow:hidden;text-overflow:ellipsis}
.fs-rnow small{font-size:inherit;color:rgba(250,247,242,.55);overflow:hidden;text-overflow:ellipsis}
.fs-rprog{flex:none;width:56px;height:2px;border-radius:2px;background:rgba(250,247,242,.18);overflow:hidden}
.fs-rprog i{display:block;height:100%;width:0;background:#faf7f2}
.fs-rprog i.run{animation:fsProg 6.5s linear forwards}
@container shots (max-width:480px){.fs-rnow small{display:none}.fs-rbar{padding:0 12px}}
.fs-rcopy{display:flex;flex-direction:column;gap:12px;padding:18px 18px 20px}
.fs-wh{font-family:var(--disp);font-weight:800;font-size:clamp(24px,7cqi,34px);line-height:1.04;letter-spacing:-.025em;text-transform:uppercase}
.fs-wh em{display:block;font-style:normal;color:var(--dim)}
.fs-wl{font-size:14.5px;line-height:1.5;color:var(--mu);max-width:48ch}
.fs-wacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.fs-wacts .u-btn svg{width:17px;height:17px}
.fs-wacts .u-btn:not(.inv){background:var(--p1)}
@container shots (min-width:600px){
  .fs-reel{background:#0b0b0b}
  .fs-rcopy{position:absolute;left:0;right:0;top:9%;bottom:9%;z-index:2;justify-content:flex-end;gap:14px;padding:24px clamp(22px,4.5cqi,44px) clamp(20px,3.6cqi,34px);
    background:linear-gradient(to top,rgba(6,5,4,.88),rgba(6,5,4,.52) 42%,rgba(6,5,4,0) 76%),linear-gradient(to right,rgba(6,5,4,.5),rgba(6,5,4,0) 62%)}
  .fs-rcopy .fs-wh{font-size:clamp(26px,5.2cqi,46px);color:#faf7f2;text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .fs-rcopy .fs-wh em{color:rgba(250,247,242,.6)}
  .fs-rcopy .fs-wl{color:rgba(250,247,242,.86);font-size:15px}
  .fs-rcopy .u-btn.fs-w1{background:#faf7f2;color:#0b0b0b;border-color:transparent}
  .fs-rcopy .u-btn.fs-w1:hover{background:#fff;border-color:transparent}
  .fs-rcopy .u-btn.fs-w2{background:rgba(12,10,9,.42);color:#faf7f2;border-color:rgba(255,244,235,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .fs-rcopy .u-btn.fs-w2:hover{background:rgba(12,10,9,.66);border-color:#faf7f2}
  .fs-rcopy .u-btn:focus-visible{outline-color:#faf7f2}
}
/* three example recipes under the reel */
.fs-ex{display:flex;flex-direction:column;gap:12px}
.fs-exh{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap}
.fs-exh h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--mu)}
.fs-exh p{font-size:12.5px;color:var(--dim)}
.fs-exg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fs-excard{display:flex;flex-direction:column;min-width:0;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--p1);color:var(--tx);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.fs-excard:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--lift)}
.fs-excard:focus-visible{outline:2px solid var(--tx);outline-offset:3px}
.fs-excard .m{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#111}
.fs-excard .m img,.fs-excard .m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-excard .m video{opacity:0;transition:opacity .25s}.fs-excard .m.playing video{opacity:1}
.fs-excard .lab{position:absolute;left:7px;top:7px;z-index:2;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;background:rgba(12,10,9,.66);border:1px solid rgba(255,244,235,.26);border-radius:999px;padding:3px 8px;color:#faf7f2}
.fs-excard .pl{position:absolute;right:8px;bottom:8px;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(12,10,9,.62);border:1px solid rgba(255,244,235,.32);color:#faf7f2;transition:opacity .2s}
.fs-excard .pl svg{width:13px;height:13px}
.fs-excard .m.playing .pl{opacity:0}
.fs-excard .b{display:flex;flex-direction:column;gap:2px;padding:9px 12px 11px;min-width:0}
.fs-excard .b b{font-size:14px;font-weight:600;line-height:1.25}
.fs-excard .b small{font-size:12px;color:var(--mu);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container shots (max-width:540px){
  .fs-exg{grid-template-columns:1fr;gap:8px}
  .fs-excard{flex-direction:row;align-items:center}
  .fs-excard .m{width:128px;flex:none}
  .fs-excard .lab{display:none}
}

/* ── the Dailies: running cards, the big screen, the contact sheet ── */
.fs-dailies{display:flex;flex-direction:column;gap:26px}
.fs-dailies[hidden],.fs-dgrp[hidden],.fs-dall[hidden]{display:none}
.fs-dh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--mu);margin-bottom:10px!important}
.fs-dh small{text-transform:none;letter-spacing:0;font-weight:400;color:var(--dim);font-size:12px}
.fs-dh .fs-recdot{background:var(--hot);box-shadow:0 0 0 3px var(--hot-soft);animation-duration:1.2s}
.fs-dh .fs-recdot.off{display:none}
.fs-dgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@container shots (min-width:560px){.fs-dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container shots (min-width:840px){#fs-dmore-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fs-dgrid.solo>*,.fs-dgrid>.fs-dcard.bad{grid-column:1/-1}
.fs-dgrid.solo .fs-pend b{font-size:17px}
/* a lone running shot: the full row, in a wide (2.39 : 1) cinematic frame, with its scene and chips beside the "you can leave" note */
@container shots (min-width:560px){
  .fs-dgrid.solo .fs-dcard.run .fs-film{aspect-ratio:2.39/1}
  .fs-dgrid.solo .fs-dcard.run .fs-pend .bar{width:min(360px,56%)}
  .fs-dgrid.solo .fs-dcard.run .fs-dinfo{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,32%);gap:8px 28px;align-items:start;padding:14px 16px 15px}
  .fs-dgrid.solo .fs-dcard.run .fs-dinfo .fs-chips{grid-column:1}
  .fs-dgrid.solo .fs-dcard.run .fs-leave{grid-column:2;grid-row:1/span 2;align-self:center;padding-left:18px;border-left:1px solid var(--line)}
  .fs-dgrid.solo .fs-dcard.run .fs-dscene{font-size:15px;font-weight:500;-webkit-line-clamp:2}
}
.fs-dall{display:inline-flex;margin-top:14px;font-size:13px;font-weight:600;color:var(--tx);text-decoration:underline;text-underline-offset:3px;border-radius:6px}
.fs-dcard{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--p1);box-shadow:var(--edge);transition:border-color .18s,box-shadow .18s,transform .18s;container:dcard/inline-size}
.fs-dcard:hover{border-color:var(--line2);box-shadow:var(--edge),var(--lift)}
.fs-dmw{position:relative}
/* the picture of a card is always a dark screen (letterboxed), in both themes */
.fs-dm{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:#0b0b0b;overflow:hidden;cursor:pointer;color:#faf7f2;font:inherit;text-align:left}
.fs-dm img,.fs-dm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-dm.tall img,.fs-dm.tall video{object-fit:contain}
.fs-dm video{opacity:0;transition:opacity .25s;background:transparent}
.fs-dm.playing video,.fs-dm video.pv{opacity:1}
.fs-dm:focus-visible{outline:2px solid #faf7f2;outline-offset:-5px;border-radius:12px}
.fs-dtop{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;justify-content:space-between;gap:8px;padding:8px 11px 16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,242,.82);background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,0));pointer-events:none;white-space:nowrap}
.fs-dtop b{font-weight:700;color:#faf7f2}
.fs-dtop>span{overflow:hidden;text-overflow:ellipsis}
.fs-dsam{position:absolute;left:10px;bottom:9px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#faf7f2;background:rgba(12,10,9,.68);border:1px solid rgba(255,244,235,.26);border-radius:999px;padding:3px 8px;pointer-events:none;transition:opacity .15s}
/* "Watch large": a round play mark in the middle of the picture on hover / focus */
.fs-dplay{position:absolute;left:50%;top:50%;z-index:2;display:inline-flex;align-items:center;gap:6px;transform:translate(-50%,-50%) scale(.94);opacity:0;font-size:12px;font-weight:600;color:#faf7f2;background:rgba(12,10,9,.62);border:1px solid rgba(255,244,235,.4);border-radius:999px;padding:6px 13px 6px 9px;transition:opacity .18s,transform .18s;pointer-events:none;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fs-dplay svg{width:13px;height:13px}
.fs-dm:hover .fs-dplay,.fs-dm:focus-visible .fs-dplay{opacity:1;transform:translate(-50%,-50%)}
.fs-dm.playing:hover .fs-dplay{opacity:0}
.fs-dinfo{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;padding:12px}
.fs-dscene{font-size:14px;line-height:1.42;color:var(--tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.84em}
.fs-dscene.one{-webkit-line-clamp:1;min-height:0;font-size:13.5px;font-weight:500}
.fs-dscene.big{font-size:16px;line-height:1.45;min-height:0;font-weight:500}
.fs-chips{display:flex;flex-wrap:wrap;gap:5px}
.fs-dinfo .fs-chips{flex-wrap:nowrap;overflow:hidden}
.fs-chip{font-size:11.5px;font-weight:500;color:var(--mu);background:var(--p2);border:1px solid var(--line);border-radius:999px;padding:1px 9px;line-height:1.55;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fs-chip.auto{color:var(--dim);background:transparent;border-style:dashed}
.fs-chip.more{color:var(--dim);background:transparent;flex:none}
/* card actions: touch screens show them as a row under the picture; a mouse sees them over the picture on hover/focus */
.fs-dacts{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.fs-dacts.show{justify-content:flex-start}
.fs-dmw .fs-dacts{padding:10px 12px 0}
.fs-reuse{font-weight:600}
.fs-ibtns{display:flex;gap:4px}
.fs-ib{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--p1);color:var(--mu);cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.fs-ib svg{width:16px;height:16px}
.fs-ib:hover{color:var(--tx);border-color:var(--line2);background:var(--p2)}
@container dcard (max-width:300px){.fs-dacts .x{display:none}}
@media (hover:hover) and (pointer:fine){
  .fs-dmw .fs-dacts{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:34px 10px 10px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.45) 55%,rgba(0,0,0,0));opacity:0;transform:translateY(4px);transition:opacity .16s,transform .16s;pointer-events:none;flex-wrap:nowrap}
  .fs-dcard:hover .fs-dmw .fs-dacts,.fs-dcard:focus-within .fs-dmw .fs-dacts{opacity:1;transform:none}
  .fs-dcard:hover .fs-dmw .fs-dacts>*,.fs-dcard:focus-within .fs-dmw .fs-dacts>*{pointer-events:auto}
  .fs-dcard:hover .fs-dsam,.fs-dcard:focus-within .fs-dsam{opacity:0}
  .fs-dcard:hover .fs-dm .fs-dplay{top:42%}
  .fs-dmw .fs-dacts .u-btn{background:#faf7f2;color:#0b0b0b;border-color:transparent;white-space:nowrap}
  .fs-dmw .fs-dacts .u-btn:hover{background:#fff}
  .fs-dmw .fs-ib{background:rgba(12,10,9,.55);border-color:rgba(255,244,235,.32);color:#faf7f2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .fs-dmw .fs-ib:hover{background:rgba(12,10,9,.8);border-color:#faf7f2;color:#fff}
  .fs-dmw .fs-dacts .u-btn:focus-visible,.fs-dmw .fs-ib:focus-visible{outline:2px solid #faf7f2;outline-offset:2px}
}
/* touch: the action row sits under the card text */
@media not all and (hover:hover) and (pointer:fine){
  .fs-dmw{display:contents}
  .fs-dmw .fs-dacts{order:3;padding:0 12px 12px}
  .fs-dinfo{order:2}
}
/* a running shot: its recipe / look poster, blurred and dark, behind a scanning shimmer; the job manager paints .bar i and .pending span */
.fs-recdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#faf7f2;box-shadow:0 0 0 3px rgba(250,247,242,.16);animation:fsPulse 1.4s ease-in-out infinite;flex:none}
.fs-film{cursor:default;background:radial-gradient(120% 90% at 50% 115%,rgba(255,120,80,.16),rgba(255,120,80,0) 62%),#0d0c0b}
.fs-pbg{position:absolute;inset:-24px;width:calc(100% + 48px)!important;height:calc(100% + 48px)!important;object-fit:cover;filter:blur(18px) brightness(.45) saturate(1.1);transform:scale(1.04)}
.fs-film::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(255,244,235,0) 32%,rgba(255,244,235,.08) 50%,rgba(255,244,235,0) 68%);background-size:240% 100%;animation:fsScan 2.6s linear infinite;pointer-events:none}
.fs-dm .pending.fs-pend{z-index:2;background:none;gap:11px;padding:30px 18px 38px}
.fs-pend>b{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;letter-spacing:.04em;color:#faf7f2;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.fs-pend>b::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 3px rgba(255,90,60,.28),0 0 14px rgba(255,90,60,.7);animation:fsPulse 1.2s ease-in-out infinite;flex:none}
.fs-pend .bar{width:min(280px,72%);height:4px;background:rgba(255,255,255,.16)}
.fs-pend .bar i{position:relative;overflow:hidden;background:var(--hot)}
.fs-pend .bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));background-size:200% 100%;animation:fsScan 1.4s linear infinite}
.fs-pend span{color:#e6dfd7;letter-spacing:.14em}
.fs-dcard[data-st="queued"] .fs-pend span,.fs-dcard[data-st="uploading"] .fs-pend span{display:none}
.fs-ptime{position:absolute;left:0;right:0;bottom:11px;z-index:2;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,247,242,.72)}
.fs-ptime time{color:#faf7f2;font-weight:600}
.fs-leave{font-size:12.5px;color:var(--mu);line-height:1.45}
.fs-dcard.run .fs-dscene{min-height:0}
.fs-dcard.run{border-color:var(--line2)}
/* a shot that did not make it: a compact band, not a big screen */
.fs-fband{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;min-height:96px;max-height:180px;padding:16px 18px;background:repeating-linear-gradient(115deg,#12100e 0 14px,#171411 14px 28px);color:#faf7f2;overflow:hidden}
.fs-fbtxt{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 280px}
.fs-fbh{display:flex;align-items:baseline;gap:12px}
.fs-fbh b{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.fs-fbh span{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,247,242,.6)}
.fs-fwhy{font-size:13px;line-height:1.45;color:#e6dfd7}
.fs-fband .fs-dscene.one{color:rgba(250,247,242,.7);font-size:12.5px;font-weight:400}
.fs-fband .fs-dacts{flex:none;gap:8px}
.fs-fband .u-btn{border-color:rgba(255,244,235,.4);color:#faf7f2;background:transparent}
.fs-fband .u-btn:hover{border-color:#faf7f2;background:rgba(255,255,255,.08)}
.fs-fband .u-btn.inv{background:#faf7f2;color:#0b0b0b;border-color:#faf7f2}
.fs-fband .u-btn.inv:hover{background:#fff}
.fs-fband .u-btn:focus-visible{outline:2px solid #faf7f2;outline-offset:2px}
/* the big screen: a film frame with a slim header (perforations, SHOT 03 · 2 h ago · model · length) */
.fs-feat{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--p1);box-shadow:var(--edge),var(--lift);animation:fsIn .25s ease}
.fs-feat[hidden]{display:none}
.fs-fframe{background:#0b0b0b;color:#faf7f2}
.fs-fhead{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,247,242,.68)}
.fs-fhead::before{content:"";position:absolute;left:14px;right:14px;top:5px;height:4px;background:repeating-linear-gradient(90deg,rgba(250,247,242,.2) 0 9px,rgba(250,247,242,0) 9px 20px)}
.fs-fh{display:flex;align-items:baseline;gap:12px;min-width:0;white-space:nowrap;overflow:hidden}
.fs-fh b{color:#faf7f2;font-weight:700;flex:none}
.fs-fh span{overflow:hidden;text-overflow:ellipsis}
.fs-ftag{flex:none;border:1px solid rgba(255,244,235,.34);border-radius:999px;padding:2px 9px;font-size:9px;color:#faf7f2}
/* "Latest" on the always-dark frame: ember text, ember-tinted pill (dark-world values, since the frame is dark in both themes) */
.fs-ftag.latest{color:#ff9a7e;border-color:rgba(255,90,60,.55);background:rgba(255,90,60,.16);font-weight:700}
.fs-fscreen{position:relative;aspect-ratio:16/9;background:#000}
.fs-fscreen video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.fs-fscreen video:focus-visible{outline:2px solid #faf7f2;outline-offset:-4px}
.fs-fscreen .fs-dsam{top:12px;bottom:auto;left:12px}
.fs-finfo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 24px;align-items:start;padding:16px 18px 18px}
.fs-ftext{display:flex;flex-direction:column;gap:10px;min-width:0}
.fs-facts{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-width:230px}
.fs-frow2{display:flex;gap:6px;flex-wrap:wrap}
.fs-frow2 .u-btn{flex:1 1 auto;color:var(--mu)}
.fs-frow2 .u-btn:hover{color:var(--tx);border-color:var(--line2)}
.fs-frow3{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fs-frow3 .fs-fcost{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.fs-frow3 .fs-fcost b{color:var(--gold-tx);font-weight:700;font-size:12px}
.fs-frow3 .fs-fcost .free{color:var(--mint-tx);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:10px}
@container shots (max-width:640px){.fs-finfo{grid-template-columns:minmax(0,1fr)}.fs-facts{min-width:0}}
.fs-dcard .u-btn:focus-visible,.fs-feat .u-btn:focus-visible,.fs-ib:focus-visible,.fs-dall:focus-visible{outline:2px solid var(--tx);outline-offset:2px}

/* ───────── LEFT: a picker (replaces My shots while open) ───────── */
/* the picker fades in from half-visible and slides 8 px, while My shots fade out under it: no blank flash */
.fs-pick{min-width:0;animation:fsPick .14s ease-out}
.fs-pick[hidden]{display:none}
.fs-ptop{position:sticky;top:0;z-index:4;background:var(--bg);margin:0 -8px;padding:3px 8px 12px}
.fs-ptop::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(var(--bg),transparent);pointer-events:none}
.fs-phead{display:flex;align-items:center;gap:14px;min-height:42px}
.fs-back{display:inline-flex;align-items:center;gap:7px;flex:none;border:1px solid var(--line2);background:var(--p1);color:var(--tx);border-radius:999px;padding:7px 14px 7px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.fs-back:hover{background:var(--p2);border-color:var(--tx)}
.fs-pt{flex:1;min-width:0}
.fs-ptitle{font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.2;outline:0}
.fs-psub{font-size:13px;color:var(--mu);line-height:1.35;margin-top:1px!important}
.fs-done{flex:none}
/* sub-tabs: each one shows its current value */
.fs-tabs{display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding:1px}
.fs-tabs::-webkit-scrollbar{display:none}
.fs-tabs button{display:flex;align-items:center;gap:9px;flex:0 0 auto;min-width:0;text-align:left;border:1px solid var(--line);background:var(--p1);color:var(--tx);border-radius:12px;padding:6px 15px 6px 7px;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.fs-tabs button:hover{border-color:var(--line2);background:var(--p2)}
.fs-tabs .i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--p3);font-size:11px;font-weight:700;color:var(--mu);flex:none}
.fs-tabs .t{display:block;min-width:0}
.fs-tabs b{display:block;font-size:13px;font-weight:600;white-space:nowrap;line-height:1.25}
.fs-tabs small{display:block;font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch;line-height:1.25}
.fs-tabs .on,.fs-tabs .on:hover{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-tx)}
.fs-tabs .on .i{background:var(--inv-tx);color:var(--inv-bg)}
.fs-tabs .on small{color:var(--inv-tx);opacity:.72}
/* the compact viewfinder: where "seeing what it means" happens */
.fs-vf{display:grid;grid-template-columns:minmax(0,min(44%,320px)) minmax(0,1fr);margin-top:12px;border:1px solid var(--line);border-radius:14px;background:var(--p1);overflow:hidden;box-shadow:var(--edge)}
.fs-screen{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--p3)}
.fs-screen img,.fs-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-screen video{opacity:0;transition:opacity .25s;background:transparent}
.fs-screen.playing video{opacity:1}
.fs-screen .fs-cn{position:absolute;z-index:2;width:13px;height:13px;border:2px solid rgba(255,244,235,.6);pointer-events:none;filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}
.fs-screen .tl{left:8px;top:8px;border-right:0;border-bottom:0}
.fs-screen .tr{right:8px;top:8px;border-left:0;border-bottom:0}
.fs-screen .bl{left:8px;bottom:8px;border-right:0;border-top:0}
.fs-screen .br{right:8px;bottom:8px;border-left:0;border-top:0}
.fs-vph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;padding:14px;color:var(--tx);background:var(--p2)}
.fs-vph[hidden]{display:none}
.fs-vph .g{position:absolute;inset:0;background:linear-gradient(var(--line) 1px,transparent 1px) 0 33.33%/100% 33.33%,linear-gradient(90deg,var(--line) 1px,transparent 1px) 33.33% 0/33.33% 100%;pointer-events:none}
.fs-vph b{position:relative;font-size:16px;font-weight:600}
.fs-vph small{position:relative;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.fs-screen .fs-vph~.fs-cn{border-color:var(--line2);filter:none}
.fs-cap{padding:12px 18px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.fs-cap .t{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fs-cap .t b{font-size:clamp(16px,1.35vw,19px);font-weight:700;line-height:1.2}
.fs-cap .what{font-size:14px;color:var(--tx);line-height:1.4}
.fs-cap .when{font-size:12.5px;color:var(--mu);line-height:1.4}
.fs-tagc{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--tx);color:var(--bg);border-radius:6px;padding:3px 7px;white-space:nowrap}
.fs-tagp{display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--p3);color:var(--mu);border-radius:6px;padding:3px 7px;white-space:nowrap}
.fs-pbody{min-width:0;padding-top:4px}
/* tiles: picture, then the term in bold and a short plain gloss */
.fs-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.fs-tile{position:relative;display:flex;flex-direction:column;width:100%;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--p1);color:var(--tx);text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.fs-tile:hover{border-color:var(--line2);transform:translateY(-2px)}
.fs-tile[hidden]{display:none}
.fs-tile .m{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--p3)}
.fs-tile .m img,.fs-tile .m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-tile .m video,.fs-rcard .m video,.fs-mcard .pv video{opacity:0;transition:opacity .25s;background:transparent}
.fs-tile .m.playing video,.fs-rcard .m.playing video,.fs-mcard .pv.playing video{opacity:1}
.fs-tile .tx{display:block;padding:8px 10px 9px;min-width:0}
.fs-tile .tx b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.fs-tile .tx small{display:block;font-size:12px;color:var(--mu);line-height:1.3;margin-top:2px}
.fs-tile.on{border-color:var(--tx);box-shadow:0 0 0 1px var(--tx),0 0 0 5px var(--acc-soft)}
.fs-tile.on .tx{background:var(--acc-soft)}
.fs-tile:focus-visible{outline:2px dashed var(--tx);outline-offset:4px}
.fs-tile .ck{position:absolute;top:7px;right:7px;z-index:2;width:24px;height:24px;border-radius:50%;background:var(--tx);color:var(--bg);border:2px solid var(--bg);display:none;place-items:center;font-size:12px;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.fs-tile.on .ck{display:grid}
/* motion glyph: drawn over the picture, so always-dark glass */
.fs-tile .gl{position:absolute;left:7px;top:7px;z-index:2;width:40px;height:40px;border-radius:10px;background:rgba(12,10,9,.72);border:1px solid rgba(255,244,235,.32);display:grid;place-items:center;color:#faf7f2;transition:opacity .2s}
.fs-tile .gl svg{width:27px;height:27px}
.fs-tile .m.playing .gl{opacity:.35}
.fs-tile .bd{position:absolute;left:7px;top:7px;z-index:2;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#faf7f2;background:rgba(12,10,9,.72);border:1px solid rgba(255,244,235,.3);border-radius:8px;padding:4px 8px}
.fs-auto{border-style:dashed;border-color:var(--line2)}
.fs-auto .m{display:grid;place-items:center;background:var(--p2)}
.fs-auto .m>svg{width:32px;height:32px;color:var(--tx);opacity:.8}
.fs-auto.on{border-style:solid}
.fs-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--mu);background:var(--p3)}
.fs-ph i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2)}
.fs-ph i svg{width:11px;height:11px;opacity:.85}
.fs-ph em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
/* camera moves (v11.2): every move on show, grouped by kind. The sticky header carries a search and one jump chip per kind;
   the chip of the group in view is lit (ink, like a chosen sub-tab) and follows the scroll */
.fs-msearch{flex:0 1 270px;min-width:180px}
.fs-msearch input{padding:8px 0;font-size:13.5px}
/* desktop: every chip is always visible (they wrap if the column is narrow); phones swipe one row */
.fs-kinds{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;min-width:0}
.fs-kinds button{flex:none;border:1px solid var(--line);background:var(--p1);color:var(--mu);border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s,opacity .15s}
.fs-kinds button:hover{border-color:var(--line2);color:var(--tx)}
.fs-kinds button.on{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-tx);font-weight:600}
.fs-kinds button.nil{opacity:.4}
.fs-mall{display:flex;flex-direction:column;gap:24px}
.fs-mg[hidden]{display:none}
.fs-mgh{display:flex;align-items:baseline;gap:4px 10px;flex-wrap:wrap;margin:0 0 10px -10px!important;padding:5px 10px;border-radius:9px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--tx);line-height:1.3}
.fs-mgh small{text-transform:none;letter-spacing:0;font-weight:400;font-size:12.5px;color:var(--dim)}
.fs-mgh.hit{animation:fsFlash 1.3s ease-out}
.fs-search{position:relative;display:flex;align-items:center;gap:9px;background:var(--p2);border:1px solid var(--line);border-radius:12px;padding:0 6px 0 12px;max-width:440px;transition:border-color .15s,box-shadow .15s}
.fs-search:focus-within{border-color:var(--tx);box-shadow:0 0 0 3px var(--acc-soft)}
.fs-search>svg{width:16px;height:16px;color:var(--dim);flex:none}
.fs-search input{flex:1;min-width:0;background:none;border:0;outline:0;padding:10px 0;font-size:14px;color:var(--tx)}
.fs-search input:focus,.fs-search input:focus-visible{outline:0;box-shadow:none}
.fs-qx{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:8px;border:0;background:var(--p3);color:var(--mu);font-size:11px;cursor:pointer}
.fs-qx:hover{color:var(--tx);background:var(--p4)}
.fs-qx[hidden]{display:none}
.fs-xhint{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;font-size:13.5px;color:var(--tx);background:var(--acc-soft);border:1px solid var(--line2);border-radius:12px;padding:9px 12px;margin:-2px 0 12px}
.fs-xhint[hidden]{display:none}
.fs-xhint .u-link{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.fs-none{margin-top:4px;border:1px dashed var(--line2);border-radius:14px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--mu);font-size:14px}
.fs-none[hidden]{display:none}

/* recipes */
.fs-confirm{position:absolute;left:8px;right:8px;top:calc(100% - 6px);z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;border:1px solid var(--line2);background:var(--p2);border-radius:12px;padding:10px 12px;font-size:13.5px;font-weight:500;color:var(--tx);box-shadow:var(--edge),var(--pop-shadow);animation:fsIn .16s ease}
.fs-confirm[hidden]{display:none}
.fs-recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}
.fs-rcard{position:relative;display:flex;flex-direction:column;text-align:left;padding:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--p1);color:var(--tx);cursor:pointer;font:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.fs-rcard:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--lift)}
.fs-rcard.on{border-color:var(--tx);box-shadow:0 0 0 1px var(--tx)}
.fs-rcard:focus-visible{outline:2px solid var(--tx);outline-offset:3px}
.fs-rcard .m{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--p3)}
.fs-rcard .m img,.fs-rcard .m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-rcard .lab{position:absolute;left:8px;bottom:8px;z-index:2;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;background:rgba(12,10,9,.66);border:1px solid rgba(255,244,235,.26);border-radius:999px;padding:3px 8px;color:#faf7f2}
.fs-rcard .cur{position:absolute;left:8px;top:8px;z-index:2;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;background:#faf7f2;color:#0b0b0b;border-radius:999px;padding:3px 8px}
.fs-rcard .b{display:flex;flex-direction:column;gap:4px;padding:11px 13px 13px}
.fs-rcard .b>b{font-size:15px;font-weight:700;line-height:1.25}
.fs-rcard .d{font-size:13px;color:var(--tx);line-height:1.4}
.fs-rcard .w{font-size:12px;color:var(--mu);line-height:1.45;margin-top:2px}
.fs-rcard .w em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-right:3px}

/* model & format */
.fs-plede{font-size:13.5px;color:var(--mu);line-height:1.5;margin-bottom:12px!important;max-width:80ch}
.fs-plede b{color:var(--tx)}
.fs-mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:10px 8px;padding:9px 8px 0 0}
.fs-mcard{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;min-height:64px;text-align:left;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:14px;background:var(--p1);color:var(--tx);cursor:pointer;font:inherit;transition:border-color .15s,background .15s}
.fs-mcard:hover{border-color:var(--line2);background:var(--p2)}
.fs-mcard.on{border-color:var(--tx);box-shadow:inset 0 0 0 1px var(--tx)}
.fs-mcard:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.fs-mcard .pv{position:relative;width:76px;aspect-ratio:16/10;border-radius:9px;overflow:hidden;display:grid;place-items:center;background:var(--p3);font-family:var(--mono);font-size:12px;color:var(--tx)}
.fs-mcard .pv img,.fs-mcard .pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fs-mcard .b{display:flex;flex-direction:column;gap:3px;min-width:0}
.fs-mcard .nm{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px}
.fs-mcard .nm b{font-size:14.5px;font-weight:600;line-height:1.25}
.fs-mcard .d{font-size:12.5px;color:var(--mu);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fs-mcard .pv .pk{position:absolute;left:4px;bottom:4px;z-index:2;font-family:var(--mono);font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#faf7f2;background:rgba(12,10,9,.72);border:1px solid rgba(255,244,235,.3);border-radius:4px;padding:1px 4px;line-height:1.4}
.fs-mcard .pr{text-align:right;white-space:nowrap}
.fs-mcard .pr b{display:block;font-family:var(--disp);font-size:16px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--gold-tx)}
.fs-mcard .pr small{font-size:10.5px;color:var(--dim)}
.fs-mcard .ck{position:absolute;top:-7px;right:-7px;width:21px;height:21px;border-radius:50%;background:var(--tx);color:var(--bg);border:2px solid var(--bg);display:none;place-items:center;font-size:11px;font-weight:800}
.fs-mcard.on .ck{display:grid}
.fs-more{display:inline-flex;margin-top:10px;border:0;background:none;padding:4px 0;font:inherit;font-size:13px;font-weight:600;color:var(--tx);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:6px}
.fs-fmt{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.fs-h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--mu);margin-bottom:12px!important}
.fs-h3 small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--dim);font-size:12px;margin-left:6px}
.fs-frows{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px 12px;align-items:center}
.fs-frow{display:contents}
.fs-frow .k{font-size:13px;color:var(--mu);font-weight:500}
.fs-frow .u-opts{gap:6px}
.fs-frow .u-opt{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:58px;padding:7px 12px;font-size:13px;line-height:1.2;color:var(--tx);background:var(--p1)}
.fs-frow .u-opt:hover{border-color:var(--line2);background:var(--p2)}
.fs-frow .u-opt.on{background:var(--acc-soft)}
.fs-frow .u-opt>span{display:inline-flex;align-items:center;white-space:nowrap}
.fs-frow .u-opt small{font-size:10.5px;color:var(--dim);margin-top:1px}
.fs-frow .u-opt.on small{color:var(--mu)}
.fs-pfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}
.fs-fcost{font-size:13px;color:var(--mu);line-height:1.45;max-width:62ch}

/* confirmation sheets (Start over · Reset all) */
.fs-rlede{color:var(--mu);font-size:14px;line-height:1.5;max-width:60ch;margin:0}
.fs-rfoot{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:16px}

/* focus rings for everything this page draws */
.fs-quiet:focus-visible,.fs-enh:focus-visible,.fs-back:focus-visible,.fs-tabs button:focus-visible,.fs-kinds button:focus-visible,.fs-ideas button:focus-visible,.fs-addpic:focus-visible,.fs-lib:focus-visible,.fs-more:focus-visible,.fs-qx:focus-visible,.fs .enh:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.fs-ptitle:focus,.fs-ptitle:focus-visible{outline:0}

/* ───────── laptop heights: the box fits without scrolling inside it ───────── */
@media (min-width:1024px) and (max-height:940px){
  .fs{padding-top:12px}
  .fs-box{top:calc(var(--top) + 8px);max-height:calc(100vh - var(--top) - 16px)}
  .fs-bhead{padding:11px 18px 0}
  .fs-bbody{gap:12px;padding-top:8px;padding-bottom:12px}
  .fs-sec{gap:6px}
  .fs-lbl{min-height:18px}
  .fs-prompt textarea{min-height:58px;font-size:14px;line-height:1.45;padding:9px 12px}
  .fs-ideas button{padding-top:1px;padding-bottom:1px}
  .fs-rowb{min-height:42px;padding-top:3px;padding-bottom:3px;grid-template-columns:54px minmax(0,1fr) 16px}
  .fs-rowb .th{width:54px}
  .fs-rowb .tx b{font-size:13.5px}
  .fs-rowb .tx small{font-size:12px}
  .fs-bfoot{padding-top:9px;padding-bottom:10px;gap:5px}
  .fs-gen{min-height:46px}
  .fs-vf{grid-template-columns:minmax(0,min(38%,272px)) minmax(0,1fr)}
  .fs-shead{margin-bottom:10px}
}
/* short laptops (1024×768 and the like): Model & format stays in view above Generate without scrolling the box */
@media (min-width:1024px) and (max-height:820px){
  .fs-bbody{gap:9px;padding-bottom:10px}
  .fs-rowb{min-height:40px;padding-top:2px;padding-bottom:2px;grid-template-columns:50px minmax(0,1fr) 16px}
  .fs-rowb .th{width:50px}
  .fs-ideas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:0 2px}
  .fs-ideas::-webkit-scrollbar{display:none}
  .fs-ideas button{flex:none}
  .fs-prompt textarea{min-height:50px;padding-top:7px;padding-bottom:7px}
  /* the hint moves onto the label line (over "Optional"), so it costs no height here */
  #fs-cam{position:relative}
  .fs-hovhint{position:absolute;top:-1px;right:0;margin:0!important;padding:1px 0 1px 10px;border-radius:0;background:var(--p1);font-size:12px;line-height:18px}
  .fs-hovhint .l{display:none}.fs-hovhint .s{display:inline}
  .fs-bfoot{gap:4px}
}
@media (min-width:1024px) and (max-height:740px){.fs-ideas img{display:none}.fs-ideas button{padding:3px 10px}.fs-psub{display:none}}

/* ───────── phones and tablets: the box first, My shots below, sheets for the pickers, Generate as a bottom bar ───────── */
@media (max-width:1023px){
  .fs{padding:12px 14px 108px}
  .fs-work{padding-bottom:0}
  .fs .fs-d{display:none}.fs .fs-m{display:inline}
  .fs-grid{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .fs-box{grid-column:1;grid-row:1;position:static;max-height:none;overflow:visible;border-radius:18px;max-width:720px;width:100%;justify-self:center}
  .fs-work{grid-column:1;grid-row:2;max-width:720px;width:100%;justify-self:center}
  .fs-bhead{padding:14px 14px 2px;flex-wrap:wrap;row-gap:8px}
  /* returning on a phone: the shots are below the box, so say so */
  .fs-jump{order:3;display:inline-flex;align-items:center;gap:8px;flex-basis:auto;border:1px solid var(--line2);background:var(--p2);color:var(--tx);border-radius:999px;padding:5px 12px 5px 10px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
  .fs-jump[hidden]{display:none}
  .fs-jump .fs-recdot{width:7px;height:7px;background:var(--hot);box-shadow:0 0 0 3px var(--hot-soft);animation-duration:1.2s}
  .fs-jump:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
  .fs-bhead h1{flex:1 1 auto}
  .fs-bbody{overflow:visible;padding:10px 14px 16px}
  .fs-bfoot{padding:12px 14px 14px;border-radius:0 0 18px 18px}
  .fs-genbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));background:var(--p1);border-top:1px solid var(--line2);box-shadow:0 -14px 30px -22px rgba(0,0,0,.5)}
  .fs-gen{min-height:50px;max-width:720px;margin:0 auto;display:flex}
  .fs-shead{margin-top:0}
  .fs-welcome{gap:18px}
  .fs-dailies{gap:22px}
  /* a picker = a full-screen sheet with the same header (← Back · title · Done) */
  .fs-pick{position:fixed;inset:0;z-index:80;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;padding:0 14px calc(28px + env(safe-area-inset-bottom,0px));animation:fsUp .22s ease}
  .fs.picking .fs-shots{display:block}
  .fs-ptop{top:0;margin:0 -14px;padding:10px 14px 12px}
  .fs-phead{gap:10px;min-height:40px}
  .fs-back{padding:7px 12px 7px 10px}
  .fs-ptitle{font-size:15px}
  .fs-psub{font-size:12px;line-height:1.3}
  .fs-tabs{margin:10px -14px 0;padding:1px 14px}
  .fs-vf{grid-template-columns:44% minmax(0,1fr);margin-top:10px;border-radius:12px}
  .fs-cap{padding:8px 10px;gap:2px;justify-content:flex-start}
  .fs-cap .t{gap:6px}.fs-cap .t b{font-size:14px}
  .fs-tagc,.fs-tagp{font-size:8px;padding:2px 5px}
  .fs-cap .what{font-size:12px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .fs-cap .when{display:none}
  .fs-vph{padding:6px;gap:3px}.fs-vph b{font-size:12.5px}.fs-vph small{font-size:7.5px;letter-spacing:.08em}
  .fs-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fs-tile .tx{padding:7px 9px 8px}
  .fs-tile .gl{width:36px;height:36px}.fs-tile .gl svg{width:24px;height:24px}
  .fs-phead{flex-wrap:wrap;row-gap:10px}
  .fs-msearch{order:5;flex:1 0 100%;min-width:0}
  .fs-kinds{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:10px -14px 0;padding:2px 14px}
  .fs-kinds::-webkit-scrollbar{display:none}
  .fs-search{max-width:none}
  .fs-mall{gap:18px}
  .fs-recipes{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .fs-mgrid{grid-template-columns:1fr}
  body[data-page="film"] .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px));border-radius:14px;text-align:center}
}
@media (min-width:640px) and (max-width:1023px){.fs-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){
  .fs-frows{grid-template-columns:1fr;gap:4px}
  .fs-frow .k{margin-top:8px}
  .fs-mcard{grid-template-columns:60px minmax(0,1fr) auto;gap:10px}
  .fs-mcard .pv{width:60px}
  .fs-mcard .pr b{font-size:14px}
  .fs-pfoot .u-btn{flex:1}
  .fs-rfoot{justify-content:stretch}.fs-rfoot .u-btn{flex:1}
  .fs-wacts .u-btn{flex:1 1 auto}
}
@media (max-width:420px){.fs-psub{display:none}.fs-meta2{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){
  .fs-pick,.fs-crow.flash .fs-rowb,.fs-mgh.hit,.fs-feat,.fs-hovhint,.fs-recdot,.fs-rslate i,.fs-rprog i.run,.fs-film::before,.fs-pend .bar i::after,.fs-pend>b::before,.fs-confirm{animation:none}
  .fs-tile,.fs-rcard,.fs-mcard,.fs-rowb,.fs-rowb .chev,.fs-rowb::before,.fs-crow.arming .fs-rowb::before,.fs-tabs button,.fs-kinds button,.fs-ideas button,.fs-back,.fs-screen video,.fs-tile .m video,.fs-rcard .m video,
  .fs-rframe video,.fs-excard,.fs-excard .m video,.fs-dcard,.fs-dm video,.fs-dplay,.fs-dcard .fs-dacts,.fs-shots,.fs.picking .fs-shots,.fs-ohint,.fs-dsam{transition:none}
  .fs-tile:hover,.fs-rcard:hover,.fs-rowb:hover .chev,.fs-excard:hover{transform:none}
  .fs-rprog{display:none}
}

/* the one picture box inside the Film scene */
.fs-pics .slot.one{padding:8px;background:transparent;min-height:96px}
.fs-pics .slot.one label.add{position:static;inset:auto;padding:8px;color:var(--mu);font-weight:600;font-size:12.5px}
.fs-pics .slot.one label.add:hover{color:var(--tx)}
.fs-pics .slot.one .th.nopic{display:flex;align-items:center;justify-content:center;padding:6px;font-size:11px;color:var(--tx);text-align:center}
.fs-pics .slot.one label.add.more{flex:0 0 80px;min-width:80px}
.fs-pics .slot.one .th.file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;font-size:10px;color:var(--tx);text-align:center}

/* v12: the picker is a card that pops over the shots column (click a row to open; Esc, Done or ← closes) */
@media (min-width:1024px){
  .fs-pick{border:1px solid var(--line);box-shadow:0 24px 64px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.06);padding:0 16px 16px;animation:fsPop .18s cubic-bezier(.2,.8,.2,1)}
  .fs-ptop{margin:0 -16px;padding:10px 16px 12px}
}
@keyframes fsPop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.fs-hovhint,.fs-ohint{display:none!important}
.fs-meta[hidden]{display:none}

.fs-reflbl{margin-top:10px}
.fs-reflbl h2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mu);font-weight:700;margin:0}
.fs-pics{margin-top:6px}