/* ==================================================================
   System film · Four Sparrows (.fs-*). Engine: js/system-film-four-sparrows.js
   The club's own world: ivory paper, garden green, dusty coral, brushed gold.
   Player chrome (.syf-*) lives in css/system-films.css.
   ================================================================== */
.fs-stage { --bg:#F6F4F0; --fg:#353C4D; --mut:#857C72; --card:#FFFFFF; --line:rgba(53,60,77,.12); --acc:#677391; --acc2:#7A6658; --gold:#A9B1C4; --sage:#8E97AD;
  position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; overflow:hidden; font-family:'Montserrat','Geist',system-ui,sans-serif; color:var(--fg); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; background:var(--bg); }
.fs-stage.fs-v { width:1080px; height:1920px; }
.fs-stage * { box-sizing:border-box; }
.fs-stage :is(h2,h3,h4) { font-family:'Cormorant Garamond','Libre Baskerville',Georgia,serif; color:var(--fg); margin:0; font-style:normal; font-weight:500; }
.fs-stage p { margin:0; }
.fs-stage img { display:block; width:100%; height:auto; }
.fs-bg { position:absolute; inset:0; background:radial-gradient(1100px 760px at 78% 22%, rgba(103,115,145,.16), transparent 62%), radial-gradient(900px 700px at 8% 100%, rgba(122,102,88,.14), transparent 60%), var(--bg); }
.fs-bg::after { content:''; position:absolute; inset:0; opacity:.07; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fs-qf { position:absolute; left:50%; top:50%; width:760px; height:811px; margin:-405px 0 0 -380px; overflow:visible; pointer-events:none; }
.fs-qf path { fill:none; stroke:var(--gold); stroke-width:1.2; stroke-dasharray:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke; }
.fs-big, .fs-pinc strong, .fs-zero strong { font-feature-settings:'lnum' 1, 'tnum' 1; font-variant-numeric:lining-nums tabular-nums; }
.fs-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.fs-k { white-space:nowrap; }
.fs-m { font-family:'Montserrat','Geist',sans-serif; font-size:16px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--mut); }
.fs-ser { font-family:'Cormorant Garamond','Libre Baskerville',Georgia,serif; font-style:italic; font-weight:500; }
.fs-open, .fs-brief, .fs-sc, .fs-res, .fs-end { position:absolute; inset:0; display:none; }

