/* /flash-patterns — "On the Vehicle" (public since 2026-09-06).
   The Rev 2 product pages' Pattern Studio instrument (.ppx-fr, The Rail),
   made universal: one bordered frame, the lineup strip under the head, the
   stage left, one control rail right. Tokens and the rail's measurements are
   the product pages' own (_ppx-style.php) so the two surfaces read as one
   instrument; only the display face differs (Oswald, which this page already
   loads, instead of the product pages' Eurostile). */

.fs-page{
  --pp-void:#000; --pp-panel:#0a0a0b; --pp-panel2:#0d0d0f; --pp-line:#1e1e22; --pp-line2:#2b2b30;
  --pp-ink:#f0efec; --pp-dim:#9a998f; --pp-faint:#6e6d66; --pp-red:#EA3000;
  --pp-lr:#ff2323; --pp-lb:#2f63ff; --pp-la:#ffb300; --pp-lw:#f2f2f2; --pp-lg:#29d763;
  --pp-disp:"Oswald",Impact,"Arial Narrow",sans-serif;
  --pp-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --rail:318px; --side:236px;
  background:#08090C; color:var(--pp-ink);
}
.fs-page *{box-sizing:border-box}
.fs-page button{font:inherit;color:inherit;cursor:pointer}
.fs-page button:focus-visible,.fs-page a:focus-visible,.fs-page select:focus-visible{outline:2px solid var(--pp-red);outline-offset:2px}
.fs-compact-product{display:none}

