/* ==================================================================
   System film · Tidesstunes (.tt-*). Engine: js/system-film-tidesstunes.js
   Night sea from the channel's own art: deep indigo, aqua, violet, sunset.
   Player chrome (.syf-*) lives in css/system-films.css.
   ================================================================== */
.tt-stage { --bg:#070D1F; --fg:#EEF2FF; --mut:#8C97B8; --card:#0F1834; --line:rgba(238,242,255,.12); --aqua:#5CE1E6; --violet:#9B7BFF; --sun:#FFB37A;
  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); }
.tt-stage.tt-v { width:1080px; height:1920px; }
.tt-stage * { box-sizing:border-box; }
.tt-stage :is(h2,h3,h4) { font-family:'Geist','Inter',system-ui,sans-serif; color:var(--fg); margin:0; font-style:normal; }
.tt-stage p { margin:0; }
.tt-stage img { display:block; width:100%; height:100%; object-fit:cover; }
.tt-bg { position:absolute; inset:0; background:radial-gradient(1200px 700px at 50% 120%, rgba(92,225,230,.16), transparent 60%), radial-gradient(900px 600px at 10% 0%, rgba(155,123,255,.16), transparent 60%), radial-gradient(800px 500px at 95% 10%, rgba(255,179,122,.10), transparent 60%), linear-gradient(180deg,#070D1F,#0A1430); }
.tt-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"); }
.tt-glow { position:absolute; left:50%; bottom:-520px; width:1600px; height:900px; margin-left:-800px; border-radius:50%; background:radial-gradient(closest-side, rgba(92,225,230,.28), rgba(155,123,255,.12) 55%, transparent); pointer-events:none; }
.tt-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.tt-k { white-space:nowrap; }
.tt-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); }
.tt-ser { font-family:'Instrument Serif','Libre Baskerville',Georgia,serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
.tt-open, .tt-man, .tt-sc, .tt-res, .tt-end { position:absolute; inset:0; display:none; }
.tt-ck { width:24px; height:24px; color:var(--aqua); } .tt-ck path { fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* open */
.tt-obars { position:absolute; left:160px; right:160px; top:260px; height:260px; display:flex; align-items:center; gap:4px; }
.tt-obars i, .tt-bars i { flex:1; display:block; border-radius:4px; background:linear-gradient(180deg, var(--aqua), var(--violet)); transform-origin:50% 50%; transform:scaleY(0); }
.tt-ph0 { position:absolute; left:0; top:230px; width:3px; height:320px; background:var(--sun); box-shadow:0 0 18px var(--sun); }
.tt-otrack { position:absolute; left:0; right:0; top:560px; text-align:center; color:var(--aqua); }
.tt-l1 { position:absolute; left:0; right:0; top:650px; text-align:center; font-weight:600 !important; font-size:104px; line-height:1; letter-spacing:-.05em; }
.tt-l2 { position:absolute; left:0; right:0; top:770px; text-align:center; font-size:116px; line-height:1; color:var(--aqua) !important; }

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

/* by hand */
.tt-clock { display:flex; align-items:baseline; gap:20px; margin-bottom:24px; }
.tt-clock .tt-m { color:var(--sun); } .tt-clock strong { font-weight:600; font-size:96px; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.tt-step { display:flex; align-items:center; gap:22px; height:76px; padding:0 26px; margin-bottom:12px; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-size:28px; }
.tt-step b { font-family:'Geist Mono',monospace; font-weight:500; font-size:17px; color:var(--mut); } .tt-step span { flex:1; } .tt-step .tt-ck { color:var(--sun); }

/* 01 source */
.tt-yt { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tt-th { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 24px 50px -24px rgba(0,0,0,.9); }
.tt-th b { position:absolute; left:0; right:0; bottom:0; padding:22px 10px 8px; background:linear-gradient(transparent, rgba(7,13,31,.92)); font-size:15px; font-weight:500; }
.tt-cnt { position:absolute; left:0; top:300px; display:flex; align-items:baseline; gap:20px; }
.tt-cnt .tt-m { color:var(--aqua); } .tt-cnt strong { font-weight:600; font-size:150px; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }

/* 02 the best minute */
.tt-wbox { padding:24px 26px 18px; border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 50px 100px -50px rgba(0,0,0,.9); }
.tt-wh { display:flex; justify-content:space-between; } .tt-wh .tt-m:first-child { color:var(--aqua); }
.tt-wwrap { position:relative; margin-top:18px; height:260px; }
.tt-bars { position:absolute; inset:0; display:flex; align-items:center; gap:3px; }
.tt-bars i { opacity:.35; } .tt-bars i[data-st="on"] { opacity:1; }
.tt-win { position:absolute; top:-10px; bottom:-10px; border-radius:12px; border:3px solid var(--sun); background:rgba(255,179,122,.08); box-shadow:0 0 40px -6px rgba(255,179,122,.5); }
.tt-wt { position:absolute; left:50%; top:10px; transform:translateX(-50%); padding:6px 10px; border-radius:8px; background:var(--sun); color:#1a1006; font-family:'Geist Mono',monospace; font-size:16px; font-weight:500; white-space:nowrap; }
.tt-axis { display:flex; justify-content:space-between; margin-top:20px; font-family:'Geist Mono',monospace; font-size:15px; color:var(--mut); }
.tt-meter { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; margin-top:22px; }
.tt-meter > div { padding:18px 20px; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.tt-meter strong { display:block; margin-top:8px; font-weight:600; font-size:56px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.tt-e2 { color:var(--sun); }
.tt-plus { background:rgba(255,179,122,.12) !important; box-shadow:inset 0 0 0 2px rgba(255,179,122,.6) !important; }
.tt-plus strong { color:var(--sun); margin-top:0; } .tt-plus span { font-size:22px; color:var(--fg); }

/* 03 vertical */
.tt-frame { position:absolute; left:50%; top:20px; transform-origin:50% 0; margin-left:-380px; width:760px; height:428px; border-radius:18px; overflow:hidden; border:4px solid rgba(238,242,255,.25); box-shadow:0 60px 120px -50px rgba(0,0,0,.9); }
.tt-vis-vert .tt-frame { left:0; right:0; margin:0 auto; }
.tt-fl { position:absolute; left:12px; top:12px; padding:6px 10px; border-radius:8px; background:rgba(7,13,31,.8); font-family:'Geist Mono',monospace; font-size:15px; color:var(--aqua); }
.tt-spec { position:absolute; left:0; right:0; top:600px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.tt-spec span { padding:12px 18px; border-radius:999px; background:var(--card); box-shadow:0 0 0 1px var(--line); font-family:'Geist Mono',monospace; font-size:19px; }

/* 04 platforms */
.tt-phones { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tt-ph { padding:14px 14px 18px; border-radius:26px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 40px 80px -40px rgba(0,0,0,.9); }
.tt-ph[data-i="0"] { box-shadow:0 0 0 2px rgba(92,225,230,.6); } .tt-ph[data-i="1"] { box-shadow:0 0 0 2px rgba(155,123,255,.6); } .tt-ph[data-i="2"] { box-shadow:0 0 0 2px rgba(255,179,122,.6); }
.tt-scr { position:relative; height:330px; border-radius:16px; overflow:hidden; }
.tt-eq { position:absolute; right:12px; bottom:12px; display:flex; align-items:flex-end; gap:4px; height:36px; }
.tt-eq b { display:block; width:6px; height:100%; border-radius:3px; background:#fff; transform-origin:50% 100%; }
.tt-ph strong { display:block; margin-top:14px; font-weight:600; font-size:28px; letter-spacing:-.02em; }
.tt-ph em { display:block; margin-top:2px; font-style:normal; font-family:'Geist Mono',monospace; font-size:14px; letter-spacing:.06em; color:var(--mut); text-transform:uppercase; }
.tt-ph p { margin-top:10px !important; min-height:4.4em; font-size:18px; line-height:1.4; color:var(--fg); opacity:.9; }
.tt-buf { display:flex; align-items:center; gap:18px; margin-top:22px; padding:16px 20px; border-radius:16px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.tt-buf .tt-m:first-child { color:var(--aqua); } .tt-q { display:flex; gap:8px; } .tt-q i { width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,var(--aqua),var(--violet)); }
.tt-smp { margin-left:auto; font-size:13px; }

/* result */
.tt-nums { position:absolute; left:140px; right:140px; top:180px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tt-nums > div { padding:26px 28px; border-radius:20px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.tt-nums strong { display:block; font-weight:600; font-size:84px; letter-spacing:-.05em; color:var(--fg); }
.tt-nums span { display:block; margin-top:6px; font-size:24px; color:var(--mut); }
.tt-66 { position:absolute; left:140px; right:140px; top:520px; display:flex; align-items:center; gap:46px; padding:34px 44px; border-radius:26px; background:linear-gradient(120deg, rgba(92,225,230,.12), rgba(155,123,255,.12)); box-shadow:inset 0 0 0 2px rgba(92,225,230,.5); }
.tt-big { font-weight:600; font-size:220px; line-height:.9; letter-spacing:-.06em; background:linear-gradient(120deg,var(--aqua),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent; font-variant-numeric:tabular-nums; min-width:3.3ch; }
.tt-66 p { font-size:46px; line-height:1.15; letter-spacing:-.02em; } .tt-66 .tt-m { display:block; margin-top:14px; color:var(--sun); }

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

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

/* 9:16 */
.tt-v .tt-obars { left:60px; right:60px; top:520px; } .tt-v .tt-ph0 { top:490px; } .tt-v .tt-otrack { top:820px; }
.tt-v .tt-l1 { top:960px; font-size:92px; } .tt-v .tt-l2 { top:1070px; font-size:98px; }
.tt-v .tt-txt { left:80px; top:200px; width:920px; }
.tt-v .tt-h { font-size:80px; } .tt-v .tt-s { font-size:46px; }
.tt-v .tt-vis { left:100px; top:760px; }
.tt-v .tt-nums { left:80px; right:80px; top:240px; grid-template-columns:repeat(2,1fr); }
.tt-v .tt-66 { left:80px; right:80px; top:820px; flex-direction:column; align-items:flex-start; gap:20px; }
.tt-v .tt-eh { top:560px; font-size:94px; } .tt-v .tt-btn { top:900px; font-size:36px; }
.tt-v .tt-logo { left:410px; top:700px; } .tt-v .tt-word { top:890px; } .tt-v .tt-url { top:1000px; font-size:22px; }
.tt-v .tt-c-tl, .tt-v .tt-c-tr { top:110px; } .tt-v .tt-c-tl { left:50px; font-size:11px; } .tt-v .tt-c-tr { right:50px; } .tt-v .tt-prog { left:50px; right:50px; } .tt-v .tt-c-bl { left:50px; font-size:12px; }