/* tiles */
.fs-tile { position:relative; width:120px; height:160px; filter:drop-shadow(0 18px 22px rgba(53,60,77,.22)); }
.fs-tile svg { display:block; width:100%; height:100%; overflow:visible; }
.fs-tb { fill:#FFFDF7; stroke:rgba(94,111,82,.4); stroke-width:1.2; }
.fs-tile::after { content:''; position:absolute; left:3%; right:3%; bottom:-7px; height:12px; border-radius:0 0 10px 10px; background:#6E8461; z-index:-1; }
.fs-set::after { background:#677391; } .fs-set .fs-tb { stroke:rgba(103,115,145,.45); }
.fs-bird [pathLength] { stroke-dasharray:1; stroke-dashoffset:1; }

/* open */
.fs-hero { position:absolute; left:50%; top:330px; width:240px; height:320px; margin-left:-120px; transform-style:preserve-3d; backface-visibility:hidden; }
.fs-ok { position:absolute; left:0; right:0; top:610px; text-align:center; color:var(--acc2); }
.fs-l1 { position:absolute; left:0; right:0; top:650px; text-align:center; font-size:96px; line-height:1.05; letter-spacing:-.02em; }
.fs-l2 { position:absolute; left:0; right:0; top:770px; text-align:center; font-size:80px; line-height:1.05; color:var(--acc) !important; }

/* text column */
.fs-txt { position:absolute; left:140px; top:280px; width:680px; }
.fs-kick { color:var(--acc2); }
.fs-h { margin-top:24px !important; font-size:88px; line-height:1.02; letter-spacing:-.015em; }
.fs-s { margin-top:28px !important; font-size:46px; line-height:1.12; color:var(--acc); }
.fs-vis { position:absolute; left:900px; top:170px; width:880px; height:740px; }
.fs-card { position:absolute; border-radius:14px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--line), 0 50px 90px -40px rgba(53,60,77,.45); }

/* brief */
.fs-sw { position:absolute; left:20px; top:40px; display:grid; grid-template-columns:repeat(2,1fr); gap:28px; width:840px; }
.fs-swatch { padding:14px 14px 18px; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 30px 60px -30px rgba(53,60,77,.4); }
.fs-swatch i { display:block; height:250px; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.fs-swatch strong { display:block; margin-top:16px; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:32px; }
.fs-swatch em { display:block; margin-top:6px; font-style:normal; font-size:16px; letter-spacing:.06em; color:var(--mut); }
.fs-swatch span { display:block; margin-top:4px; font-family:'Montserrat',sans-serif; font-size:16px; letter-spacing:.08em; color:var(--mut); }
.fs-mood { position:absolute; left:20px; top:500px; display:flex; flex-direction:column; gap:14px; }
.fs-mood span { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:44px; color:var(--acc2); }
.fs-mood span::before { content:'✦'; font-style:normal; font-size:22px; margin-right:16px; color:var(--gold); vertical-align:.25em; }

/* set 1 · brand */
.fs-mock { left:340px; top:20px; width:520px; transform:rotate(4deg); }
.fs-logo-card { left:20px; top:170px; width:600px; padding:20px; background:#FFFFFF; }
.fs-fmts { position:absolute; left:20px; top:690px; display:flex; gap:10px; flex-wrap:wrap; }
.fs-fmts span { padding:8px 14px; border-radius:999px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-family:'Montserrat',sans-serif; font-size:16px; letter-spacing:.1em; color:var(--acc); }

/* set 2 · website */
.fs-concept { position:absolute; left:300px; top:40px; width:280px; height:380px; padding:22px; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 30px 60px -30px rgba(53,60,77,.45); }
.fs-concept .fs-m { color:var(--acc2); font-size:15px; }
.fs-concept i { display:block; height:14px; margin-top:18px; border-radius:10px; background:var(--line); }
.fs-concept i:first-of-type { height:150px; background:linear-gradient(135deg, rgba(138,154,123,.35), rgba(201,138,125,.3)); }
.fs-browser { position:absolute; left:0; top:250px; width:880px; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--line), 0 60px 110px -50px rgba(53,60,77,.55); }
.fs-bbar { display:flex; align-items:center; gap:8px; height:46px; padding:0 18px; background:#ECEEF3; border-bottom:1px solid var(--line); }
.fs-bbar i { width:12px; height:12px; border-radius:50%; background:rgba(53,60,77,.18); }
.fs-bbar span { margin-left:12px; font-family:'Geist Mono',monospace; font-size:17px; color:var(--fg); }
.fs-bbar b { margin-left:auto; padding:4px 10px; border-radius:999px; background:var(--acc); color:#fff; font-family:'Montserrat',sans-serif; font-size:13px; letter-spacing:.12em; font-weight:500; }
.fs-stamp2 { position:absolute; right:-10px; top:200px; padding:14px 22px; border:4px solid var(--acc2); border-radius:12px; color:var(--acc2); background:rgba(251,247,238,.92); font-family:'Montserrat',sans-serif; font-weight:500; font-size:20px; letter-spacing:.1em; text-transform:uppercase; line-height:1.4; opacity:0; }
.fs-stamp2 span { display:block; } .fs-stamp2 span + span { font-size:15px; }

/* set 3 · game */
.fs-tablet { position:absolute; left:20px; top:0; width:840px; border-radius:28px; overflow:hidden; border:14px solid #353C4D; box-shadow:0 60px 110px -50px rgba(53,60,77,.6); }
.fs-rack { position:absolute; left:0; top:470px; width:880px; display:flex; justify-content:center; gap:10px; }
.fs-rack .fs-tile { width:86px; height:115px; }
.fs-charl { position:absolute; left:0; right:0; top:612px; text-align:center; color:var(--acc2); }
.fs-bam { position:absolute; left:335px; top:110px; width:210px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.fs-bam .fs-tile { width:210px; height:280px; }
.fs-bam p { padding:10px 18px; border-radius:999px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-size:26px; white-space:nowrap; }
.fs-bam p b { font-weight:600; color:var(--acc2); }

/* set 4 · pinterest */
.fs-wall { position:absolute; left:0; top:-170px; width:560px; height:1080px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; overflow:hidden; -webkit-mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent); mask-image:linear-gradient(transparent, #000 18%, #000 82%, transparent); }
.fs-col { display:flex; flex-direction:column; gap:12px; }
.fs-col img { border-radius:10px; box-shadow:0 10px 24px -14px rgba(53,60,77,.6); }
.fs-col[data-c="1"], .fs-col[data-c="3"] { margin-top:80px; }
.fs-pinc { position:absolute; left:600px; top:20px; display:flex; flex-direction:column; }
.fs-pinc strong { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:150px; line-height:.95; color:var(--acc2); font-variant-numeric:tabular-nums; }
.fs-stack { position:absolute; left:600px; top:310px; width:280px; display:flex; flex-direction:column; align-items:stretch; }
.fs-node { padding:14px 18px; border-radius:14px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 20px 40px -24px rgba(53,60,77,.45); }
.fs-node strong { display:block; font-weight:600; font-size:24px; letter-spacing:-.02em; } .fs-node span { font-size:18px; color:var(--mut); }
.fs-wire { display:block; width:3px; height:26px; margin-left:30px; background:var(--gold); transform-origin:50% 0; }
.fs-token { position:absolute; left:-24px; top:0; width:12px; height:100%; } .fs-token::after { content:''; position:absolute; left:0; top:0; width:12px; height:12px; border-radius:50%; background:var(--acc2); }
.fs-zero { position:absolute; left:600px; top:610px; display:flex; align-items:baseline; gap:14px; }
.fs-zero strong { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:110px; color:var(--acc); line-height:1; } .fs-zero span { font-size:30px; color:var(--mut); }

/* result */
.fs-rk { position:absolute; left:0; right:0; top:150px; text-align:center; color:var(--acc2); }
.fs-big { position:absolute; left:0; right:0; top:190px; text-align:center; font-family:'Cormorant Garamond',serif; font-weight:600; font-size:280px; line-height:1; letter-spacing:-.02em; color:var(--acc); font-variant-numeric:tabular-nums; }
.fs-rl { position:absolute; left:0; right:0; top:500px; text-align:center; font-family:'Cormorant Garamond',serif; font-size:52px; }
.fs-rs { position:absolute; left:0; right:0; top:572px; text-align:center; font-family:'Montserrat',sans-serif; font-size:20px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc2); }
.fs-hand { position:absolute; left:0; right:0; top:650px; display:flex; justify-content:center; gap:6px; }
.fs-hand .fs-set { width:150px; height:200px; border-radius:16px; }
.fs-hl { position:absolute; left:0; right:0; top:900px; text-align:center; color:var(--acc); }

/* end */
.fs-eh { position:absolute; left:0; right:0; top:280px; text-align:center; font-size:130px; line-height:1; letter-spacing:-.01em; }
.fs-eh .fs-ser { color:var(--acc2); }
.fs-btn { position:absolute; left:0; right:0; top:620px; margin:0 auto; width:max-content; display:flex; align-items:center; gap:18px; padding:28px 48px; border-radius:999px; background:var(--fg); color:var(--bg); font-weight:600; font-size:40px; letter-spacing:-.025em; overflow:hidden; opacity:0; }
.fs-rip { position:absolute; left:62%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; background:#fff; opacity:0; }
.fs-cursor { position:absolute; left:0; top:0; width:40px; height:40px; transform-origin:5px 3px; opacity:0; z-index:12; filter:drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.fs-logo { position:absolute; left:830px; top:320px; width:260px; height:auto; overflow:visible; opacity:0; }
.fs-word { position:absolute; left:0; right:0; top:510px; text-align:center; font-weight:600; font-size:66px; color:var(--fg); }
.fs-stage .ch { display:inline-block; width:.8em; text-align:center; } .fs-stage .sp { display:inline-block; width:.3em; }
.fs-url { position:absolute; left:0; right:0; top:620px; text-align:center; color:var(--acc2); text-transform:none; letter-spacing:.05em; font-size:26px; opacity:0; }

/* pen + chrome */
.fs-pen { position:absolute; left:0; top:0; z-index:11; pointer-events:none; overflow:visible; }
.fs-ink { fill:none; stroke:var(--acc2); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.fs-chrome { position:absolute; inset:0; z-index:10; pointer-events:none; font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--mut); }
.fs-c-tl { position:absolute; left:60px; top:50px; font-weight:500; } .fs-c-tr { position:absolute; right:60px; top:50px; color:var(--acc2); }
.fs-c-bl { position:absolute; left:60px; bottom:62px; opacity:0; }
.fs-prog { position:absolute; left:60px; right:60px; bottom:40px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.fs-prog i { display:block; height:100%; background:linear-gradient(90deg,#677391,#7A6658); transform-origin:0 50%; transform:scaleX(0); }

/* 9:16 */
.fs-v .fs-hero { top:560px; } .fs-v .fs-ok { top:880px; } .fs-v .fs-l1 { top:930px; font-size:76px; padding:0 50px; } .fs-v .fs-l2 { top:1130px; font-size:70px; padding:0 50px; }
.fs-v .fs-txt { left:80px; top:200px; width:920px; }
.fs-v .fs-h { font-size:92px; } .fs-v .fs-s { font-size:48px; }
.fs-v .fs-vis { left:100px; top:760px; }
.fs-v .fs-rk { top:420px; } .fs-v .fs-big { top:470px; font-size:240px; } .fs-v .fs-rl { top:760px; font-size:46px; padding:0 60px; } .fs-v .fs-rs { top:900px; font-size:18px; }
.fs-v .fs-hand { top:1040px; } .fs-v .fs-hand .fs-set { width:120px; height:160px; } .fs-v .fs-hl { top:1250px; }
.fs-v .fs-eh { top:560px; font-size:120px; } .fs-v .fs-btn { top:900px; font-size:34px; }
.fs-v .fs-logo { left:410px; top:700px; } .fs-v .fs-word { top:890px; } .fs-v .fs-url { top:1000px; font-size:22px; }
.fs-v .fs-c-tl, .fs-v .fs-c-tr { top:110px; } .fs-v .fs-c-tl { left:50px; font-size:12px; } .fs-v .fs-c-tr { right:50px; } .fs-v .fs-prog { left:50px; right:50px; } .fs-v .fs-c-bl { left:50px; }
.fs-v .fs-qf { width:860px; height:918px; margin:-459px 0 0 -430px; }

/* render mode */
.sy-render .syfilm { width:1920px; height:1080px; aspect-ratio:auto; }
.sy-render .syfilm.v { width:1080px; height:1920px; }