/* the section: the studio radial, the frame centred, nothing else */
.fs-wrap{
  display:flex;justify-content:center;padding:22px 22px 30px;
  background:radial-gradient(ellipse 70% 58% at 50% 40%,#131316 0%,#0a0a0c 72%);
  border-bottom:1px solid #151518;
}
/* frame width doubles as the height governor: stage height = (width - side - rail) / 1.339,
   so the viewport term keeps head + stage inside one screen */
.fs-frame{
  width:min(1520px,96vw,calc((100vh - 178px) * 1.339 + var(--side) + var(--rail)));
  border:1px solid var(--pp-line2);border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,#101013,#0b0b0d);box-shadow:0 30px 80px rgba(0,0,0,.55);
}

/* ---- head ---- */
.fs-head{display:flex;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--pp-line)}
.fs-head h1{margin:0;font:600 13px/1 var(--pp-disp);letter-spacing:.16em;text-transform:uppercase;color:#fff}
.fs-modes{display:flex;gap:5px;margin-left:6px}
.fs-modes[hidden]{display:none}
.fs-mode{font:500 9.5px var(--pp-mono);letter-spacing:.1em;text-transform:uppercase;color:#9a998f;background:#101014;border:1px solid #232327;border-radius:4px;padding:6px 12px}
.fs-mode:hover{border-color:#3a3a41;color:#d6d5cd}
.fs-mode.on{color:#fff;border-color:var(--pp-red);background:rgba(255,48,0,.08)}
.fs-tag{margin-left:auto;font:400 10px var(--pp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pp-faint);text-align:right;white-space:nowrap}

/* ---- the lineup: the product wing, left of the vehicle ---- */
.fs-side{
  position:absolute;top:0;left:0;bottom:0;width:var(--side);border-right:1px solid var(--pp-line);
  display:flex;flex-direction:column;min-height:0;background:#0d0d10;
}
.fs-side-head{display:flex;align-items:baseline;justify-content:space-between;padding:13px 14px 9px;border-bottom:1px solid var(--pp-line)}
.fs-side-cnt{font:400 8.5px var(--pp-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pp-faint)}
.fs-side-list{flex:1;overflow-y:auto;min-height:0;padding:2px 8px 12px;scrollbar-width:thin;scrollbar-color:#2e2e35 transparent}
.fs-group{display:block}
.fs-group>b{display:block;font:400 8.5px var(--pp-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--pp-faint);padding:12px 6px 6px;position:sticky;top:0;background:linear-gradient(180deg,#0d0d10 74%,transparent);z-index:1}
.fs-prod{
  display:flex;align-items:center;gap:9px;width:100%;padding:5px 7px 5px 5px;margin-bottom:4px;text-align:left;
  background:#101014;border:1px solid #232327;border-radius:4px;color:#a8a79e;
}
.fs-prod img{width:58px;aspect-ratio:16/10;object-fit:cover;border-radius:3px;background:#000;flex:none;display:block}
.fs-prod .n{display:block;font:600 11px/1.15 var(--pp-disp);letter-spacing:.06em;text-transform:uppercase;color:#d8d7d0}
.fs-prod .s{display:block;margin-top:3px;font:400 8px/1.2 var(--pp-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--pp-faint);white-space:nowrap}
.fs-prod:hover{border-color:#3a3a41}
.fs-prod:hover .n{color:#fff}
.fs-prod.on{border-color:var(--pp-red);background:rgba(255,48,0,.08)}
.fs-prod.on .n{color:#fff}
.fs-prod.on .s{color:#c9a89a}

/* ---- body: stage + rail ---- */
.fs-body{position:relative}
.fs-stage{
  position:relative;margin:0 var(--rail) 0 var(--side);aspect-ratio:2048/1529;overflow:hidden;
  background:radial-gradient(ellipse 70% 58% at 50% 46%,#15151a 0%,#0b0b0d 74%);
}
.fs-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fs-ov{position:absolute;height:auto;display:block;z-index:3}
.fs-host{position:absolute;z-index:6;pointer-events:none}
.fs-host .lfr-layer{position:absolute;inset:0;width:100%;height:100%;display:block}
.fs-host .lfr-layer--light{mix-blend-mode:screen}
/* the module diagram, in the same seat, for products whose vehicle art has
   not landed: the strip sized by the module governor (--fp-frac vs the 49),
   read from the front (the 180 law); the Surface Mount ring is a plan and
   stays nose-up */
.fs-2d{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.fs-2d-stage{--fp-frac:1;width:min(86%,calc(1160px * var(--fp-frac)));min-width:0}
.fs-2d-stage.is-ring{width:min(80%,680px)}
.fs-2d-stage .synq-pp{display:flex;gap:2px;min-height:16px}
.fs-2d-stage .synq-pp i{flex:1;height:16px;border-radius:2px;background:#14181F;display:block}
.fs-2d-stage .synq-pp.synq-pp--shape{display:block}
.fs-2d-stage .synq-pp.synq-pp--shape svg{display:block;width:100%;height:100%;overflow:visible}
.fs-2d-stage:not(.is-ring) .synq-pp svg{transform:rotate(180deg)}
.fs-2d-note{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:400 9.5px var(--pp-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pp-faint);pointer-events:none}

.fs-rail{
  position:absolute;top:0;right:0;bottom:0;width:var(--rail);border-left:1px solid var(--pp-line);
  display:flex;flex-direction:column;min-height:0;background:#0d0d10;
}
.fs-top{padding:13px 16px 12px;border-bottom:1px solid var(--pp-line);display:flex;flex-direction:column;gap:10px}
.fs-read{font:400 10px var(--pp-mono);color:#d8d7d0;letter-spacing:.1em;text-transform:uppercase;min-height:12px;line-height:1.5}
.fs-read b{color:var(--pp-red);font-weight:500}
.fs-seat{display:flex;flex-direction:column;gap:5px}
.fs-seat[hidden]{display:none}
.fs-lab{font:400 9px var(--pp-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--pp-faint)}
.fs-hint{font:400 8.5px var(--pp-mono);letter-spacing:.04em;color:var(--pp-faint);line-height:1.5}
.fs-views{display:flex;gap:5px}
.fs-view{flex:1;font:600 11px var(--pp-disp);letter-spacing:.08em;text-transform:uppercase;color:#9a998f;background:#101014;border:1px solid #232327;border-radius:4px;padding:7px 4px;text-align:center}
.fs-view:hover{border-color:#3a3a41;color:#d6d5cd}
.fs-view.on{color:#fff;border-color:var(--pp-red);background:rgba(255,48,0,.08)}
/* the ladder: four seats, each wearing its line and its level */
.fs-lvls{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.fs-lvl{border:1px solid #232327;border-radius:3px;background:var(--pp-panel2);padding:6px 2px 5px;display:flex;flex-direction:column;align-items:center;gap:2px}
.fs-lvl .s-l{font:400 7.5px var(--pp-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--pp-faint)}
.fs-lvl .s-n{font:600 11px var(--pp-disp);letter-spacing:.06em;text-transform:uppercase;color:#d8d7d0}
.fs-lvl:hover{border-color:#3a3a41}
.fs-lvl.on{border-color:var(--pp-red);background:rgba(255,48,0,.07)}
.fs-lvl.on .s-n{color:#fff}
.fs-colors{display:flex;gap:9px;align-items:center;min-height:28px}
.fs-color{width:23px;height:23px;border-radius:50%;border:2px solid #232327;background:#0d0d0f;position:relative;padding:0}
.fs-color i{position:absolute;inset:4px;border-radius:50%;display:block;opacity:.3}
.fs-color.on{border-color:#6a6a72}
.fs-color.on i{opacity:1;box-shadow:0 0 9px var(--glow)}
.fs-color b{position:absolute;top:-6px;right:-7px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:#08090C;border:1px solid rgba(255,255,255,.35);font:500 8px/12px var(--pp-mono);color:#d8d7d0;text-align:center}
.fs-deals{display:flex;gap:5px}
.fs-deal{flex:1;font:500 9.5px var(--pp-mono);letter-spacing:.08em;text-transform:uppercase;color:#9a998f;background:#101014;border:1px solid #232327;border-radius:4px;padding:6px 4px;text-align:center}
.fs-deal:hover{border-color:#3a3a41;color:#d6d5cd}
.fs-deal.on{color:#fff;border-color:var(--pp-red);background:rgba(255,48,0,.08)}
.fs-sel{background:var(--pp-panel2);border:1px solid #29292e;border-radius:3px;padding:8px 10px;font:400 12px var(--pp-mono);color:#d8d7d0;appearance:auto}
.fs-sel option{background:#101014}

.fs-list{flex:1;overflow-y:auto;min-height:0;padding:2px 10px 12px;scrollbar-width:thin;scrollbar-color:#2e2e35 transparent}
.fs-ghead{display:block;font:400 8.5px var(--pp-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--pp-faint);padding:12px 6px 6px;position:sticky;top:0;background:linear-gradient(180deg,#0d0d10 74%,transparent);z-index:1}
.fs-pat{display:flex;align-items:center;gap:9px;width:100%;padding:6px 9px;margin-bottom:4px;background:#101014;border:1px solid #232327;border-radius:4px;color:#a8a79e;font-family:var(--pp-mono);text-align:left}
.fs-pat svg{width:26px;height:13px;flex:none;display:block}
.fs-pat span{font-size:9px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-pat:hover{border-color:#3a3a41;color:#d6d5cd}
.fs-pat.on{border-color:var(--pp-red);background:rgba(255,48,0,.08);color:#fff}

/* the door — the one thing the public player never had */
.fs-door{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 10px 10px;padding:10px 12px;
  background:var(--pp-red);color:#fff;text-decoration:none;border-radius:4px;
  font:600 12.5px var(--pp-disp);letter-spacing:.06em;text-transform:uppercase;
}
.fs-door small{font:400 8.5px var(--pp-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.fs-door:hover{background:#ff3d08}

/* phone: stage full width, the rail folds underneath in the same order */
@media (max-width:980px){
  .fs-wrap{padding:12px 12px 24px}
  .fs-frame{width:96vw}
  .fs-head{flex-wrap:wrap;gap:8px 12px;padding:10px 12px}
  .fs-tag{width:100%;margin-left:0;text-align:left}
  /* the product wing becomes a sideways strip of tiles above the stage */
  .fs-side{position:static;width:auto;border-right:0;border-bottom:1px solid var(--pp-line)}
  .fs-side-list{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:8px 10px 10px;scroll-snap-type:x proximity;scrollbar-width:none}
  .fs-side-list::-webkit-scrollbar{display:none}
  .fs-group{display:contents}
  .fs-group>b{display:none}
  .fs-prod{flex:0 0 132px;flex-direction:column;align-items:stretch;gap:5px;margin:0;scroll-snap-align:start}
  .fs-prod img{width:100%}
  .fs-prod .s{white-space:normal}
  .fs-stage{margin:0}
  .fs-rail{position:static;width:auto;border-left:0;border-top:1px solid var(--pp-line)}
  .fs-list{max-height:340px}
}