/* ==================================================================
   /reel · "Hours, back."  Film stage + page. Loaded on /reel only.
   Paper #F3F1EC · Ink #0E0F0F · Teal is a signal, never a surface.
   ================================================================== */
:root {
  --rl-paper: #F3F1EC; --rl-paper-2: #ECE9E2; --rl-card: #FFFFFF; --rl-ink: #0E0F0F; --rl-ink-2: #3B3A37;
  --rl-muted: #77736C; --rl-line: rgba(14,15,15,.09); --rl-teal: #00A89D; --rl-teal-lt: #3CC8BC;
  --rl-sans: 'Geist', 'Inter', system-ui, sans-serif; --rl-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
  --rl-serif: 'Instrument Serif', 'Libre Baskerville', Georgia, serif;
  --rl-ease: cubic-bezier(.22,1,.36,1);
}

/* ============================ FILM STAGE ============================ */
.film { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:var(--rl-paper); cursor:pointer; isolation:isolate; contain:layout paint; }
.f-stage { position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; overflow:hidden; font-family:var(--rl-sans); color:var(--rl-ink); -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; font-feature-settings:"ss01","cv11"; }
.f-stage * { box-sizing:border-box; }
.f-paper { position:absolute; inset:0; background:
  radial-gradient(1200px 700px at 18% 8%, rgba(255,255,255,.75), transparent 60%),
  radial-gradient(900px 700px at 92% 100%, rgba(220,214,203,.55), transparent 60%), var(--rl-paper); }
