/*  flowstate.css  —  Aphexar Flowstate
 *
 *  Brand system, locked 2026-08-05:
 *    Void #050505 · Deep Violet #1F123F · Midnight #0D194A
 *    Acid Lime #C7FF38 (accent) · Bone #F5F7F2 (text, never pure white)
 *    Rajdhani (head) · Special Gothic Expanded One (UI) · Monomaniac One (nums)
 *    Uppercase, tracking inverse to size. Acid is never running type.
 *
 *  STRUCTURE, not decoration. The reference panels (MotionUI, Motion Tools,
 *  AE Optimizer) all share three things this now has:
 *    1. TABS — one focused view at a time, instead of one long scroll.
 *    2. ICON TILES — a glyph grid reads instantly; a column of text does not.
 *    3. OVERLAY DEPTH — rim light, bloom and grain so the panel sits in space
 *       rather than being a flat fill.
 *
 *  Motion is short and physical: 90-160ms, ease-out, 1-2px of travel. Long
 *  animation in a tool used hundreds of times a day becomes friction.
 *
 *  Nothing secondary below 11.5px.
 */

:root{
  --void:#050505;
  --violet:#1F123F;
  --midnight:#0D194A;
  --acid:#C7FF38;
  --bone:#F5F7F2;

  --raised:#111214;
  --raised-hi:#191b1e;
  --edge:#26292e;
  --edge-soft:#1a1c20;

  --ink:#F5F7F2;
  --dim:#c8ccd2;
  --dimmer:#8d9299;

  --err:#e8705a;
  --busy:#e8b04b;

  --f-head:"Rajdhani","Segoe UI",system-ui,sans-serif;
  --f-body:"Special Gothic Expanded One","Segoe UI",system-ui,sans-serif;
  --f-num:"Monomaniac One","Consolas",monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{height:100%}
.fs-sprite{display:none}

body{
  margin:0;color:var(--ink);
  font:13px/1.5 var(--f-body);letter-spacing:.02em;
  -webkit-user-select:none;user-select:none;
  overflow-y:auto;overflow-x:hidden;
  background:
    radial-gradient(120% 58% at 6% -12%, rgba(31,18,63,.42) 0%, rgba(31,18,63,0) 62%),
    radial-gradient(90% 48% at 106% 110%, rgba(13,25,74,.26) 0%, rgba(13,25,74,0) 60%),
    var(--void);
  background-attachment:fixed;
}

/* ── overlays: grain, then rim light. Both fixed, both inert. ────────── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:61;
  box-shadow:
    inset 0 1px 0 rgba(199,255,56,.10),          /* top rim light */
    inset 0 0 0 1px rgba(199,255,56,.035),       /* faint edge */
    inset 0 -60px 90px -60px rgba(0,0,0,.75);    /* base vignette */
}

