/* ==================================================================
   System film · Etsy to Pinterest (.ep-*). Engine: js/system-film-etsy-to-pinterest.js
   Coastal: deep ocean, sea foam, sunset coral, sand. The tide line runs through it.
   Player chrome (.syf-*) lives in css/system-films.css.
   ================================================================== */
.ep-stage { --bg:#0B1B2B; --fg:#F4EFE6; --mut:#8FA3B5; --card:#12283C; --card2:#183450; --line:rgba(244,239,230,.12); --foam:#7FD8D0; --coral:#FF7A59; --sand:#F2E3C9;
  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); }
.ep-stage.ep-v { width:1080px; height:1920px; }
.ep-stage * { box-sizing:border-box; }
.ep-stage :is(h2,h3,h4) { font-family:'Geist','Inter',system-ui,sans-serif; color:var(--fg); margin:0; font-style:normal; }
.ep-stage p { margin:0; }
.ep-stage img { display:block; width:100%; height:100%; object-fit:cover; }
.ep-bg { position:absolute; inset:0; background:radial-gradient(1100px 700px at 80% 15%, rgba(127,216,208,.14), transparent 60%), radial-gradient(1000px 700px at 5% 100%, rgba(255,122,89,.13), transparent 60%), linear-gradient(180deg, #0B1B2B 0%, #0E2438 100%); }
.ep-bg::after { content:''; position:absolute; inset:0; opacity:.05; 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"); }
.ep-tide { position:absolute; left:0; top:0; width:100%; height:120px; overflow:visible; pointer-events:none; }
.ep-wv { fill:none; stroke-linecap:round; }
.ep-wv.a { stroke:rgba(127,216,208,.55); stroke-width:3; }
.ep-wv.b { stroke:rgba(255,122,89,.35); stroke-width:2; transform:translateY(18px); }
.ep-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.ep-k { white-space:nowrap; }
.ep-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); }
.ep-ser { font-family:'Instrument Serif','Libre Baskerville',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
.ep-open, .ep-mess, .ep-sc, .ep-split, .ep-end { position:absolute; inset:0; display:none; }
.ep-ck { width:22px; height:22px; } .ep-ck path { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* open */
.ep-card { position:absolute; left:50%; top:200px; margin-left:-180px; border-radius:16px; overflow:hidden; border:3px solid transparent; box-shadow:0 50px 100px -40px rgba(0,0,0,.8); background:var(--card); }
.ep-lab { position:absolute; left:0; right:0; bottom:-44px; text-align:center; color:var(--foam); font-size:16px; }
.ep-card .ep-lab { position:absolute; left:12px; right:auto; bottom:12px; padding:6px 10px; border-radius:8px; background:rgba(11,27,43,.75); }
.ep-l1 { position:absolute; left:0; right:0; top:640px; text-align:center; font-weight:600 !important; font-size:110px; line-height:1; letter-spacing:-.05em; }
.ep-l2 { position:absolute; left:0; right:0; top:770px; text-align:center; font-size:118px; line-height:1; color:var(--foam) !important; }

/* text column + visual */
.ep-txt { position:absolute; left:140px; top:270px; width:680px; }
.ep-kick { color:var(--coral); }
.ep-h { margin-top:24px !important; font-weight:600 !important; font-size:74px; line-height:1.04; letter-spacing:-.045em; }
.ep-s { margin-top:28px !important; font-size:44px; line-height:1.15; color:var(--foam); }
.ep-vis { position:absolute; left:900px; top:150px; width:880px; height:740px; }

/* problem */
.ep-fail { display:flex; justify-content:space-between; align-items:center; margin:40px 0 0; padding:26px 30px; border-radius:18px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-size:30px; }
.ep-fail:first-child { margin-top:120px; }
.ep-fail b { padding:8px 14px; border-radius:10px; background:rgba(255,122,89,.16); color:var(--coral); font-family:'Geist Mono',monospace; font-weight:500; font-size:18px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }

/* 01 import */
.ep-src { display:flex; gap:10px; }
.ep-src span { padding:10px 18px; border-radius:999px; border:1px solid var(--line); font-family:'Geist Mono',monospace; font-size:17px; color:var(--mut); }
.ep-src span[data-st="on"] { background:var(--foam); color:var(--bg); border-color:var(--foam); }
.ep-grid { margin-top:26px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ep-li { position:relative; height:190px; border-radius:12px; overflow:hidden; background:var(--card); box-shadow:0 20px 40px -24px rgba(0,0,0,.9); }
.ep-li b { position:absolute; left:0; right:0; bottom:0; padding:22px 10px 8px; background:linear-gradient(transparent, rgba(11,27,43,.92)); font-size:14px; font-weight:500; line-height:1.2; }
.ep-db { position:absolute; left:0; right:0; top:620px; display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding:18px 22px; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.ep-db .ep-m { color:var(--foam); } .ep-db strong { font-size:54px; font-weight:600; letter-spacing:-.04em; } .ep-db > span:not(.ep-m) { font-size:24px; color:var(--mut); }
.ep-db em { flex-basis:100%; font-style:normal; font-family:'Geist Mono',monospace; font-size:15px; letter-spacing:.06em; color:var(--mut); }

/* 02 image pins */
.ep-gal { position:absolute; left:0; top:0; display:flex; gap:12px; }
.ep-g { position:relative; width:120px; height:120px; border-radius:10px; overflow:hidden; background:var(--card); }
.ep-chart { position:absolute; inset:0; padding:14px; background:#E9E4DA; display:flex; flex-direction:column; gap:8px; }
.ep-chart i { display:block; height:10px; border-radius:4px; background:#B9B2A6; } .ep-chart span { margin-top:auto; color:#4A443C; font-size:13px; font-weight:600; }
.ep-xl { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-10deg); padding:6px 10px; border:3px solid var(--coral); border-radius:8px; color:var(--coral); font-family:'Geist Mono',monospace; font-size:14px; letter-spacing:.1em; text-transform:uppercase; background:rgba(11,27,43,.85); opacity:0; }
.ep-crop { position:absolute; left:0; top:160px; width:240px; }
.ep-cf { width:240px; height:240px; border-radius:12px; overflow:hidden; outline:3px dashed var(--foam); outline-offset:4px; }
.ep-dim { display:block; margin-top:18px; color:var(--foam); text-align:center; }
.ep-hash { position:absolute; left:0; top:600px; width:300px; height:120px; }
.ep-h1, .ep-h2 { position:absolute; top:0; width:90px; height:90px; border-radius:10px; overflow:hidden; box-shadow:0 0 0 2px var(--line); }
.ep-h1 { left:0; } .ep-h2 { left:70px; }
.ep-dup { position:absolute; left:180px; top:28px; padding:8px 12px; border-radius:10px; background:rgba(255,122,89,.16); color:var(--coral); font-family:'Geist Mono',monospace; font-size:15px; white-space:nowrap; }
.ep-hl { position:absolute; left:0; top:100px; font-size:14px; }
.ep-seo { position:absolute; left:300px; top:150px; width:580px; padding:26px 28px; border-radius:20px; background:#F7F3EC; color:#1C2B38; box-shadow:0 50px 100px -40px rgba(0,0,0,.9); }
.ep-sh { display:flex; justify-content:space-between; align-items:center; }
.ep-sh .ep-m { color:#0F8C82; } .ep-sh em { font-style:normal; font-family:'Geist Mono',monospace; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:#8A8F95; }
.ep-t { margin-top:18px !important; min-height:2.4em; font-weight:600; font-size:30px; line-height:1.2; letter-spacing:-.02em; }
.ep-d { margin-top:12px !important; min-height:4.5em; font-size:22px; line-height:1.45; color:#3C4B58; }
.ep-tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.ep-tags span { padding:6px 12px; border-radius:999px; background:#E2EFEE; color:#0F6E66; font-size:16px; }
.ep-board { margin-top:18px; display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid #E1DBD0; }
.ep-board .ep-m { color:#8A8F95; font-size:14px; } .ep-board strong { font-size:22px; color:#C24E2F; }

/* 03 schedule */
.ep-week { position:absolute; left:0; top:20px; width:880px; padding:22px 24px 28px; border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.ep-wh { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-family:'Geist Mono',monospace; font-size:16px; color:var(--mut); }
.ep-wg { position:relative; margin-top:14px; height:440px; display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.ep-day { position:relative; border-radius:12px; background:rgba(244,239,230,.04); box-shadow:inset 0 0 0 1px var(--line); }
.ep-win { position:absolute; left:8px; right:8px; height:12px; border-radius:6px; background:rgba(127,216,208,.28); transform-origin:0 50%; transform:scaleX(0); }
.ep-sp { position:absolute; width:76px; height:114px; border-radius:8px; overflow:hidden; box-shadow:0 14px 30px -12px rgba(0,0,0,.9), 0 0 0 2px var(--foam); opacity:0; }
.ep-flow { position:absolute; left:0; top:590px; display:flex; gap:14px; flex-wrap:wrap; }
.ep-flow span { display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-size:22px; }
.ep-dot { width:10px; height:10px; border-radius:50%; background:var(--foam); box-shadow:0 0 12px var(--foam); }

/* 04 video */
.ep-lanes { position:absolute; left:0; top:0; width:880px; }
.ep-lane { position:relative; height:220px; margin-bottom:22px; padding:18px 20px; border-radius:18px; background:var(--card); box-shadow:0 0 0 1px var(--line); overflow:hidden; }
.ep-lane.a .ep-m { color:var(--foam); } .ep-lane.b .ep-m { color:var(--coral); } .ep-lane.b { box-shadow:0 0 0 2px rgba(255,122,89,.5); }
.ep-track { position:relative; margin-top:16px; height:140px; display:flex; gap:14px; }
.ep-lane.a .ep-track img { position:absolute; top:0; width:94px; height:140px; border-radius:8px; }
.ep-mp4 { position:relative; width:94px; height:140px; border-radius:8px; overflow:hidden; }
.ep-mp4 b { position:absolute; left:6px; top:6px; padding:3px 7px; border-radius:6px; background:var(--coral); color:#fff; font-family:'Geist Mono',monospace; font-size:12px; }
.ep-play { position:absolute; left:50%; top:50%; width:0; height:0; margin:-14px 0 0 -8px; border-left:24px solid rgba(255,255,255,.9); border-top:14px solid transparent; border-bottom:14px solid transparent; }
.ep-916 { position:absolute; left:470px; top:262px; }
.ep-ph { position:relative; width:126px; height:224px; border-radius:18px; overflow:hidden; border:5px solid #F4EFE6; }
.ep-ph span { position:absolute; left:8px; bottom:8px; padding:4px 8px; border-radius:6px; background:rgba(11,27,43,.85); font-family:'Geist Mono',monospace; font-size:13px; color:var(--foam); }
.ep-exp { position:absolute; left:640px; top:290px; display:flex; flex-direction:column; gap:12px; }
.ep-exp span { display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-family:'Geist Mono',monospace; font-size:18px; }
.ep-exp i { width:18px; height:22px; border-radius:3px; background:var(--sand); }
.ep-n88 { position:absolute; left:0; top:560px; display:flex; align-items:baseline; gap:18px; }
.ep-n88 strong { font-weight:600; font-size:130px; line-height:1; letter-spacing:-.06em; color:var(--coral); font-variant-numeric:tabular-nums; }
.ep-n88 span { font-size:30px; color:var(--fg); }

/* split */
.ep-half { position:absolute; top:190px; width:760px; padding:40px 46px; border-radius:26px; }
.ep-half.a { left:140px; background:rgba(127,216,208,.1); box-shadow:inset 0 0 0 2px rgba(127,216,208,.5); }
.ep-half.b { right:140px; background:rgba(255,122,89,.1); box-shadow:inset 0 0 0 2px rgba(255,122,89,.5); }
.ep-half.a .ep-m { color:var(--foam); } .ep-half.b .ep-m { color:var(--coral); }
.ep-half h3 { margin-top:18px !important; font-weight:600 !important; font-size:80px; line-height:1.04; letter-spacing:-.045em; }
.ep-half.a .ep-ser { color:var(--foam); } .ep-half.b .ep-ser { color:var(--coral); }
.ep-nums { position:absolute; left:140px; right:140px; top:640px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.ep-nums > div { padding:24px 26px; border-radius:18px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.ep-nums strong { display:block; font-weight:600; font-size:62px; letter-spacing:-.04em; color:var(--sand); }
.ep-nums span { display:block; margin-top:6px; font-size:22px; color:var(--mut); }

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

/* pen + chrome */
.ep-pen { position:absolute; left:0; top:0; z-index:11; pointer-events:none; overflow:visible; }
.ep-ink { fill:none; stroke:var(--coral); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }
.ep-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); }
.ep-c-tl { position:absolute; left:60px; top:50px; font-weight:500; } .ep-c-tr { position:absolute; right:60px; top:50px; color:var(--coral); }
.ep-c-bl { position:absolute; left:60px; bottom:62px; opacity:0; }
.ep-prog { position:absolute; left:60px; right:60px; bottom:40px; height:2px; background:var(--line); border-radius:2px; overflow:hidden; }
.ep-prog i { display:block; height:100%; background:linear-gradient(90deg,#7FD8D0,#FF7A59); transform-origin:0 50%; transform:scaleX(0); }

/* 9:16 */
.ep-v .ep-card { top:420px; } .ep-v .ep-l1 { top:1060px; font-size:96px; } .ep-v .ep-l2 { top:1180px; font-size:100px; }
.ep-v .ep-txt { left:80px; top:200px; width:920px; }
.ep-v .ep-h { font-size:80px; } .ep-v .ep-s { font-size:46px; }
.ep-v .ep-vis { left:100px; top:760px; }
.ep-v .ep-half { left:80px; right:80px; width:auto; } .ep-v .ep-half.a { top:260px; } .ep-v .ep-half.b { top:640px; }
.ep-v .ep-nums { left:80px; right:80px; top:1060px; grid-template-columns:repeat(2,1fr); }
.ep-v .ep-eh { top:560px; font-size:100px; } .ep-v .ep-btn { top:900px; font-size:36px; }
.ep-v .ep-logo { left:410px; top:700px; } .ep-v .ep-word { top:890px; } .ep-v .ep-url { top:1000px; font-size:22px; }
.ep-v .ep-c-tl, .ep-v .ep-c-tr { top:110px; } .ep-v .ep-c-tl { left:50px; font-size:12px; } .ep-v .ep-c-tr { right:50px; } .ep-v .ep-prog { left:50px; right:50px; } .ep-v .ep-c-bl { left:50px; }