.f-paper::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"); }
.f-sc { position:absolute; inset:0; z-index:2; }
.f-sc.f-dark { z-index:6; color:var(--rl-paper); }
.f-night { position:absolute; inset:0; z-index:5; background:radial-gradient(900px 600px at 50% 46%, #15201F, #0B0C0C 70%); opacity:0; }
.f-stage .w { display:inline-block; will-change:transform, filter, opacity; }
.f-mono { font-family:var(--rl-mono); font-size:18px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--rl-muted); }
.f-dark .f-mono { color:rgba(243,241,236,.5); }
.f-serif { font-family:var(--rl-serif); font-style:italic; font-weight:400; letter-spacing:-.005em; }
.f-teal { color:var(--rl-teal); }
.f-dark .f-teal { color:var(--rl-teal-lt); }
.f-kick { position:absolute; left:150px; top:104px; }
.f-h1 { font-weight:500; font-size:96px; line-height:1.08; letter-spacing:-.045em; }
.f-h1c { font-weight:500; font-size:88px; line-height:1.1; letter-spacing:-.045em; text-align:center; }
.f-h2 { font-weight:500; font-size:62px; line-height:1.1; letter-spacing:-.04em; }

/* 1 */
.f-s1-lab { position:absolute; left:160px; top:356px; }
.f-s1-h { position:absolute; left:160px; top:400px; width:1650px; }

/* 2 */
.f-s2-h { position:absolute; left:300px; top:118px; white-space:nowrap; }
.f-slot { position:relative; display:inline-block; height:1.18em; vertical-align:top; overflow:hidden; }
.f-slot-w { position:absolute; left:0; top:-.06em; white-space:nowrap; font-family:var(--rl-serif); font-style:italic; font-weight:400; font-size:1.16em; letter-spacing:-.01em; color:var(--rl-teal); will-change:transform, filter, opacity; }
.f-win { position:absolute; background:var(--rl-card); border-radius:20px; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px rgba(14,15,15,.07), 0 30px 70px -28px rgba(14,15,15,.38), 0 80px 140px -60px rgba(14,15,15,.25); will-change:transform, filter, opacity; }
.f-s2-win { left:300px; top:262px; width:1320px; height:730px; }
.f-bar { height:46px; display:flex; align-items:center; gap:8px; padding:0 18px; border-bottom:1px solid var(--rl-line); background:#FBFAF8; }
.f-bar i { width:12px; height:12px; border-radius:50%; background:#E3DFD8; }
.f-url { margin:0 auto; transform:translateX(-30px); font-family:var(--rl-mono); font-size:15px; color:var(--rl-muted); background:var(--rl-paper); border-radius:8px; padding:6px 16px; }
.f-app { display:grid; grid-template-columns:280px 1fr; height:calc(100% - 46px); }
.f-side { position:relative; background:#FAF9F6; border-right:1px solid var(--rl-line); padding:28px 16px; }
.f-side-i { position:relative; z-index:1; height:52px; display:flex; align-items:center; gap:14px; padding:0 16px; font-weight:500; font-size:22px; color:#8B8781; letter-spacing:-.01em; }
.f-side-i b { width:12px; height:12px; border-radius:4px; border:2px solid currentColor; opacity:.7; }
.f-side-hl { position:absolute; left:16px; right:16px; top:28px; height:52px; border-radius:12px; background:#fff; box-shadow:0 0 0 1px var(--rl-line), 0 8px 20px -10px rgba(14,15,15,.2); z-index:0; }
.f-main { position:relative; }
.f-pane { position:absolute; left:48px; right:48px; top:40px; }
.f-pane-h { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
.f-pane-h h4 { margin:0; font-weight:600; font-size:40px; letter-spacing:-.035em; color:var(--rl-ink); }
.f-pane-h .f-mono { font-size:14px; }
.f-row { display:grid; grid-template-columns:14px 1fr 220px 96px; align-items:center; gap:22px; height:84px; border-bottom:1px solid var(--rl-line); font-weight:500; font-size:25px; letter-spacing:-.015em; }
.f-row-dot { width:12px; height:12px; border-radius:50%; background:#D6D2CB; }
.f-row-bar { height:6px; border-radius:6px; background:#EEEBE6; overflow:hidden; }
.f-row-bar i { display:block; height:100%; background:var(--rl-teal); transform-origin:0 50%; transform:scaleX(0); }
.f-pill { font-family:var(--rl-mono); font-size:15px; font-weight:500; letter-spacing:.06em; text-align:center; color:var(--rl-teal); background:rgba(0,168,157,.1); border-radius:999px; padding:7px 0; }
.f-toast { position:absolute; display:flex; align-items:center; gap:14px; padding:17px 24px; border-radius:16px; background:#fff; font-weight:500; font-size:22px; letter-spacing:-.01em; color:var(--rl-ink); box-shadow:0 0 0 1px var(--rl-line), 0 22px 44px -18px rgba(14,15,15,.35); white-space:nowrap; z-index:3; }
.f-tdot { width:10px; height:10px; border-radius:50%; background:var(--rl-teal); box-shadow:0 0 0 5px rgba(0,168,157,.16); }
.f-s2-toast { right:36px; bottom:34px; }

/* 3 */
.f-s3-logo { position:absolute; left:770px; top:226px; width:380px; height:auto; overflow:visible; }
.f-s3-logo path, .f-s8-logo path { stroke-dasharray:1; stroke-dashoffset:1; fill-opacity:0; }
.f-s3-word, .f-s8-word { position:absolute; left:0; right:0; text-align:center; font-weight:600; letter-spacing:0; }
.f-s3-word { top:520px; font-size:74px; }
.f-stage .ch { display:inline-block; width:.74em; text-align:center; }
.f-stage .sp { display:inline-block; width:.34em; }
.f-s3-tag { position:absolute; left:0; right:0; top:650px; text-align:center; font-weight:300; font-size:58px; letter-spacing:-.035em; }
.f-s3-tag .f-serif { font-size:68px; color:var(--rl-teal-lt); font-weight:400; }
.f-s3-sub { position:absolute; left:0; right:0; top:790px; text-align:center; }

/* 4 */
.f-sc[data-sc="3"] { perspective:2200px; perspective-origin:50% 42%; }
.f-s4-h { position:absolute; left:150px; top:136px; }
.f-plane { position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; transform-style:preserve-3d; }
.f-card { position:absolute; top:300px; width:380px; height:460px; transform-style:preserve-3d; }
.f-card-in, .f-card-dk { position:absolute; inset:0; border-radius:22px; padding:36px; }
.f-card-in { background:var(--rl-card); box-shadow:0 0 0 1px var(--rl-line), 0 30px 60px -32px rgba(14,15,15,.35); }
.f-card-dk { background:#0E0F0F; color:var(--rl-paper); opacity:0; box-shadow:0 40px 80px -30px rgba(14,15,15,.6); }
.f-card .f-mono { color:var(--rl-teal); font-size:20px; }
.f-card h4 { margin:150px 0 16px; font-weight:600; font-size:46px; letter-spacing:-.04em; }
.f-card p { margin:0; font-size:26px; line-height:1.38; letter-spacing:-.01em; color:var(--rl-muted); }
.f-card-dk p { color:rgba(243,241,236,.7); }
.f-card-line { position:absolute; left:36px; top:118px; width:56px; height:3px; border-radius:3px; background:var(--rl-teal); }
.f-s4-end { position:absolute; left:0; right:0; top:396px; }
.f-s4-end .f-serif { font-size:110px; line-height:1.05; letter-spacing:-.02em; }

/* 5 */
.f-sc[data-sc="4"] { perspective:2600px; }
.f-s5-txt { position:absolute; left:150px; top:330px; width:580px; }
.f-s5-idx { display:block; }
.f-s5-n { margin:26px 0 22px; font-weight:600; font-size:92px; line-height:1; letter-spacing:-.05em; white-space:nowrap; }
.f-s5-n--long { font-size:74px; }
.f-s5-l { font-size:54px; line-height:1.12; color:var(--rl-ink-2); }
.f-s5-win { left:800px; top:186px; width:1000px; height:680px; }
.f-shot { height:calc(100% - 46px); overflow:hidden; background:#F6F5F2; }
.f-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:0 0; }
.f-s5-toast { left:744px; top:792px; }

/* 6 */
.f-quote { position:absolute; left:150px; width:1620px; font-family:var(--rl-serif); font-weight:400; font-size:82px; line-height:1.1; letter-spacing:-.015em; color:var(--rl-muted); }
.f-q1 { top:226px; } .f-q2 { top:470px; }
.f-attr { position:absolute; left:150px; top:690px; display:flex; align-items:center; gap:22px; }
.f-attr img { width:76px; height:76px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px var(--rl-line); }
.f-attr b { display:block; font-weight:600; font-size:28px; letter-spacing:-.02em; }
.f-attr span { font-size:22px; color:var(--rl-muted); }
.f-facts { position:absolute; left:150px; right:150px; top:290px; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.f-fact { background:var(--rl-card); border-radius:26px; padding:52px 54px 56px; box-shadow:0 0 0 1px var(--rl-line), 0 40px 80px -40px rgba(14,15,15,.35); }
.f-fact strong { display:block; margin:30px 0 14px; font-weight:600; font-size:96px; line-height:1; letter-spacing:-.05em; }
.f-fact p { margin:0; font-size:32px; color:var(--rl-muted); letter-spacing:-.015em; }

/* 7 */
.f-stats { position:absolute; left:150px; right:150px; top:330px; display:flex; justify-content:space-between; }
.f-stat-n { display:flex; font-weight:600; font-size:168px; line-height:1; letter-spacing:-.05em; margin-bottom:28px; }
.f-odo { display:inline-block; height:1em; overflow:hidden; }
.f-odo > span { display:block; will-change:transform; }
.f-odo i { display:block; height:1em; line-height:1em; font-style:normal; }
.f-odo-s { display:inline-block; }
.f-prom { position:absolute; left:150px; top:200px; }
.f-prom .f-h2 { margin-bottom:46px; }
.f-prom-r { display:flex; align-items:center; gap:28px; height:110px; font-weight:500; font-size:54px; letter-spacing:-.035em; }
.f-chk { width:58px; height:58px; flex:none; }
.f-chk circle { fill:none; stroke:var(--rl-teal); stroke-width:2.5; stroke-dasharray:1; stroke-dashoffset:1; }
.f-chk path { fill:none; stroke:var(--rl-teal); stroke-width:3.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; }

/* 8 */
.f-s8-a { position:absolute; left:0; right:0; top:318px; font-size:104px; color:var(--rl-paper); }
.f-s8-b { position:absolute; left:0; right:0; top:440px; font-size:124px; line-height:1.05; letter-spacing:-.02em; }
.f-btn { position:absolute; left:0; right:0; top:654px; margin:0 auto; width:max-content; display:flex; align-items:center; gap:18px; padding:26px 46px; border-radius:999px; background:var(--rl-paper); color:var(--rl-ink); font-weight:600; font-size:36px; letter-spacing:-.025em; overflow:hidden; }
.f-btn b { font-weight:500; }
.f-rip { position:absolute; left:62%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%; background:#fff; opacity:0; }
.f-s8-logo { position:absolute; left:830px; top:300px; width:260px; height:auto; overflow:visible; }
.f-s8-word { top:490px; font-size:62px; }
.f-s8-url { position:absolute; left:0; right:0; top:606px; text-align:center; color:var(--rl-teal-lt) !important; font-size:24px; text-transform:none; letter-spacing:.06em; }
.f-s8-tag { position:absolute; left:0; right:0; top:664px; text-align:center; font-size:44px; color:var(--rl-paper); }

/* signature: the selection box */
.f-sel { position:absolute; left:0; top:0; z-index:8; border:2px solid var(--rl-teal); border-radius:3px; pointer-events:none; opacity:0; box-shadow:0 0 0 6px rgba(0,168,157,.08); }
.f-sel i { position:absolute; width:13px; height:13px; background:#fff; border:2px solid var(--rl-teal); border-radius:2px; }
.f-sel i:nth-child(1) { left:-8px; top:-8px; } .f-sel i:nth-child(2) { right:-8px; top:-8px; } .f-sel i:nth-child(3) { left:-8px; bottom:-8px; } .f-sel i:nth-child(4) { right:-8px; bottom:-8px; }
.f-sel-tag { position:absolute; left:-2px; top:-42px; background:var(--rl-teal); color:#fff; font-family:var(--rl-mono); font-size:15px; font-weight:500; padding:5px 10px; border-radius:6px; white-space:nowrap; }
.f-cursor { position:absolute; left:0; top:0; z-index:9; width:38px; height:38px; transform-origin:5px 3px; opacity:0; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.f-chrome { position:absolute; inset:0; z-index:10; pointer-events:none; font-family:var(--rl-mono); font-size:15px; letter-spacing:.14em; text-transform:uppercase; color:rgba(14,15,15,.55); }
.f-chrome > span { position:absolute; }
.f-c-tl { left:56px; top:44px; font-weight:500; } .f-c-tr { right:56px; top:44px; }
.f-c-bl { left:56px; bottom:46px; text-transform:none; letter-spacing:.06em; } .f-c-br { right:56px; bottom:46px; }
.f-c-prog { left:56px; right:56px; bottom:32px; height:1px; background:currentColor; opacity:.35; }
.f-c-prog i { display:block; height:100%; background:currentColor; transform-origin:0 50%; }

/* render mode: the bare stage at 1920 x 1080 for frame export */
.rl-render, .rl-render body { margin:0; background:#000; overflow:hidden; }
.rl-render .film { width:1920px; height:1080px; aspect-ratio:auto; }

/* ============================ PAGE ============================ */
.rl { background:var(--rl-paper); color:var(--rl-ink); font-family:var(--rl-sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
.rl :is(h1,h2,h3,h4) { font-family:var(--rl-sans); color:var(--rl-ink); font-style:normal; }

#nav { background:rgba(14,15,15,.92); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3); }
.rl-wrap { width:min(1240px, calc(100% - 2.5rem)); margin:0 auto; }
.rl-mono { font-family:var(--rl-mono); font-size:.74rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--rl-muted); }
.rl-serif { font-family:var(--rl-serif); font-style:italic; font-weight:400; letter-spacing:-.005em; }
.rl-h2 { font-weight:500; font-size:clamp(2.1rem,4.6vw,3.7rem); line-height:1.04; letter-spacing:-.045em; margin:0; }
.rl-h2 .rl-serif { color:var(--rl-teal); letter-spacing:-.015em; }
.rl-lead { font-size:clamp(1.02rem,1.35vw,1.2rem); line-height:1.65; color:var(--rl-ink-2); max-width:44ch; margin:0; letter-spacing:-.01em; }
.rl-head { display:grid; grid-template-columns:1.1fr 1fr; gap:2rem 4rem; align-items:end; margin-bottom:clamp(2rem,4vw,3.2rem); }
.rl-head .rl-mono { display:block; margin-bottom:1.1rem; }
.rl-btn { display:inline-flex; align-items:center; gap:.7rem; height:54px; padding:0 1.6rem; border-radius:999px; font-weight:600; font-size:.98rem; letter-spacing:-.015em; text-decoration:none; transition:transform .5s var(--rl-ease), background .3s, color .3s, box-shadow .5s var(--rl-ease); border:0; cursor:pointer; font-family:inherit; }
.rl-btn--ink { background:var(--rl-ink); color:var(--rl-paper); box-shadow:0 16px 30px -16px rgba(14,15,15,.55); }
.rl-btn--ink:hover { transform:translateY(-2px); color:#fff; box-shadow:0 22px 40px -18px rgba(14,15,15,.65); }
.rl-btn--line { color:var(--rl-ink); box-shadow:inset 0 0 0 1.5px rgba(14,15,15,.18); background:transparent; }
.rl-btn--line:hover { box-shadow:inset 0 0 0 1.5px var(--rl-ink); color:var(--rl-ink); }
.rl-btn svg { width:18px; height:18px; fill:currentColor; }
.rl-btn--paper { background:var(--rl-paper); color:var(--rl-ink); }
.rl-btn--paper:hover { transform:translateY(-2px); color:var(--rl-ink); }

/* hero */
.rl-hero { padding:clamp(8.5rem,14vw,11rem) 0 clamp(2rem,4vw,3rem); }
.rl-hero-top { display:grid; grid-template-columns:1.25fr 1fr; gap:2rem 4rem; align-items:end; }
.rl-title { font-weight:500; font-size:clamp(3.4rem,10.5vw,9.4rem); line-height:.92; letter-spacing:-.06em; margin:1.2rem 0 0; }
.rl-title .rl-hw { position:relative; display:inline-block; }
.rl-title .rl-hw > span { display:inline-block; transition:color .5s var(--rl-ease); }
.rl-title .rl-hw.is-edit > span { font-family:var(--rl-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--rl-teal); }
.rl-title .rl-w { display:inline-block; opacity:0; transform:translateY(.25em); filter:blur(10px); transition:opacity .9s var(--rl-ease), transform 1.1s var(--rl-ease), filter 1s var(--rl-ease); transition-delay:calc(var(--i) * 90ms + 120ms); }
.rl-title.is-in .rl-w { opacity:1; transform:none; filter:none; }
.rl-hsel { position:absolute; inset:-.08em -.12em -.02em -.12em; border:2px solid var(--rl-teal); border-radius:3px; opacity:0; transform:scale(1.15); transition:opacity .45s var(--rl-ease), transform .6s var(--rl-ease); pointer-events:none; }
.rl-hsel i { position:absolute; width:11px; height:11px; background:#fff; border:2px solid var(--rl-teal); border-radius:2px; }
.rl-hsel i:nth-child(1){left:-7px;top:-7px} .rl-hsel i:nth-child(2){right:-7px;top:-7px} .rl-hsel i:nth-child(3){left:-7px;bottom:-7px} .rl-hsel i:nth-child(4){right:-7px;bottom:-7px}
.rl-hsel b { position:absolute; left:-2px; top:-34px; font-family:var(--rl-mono); font-size:12px; font-weight:500; letter-spacing:.02em; background:var(--rl-teal); color:#fff; padding:4px 8px; border-radius:5px; white-space:nowrap; }
.rl-hw.is-sel .rl-hsel { opacity:1; transform:none; }
.rl-hero-side { padding-bottom:.9rem; }
.rl-hero-side .rl-lead { margin-bottom:1.8rem; }
.rl-cta { display:flex; flex-wrap:wrap; gap:.8rem; }
.rl-fade { opacity:0; transform:translateY(14px); transition:opacity .9s var(--rl-ease) .9s, transform 1s var(--rl-ease) .9s; }
.rl-title.is-in ~ .rl-fade, .is-in .rl-fade, .rl-fade.is-in { opacity:1; transform:none; }

/* film frame */
.rl-film-sec { padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3rem,6vw,5rem); }
.rl-frame { position:relative; border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px var(--rl-line), 0 50px 100px -50px rgba(14,15,15,.5), 0 120px 200px -100px rgba(0,153,214,.25); }
.rl-frame:fullscreen { border-radius:0; display:flex; flex-direction:column; justify-content:center; background:#000; }
.rl-frame:fullscreen .film { width:min(100vw, calc((100vh - 64px) * 16 / 9)); margin:0 auto; }
.rl-start { position:absolute; inset:0 0 64px 0; z-index:20; display:grid; place-items:center; border:0; cursor:pointer; background:linear-gradient(180deg, rgba(243,241,236,0), rgba(243,241,236,.0) 40%, rgba(14,15,15,.08)); font:inherit; }
.rl-start[hidden] { display:none; }
.rl-start-in { display:flex; align-items:center; gap:1rem; padding:.7rem 1.4rem .7rem .7rem; border-radius:999px; background:rgba(14,15,15,.92); color:var(--rl-paper); box-shadow:0 24px 50px -20px rgba(14,15,15,.6); backdrop-filter:blur(10px); transition:transform .6s var(--rl-ease); }
.rl-start:hover .rl-start-in { transform:scale(1.04); }
.rl-start-btn { width:52px; height:52px; border-radius:50%; background:var(--rl-paper); display:grid; place-items:center; }
.rl-start-btn svg { width:18px; height:18px; margin-left:3px; fill:var(--rl-ink); }
.rl-start-txt { text-align:left; line-height:1.25; }
.rl-start-txt b { display:block; font-weight:600; font-size:1rem; letter-spacing:-.015em; }
.rl-start-txt span { font-family:var(--rl-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,241,236,.6); }
.rl-bar { display:flex; align-items:center; gap:.9rem; height:64px; padding:0 1.1rem; background:#fff; border-top:1px solid var(--rl-line); font-family:var(--rl-mono); font-size:.78rem; color:var(--rl-muted); }
.rl-ib { flex:none; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:10px; border:0; background:transparent; color:var(--rl-ink); cursor:pointer; transition:background .2s; }
.rl-ib:hover { background:var(--rl-paper); }
.rl-ib svg { width:18px; height:18px; fill:currentColor; }
.rl-ib:focus-visible, .rl-scrub:focus-visible, .rl-line-btn:focus-visible, .rl-chap:focus-visible { outline:2px solid var(--rl-teal); outline-offset:2px; }
#filmPlay .i-pause, #filmPlay[data-state="playing"] .i-play { display:none; }
#filmPlay[data-state="playing"] .i-pause { display:block; }
#filmSound .i-off, #filmSound[data-on="0"] .i-on { display:none; }
#filmSound[data-on="0"] .i-off { display:block; }
.rl-time { flex:none; min-width:9ch; color:var(--rl-ink); font-variant-numeric:tabular-nums; }
.rl-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(var(--rl-ink), var(--rl-ink)) 0/var(--p) 100% no-repeat, #E6E2DB; }
.rl-scrub::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; border-radius:50%; background:var(--rl-ink); box-shadow:0 0 0 4px rgba(14,15,15,.12); }
.rl-scrub::-moz-range-thumb { width:14px; height:14px; border:0; border-radius:50%; background:var(--rl-ink); }
.rl-dl { flex:none; display:inline-flex; align-items:center; gap:.45rem; height:38px; padding:0 .95rem; border-radius:999px; background:var(--rl-paper); color:var(--rl-ink); text-decoration:none; font-family:var(--rl-sans); font-weight:600; font-size:.8rem; }
.rl-dl:hover { color:var(--rl-ink); background:var(--rl-paper-2); }
.rl-dl svg { width:15px; height:15px; fill:currentColor; }
.rl-chaps { display:grid; grid-template-columns:repeat(8,1fr); gap:.5rem; margin-top:1.1rem; }
.rl-chap { text-align:left; border:0; background:none; padding:.6rem 0 0; cursor:pointer; color:var(--rl-muted); font:inherit; position:relative; }
.rl-chap::before { content:''; position:absolute; left:0; right:0; top:0; height:2px; border-radius:2px; background:rgba(14,15,15,.1); }
.rl-chap i { position:absolute; left:0; top:0; height:2px; width:var(--f,0%); border-radius:2px; background:var(--rl-ink); }
.rl-chap b { display:block; font-family:var(--rl-mono); font-weight:500; font-size:.66rem; letter-spacing:.12em; }
.rl-chap span { display:block; font-size:.86rem; font-weight:500; letter-spacing:-.01em; margin-top:.15rem; transition:color .3s; }
.rl-chap.is-on span, .rl-chap:hover span { color:var(--rl-ink); }

/* script */
.rl-script { padding:clamp(4rem,8vw,7rem) 0; border-top:1px solid var(--rl-line); }
.rl-script-grid { display:grid; grid-template-columns:.8fr 1.6fr; gap:3rem; }
.rl-script-side { position:sticky; top:7rem; align-self:start; }
.rl-script-side p { color:var(--rl-muted); margin:1.2rem 0 0; max-width:30ch; line-height:1.65; }
.rl-lines { list-style:none; margin:0; padding:0; }
.rl-line-btn { display:grid; grid-template-columns:4.5rem 1fr; gap:1.25rem; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--rl-line); padding:1.15rem 0; cursor:pointer; font:inherit; color:inherit; }
.rl-line-btn b { font-family:var(--rl-mono); font-weight:500; font-size:.74rem; letter-spacing:.08em; color:var(--rl-muted); padding-top:.55rem; }
.rl-line-btn span { font-size:clamp(1.25rem,2.3vw,1.85rem); line-height:1.25; letter-spacing:-.035em; font-weight:500; color:rgba(14,15,15,.3); transition:color .5s var(--rl-ease); }
.rl-line-btn span em { font-family:var(--rl-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }
.rl-line-btn:hover span, .rl-line-btn.is-past span { color:rgba(14,15,15,.55); }
.rl-line-btn.is-on span { color:var(--rl-ink); }
.rl-line-btn.is-on b { color:var(--rl-teal); }

/* systems */
.rl-sys { padding:clamp(4rem,8vw,7rem) 0; background:var(--rl-paper-2); }
.rl-sys-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; perspective:1600px; }
.rl-card { display:block; text-decoration:none; color:inherit; background:var(--rl-card); border-radius:18px; overflow:hidden; box-shadow:0 0 0 1px var(--rl-line), 0 24px 50px -32px rgba(14,15,15,.4); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px)); transition:transform .6s var(--rl-ease), box-shadow .6s var(--rl-ease); will-change:transform; }
.rl-card:hover { --ty:-6px; box-shadow:0 0 0 1px rgba(0,168,157,.35), 0 40px 70px -36px rgba(14,15,15,.45); color:inherit; }
.rl-card-bar { display:flex; gap:6px; align-items:center; height:30px; padding:0 12px; background:#FBFAF8; border-bottom:1px solid var(--rl-line); }
.rl-card-bar i { width:8px; height:8px; border-radius:50%; background:#E3DFD8; }
.rl-card-shot { aspect-ratio:16/10; overflow:hidden; background:#F6F5F2; }
.rl-card-shot img { width:100%; height:100%; object-fit:cover; object-position:0 0; display:block; transition:transform 1.2s var(--rl-ease); }
.rl-card:hover .rl-card-shot img { transform:scale(1.04); }
.rl-card-body { padding:1.3rem 1.4rem 1.5rem; }
.rl-card-body h3 { margin:0 0 .35rem; font-weight:600; font-size:1.45rem; letter-spacing:-.04em; }
.rl-card-body p { margin:0 0 1rem; font-family:var(--rl-serif); font-style:italic; font-size:1.2rem; line-height:1.3; color:var(--rl-ink-2); }
.rl-card-body small { display:flex; justify-content:space-between; align-items:center; font-family:var(--rl-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--rl-muted); }
.rl-card-body small b { color:var(--rl-teal); font-weight:500; }

/* steps */
.rl-steps { padding:clamp(4rem,8vw,7rem) 0; }
.rl-steps-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
.rl-step { position:relative; min-height:280px; border-radius:18px; padding:1.4rem; background:var(--rl-card); box-shadow:0 0 0 1px var(--rl-line); overflow:hidden; transition:transform .7s var(--rl-ease), box-shadow .7s var(--rl-ease); }
.rl-step::before { content:''; position:absolute; inset:0; background:var(--rl-ink); opacity:0; transition:opacity .6s var(--rl-ease); }
.rl-step > * { position:relative; }
.rl-step .rl-mono { color:var(--rl-teal); }
.rl-step i { display:block; width:36px; height:3px; border-radius:3px; background:var(--rl-teal); margin:.9rem 0 4.2rem; }
.rl-step h3 { margin:0 0 .5rem; font-weight:600; font-size:1.35rem; letter-spacing:-.035em; transition:color .6s; }
.rl-step p { margin:0; font-size:.94rem; line-height:1.55; color:var(--rl-muted); transition:color .6s; }
.rl-step.is-on { transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(14,15,15,.6); }
.rl-step.is-on::before { opacity:1; }
.rl-step.is-on h3 { color:var(--rl-paper); }
.rl-step.is-on p { color:rgba(243,241,236,.7); }

/* behind the frame */
.rl-bts { padding:clamp(4rem,8vw,7rem) 0; border-top:1px solid var(--rl-line); }
.rl-bts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.rl-demo { border-radius:18px; background:var(--rl-card); box-shadow:0 0 0 1px var(--rl-line); overflow:hidden; }
.rl-demo-stage { position:relative; height:220px; display:grid; place-items:center; background:radial-gradient(circle at 30% 20%, #fff, var(--rl-paper) 70%); border-bottom:1px solid var(--rl-line); overflow:hidden; }
.rl-demo-body { padding:1.2rem 1.35rem 1.4rem; }
.rl-demo-body h3 { margin:.4rem 0 .4rem; font-weight:600; font-size:1.15rem; letter-spacing:-.03em; }
.rl-demo-body p { margin:0; font-size:.92rem; line-height:1.55; color:var(--rl-muted); }
.rl-d-swap { position:relative; font-weight:500; font-size:2.6rem; letter-spacing:-.05em; }
.rl-d-swap .rl-d-slot { position:relative; display:inline-block; }
.rl-d-swap .rl-d-slot span { display:inline-block; transition:opacity .45s var(--rl-ease), transform .7s var(--rl-ease), filter .5s var(--rl-ease); }
.rl-d-swap .rl-d-slot span.b { position:absolute; left:0; top:0; font-family:var(--rl-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; color:var(--rl-teal); opacity:0; transform:translateY(.4em); filter:blur(6px); }
.rl-d-swap.is-b .rl-d-slot span.a { opacity:0; transform:translateY(-.4em); filter:blur(6px); }
.rl-d-swap.is-b .rl-d-slot span.b { opacity:1; transform:none; filter:none; }
.rl-d-swap .rl-hsel { opacity:1; transform:none; inset:-.06em -.14em -.04em -.14em; transition:width .6s var(--rl-ease); }
.rl-d-focus { position:relative; width:80%; height:120px; }
.rl-d-focus div { position:absolute; inset:0; display:grid; place-items:center; font-weight:600; font-size:2.2rem; letter-spacing:-.05em; transition:filter .8s var(--rl-ease), opacity .8s var(--rl-ease), transform 1s var(--rl-ease); }
.rl-d-focus div:last-child { font-family:var(--rl-serif); font-style:italic; font-weight:400; font-size:2.6rem; color:var(--rl-teal); opacity:0; filter:blur(16px); transform:scale(1.06); }
.rl-d-focus.is-b div:first-child { opacity:0; filter:blur(16px); transform:scale(.94); }
.rl-d-focus.is-b div:last-child { opacity:1; filter:none; transform:none; }
.rl-d-res { font-weight:600; font-size:2.1rem; letter-spacing:0; }
.rl-d-res span { display:inline-block; width:.74em; text-align:center; }
.rl-d-res span.s { width:.32em; }
.rl-d-res span.x { color:var(--rl-teal); }

/* CTA */
.rl-end { padding:clamp(2rem,4vw,3rem) 0 clamp(4rem,8vw,6rem); }
.rl-end-card { position:relative; overflow:hidden; border-radius:28px; background:#0E0F0F; color:var(--rl-paper); padding:clamp(2.4rem,6vw,5rem); display:grid; grid-template-columns:1.4fr 1fr; gap:2rem; align-items:end; }
.rl-end-card::after { content:''; position:absolute; right:-10%; top:-40%; width:60%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(0,168,157,.28), transparent 65%); pointer-events:none; }
.rl-end-card h2 { color:var(--rl-paper); margin:0; font-weight:500; font-size:clamp(2.2rem,5vw,4.2rem); line-height:1.02; letter-spacing:-.05em; }
.rl-end-card h2 .rl-serif { color:var(--rl-teal-lt); letter-spacing:-.02em; }
.rl-end-card p { margin:0 0 1.6rem; color:rgba(243,241,236,.7); line-height:1.65; max-width:40ch; }
.rl-end-side { position:relative; z-index:1; }
.rl-end-note { display:block; margin-top:1rem; font-family:var(--rl-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,241,236,.45); }

.rl-rv { opacity:0; transform:translateY(26px); filter:blur(6px); transition:opacity .9s var(--rl-ease), transform 1.1s var(--rl-ease), filter .9s var(--rl-ease); transition-delay:calc(var(--i,0) * 70ms); }
.rl-rv.is-in { opacity:1; transform:none; filter:none; }

@media (max-width: 1000px) {
  .rl-hero-top, .rl-head, .rl-script-grid, .rl-end-card { grid-template-columns:1fr; }
  .rl-script-side { position:static; }
  .rl-sys-grid, .rl-bts-grid { grid-template-columns:1fr 1fr; }
  .rl-steps-grid { grid-template-columns:1fr 1fr; }
  .rl-chaps { grid-template-columns:repeat(4,1fr); row-gap:.9rem; }
}
@media (max-width: 620px) {
  .rl-sys-grid, .rl-bts-grid, .rl-steps-grid { grid-template-columns:1fr; }
  .rl-step { min-height:0; } .rl-step i { margin-bottom:1.6rem; }
  .rl-bar { gap:.4rem; padding:0 .6rem; } .rl-dl span { display:none; }
  .rl-time { min-width:auto; font-size:.7rem; }
  .rl-start-txt span { display:none; }
  .rl-line-btn { grid-template-columns:3.4rem 1fr; gap:.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-title .rl-w, .rl-fade, .rl-rv { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
  .rl-card { transform:none !important; }
}

/* ============ 9:16 VERTICAL CUT (1080 x 1920) · same timing, re-composed ============ */
.film.v { aspect-ratio:9/16; }
.rl-render .film.v { width:1080px; height:1920px; }
.f-stage.f-v { width:1080px; height:1920px; }
.f-v .f-kick { left:80px; top:300px; }
.f-v .f-mono { font-size:22px; }
.f-v .f-chrome { font-size:17px; }
.f-v .f-c-tl, .f-v .f-c-tr { top:120px; } .f-v .f-c-tl { left:60px; } .f-v .f-c-tr { right:60px; }
.f-v .f-c-bl, .f-v .f-c-br { display:none; }
.f-v .f-c-prog { left:60px; right:60px; bottom:auto; top:168px; }
/* 1 */
.f-v .f-s1-lab { left:80px; top:700px; }
.f-v .f-s1-h { left:80px; top:750px; width:920px; font-size:92px; line-height:1.06; }
.f-v .f-s1-h br { display:none; }
/* 2 */
.f-v .f-s2-h { left:80px; top:330px; font-size:70px; white-space:normal; width:920px; }
.f-v .f-s2-a { display:block; }
.f-v .f-s2-win { left:60px; top:560px; width:960px; height:1000px; }
.f-v .f-app { grid-template-columns:1fr; grid-template-rows:auto 1fr; }
.f-v .f-side { display:flex; gap:6px; padding:16px 18px; border-right:0; border-bottom:1px solid var(--rl-line); }
.f-v .f-side-i { height:48px; font-size:21px; padding:0 14px; }
.f-v .f-side-hl { display:none; }
.f-v .f-pane { left:36px; right:36px; top:36px; }
.f-v .f-pane-h { flex-direction:column; gap:10px; margin-bottom:18px; }
.f-v .f-row { grid-template-columns:14px 1fr 150px 90px; gap:18px; height:110px; font-size:26px; }
.f-v .f-s2-toast { right:28px; bottom:30px; font-size:21px; }
/* 3 */
.f-v .f-s3-logo { left:330px; top:600px; width:420px; }
.f-v .f-s3-word { top:920px; font-size:70px; }
.f-v .f-s3-tag { top:1050px; font-size:54px; }
.f-v .f-s3-tag .f-serif { font-size:64px; }
.f-v .f-s3-sub { top:1180px; }
/* 4 */
.f-v .f-s4-h { left:80px; top:340px; width:920px; font-size:72px; }
.f-v .f-card { top:800px; }
.f-v .f-s4-end { top:780px; padding:0 70px; }
.f-v .f-s4-end .f-h1c { font-size:80px; }
.f-v .f-s4-end .f-serif { font-size:104px; }
/* 5 */
.f-v .f-s5-txt { left:80px; top:390px; width:920px; }
.f-v .f-s5-n { font-size:96px; margin:22px 0 18px; }
.f-v .f-s5-n--long { font-size:96px; }
.f-v .f-s5-l { font-size:50px; }
.f-v .f-s5-win { left:60px; top:860px; width:960px; height:640px; }
.f-v .f-s5-toast { left:80px; top:1450px; font-size:24px; }
/* 6 */
.f-v .f-quote { left:80px; width:920px; font-size:70px; line-height:1.12; }
.f-v .f-q1 { top:420px; } .f-v .f-q2 { top:840px; }
.f-v .f-q1 br { display:none; }
.f-v .f-attr { left:80px; top:1150px; }
.f-v .f-facts { left:80px; right:80px; top:440px; grid-template-columns:1fr; gap:36px; }
.f-v .f-fact { padding:48px 50px 52px; }
.f-v .f-fact strong { font-size:100px; }
/* 7 */
.f-v .f-stats { left:80px; right:80px; top:430px; flex-wrap:wrap; row-gap:90px; }
.f-v .f-stat { width:50%; }
.f-v .f-stat:nth-child(3), .f-v .f-stat:nth-child(4) { width:auto; }
.f-v .f-stat-n { font-size:150px; margin-bottom:22px; }
.f-v .f-stat .f-mono { font-size:20px; }
.f-v .f-prom { left:80px; top:500px; }
.f-v .f-prom .f-h2 { font-size:68px; }
.f-v .f-prom-r { font-size:52px; height:120px; }
/* 8 */
.f-v .f-s8-a { top:720px; font-size:86px; padding:0 60px; }
.f-v .f-s8-b { top:840px; font-size:96px; padding:0 60px; }
.f-v .f-btn { top:1080px; font-size:36px; }
.f-v .f-s8-logo { left:400px; top:660px; width:280px; }
.f-v .f-s8-word { top:860px; font-size:64px; }
.f-v .f-s8-url { top:970px; font-size:28px; }
.f-v .f-s8-tag { top:1030px; font-size:48px; }