/* ==================================================================
   System films · showreel-grade films for system case studies.
   One stage system (.sy-*), engine in js/system-films.js.
   seo-engine: dark ink, teal signal, the living sitemap.
   ================================================================== */
.syfilm { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#0B0D0D; cursor:pointer; isolation:isolate; contain:layout paint; }
.syfilm.v { aspect-ratio:9/16; }
.sy-stage { --bg:#0B0D0D; --fg:#EEF3F1; --mut:#7C8986; --card:#141918; --card2:#181E1D; --line:rgba(238,243,241,.1); --acc:#00A89D; --acc2:#0099D6; --hot:#3FE0C8; --warn:#F2A541; --bad:#FF5A5F;
  position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; overflow:hidden; font-family:'Geist','Inter',system-ui,sans-serif; color:var(--fg); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; background:var(--bg); }
.sy-stage.sy-v { width:1080px; height:1920px; }
.sy-stage * { box-sizing:border-box; }
.sy-stage :is(h2,h3,h4) { font-family:'Geist','Inter',system-ui,sans-serif; color:var(--fg); margin:0; font-style:normal; }
.sy-stage p { margin:0; }
.sy-bg { position:absolute; inset:0; background:radial-gradient(1100px 700px at 75% 30%, rgba(0,168,157,.13), transparent 60%), radial-gradient(900px 700px at 5% 100%, rgba(0,153,214,.10), transparent 60%), var(--bg); }
.sy-bg::after { content:''; position:absolute; inset:0; opacity:.045; mix-blend-mode:screen; 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"); }
.sy-tiles { position:absolute; left:0; top:0; width:100%; height:100%; }
.sy-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.sy-k { white-space:nowrap; }
.sy-m { font-family:'Geist Mono','JetBrains Mono',ui-monospace,monospace; font-size:17px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); }
.sy-ser { font-family:'Instrument Serif','Libre Baskerville',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
.sy-open, .sy-mani, .sy-sc, .sy-chk, .sy-end { position:absolute; inset:0; display:none; }
.sy-caret { display:inline-block; width:4px; height:1em; margin-left:6px; vertical-align:-.12em; background:var(--hot); }
.sy-ck { width:22px; height:22px; } .sy-ck path { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* ---------- open ---------- */
.sy-search { position:absolute; left:50%; top:470px; width:1080px; margin-left:-540px; height:132px; display:flex; align-items:center; gap:28px; padding:0 46px; border-radius:999px; background:rgba(20,25,24,.92); border:2px solid var(--line); box-shadow:0 40px 100px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(0,168,157,.12); font-family:'Geist Mono',ui-monospace,monospace; font-size:52px; letter-spacing:-.01em; color:var(--fg); }
.sy-search svg { flex:none; width:52px; height:52px; fill:none; stroke:var(--acc); stroke-width:2.4; stroke-linecap:round; }
.sy-res { position:absolute; left:0; right:0; top:640px; text-align:center; font-size:24px; color:var(--hot); }

/* ---------- manifesto ---------- */
.sy-ml { position:absolute; left:0; right:0; text-align:center; font-weight:600 !important; font-size:150px; line-height:1; letter-spacing:-.06em; }
.sy-ml[data-i="0"] { top:230px; } .sy-ml[data-i="1"] { top:400px; } .sy-ml[data-i="2"] { top:570px; }
.sy-ans { position:absolute; left:0; right:0; top:640px; text-align:center; font-size:190px; line-height:1; color:var(--hot) !important; }
.sy-ans .w { background:linear-gradient(120deg,#3FE0C8,#0099D6); -webkit-background-clip:text; background-clip:text; color:transparent; padding:0 .06em .12em; }

/* ---------- scene layout ---------- */
.sy-txt { position:absolute; left:140px; top:290px; width:660px; }
.sy-kick { color:var(--acc); }
.sy-h { margin-top:26px !important; font-weight:500 !important; font-size:72px; line-height:1.05; letter-spacing:-.05em; }
.sy-s { margin-top:28px !important; font-size:44px; line-height:1.15; color:var(--mut); }
.sy-s .w { color:var(--fg); opacity:.75; }
.sy-vis { position:absolute; left:880px; top:180px; width:900px; height:720px; }

/* connect */
.sy-cables { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.sy-cab { fill:none; stroke:rgba(0,168,157,.55); stroke-width:3; stroke-dasharray:1; stroke-dashoffset:1; }
.sy-node { position:absolute; left:0; width:300px; padding:26px 28px; border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 30px 60px -30px rgba(0,0,0,.8); }
.sy-n1 { top:90px; } .sy-n2 { top:470px; }
.sy-node .sy-m { color:var(--acc); font-size:15px; }
.sy-node strong { display:block; margin-top:12px; font-weight:600; font-size:36px; letter-spacing:-.035em; }
.sy-node p { margin-top:8px !important; font-size:21px; color:var(--mut); line-height:1.3; }
.sy-pk { position:absolute; left:0; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--hot); box-shadow:0 0 18px 4px rgba(63,224,200,.6); opacity:0; }
.sy-pk[data-c="1"] { background:#5BC2F0; box-shadow:0 0 18px 4px rgba(0,153,214,.6); }
.sy-term { position:absolute; left:520px; top:230px; width:380px; min-height:270px; padding:0 26px 24px; border-radius:18px; background:#070909; box-shadow:0 0 0 1px rgba(0,168,157,.35), 0 40px 90px -40px rgba(0,168,157,.55); font-family:'Geist Mono',ui-monospace,monospace; font-size:21px; line-height:1.5; }
.sy-tbar { display:flex; align-items:center; gap:8px; height:50px; margin:0 -26px 14px; padding:0 18px; border-bottom:1px solid var(--line); }
.sy-tbar i { width:12px; height:12px; border-radius:50%; background:#2A3331; } .sy-tbar span { margin-left:10px; font-size:15px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }
.sy-term p { min-height:1.5em; color:var(--fg); white-space:nowrap; } .sy-term p.ok { color:var(--hot); margin-bottom:10px !important; }
.sy-term .sy-caret { height:22px; }

/* guard */
.sy-panel { position:absolute; left:0; top:40px; width:900px; padding:26px 24px 22px; border-radius:22px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 50px 100px -50px rgba(0,0,0,.9); }
.sy-ph { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; padding:0 6px; }
.sy-ph .sy-m { color:var(--acc); }
.sy-cnt { font-family:'Geist Mono',monospace; font-weight:500; font-size:30px; color:var(--fg); font-variant-numeric:tabular-nums; }
.sy-gcan { display:block; width:852px; height:372px; }
.sy-log { margin-top:18px; padding:18px 22px; min-height:136px; border-radius:14px; background:#070909; font-family:'Geist Mono',monospace; font-size:23px; line-height:1.55; }
.sy-log p { min-height:1.55em; white-space:nowrap; } .sy-log p.err { color:#FF7A7E; } .sy-log p.ok { color:var(--hot); }
.sy-404 { position:absolute; right:40px; top:210px; display:flex; align-items:center; gap:14px; padding:14px 20px; border-radius:12px; background:var(--bad); color:#fff; box-shadow:0 20px 50px -14px rgba(255,90,95,.7); opacity:0; }
.sy-404 b { font-family:'Geist Mono',monospace; font-size:34px; font-weight:500; } .sy-404 span { font-size:22px; }

/* ping */
.sy-orbit { position:absolute; left:0; top:0; width:900px; height:560px; }
.sy-rp { position:absolute; left:50%; top:50%; width:700px; height:700px; margin:-350px 0 0 -350px; border-radius:50%; border:2px solid rgba(0,168,157,.55); opacity:0; }
.sy-core { position:absolute; left:50%; top:50%; width:440px; margin:-70px 0 0 -220px; padding:24px 30px; border-radius:22px; text-align:center; background:linear-gradient(135deg,rgba(0,168,157,.22),rgba(0,153,214,.18)); box-shadow:0 0 0 2px rgba(63,224,200,.6), 0 30px 90px -20px rgba(0,168,157,.6); }
.sy-core .sy-m { color:var(--hot); } .sy-core strong { display:block; margin-top:8px; font-weight:600; font-size:38px; letter-spacing:-.03em; }
.sy-eng { position:absolute; width:190px; padding:16px 18px; border-radius:16px; text-align:center; background:var(--card); border:2px solid var(--line); }
.sy-eng strong { display:block; font-weight:600; font-size:30px; letter-spacing:-.03em; }
.sy-eng span { display:block; margin-top:4px; font-family:'Geist Mono',monospace; font-size:17px; letter-spacing:.1em; color:var(--hot); opacity:0; }
.sy-eng[data-i="0"] { left:10px; top:20px; } .sy-eng[data-i="1"] { left:355px; top:-30px; } .sy-eng[data-i="2"] { left:700px; top:20px; }
.sy-eng[data-i="3"] { left:60px; top:420px; } .sy-eng[data-i="4"] { left:650px; top:420px; }
.sy-gnote { position:absolute; left:120px; right:120px; top:600px; padding:20px 26px; border-radius:16px; border:1px dashed rgba(238,243,241,.25); background:rgba(11,13,13,.7); }
.sy-gnote .sy-m { color:var(--warn); } .sy-gnote p { margin-top:8px !important; font-size:27px; color:var(--fg); line-height:1.3; } .sy-gnote b { font-weight:600; color:var(--hot); }

/* sweep */
.sy-list { position:absolute; left:0; top:20px; width:900px; padding:22px 24px; border-radius:22px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 50px 100px -50px rgba(0,0,0,.9); overflow:hidden; }
.sy-scan { position:absolute; left:0; right:0; top:22px; height:60px; background:linear-gradient(180deg, transparent, rgba(63,224,200,.18) 60%, rgba(63,224,200,.55) 61%, transparent 63%); pointer-events:none; opacity:0; }
.sy-row { display:flex; justify-content:space-between; align-items:center; height:58px; border-bottom:1px solid var(--line); }
.sy-row:last-child { border-bottom:0; }
.sy-row code { font-family:'Geist Mono',monospace; font-size:21px; color:var(--fg); opacity:.85; }
.sy-row span { flex:none; padding:7px 14px; border-radius:999px; font-size:17px; font-weight:600; opacity:0; }
.sy-row span.in { background:rgba(0,168,157,.18); color:var(--hot); } .sy-row span.out { background:rgba(242,165,65,.16); color:var(--warn); }
.sy-pct { position:absolute; left:0; right:0; top:560px; display:flex; align-items:baseline; gap:24px; flex-wrap:wrap; padding:0 8px; }
.sy-pct strong { font-weight:600; font-size:120px; line-height:1; letter-spacing:-.06em; background:linear-gradient(120deg,#3FE0C8,#0099D6); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; }
.sy-pct span { font-size:28px; color:var(--fg); } .sy-pct em { font-style:normal; font-family:'Geist Mono',monospace; font-size:17px; letter-spacing:.12em; text-transform:uppercase; color:var(--mut); }

/* ---------- checkpoint ---------- */
.sy-ctxt { position:absolute; left:140px; top:190px; width:700px; }
.sy-big { margin-top:20px; display:flex; align-items:baseline; gap:26px; font-weight:600; font-size:190px; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.sy-from { color:var(--mut); } .sy-arr { font-size:110px; color:var(--acc); }
.sy-to { background:linear-gradient(120deg,#3FE0C8,#0099D6); -webkit-background-clip:text; background-clip:text; color:transparent; min-width:3.2ch; }
.sy-cap { margin-top:22px !important; font-size:40px; line-height:1.2; letter-spacing:-.02em; }
.sy-cap .sy-ser { color:var(--mut); }
.sy-caveat { margin-top:40px; padding:22px 26px; border-radius:16px; border:2px solid rgba(242,165,65,.6); background:rgba(242,165,65,.08); }
.sy-caveat .sy-m { color:var(--warn); } .sy-caveat p { margin-top:8px !important; font-size:34px; letter-spacing:-.02em; }
.sy-chart { position:absolute; left:900px; top:200px; width:880px; height:560px; padding:30px 36px; border-radius:24px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 50px 100px -50px rgba(0,0,0,.9); }
.sy-chl { color:var(--acc); }
.sy-bars { position:absolute; left:36px; right:36px; top:96px; bottom:96px; display:grid; grid-template-columns:repeat(8,1fr); gap:20px; align-items:end; }
.sy-bar { position:relative; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; }
.sy-bar i { display:block; width:100%; border-radius:10px 10px 4px 4px; background:rgba(238,243,241,.16); transform-origin:50% 100%; transform:scaleY(0); }
.sy-bar.hi i { background:linear-gradient(180deg,#3FE0C8,#0099D6); box-shadow:0 0 40px -6px rgba(0,168,157,.6); }
.sy-bar em { font-style:normal; font-family:'Geist Mono',monospace; font-size:22px; color:var(--fg); margin-bottom:10px; opacity:0; font-variant-numeric:tabular-nums; }
.sy-bar span { position:absolute; bottom:-40px; font-family:'Geist Mono',monospace; font-size:16px; letter-spacing:.1em; color:var(--mut); }
.sy-split { position:absolute; left:36px; right:36px; bottom:22px; display:grid; grid-template-columns:1fr 1fr; gap:20px; font-family:'Geist Mono',monospace; font-size:16px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); }
.sy-split span { border-top:2px solid var(--line); padding-top:8px; text-align:center; } .sy-split span + span { border-color:var(--acc); color:var(--hot); }
.sy-stamp { position:absolute; left:1070px; top:810px; padding:16px 26px; border:4px solid var(--hot); border-radius:12px; color:var(--hot); font-family:'Geist Mono',monospace; font-weight:500; font-size:24px; letter-spacing:.1em; text-transform:uppercase; line-height:1.35; background:rgba(11,13,13,.85); opacity:0; }
.sy-stamp span { display:block; }

/* ---------- end ---------- */
.sy-eh { position:absolute; left:0; right:0; top:300px; text-align:center; font-weight:500 !important; font-size:110px; line-height:1.04; letter-spacing:-.055em; }
.sy-eh .sy-ser { color:var(--hot); }
.sy-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; }
.sy-rip { position:absolute; left:62%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; background:#fff; opacity:0; }
.sy-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,.4)); }
.sy-logo { position:absolute; left:830px; top:320px; width:260px; height:auto; overflow:visible; opacity:0; }
.sy-word { position:absolute; left:0; right:0; top:510px; text-align:center; font-weight:600; font-size:66px; }
.sy-stage .ch { display:inline-block; width:.8em; text-align:center; } .sy-stage .sp { display:inline-block; width:.3em; }
.sy-url { position:absolute; left:0; right:0; top:620px; text-align:center; color:var(--hot); text-transform:none; letter-spacing:.05em; font-size:26px; opacity:0; }

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

/* ---------- 9:16 ---------- */
.sy-v .sy-search { top:820px; width:960px; margin-left:-480px; height:120px; font-size:44px; padding:0 40px; }
.sy-v .sy-res { top:980px; }
.sy-v .sy-ml { font-size:130px; } .sy-v .sy-ml[data-i="0"] { top:560px; } .sy-v .sy-ml[data-i="1"] { top:720px; } .sy-v .sy-ml[data-i="2"] { top:880px; }
.sy-v .sy-ans { top:980px; font-size:150px; }
.sy-v .sy-txt { left:80px; top:220px; width:920px; }
.sy-v .sy-h { font-size:80px; } .sy-v .sy-s { font-size:46px; }
.sy-v .sy-vis { left:90px; top:720px; }
.sy-v .sy-ctxt { left:80px; top:200px; width:920px; }
.sy-v .sy-chart { left:90px; top:1110px; width:900px; height:560px; }
.sy-v .sy-stamp { left:auto; right:90px; top:1700px; }
.sy-v .sy-eh { top:560px; font-size:100px; } .sy-v .sy-btn { top:900px; font-size:36px; }
.sy-v .sy-logo { left:410px; top:700px; } .sy-v .sy-word { top:890px; } .sy-v .sy-url { top:1000px; font-size:24px; }
.sy-v .sy-c-tl, .sy-v .sy-c-tr { top:110px; } .sy-v .sy-c-tl { left:50px; } .sy-v .sy-c-tr { right:50px; } .sy-v .sy-prog { left:50px; right:50px; } .sy-v .sy-c-bl { left:50px; }

/* render mode */
.sy-render, .sy-render body { margin:0; background:#000; overflow:hidden; }
.sy-render .syfilm { width:1920px; height:1080px; aspect-ratio:auto; }
.sy-render .syfilm.v { width:1080px; height:1920px; }

/* ============ embed on the system page ============ */
.syf-section .section-header { margin-bottom:2rem; }
.syf-frame { position:relative; border-radius:18px; overflow:hidden; background:#000; border:1px solid var(--border); box-shadow:0 50px 120px -60px rgba(0,168,157,.5); }
.syf-frame:fullscreen { border-radius:0; display:flex; flex-direction:column; justify-content:center; }
.syf-frame:fullscreen .syfilm { width:min(100vw, calc((100vh - 60px) * 16 / 9)); margin:0 auto; }
.syf-poster { position:absolute; left:0; top:0; width:100%; height:calc(100% - 60px); object-fit:cover; z-index:1; }
.syfilm.is-ready ~ .syf-poster { display:none; }
.syf-start { position:absolute; inset:0 0 60px 0; z-index:5; display:grid; place-items:center; border:0; cursor:pointer; background:radial-gradient(ellipse at center, rgba(11,13,13,.15), rgba(11,13,13,.55)); font:inherit; color:var(--text); }
.syf-start[hidden] { display:none; }
.syf-start-in { display:flex; align-items:center; gap:1rem; padding:.7rem 1.4rem .7rem .7rem; border-radius:999px; background:rgba(245,245,240,.95); color:#111110; box-shadow:0 24px 50px -20px rgba(0,0,0,.7); }
.syf-start-btn { width:52px; height:52px; border-radius:50%; background:var(--grad); display:grid; place-items:center; } .syf-start-btn svg { width:18px; height:18px; margin-left:3px; fill:#fff; }
.syf-start-in b { display:block; font-weight:600; font-size:1rem; text-align:left; } .syf-start-in span span { display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:#6B6B68; text-align:left; }
.syf-bar { display:flex; align-items:center; gap:.9rem; height:60px; padding:0 1rem; background:#141413; border-top:1px solid var(--border); font-family:var(--f-mono); font-size:.76rem; color:var(--text-muted); position:relative; z-index:6; }
.syf-ib { flex:none; display:inline-grid; place-items:center; width:38px; height:38px; border-radius:9px; border:0; background:transparent; color:var(--text); cursor:pointer; } .syf-ib:hover { background:rgba(255,255,255,.06); } .syf-ib svg { width:18px; height:18px; fill:currentColor; }
.syf-ib:focus-visible, .syf-scrub:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
#syPlay .i-pause, #syPlay[data-state="playing"] .i-play { display:none; } #syPlay[data-state="playing"] .i-pause { display:block; }
#sySound .i-off, #sySound[data-on="0"] .i-on { display:none; } #sySound[data-on="0"] .i-off { display:block; }
.syf-time { flex:none; min-width:9ch; color:var(--text); font-variant-numeric:tabular-nums; }
.syf-scrub { --p:0%; flex:1; min-width:60px; -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; margin:0; cursor:pointer; background:linear-gradient(90deg,var(--teal),var(--blue)) 0/var(--p) 100% no-repeat, rgba(255,255,255,.12); }
.syf-scrub::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; } .syf-scrub::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:#fff; }
.syf-dl { flex:none; display:inline-flex; align-items:center; gap:.45rem; height:36px; padding:0 .9rem; border-radius:999px; background:var(--grad); color:#fff; text-decoration:none; font-weight:600; font-size:.78rem; font-family:var(--f-sans); } .syf-dl:hover { color:#fff; } .syf-dl svg { width:15px; height:15px; fill:currentColor; }
.syf-dl--ghost { background:transparent; border:1px solid var(--border); color:var(--text); }
.syf-cap { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:.9rem; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
@media (max-width: 560px) { .syf-dl span, .syf-start-in span span { display:none; } .syf-dl--ghost { display:none; } .syf-bar { gap:.4rem; padding:0 .5rem; } }
@media (prefers-reduced-motion: reduce) { .syf-start-in span span::after { content:' · motion reduced'; } }