/* ── header ─────────────────────────────────────────────────────────── */
.fs-head{
  display:flex;align-items:center;gap:10px;
  padding:15px 16px 12px;position:relative;
}
.fs-mark{
  width:20px;height:20px;flex:none;
  background:linear-gradient(155deg,var(--bone) 0%,#c8ccd2 100%);
  -webkit-mask:url("../assets/mark.svg") center/contain no-repeat;
          mask:url("../assets/mark.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 8px rgba(199,255,56,.25));
  transition:filter .3s var(--ease);
}
.fs-head:hover .fs-mark{filter:drop-shadow(0 0 13px rgba(199,255,56,.5))}
.fs-brand{
  font-family:var(--f-head);font-weight:700;
  font-size:18px;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(180deg,var(--bone) 0%,#8d9299 145%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.fs-ver{margin-left:auto;font-family:var(--f-num);font-size:11.5px;
        letter-spacing:.05em;color:var(--dimmer)}

/* ── tabs ───────────────────────────────────────────────────────────── */
/* ── panes ──────────────────────────────────────────────────────────── */
.fs-pane{display:none}
.fs-pane.is-on{display:block;animation:fade .22s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ── status ─────────────────────────────────────────────────────────── */
.fs-status{
  display:flex;align-items:center;gap:10px;
  margin:13px 16px 16px;padding:10px 12px;
  border:1px solid var(--edge);border-radius:8px;
  background:linear-gradient(180deg,var(--raised-hi) 0%,var(--raised) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 2px 12px rgba(0,0,0,.45);
  font-size:12px;letter-spacing:.04em;color:var(--dim);
  min-height:36px;line-height:1.4;
}
.fs-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--dimmer);
        transition:background .2s var(--ease),box-shadow .2s var(--ease)}
.fs-status[data-state="ok"]    .fs-dot{background:var(--acid);box-shadow:0 0 10px rgba(199,255,56,.65)}
.fs-status[data-state="error"] .fs-dot{background:var(--err);box-shadow:0 0 10px rgba(232,112,90,.55)}
.fs-status[data-state="busy"]  .fs-dot{background:var(--busy);animation:pulse .85s ease-in-out infinite}
.fs-status[data-state="error"]{color:#f7bcb0;border-color:#57302a;
  background:linear-gradient(180deg,#241416 0%,#1a1012 100%)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.78)}}

/* ── blocks & labels ────────────────────────────────────────────────── */
.fs-block{padding:0 16px 18px}
.fs-label{
  display:flex;align-items:center;gap:9px;
  font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:10px;
}
.fs-label::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--edge) 0%,transparent 88%)}

/* ── icon tiles ─────────────────────────────────────────────────────── */
.fs-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.fs-tiles-2{grid-template-columns:repeat(2,1fr)}

.fs-tile{
  position:relative;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:13px 6px 10px;
  border:1px solid var(--edge);border-radius:9px;
  background:linear-gradient(180deg,var(--raised-hi) 0%,var(--raised) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--dim);
  transition:transform .11s var(--ease),border-color .14s var(--ease),
             background .14s var(--ease),box-shadow .14s var(--ease),color .14s var(--ease);
}
.fs-tile svg{width:22px;height:22px;flex:none;transition:filter .14s var(--ease),transform .14s var(--ease)}
.fs-tile span{
  font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--dimmer);transition:color .14s var(--ease);
}
/* Bloom that blooms from the icon outward, not a flat hover fill. */
.fs-tile::before{
  content:"";position:absolute;left:50%;top:34%;width:70px;height:70px;
  transform:translate(-50%,-50%) scale(.4);opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(199,255,56,.22) 0%,transparent 68%);
  transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.fs-tile:hover{
  color:var(--ink);border-color:rgba(199,255,56,.4);
  background:linear-gradient(180deg,#212429 0%,#16181b 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 4px 16px rgba(0,0,0,.5);
}
.fs-tile:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fs-tile:hover svg{stroke:var(--acid);filter:drop-shadow(0 0 6px rgba(199,255,56,.45))}
.fs-tile:hover span{color:var(--dim)}
.fs-tile:active{transform:translateY(1px) scale(.985)}

/* ── buttons (secondary to tiles now) ───────────────────────────────── */
.fs-row{display:flex;gap:7px;margin-bottom:7px}
.fs-row:last-child{margin-bottom:0}
.fs-btn{
  flex:1;cursor:pointer;position:relative;overflow:hidden;color:var(--ink);
  border:1px solid var(--edge);border-radius:7px;padding:9px 10px;
  background:linear-gradient(180deg,var(--raised-hi) 0%,var(--raised) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  font-family:var(--f-body);font-size:12px;
  letter-spacing:.09em;text-transform:uppercase;
  transition:border-color .13s var(--ease),background .13s var(--ease),transform .09s var(--ease);
}
.fs-btn:hover{border-color:rgba(199,255,56,.42);
  background:linear-gradient(180deg,#212429 0%,#16181b 100%)}
.fs-btn:active{transform:translateY(1px)}

/* ── field row: label · slider · value  (the MotionUI pattern) ───────── */
.fs-field{
  display:flex;align-items:center;gap:11px;
  padding:8px 11px;margin-bottom:8px;
  border:1px solid var(--edge);border-radius:7px;
  background:linear-gradient(180deg,rgba(25,27,30,.6) 0%,rgba(17,18,20,.6) 100%);
}
.fs-field-name{
  flex:none;min-width:62px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer);
}
.fs-field-val{
  flex:none;min-width:44px;text-align:right;
  font-family:var(--f-num);font-size:11.5px;color:var(--ink);letter-spacing:.03em;
}

/* ── inputs ─────────────────────────────────────────────────────────── */
.fs-input{
  width:100%;color:var(--ink);
  background:linear-gradient(180deg,#08090a 0%,#0c0d0f 100%);
  border:1px solid var(--edge);border-radius:7px;padding:9px 11px;
  font-family:var(--f-body);font-size:12.5px;letter-spacing:.03em;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
  transition:border-color .13s var(--ease),box-shadow .13s var(--ease);
  -webkit-user-select:text;user-select:text;
}
.fs-input:focus{outline:none;border-color:rgba(199,255,56,.5);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 3px rgba(199,255,56,.07)}
.fs-input::placeholder{color:var(--dimmer);text-transform:none;letter-spacing:.02em}

input[type=range]{
  flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--edge) 0%,#2f333a 100%);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;cursor:grab;
  background:linear-gradient(180deg,var(--acid) 0%,#9dcc22 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 9px rgba(199,255,56,.45);
  transition:transform .11s var(--ease),box-shadow .11s var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 14px rgba(199,255,56,.7)}
input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}

/* ── result rows ────────────────────────────────────────────────────── */
.fs-results{margin-top:9px;max-height:250px;overflow-y:auto}
.fs-fx{
  display:flex;align-items:baseline;gap:9px;width:100%;cursor:pointer;
  background:transparent;border:0;border-left:2px solid transparent;
  border-bottom:1px solid var(--edge-soft);
  padding:8px 6px;text-align:left;font-family:var(--f-body);
  transition:background .12s var(--ease),border-left-color .12s var(--ease),padding-left .12s var(--ease);
  animation:slidein .22s var(--ease) both;
}
@keyframes slidein{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.fs-fx:hover{background:linear-gradient(90deg,rgba(38,41,46,.8) 0%,transparent 92%);
  border-left-color:var(--acid);padding-left:9px}
.fs-fx-name{color:var(--ink);font-size:12.5px;letter-spacing:.02em}
.fs-fx-cat{margin-left:auto;color:var(--dimmer);font-size:11.5px;
  letter-spacing:.11em;text-transform:uppercase;white-space:nowrap}
.fs-empty{color:var(--dimmer);font-size:12px;padding:10px 6px;letter-spacing:.04em}

/* ── presets ────────────────────────────────────────────────────────── */
.fs-check{
  display:flex;align-items:center;gap:8px;margin:9px 0;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dimmer);cursor:pointer;transition:color .13s var(--ease);
}
.fs-check input{accent-color:var(--acid);width:13px;height:13px;cursor:pointer}
.fs-check:hover{color:var(--dim)}
.fs-preset{padding:0;gap:0}
.fs-preset:hover{background:transparent;border-left-color:transparent;padding-left:6px}
.fs-preset-main{
  flex:1;display:flex;align-items:baseline;gap:9px;cursor:pointer;
  background:transparent;border:0;border-left:2px solid transparent;
  padding:8px 6px;text-align:left;font-family:var(--f-body);
  transition:background .12s var(--ease),border-left-color .12s var(--ease);
}
.fs-preset-main:hover{background:linear-gradient(90deg,rgba(38,41,46,.8) 0%,transparent 92%);
  border-left-color:var(--acid)}
.fs-preset-del{flex:none;cursor:pointer;background:transparent;border:0;
  color:var(--dimmer);font-size:12px;padding:8px 9px;line-height:1;
  transition:color .13s var(--ease),transform .13s var(--ease)}
.fs-preset-del:hover{color:var(--err);transform:scale(1.2)}

/* ── property cards ─────────────────────────────────────────────────── */
.fs-prop{
  border:1px solid var(--edge);border-radius:9px;
  background:linear-gradient(180deg,rgba(25,27,30,.62) 0%,rgba(17,18,20,.62) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  padding:11px 12px;margin-bottom:9px;
  animation:fade .24s var(--ease) both;
}
.fs-prop-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}
.fs-prop-name{color:var(--ink)}
.fs-prop-keyed{color:var(--busy);font-size:11.5px;letter-spacing:.08em}
.fs-prop-layer{color:var(--dimmer);margin-left:auto;font-size:11.5px;
  letter-spacing:.05em;text-transform:none;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:45%}
.fs-dim{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.fs-dim:last-child{margin-bottom:0}
.fs-dim-label{width:16px;flex:none;font-family:var(--f-num);
  font-size:11.5px;color:var(--dimmer);letter-spacing:.04em}
.fs-dim-val{width:56px;flex:none;text-align:right;font-family:var(--f-num);
  font-size:11.5px;color:var(--ink);letter-spacing:.03em;cursor:pointer;
  transition:color .12s var(--ease)}
.fs-dim-val:hover{color:var(--acid)}

/* ── hints ──────────────────────────────────────────────────────────── */
.fs-hint{margin-top:9px;font-size:11.5px;color:var(--dimmer);letter-spacing:.05em}
.fs-hint code{background:#08090a;border:1px solid var(--edge);border-radius:4px;
  padding:1px 6px;font-family:var(--f-num);letter-spacing:.04em;color:var(--dim)}

/* ── dev bar — obviously separate, so it is obvious it ships out ─────── */
.fs-devbar{
  display:flex;align-items:center;gap:7px;
  margin:6px 16px 16px;padding:8px 10px;
  border-top:1px dashed var(--edge);
}
.fs-devbtn{
  cursor:pointer;background:transparent;color:var(--dimmer);
  border:1px solid var(--edge);border-radius:6px;padding:5px 10px;
  font-family:var(--f-body);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  transition:color .13s var(--ease),border-color .13s var(--ease);
}
.fs-devbtn:hover{color:var(--dim);border-color:#3a3f47}
.fs-devbar code{margin-left:auto;font-family:var(--f-num);font-size:11.5px;color:var(--dimmer)}

::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--edge);border-radius:5px;
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#3a3f47;background-clip:padding-box}

/* ── category colour-coding ──────────────────────────────────────────────
   Colour that does a job: you learn to spot Blur from Distort by tint before
   reading the word. Hues are deliberately pulled toward violet/midnight so the
   set reads as one family rather than a rainbow — the brand's 60/30/10 still
   governs the chrome, this is only ever a 4px rule and a label tint.        */
.fs-fx[data-cat]{border-left-width:3px}

.fs-fx[data-cat="Blur & Sharpen"]  {--cat:#5b8fd6}
.fs-fx[data-cat="Distort"]         {--cat:#a071e0}
.fs-fx[data-cat="Generate"]        {--cat:#C7FF38}
.fs-fx[data-cat="Color Correction"]{--cat:#e0a355}
.fs-fx[data-cat="Stylize"]         {--cat:#d96fb0}
.fs-fx[data-cat="Transition"]      {--cat:#54c9b8}
.fs-fx[data-cat="Perspective"]     {--cat:#7b7ee8}
.fs-fx[data-cat="Time"]            {--cat:#c9a94e}
.fs-fx[data-cat="Noise & Grain"]   {--cat:#8e93a8}
.fs-fx[data-cat="Simulation"]      {--cat:#5ec98a}
.fs-fx[data-cat="Channel"]         {--cat:#6ba8c9}
.fs-fx[data-cat="Keying"]          {--cat:#b0c95e}
.fs-fx[data-cat="Matte"]           {--cat:#9a8fc4}
.fs-fx[data-cat="Text"]            {--cat:#e08a7a}
.fs-fx[data-cat="Audio"]           {--cat:#7ac4d6}

.fs-fx[data-cat]{border-left-color:color-mix(in srgb, var(--cat, #948cad) 30%, transparent)}
.fs-fx[data-cat] .fs-fx-cat{color:color-mix(in srgb, var(--cat, #948cad) 72%, #948cad)}
.fs-fx[data-cat]:hover{
  border-left-color:var(--cat, var(--acid));
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--cat, #251b47) 13%, transparent) 0%,
    transparent 88%);
}
.fs-fx[data-cat]:hover .fs-fx-name{color:#fff}

/* ── ACCENT PASS ─────────────────────────────────────────────────────────
   The chrome is now neutral — void through graphite to bone. That was the
   real problem: violet-tinted greys were desaturating every accent placed on
   them. An accent only reads as hot against a neutral ground.
   With the chrome quiet, acid is free to lead.                             */

/* Active tab: acid text on a lit slab, with a hard acid underline. */
/* Ready state: the whole strip carries a faint acid wash, not just the dot. */
.fs-status[data-state="ok"]{
  border-color:rgba(199,255,56,.3);
  background:linear-gradient(180deg,rgba(199,255,56,.075) 0%,rgba(199,255,56,.02) 100%),
             linear-gradient(180deg,var(--raised-hi) 0%,var(--raised) 100%);
  color:#e4f0cf;
}
.fs-status[data-state="ok"] .fs-dot{box-shadow:0 0 12px rgba(199,255,56,.9),0 0 26px rgba(199,255,56,.35)}

/* Header: the mark burns, and the rule beneath is unmistakably acid. */
.fs-mark{filter:drop-shadow(0 0 10px rgba(199,255,56,.5))}
.fs-head:hover .fs-mark{filter:drop-shadow(0 0 18px rgba(199,255,56,.85))}
.fs-head::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--acid) 0%,rgba(199,255,56,.35) 22%,transparent 58%);
  box-shadow:0 0 8px rgba(199,255,56,.3);
}

/* Tiles: acid icon and a lit edge on hover — the bloom does the rest. */
.fs-tile:hover{border-color:rgba(199,255,56,.65)}
.fs-tile:hover svg{stroke:var(--acid);filter:drop-shadow(0 0 9px rgba(199,255,56,.75))}
.fs-tile:hover span{color:#d8e8b4}
.fs-tile::before{background:radial-gradient(circle,rgba(199,255,56,.3) 0%,transparent 66%)}

/* Focus and controls. */
.fs-input:focus{border-color:var(--acid);box-shadow:inset 0 1px 3px rgba(0,0,0,.55),0 0 0 3px rgba(199,255,56,.12)}
input[type=range]{background:linear-gradient(90deg,#2a2e34 0%,#3d4249 100%)}
input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 12px rgba(199,255,56,.7)}

/* Section labels get an acid tick, so the eye has a repeating anchor. */
.fs-label::before{
  content:"";width:3px;height:11px;border-radius:2px;flex:none;
  background:var(--acid);box-shadow:0 0 7px rgba(199,255,56,.6);
}

/* ── glyph system ────────────────────────────────────────────────────────
   Mass first. `.f` is a filled body, `.s` an open line. A 20px mark made only
   of hairlines dissolves; giving each glyph a solid core makes it legible at
   a glance, which is the entire point of an icon.                          */
.fs-tile svg .f{fill:currentColor;stroke:none}
.fs-tile svg .s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fs-tile:hover svg{transform:translateY(-1px);filter:drop-shadow(0 0 10px rgba(199,255,56,.75))}
.fs-tile:hover svg .f{fill:var(--acid)}
.fs-tile:hover svg .s{stroke:var(--acid)}

/* ── denser tiles ────────────────────────────────────────────────────────
   Closer to Motion Tools: compact, everything reachable, no wasted height.  */
.fs-tiles{gap:6px}
.fs-tile{padding:11px 5px 9px;gap:6px;border-radius:8px}
.fs-tile span{font-size:11.5px;letter-spacing:.05em}

/* Tabs are gone — one panel, one scroll. Rules kept inert in case the
   structure ever comes back, but nothing renders them now. */
.fs-block{padding:0 16px 15px}
.fs-label{margin-bottom:9px}

/* ── chain link ─────────────────────────────────────────────────────────
   Scale is ONE property in After Effects. Giving it two sliders with no link
   was wrong — this puts the chain back.                                    */
.fs-chain{
  flex:none;cursor:pointer;background:transparent;
  border:1px solid var(--edge);border-radius:5px;
  color:var(--dimmer);font-size:12px;line-height:1;
  padding:3px 6px;margin-right:2px;
  transition:color .13s var(--ease),border-color .13s var(--ease);
}
.fs-chain:hover{color:var(--dim);border-color:#3a3f47}
.fs-chain.is-on{
  color:var(--acid);border-color:rgba(199,255,56,.5);
  text-shadow:0 0 7px rgba(199,255,56,.55);
}

/* ── layer selector ─────────────────────────────────────────────────────
   The fix for AE dropping your selection the moment you click off a text
   layer. Rows are dense on purpose — this is a list you scan, not read.   */
.fs-lyr{
  display:flex;align-items:stretch;gap:0;
  border-bottom:1px solid var(--edge-soft);
  border-left:2px solid transparent;
  transition:background .12s var(--ease),border-left-color .12s var(--ease);
}
.fs-lyr:hover{background:linear-gradient(90deg,rgba(38,41,46,.8) 0%,transparent 92%)}
.fs-lyr.is-sel{
  border-left-color:var(--acid);
  background:linear-gradient(90deg,rgba(199,255,56,.09) 0%,transparent 88%);
}
.fs-lyr.is-off .fs-lyr-name{opacity:.4;text-decoration:line-through}

.fs-lyr-eye{
  flex:none;width:26px;cursor:pointer;background:transparent;border:0;
  color:var(--dimmer);font-size:10px;line-height:1;
  transition:color .12s var(--ease);
}
.fs-lyr-eye:hover{color:var(--acid)}
.fs-lyr.is-off .fs-lyr-eye{color:#4d525a}

.fs-lyr-main{
  flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;
  cursor:pointer;background:transparent;border:0;
  padding:7px 6px 7px 0;text-align:left;font-family:var(--f-body);
}
.fs-lyr-n{
  flex:none;width:18px;text-align:right;
  font-family:var(--f-num);font-size:11.5px;color:var(--dimmer);
}
.fs-lyr-k{flex:none;width:12px;text-align:center;font-size:11.5px;color:var(--dimmer)}
.fs-lyr-name{
  flex:1;min-width:0;color:var(--ink);font-size:12.5px;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fs-lyr.is-sel .fs-lyr-name{color:#e4f0cf}

/* ── dev drawer ─────────────────────────────────────────────────────────
   Hidden by default so the panel reads as a finished plugin. The caret in
   the header opens it when a reload is actually needed. Delete this block,
   the caret in index.html and js/_dev.js to ship. */
/* Same triangle as the section headers, so one shape means one thing across
   the whole panel. Points DOWN to open the drawer below it, flips UP to shut
   it. Delete with the rest of the dev block when live reload comes out. */
.fs-devcaret{
  flex:none;cursor:pointer;background:transparent;border:0;padding:0;
  margin-left:8px;position:relative;
  width:14px;height:14px;color:#4a505a;
  transition:transform .18s var(--ease),color .14s var(--ease);
}
.fs-devcaret::before{
  content:"";position:absolute;left:50%;top:50%;
  margin:-2px 0 0 -4.5px;
  border-left:4.5px solid transparent;
  border-right:4.5px solid transparent;
  border-top:5px solid currentColor;
}
.fs-devcaret:hover{color:var(--dim)}
.fs-devcaret.is-on{
  color:var(--acid);transform:rotate(180deg);
  filter:drop-shadow(0 0 4px rgba(199,255,56,.45));
}

.fs-devbar{
  overflow:hidden;
  max-height:0;opacity:0;padding-top:0;padding-bottom:0;border-top-width:0;
  margin-top:0;margin-bottom:0;
  transition:max-height .22s var(--ease),opacity .16s var(--ease),
             padding .22s var(--ease),margin .22s var(--ease);
}
body.fs-dev-open .fs-devbar{max-height:56px;opacity:1;padding-top:8px;padding-bottom:8px;
  margin-top:6px;margin-bottom:16px;border-top-width:1px}

/* ── property chips ─────────────────────────────────────────────────────
   Small on purpose. These are a shortcut past twirling the layer open in
   the timeline, not a headline control — the sliders they summon are the
   thing you actually look at. */
.fs-chips{display:flex;flex-wrap:wrap;gap:5px;margin:0 16px 8px}
.fs-chip{
  flex:1 1 auto;cursor:pointer;
  background:#101216;border:1px solid var(--edge);border-radius:6px;
  color:var(--dim);padding:5px 9px;
  font-family:var(--f-body);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  transition:color .12s var(--ease),border-color .12s var(--ease),
             background .12s var(--ease),transform .1s var(--ease);
}
.fs-chip:hover{color:var(--ink);border-color:#3a3f47;background:#15181d}
.fs-chip:active{transform:translateY(1px)}
.fs-chip:focus-visible{outline:1px solid var(--acid);outline-offset:1px}

/* ── folding sections ───────────────────────────────────────────────────
   The Layers list grows with the comp. On a 40-layer comp everything below
   it is off screen, so every header folds. State is remembered per section. */
.fs-label{cursor:pointer;display:flex;align-items:center;user-select:none}
.fs-label:hover{color:var(--dim)}
.fs-label:focus-visible{outline:1px solid var(--acid);outline-offset:2px}
/* A real solid triangle, drawn with borders so it stays crisp at any zoom.
   A text arrow (U+25BE) rendered as a dot at this size, and two bars read as
   a chevron rather than the disclosure triangle the rest of the OS uses. */
.fs-fold{
  margin-left:auto;flex:none;position:relative;
  width:14px;height:14px;color:#767d88;
  transition:transform .18s var(--ease),color .14s var(--ease);
}
.fs-fold::before{
  content:"";position:absolute;left:50%;top:50%;
  margin:-2px 0 0 -4.5px;
  border-left:4.5px solid transparent;
  border-right:4.5px solid transparent;
  border-top:5px solid currentColor;
}

.fs-label:hover .fs-fold{color:var(--ink)}
.fs-block.is-folded .fs-fold{
  transform:rotate(-90deg);color:var(--acid);
  filter:drop-shadow(0 0 4px rgba(199,255,56,.45));
}
.fs-block.is-folded > *:not(.fs-label){display:none!important}
.fs-block.is-folded{padding-bottom:2px}

/* Hidden-dimension note — quiet, but it must not look like an error. */
.fs-dim-note{
  margin:2px 16px 6px;padding-left:2px;
  font-size:11.5px;color:var(--dimmer);letter-spacing:.02em;
}

/* ── reset to neutral ───────────────────────────────────────────────────
   Sits at the far end of the property header, opposite the chain. Quiet
   until you reach for it — it is a correction, not a control. */
.fs-reset{
  flex:none;margin-left:8px;cursor:pointer;
  background:transparent;border:1px solid var(--edge);border-radius:5px;
  color:var(--dimmer);font-size:12px;line-height:1;padding:2px 6px;
  transition:color .13s var(--ease),border-color .13s var(--ease);
}
.fs-reset:hover{color:var(--acid);border-color:rgba(199,255,56,.45)}
.fs-reset:active{transform:translateY(1px)}

/* ── section marks ──────────────────────────────────────────────────────
   Between the acid bar and the word. 13px, so the symbols are drawn as
   mass — a hairline at this size just disappears. */
/* fill is set ON THE SVG, not on a class inside the symbol.

   A <use> clones the symbol into a SHADOW TREE, and a document selector like
   ".fs-lg .f" cannot reach in there — so the shapes fell back to the default
   fill, which is BLACK. With a coloured drop-shadow on top, that produced
   exactly what Nathan saw on 2026-09-10: "still black with an acid glow".

   fill and stroke are INHERITED SVG properties, so setting them on the <svg>
   element itself passes through the shadow boundary. This is the only form
   that works for a sprite. */
.fs-lg{
  width:15px;height:15px;flex:none;
  color:var(--bone);fill:currentColor;stroke:none;
  transition:color .15s var(--ease),filter .15s var(--ease)
}
.fs-label:hover .fs-lg{color:var(--acid)}
/* The glyph does NOT change when folded. The triangle already says that, and
   with every section closed the whole column went acid — two signals for one
   state, and the bone set stopped being bone. */

/* ── header counts ──────────────────────────────────────────────────────
   Monomaniac One, per the brand — numerals are its job.

   Flex `order` is what puts them at the far end. The hairline is a ::after
   pseudo-element, which always renders LAST in source order, so without this
   the sequence came out text · triangle · rule and the right side stayed
   dead. Ordering the three explicitly gives: rule ——— count ▸ triangle. */
.fs-label::after{order:5}
.fs-count{order:6}
.fs-fold {order:7}

.fs-count{
  font-family:var(--f-num);font-size:11.5px;letter-spacing:.04em;
  color:var(--bone);
  min-width:0;padding:0 10px 0 6px;
  opacity:0;transition:opacity .18s var(--ease),color .15s var(--ease);
}
.fs-count.is-on{opacity:1}
.fs-label:hover .fs-count{color:var(--acid)}
/* Bone, folded or not — it matches the glyphs, and the triangle already
   carries the folded state on its own. */

/* ── the one button that does a whole job ───────────────────────────────
   Cut Out Clipboard is the headline action of its section, so it gets the
   accent. Everything else in the panel stays neutral chrome. */
.fs-btn-hero{
  border-color:rgba(199,255,56,.42);
  background:linear-gradient(100deg,rgba(199,255,56,.11),rgba(199,255,56,.03) 70%);
  color:var(--bone);
}
.fs-btn-hero:hover{
  border-color:var(--acid);color:var(--acid);
  box-shadow:0 0 0 1px rgba(199,255,56,.18),0 4px 18px -6px rgba(199,255,56,.35);
}

/* ── cut-out server state ───────────────────────────────────────────────
   A Stream Deck key fires a script and reports nothing back, so the panel
   answers "is it on?" itself. Green means you can paste. */
.fs-srv{
  display:flex;align-items:center;gap:8px;
  margin:0 16px 8px;padding:7px 11px;
  border:1px solid var(--edge);border-radius:8px;background:#0d0f11;
  font-size:11.5px;letter-spacing:.06em;color:var(--dimmer);
  transition:border-color .2s var(--ease),color .2s var(--ease);
}
.fs-srv-dot{
  flex:none;width:7px;height:7px;border-radius:50%;
  background:#3f444c;transition:background .2s var(--ease),box-shadow .2s var(--ease);
}
.fs-srv[data-up="yes"]{border-color:rgba(199,255,56,.32);color:var(--dim)}
.fs-srv[data-up="yes"] .fs-srv-dot{background:var(--acid);box-shadow:0 0 7px rgba(199,255,56,.7)}
.fs-srv[data-up="no"] .fs-srv-dot{background:#5a3030}

/* ── view section ───────────────────────────────────────────────────────
   Sub-labels inside a block. Quieter than a section header, because these
   group chips rather than open a new part of the panel. */
.fs-sub{
  margin:2px 16px 5px;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#5f6670;
}
.fs-chip-note{
  padding:5px 2px;font-size:11.5px;color:var(--dimmer);letter-spacing:.03em;
}
/* The renderer you are actually on. The only place a chip carries the accent. */
.fs-chip.is-on{
  color:var(--acid);border-color:rgba(199,255,56,.45);
  background:linear-gradient(100deg,rgba(199,255,56,.1),rgba(199,255,56,.02) 70%);
}
.fs-chip.is-on:hover{border-color:var(--acid)}

/* ── a button that cannot work ──────────────────────────────────────────
   After Effects does not expose every menu command to scripting, and which
   ones vary by version. Anything that will not resolve is disabled rather
   than left looking alive — a dead button that looks alive is how Nathan
   ended up stuck in 4 Views with no way back. */
.fs-chip.is-dead,
.fs-btn.is-dead{
  opacity:.32;cursor:not-allowed;
  border-style:dashed;
  color:var(--dimmer);background:transparent;box-shadow:none;
}
.fs-chip.is-dead:hover,
.fs-btn.is-dead:hover{color:var(--dimmer);border-color:var(--edge);box-shadow:none}