/* 딸깍 vs 출시까지의 눈금(#road, 2026-10-27 사용자 — 이야기는 index.html 섹션 위 주석).
   2026-10-28 사용자 "길의 느낌으로 가지 말고, 캡처 느낌으로 눈금으로 해줘": 꼬불길 → 가로 눈금자(세로 화면은 세로 눈금자).
   무대(.l5-rd-stage)는 크기 컨테이너라 안쪽 크기는 cqw · cqh 로 잰다. 기본 규칙 = 장면 2 마지막 모습(움직임 줄이기 · ?still).
   같은 날 사용자 "다른 눈금으로 편승되는게 아니라 같은 수평선 위였는데 그게 엄청 작아지는 느낌": 장면 2 의 눈금자(.l5-rd-mini)는 긴 눈금자의 처음 4%를 --s 배로 확대한 것이다.
   가로 화면은 같은 선(--ry) · 같은 처음(--rx0)에서 --s 가 22 → 1 로 줄며(로그 꼴 키프레임) 긴 눈금자 · 정류장 · 카드 · 깃발이 오른쪽에서 따라 들어온다. --s · --f(레드 화살표 진행)는 @property 로 등록한 숫자.
   움직임은 .l5-js .l5-rd.is-on 아래 — 장면 1 · 2(0.1 ~ 2.5초) | 한 박자 쉬고 | 장면 3(3.54초부터). l5.js 박자 넘김이 그 틈(.45초 넘는 시작 간격)을 경계로 본다.
   js/road.js 가 --g0(장면 2 창 자리) · --g1(작아진 자리) · --ay(프롬프트 높이) · --cy(꽃가루), 세로 화면은 --wz · --sx · --sy(눈금자 확대) · --ml · --mt · --mw(짧은 눈금자 자리)를 단다 */
@property --s{syntax:'<number>';inherits:true;initial-value:1}
@property --f{syntax:'<number>';inherits:true;initial-value:1}
.l5-rd.l5-sec{--rd-pad:clamp(14px,2.6vh,30px);padding:var(--rd-pad) clamp(20px,4.6vw,88px);overflow:hidden;isolation:isolate;align-content:stretch;
  background:radial-gradient(70% 60% at 22% 18%,rgba(255,65,85,.09),transparent 70%),radial-gradient(80% 70% at 80% 90%,rgba(255,65,85,.05),transparent 70%),#0a0a0b}
/* 모눈 */
.l5-rd::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(90% 80% at 50% 50%,#000 30%,transparent 100%)}
/* 가로 눈금자 자리: --rx0 · --rx1 처음 · 끝, --ry 높이, --d1 · --d2 가까운 · 먼 이름표 줄, --tk 눈금 반 길이 */
.l5-rd-stage{position:relative;height:calc(100vh - var(--head) - var(--rd-pad) * 2);min-height:520px;container-type:size;
  --rx0:2cqw;--rx1:93cqw;--L:calc(var(--rx1) - var(--rx0));--ry:56cqh;--s:1;--f:1;--d1:3.2cqh;--d2:10.6cqh;--tk:clamp(7px,1.3cqh,12px);--rd-cg:calc(var(--d2) + clamp(46px,8.2cqh,70px))}

/* ── 장면 2 머리 ── */
.l5-rd-hd{position:absolute;left:0;top:0;z-index:4;max-width:50cqw}
.l5-rd-k{margin:0 0 .5em;color:var(--t3);font-size:clamp(14px,min(1.3cqw,2.4cqh),21px);font-weight:700;letter-spacing:-.01em}
.l5-rd-hd .l5-h2{font-size:clamp(28px,min(3.5cqw,6.2cqh),62px);line-height:1.16}
.l5-rd-hd .l5-h2 em{white-space:nowrap}
.l5-rd-meter{display:flex;align-items:center;gap:clamp(8px,.9cqw,14px);margin-top:clamp(8px,1.4cqh,16px);color:var(--t3);font-size:clamp(13px,min(1.1cqw,2cqh),18px);font-weight:700}
.l5-rd-meter i{position:relative;width:clamp(150px,15cqw,280px);height:clamp(8px,1.2cqh,12px);border-radius:99px;background:#232327;box-shadow:inset 0 0 0 1px #303036;overflow:hidden}
.l5-rd-meter b{position:absolute;inset:0 auto 0 0;width:4%;border-radius:99px;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.l5-rd-meter strong{color:var(--ac);font-size:1.25em;font-weight:900;white-space:nowrap}

/* ── 긴 눈금자 ── */
.l5-rd-world{position:absolute;inset:0;transform-origin:var(--sx,0) var(--sy,0)}
.l5-rd-rule{position:absolute;inset:0;pointer-events:none}
.l5-rd-ln{position:absolute;left:var(--rx0);top:var(--ry);width:calc(var(--L) * var(--s));height:2px;margin-top:-1px;background:#3b3b43}
/* 잔 눈금(길이의 1%마다, 위로) · 굵은 눈금(5%마다, 위아래) — 레드 구간(처음 4%)은 비운다 */
.l5-rd-ln::before,.l5-rd-ln::after{content:"";position:absolute;right:0}
.l5-rd-ln::before{left:4%;bottom:100%;height:clamp(5px,.95cqh,9px);background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 1.0417%)}
.l5-rd-ln::after{left:5%;top:50%;height:clamp(10px,1.8cqh,16px);translate:0 -50%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 5.2632%)}
/* 레드 구간: 딸깍으로 온 만큼(4%) — 장면 1 의 짧은 눈금자가 여기에 겹쳐 작아진다 */
.l5-rd-dn{position:absolute;left:var(--rx0);top:var(--ry);width:calc((var(--rx1) - var(--rx0)) * .04);height:clamp(5px,.8cqh,8px);translate:0 -50%;border-radius:99px;background:var(--ac);box-shadow:0 0 14px rgba(255,65,85,.85)}
.l5-rd-dn::before,.l5-rd-dn::after{content:"";position:absolute;top:50%;width:2px;border-radius:2px;background:var(--ac);translate:-50% -50%}
.l5-rd-dn::before{left:0;height:calc(var(--tk) * 4)}
.l5-rd-dn::after{left:100%;height:calc(var(--tk) * 2.4)}
/* 시작 이름표(작아진 창은 레드 구간 위, 이름표는 아래) */
.l5-rd-start{position:absolute;inset:0;pointer-events:none}
.l5-rd-slot{display:none}
.l5-rd-here{position:absolute;z-index:5;left:var(--rx0);top:calc(var(--ry) + var(--d1));display:flex;align-items:center;margin:0;padding:.35em .8em;border-radius:99px;background:var(--ac);color:#fff;font-size:clamp(11px,min(.95cqw,1.8cqh),15px);font-weight:700;white-space:nowrap;box-shadow:0 6px 18px -6px rgba(255,65,85,.9)}
.l5-rd-here::before{content:"";position:absolute;left:1.1em;bottom:100%;border:5px solid transparent;border-bottom-color:var(--ac);translate:-50% 0}

/* 정류장 이름표: 눈금(::after)에서 가는 선(::before)으로 이어진다. is-a1 · is-a2 = 위 가까운 · 먼 줄, is-b1 · is-b2 = 아래 */
.l5-rd-n{position:absolute;z-index:2;left:calc(var(--rx0) + (var(--x) - var(--rx0)) * var(--s));top:var(--ry);--dd:var(--d1);display:flex;align-items:center;gap:.45em;padding:.5em .95em .5em .72em;border-radius:99px;background:#18181b;box-shadow:inset 0 0 0 1.5px #34343b,0 8px 18px -8px #000;color:var(--t2);font-size:clamp(11.5px,min(1.02cqw,2cqh),17px);font-weight:700;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
.l5-rd-n svg{flex:none;width:1.2em;height:1.2em;fill:none;stroke:var(--t3);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.l5-rd-n.is-2{padding:.42em .9em .42em .68em;border-radius:clamp(12px,1.6cqh,18px);line-height:1.18}
.l5-rd-n.is-big{background:#23100f;box-shadow:inset 0 0 0 1.5px rgba(255,65,85,.6),0 0 24px -6px rgba(255,65,85,.65);color:#fff}
.l5-rd-n.is-big svg{stroke:var(--ac2)}
.l5-rd-n::before,.l5-rd-n::after{content:"";position:absolute;left:50%;translate:-50% 0;pointer-events:none}
.l5-rd-n::before{width:1px;height:var(--dd);background:rgba(255,255,255,.26)}
.l5-rd-n::after{width:2px;height:calc(var(--tk) * 2.8);border-radius:2px;background:#e4e4e7;box-shadow:0 0 6px rgba(255,255,255,.35)}
.l5-rd-n.is-big::after{height:calc(var(--tk) * 3.6);background:var(--ac);box-shadow:0 0 8px rgba(255,65,85,.8)}
.l5-rd-n.is-big::before{background:rgba(255,65,85,.5)}
.l5-rd-n:is(.is-a2,.is-b2){--dd:var(--d2)}
.l5-rd-n:is(.is-a1,.is-a2){translate:-50% calc(-100% - var(--dd))}
.l5-rd-n:is(.is-a1,.is-a2)::before{top:100%}
.l5-rd-n:is(.is-a1,.is-a2)::after{top:calc(100% + var(--dd));translate:-50% -50%}
.l5-rd-n:is(.is-b1,.is-b2){translate:-50% var(--dd)}
.l5-rd-n:is(.is-b1,.is-b2)::before{bottom:100%}
.l5-rd-n:is(.is-b1,.is-b2)::after{bottom:calc(100% + var(--dd));translate:-50% 50%}
/* 끝: 출시 깃발(깃대가 눈금자 끝에 선다) */
.l5-rd-end{position:absolute;z-index:2;left:calc(var(--rx0) + var(--L) * var(--s));top:var(--ry);display:flex;align-items:flex-end;translate:-17% -100%;pointer-events:none}
.l5-rd-end::before{content:"";position:absolute;left:17%;bottom:0;width:3px;height:calc(var(--tk) * 4.4);border-radius:2px;translate:-50% 50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.5)}
.l5-rd-flag{width:clamp(40px,min(5cqw,9cqh),86px);overflow:visible}
.l5-rd-pole{fill:none;stroke:#d4d4d8;stroke-width:3;stroke-linecap:round}
.l5-rd-cloth{fill:var(--ac);transform-origin:11px 18px}
.l5-rd-end b{position:absolute;left:17%;top:calc(100% + var(--d1));translate:-50% 0;color:#fff;font-size:clamp(20px,min(2.3cqw,4.2cqh),40px);font-weight:900;letter-spacing:-.03em;line-height:1;text-shadow:0 0 24px rgba(255,65,85,.7)}
/* 자리(가로 화면): --x = 눈금 자리(--s 가 1 일 때). 같은 줄 이름표끼리는 넷마다 돌아와 겹치지 않는다 */
.l5-rd-n1{--x:10cqw}.l5-rd-n2{--x:14.5cqw}.l5-rd-n3{--x:19cqw}.l5-rd-n4{--x:23.5cqw}.l5-rd-n5{--x:28cqw}.l5-rd-n6{--x:32.5cqw}.l5-rd-n7{--x:37cqw}.l5-rd-n8{--x:41.5cqw}
.l5-rd-qa,.l5-rd-c-qa{--x:47cqw}
.l5-rd-n9{--x:52cqw}.l5-rd-n10{--x:57cqw}.l5-rd-n11{--x:62cqw}.l5-rd-n12{--x:67cqw}.l5-rd-n13{--x:71.5cqw}
.l5-rd-lg,.l5-rd-c-lg{--x:78cqw}
.l5-rd-n14{--x:83cqw}
.l5-rd-rv,.l5-rd-c-rv{--x:88.5cqw}

/* ── 큰 정류장 카드: 먼 이름표 줄 너머, 눈금에서 점선으로 ── */
.l5-rd-card{position:absolute;z-index:1;--cw:clamp(210px,22cqw,390px);--cl:clamp(0px,calc(var(--x) - var(--cw) / 2),calc(100cqw - var(--cw)));left:calc(var(--cl) + (var(--x) - var(--rx0)) * (var(--s) - 1));width:var(--cw);margin:0;padding:clamp(6px,1.1cqh,12px) clamp(9px,.9cqw,15px);border-radius:clamp(12px,1.6cqh,18px);
  background:linear-gradient(180deg,#1c1c20,#111113);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(255,65,85,.18),0 20px 44px -20px #000}
.l5-rd-card.is-b{top:calc(var(--ry) + var(--rd-cg))}
.l5-rd-card.is-a{top:calc(var(--ry) - var(--rd-cg));translate:0 -100%}
.l5-rd-card::after{content:"";position:absolute;left:calc(var(--x) - var(--cl));height:var(--rd-cg);border-left:2px dashed rgba(255,65,85,.55);translate:-1px 0}
.l5-rd-card.is-b::after{bottom:100%}
.l5-rd-card.is-a::after{top:100%}
.l5-rd-card figcaption{display:flex;align-items:center;gap:.45em;margin-bottom:clamp(4px,.9cqh,10px);color:#fff;font-size:clamp(11.5px,min(1.05cqw,1.9cqh),16.5px);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.l5-rd-card figcaption svg{flex:none;width:1.2em;height:1.2em;fill:none;stroke:var(--ac2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* QA: 책상 위 기기 여러 대 */
.l5-rd-tag{margin-left:auto;padding:.15em .65em;border-radius:99px;background:rgba(255,65,85,.14);color:var(--ac2);font-size:.74em;font-weight:700}
.l5-rd-desk{display:flex;align-items:flex-end;justify-content:space-around;gap:4px;height:clamp(54px,9.5cqh,130px);padding:0 2px 0;border-bottom:3px solid #34343b;box-shadow:0 10px 0 -6px #1d1d21}
.l5-rd-ph{display:grid;justify-items:center;gap:clamp(2px,.5cqh,5px);font-size:clamp(8.5px,min(.75cqw,1.35cqh),12px)}
.l5-rd-ph em{color:var(--t3);font-style:normal;font-weight:700;white-space:nowrap}
.l5-rd-scr{position:relative;display:block;height:clamp(30px,6.2cqh,88px);aspect-ratio:9/18.5;border-radius:clamp(5px,.8cqh,9px);border:clamp(2px,.35cqh,3.5px) solid #3c3c44;background:#6f7175;overflow:hidden;
  background-image:linear-gradient(rgba(0,0,0,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.18) 1px,transparent 1px);background-size:8px 8px}
.l5-rd-ph.is-tall .l5-rd-scr{height:clamp(36px,7.3cqh,104px)}
.l5-rd-ph.is-small .l5-rd-scr{height:clamp(26px,5.2cqh,74px)}
.l5-rd-ph.is-tab .l5-rd-scr{height:clamp(24px,4.8cqh,68px);aspect-ratio:4/3}
/* 기기 화면 속 주인공(룩 기사): 투구 · 레드 눈 */
.l5-rd-hero{position:absolute;left:50%;top:55%;width:24%;aspect-ratio:1;border-radius:2px 2px 30% 30%;translate:-50% -50%;background:#2b2733;box-shadow:inset 0 -.18em 0 #4d4759,0 -.22em 0 -.08em #8d86a0;font-size:clamp(6px,1cqh,11px)}
.l5-rd-hero::after{content:"";position:absolute;left:46%;right:12%;top:38%;height:16%;background:#ff4155}
.l5-rd-ph.is-tab .l5-rd-hero{width:14%;scale:2 1}
/* 최적화(2026-10-28 사용자 "강제종료 빼고, 기기마다 최적화 과정이 있어서 최적화 이런거를 넣어야"): 강제 종료 기기 자리에 저사양 기기에서 끊기는 화면 — 붉은 FPS 표 · 잔상 남는 주인공 · 튀는 프레임 그래프 */
.l5-rd-ph.is-perf .l5-rd-scr{background-color:#55575b}
.l5-rd-fps{position:absolute;z-index:1;left:6%;top:3%;padding:.12em .3em;border-radius:2px;background:rgba(0,0,0,.75);color:#ff6b7b;font-size:clamp(5px,.85cqh,9.5px);font-style:normal;font-weight:800;line-height:1.15;letter-spacing:-.03em;white-space:nowrap}
.l5-rd-ph.is-perf .l5-rd-hero{box-shadow:inset 0 -.18em 0 #4d4759,0 -.22em 0 -.08em #8d86a0,-.5em 0 0 rgba(43,39,51,.42),-1em 0 0 rgba(43,39,51,.18)}
.l5-rd-ft{position:absolute;left:6%;right:6%;bottom:4%;height:16%;background:rgba(255,65,85,.85);clip-path:polygon(0 100%,0 74%,14% 72%,19% 12%,24% 74%,42% 70%,47% 0,53% 72%,70% 74%,76% 34%,82% 72%,100% 70%,100% 100%)}
.l5-rd-ph.is-notch .l5-rd-scr::before{content:"";position:absolute;z-index:1;left:50%;top:0;width:46%;height:9%;border-radius:0 0 6px 6px;background:#0b0b0d;translate:-50% 0}
.l5-rd-hp{position:absolute;left:6%;top:3%;width:62%;height:7%;background:#d1202f;box-shadow:inset 0 0 0 1px #000}
.l5-rd-ph.is-notch em,.l5-rd-ph.is-perf em,.l5-rd-ph.is-load em,.l5-rd-ph.is-tab em{color:var(--ac2)}
.l5-rd-ph.is-load .l5-rd-scr{background:#121214;background-image:none;display:grid;place-items:center}
.l5-rd-spin{width:42%;aspect-ratio:1;border-radius:50%;border:2px solid #3a3a42;border-top-color:#fff}
/* 약관 · 규정 · 광고 심사: 서류 셋 + 반려 도장 */
.l5-rd-docs{position:relative;height:clamp(54px,9.5cqh,130px)}
.l5-rd-doc{position:absolute;bottom:0;display:grid;align-content:start;gap:6%;width:36%;height:96%;padding:5% 6%;overflow:hidden;border-radius:4px;background:#ececef;box-shadow:0 8px 18px -8px #000;font-size:clamp(8.5px,min(.78cqw,1.45cqh),12.5px)}
.l5-rd-doc b{color:#18181b;font-weight:800;white-space:nowrap;letter-spacing:-.04em}
.l5-rd-doc em{justify-self:start;padding:.05em .4em;border-radius:3px;background:#18181b;color:#fff;font-size:.85em;font-style:normal;font-weight:800;letter-spacing:.04em}
.l5-rd-doc i{display:block;height:clamp(3px,.55cqh,6px);border-radius:2px;background:#c4c4ca}
.l5-rd-doc i:nth-of-type(2n){width:78%}
.l5-rd-doc.is-1{left:2%;rotate:-7deg}
.l5-rd-doc.is-2{left:31%;rotate:2deg;z-index:1}
.l5-rd-doc.is-3{right:2%;rotate:8deg;z-index:2}
.l5-rd-adimg{height:clamp(12px,2.4cqh,32px)!important;border-radius:3px!important;background:linear-gradient(135deg,#ff8a5b,#ff4155 60%,#b4123a)!important}
.l5-rd-stamp{position:absolute;z-index:3;right:5%;bottom:4%;padding:.12em .42em;border:clamp(2px,.4cqh,4px) solid var(--ac);border-radius:6px;color:var(--ac);font-size:clamp(16px,min(1.7cqw,3.2cqh),30px);font-weight:900;letter-spacing:.06em;rotate:-14deg;background:rgba(255,255,255,.55);mix-blend-mode:normal;box-shadow:0 0 0 2px rgba(255,65,85,.18)}
/* 출시 심사: 반려 기록 */
.l5-rd-log{display:grid;gap:clamp(3px,.5cqh,6px);margin:0;padding:0;list-style:none;font-size:clamp(10px,min(.88cqw,1.5cqh),13.5px)}
.l5-rd-log li{display:grid;grid-template-columns:6.2em auto 1fr;align-items:center;gap:.7em;padding:clamp(3px,.55cqh,7px) .7em;border-radius:8px;background:#19191c;box-shadow:inset 0 0 0 1px #2a2a30}
.l5-rd-log span{color:var(--t3);font-size:.92em;font-weight:700;white-space:nowrap}
.l5-rd-log b{padding:.1em .6em;border-radius:99px;font-size:.9em;font-weight:800;white-space:nowrap}
.l5-rd-log small{color:var(--t3);font-size:.9em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l5-rd-log .is-no b{background:rgba(255,65,85,.16);color:var(--ac2)}
.l5-rd-log .is-wait b{background:rgba(255,255,255,.1);color:#fff}
.l5-rd-log .is-wait{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.l5-rd-log .is-wait b::after{content:"";display:inline-block;width:.7em;height:.7em;margin-left:.4em;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);border-top-color:#fff;vertical-align:-.08em}

/* ── 장면 1 · 2: 딸깍 ── */
/* 「딸깍 한 번에, 게임 완성!」: 가로 화면은 눈금자 아래, 세로 화면은 창 위(top 은 road.js) */
.l5-rd-t1{position:absolute;z-index:7;left:50%;top:0;translate:-50% 0;margin:0;color:#fff;font-size:clamp(28px,min(4cqw,7.2cqh),66px);font-weight:900;letter-spacing:-.045em;line-height:1.2;white-space:nowrap;opacity:0;pointer-events:none}
.l5-rd-t1 b{color:var(--ac)}
.l5-rd-conf{position:absolute;z-index:7;left:50%;top:var(--cy,10%);width:0;height:0;opacity:0;pointer-events:none}
.l5-rd-conf i{position:absolute;width:11px;height:17px;margin:-8px 0 0 -5px;border-radius:2px;background:var(--ac);opacity:0}
.l5-rd-conf i:nth-child(1){--cx:-169px;--cy2:130px;--cr:-360deg}
.l5-rd-conf i:nth-child(2){--cx:-181px;--cy2:69px;--cr:413deg}
.l5-rd-conf i:nth-child(3){--cx:-212px;--cy2:56px;--cr:-466deg}
.l5-rd-conf i:nth-child(4){--cx:-101px;--cy2:43px;--cr:519deg}
.l5-rd-conf i:nth-child(5){--cx:-122px;--cy2:22px;--cr:-572deg}
.l5-rd-conf i:nth-child(6){--cx:-49px;--cy2:-28px;--cr:625deg}
.l5-rd-conf i:nth-child(7){--cx:-33px;--cy2:22px;--cr:-678deg}
.l5-rd-conf i:nth-child(8){--cx:48px;--cy2:-2px;--cr:11deg}
.l5-rd-conf i:nth-child(9){--cx:57px;--cy2:-27px;--cr:-64deg}
.l5-rd-conf i:nth-child(10){--cx:106px;--cy2:44px;--cr:117deg}
.l5-rd-conf i:nth-child(11){--cx:130px;--cy2:24px;--cr:-170deg}
.l5-rd-conf i:nth-child(12){--cx:219px;--cy2:60px;--cr:223deg}
.l5-rd-conf i:nth-child(13){--cx:155px;--cy2:84px;--cr:-276deg}
.l5-rd-conf i:nth-child(14){--cx:211px;--cy2:132px;--cr:329deg}
.l5-rd-conf i:nth-child(3n){background:#fff;width:7px;height:7px;border-radius:50%}
.l5-rd-conf i:nth-child(4n+1){background:#ffb020}
.l5-rd-game{position:absolute;z-index:6;left:0;top:0;width:var(--gw,600px);transform-origin:0 0;transform:var(--g1,none);container-type:inline-size;pointer-events:none}
/* 가로 화면: 창도 --s 를 따라 작아진다(--s 22 → 1 이 창 자리 · 배율 0 → 1 과 같은 비율 — 레드 구간 길이와 함께 줄어 한 덩어리로 보인다). 자리 값은 road.js */
@media not ((max-width:759px) or (max-aspect-ratio:4/5)){
  .l5-rd-game{transform:translate(calc(var(--gx1,0px) + (var(--gx0,0px) - var(--gx1,0px)) * (var(--s) - 1) / 21),calc(var(--gy1,0px) + (var(--gy0,0px) - var(--gy1,0px)) * (var(--s) - 1) / 21)) scale(calc(var(--gk1,1) + (var(--gk0,1) - var(--gk1,1)) * (var(--s) - 1) / 21))}
}
/* 장면 1: 가운데 큰 프롬프트 칸(창이 뜰 자리의 가운데) */
.l5-rd-ask{position:absolute;z-index:8;left:50%;top:var(--ay,36%);display:flex;align-items:center;gap:.8em;width:min(62cqw,1000px);padding:.62em .62em .62em 1.5em;border-radius:99px;translate:-50% -50%;background:#1b1b1f;box-shadow:inset 0 0 0 1.5px #3a3a42,0 0 0 1px rgba(255,65,85,.16),0 24px 60px -24px #000,0 0 80px -30px rgba(255,65,85,.5);color:#fff;font-size:clamp(17px,min(1.85cqw,3.4cqh),30px);font-weight:650;letter-spacing:-.02em;opacity:0;pointer-events:none}
.l5-rd-askt{flex:1;min-width:0;white-space:nowrap;overflow:hidden}
.l5-rd-askt span{display:inline-block}
.l5-rd-send{flex:none;padding:.5em 1.35em;border-radius:99px;background:var(--ac);color:#fff;font-size:.9em;font-weight:800}
.l5-rd-cur{position:absolute;right:1.5em;top:58%;width:1.45em;fill:#fff;stroke:#000;stroke-width:1.4;stroke-linejoin:round;opacity:0}
.l5-rd-click{position:absolute;right:-1.2em;top:-2.1em;color:#fff;font-size:2.1em;font-weight:900;letter-spacing:-.04em;rotate:-9deg;text-shadow:0 .08em 0 var(--ac),0 0 .5em rgba(255,65,85,.8);opacity:0}
.l5-rd-win{position:relative;border-radius:1.1cqw;overflow:hidden;background:#191919;box-shadow:0 0 0 1px #3d3d3d,0 34px 80px -34px #000,0 0 70px -24px rgba(255,65,85,.45)}
.l5-rd-ub{display:flex;align-items:center;justify-content:space-between;gap:2cqw;height:3.8cqw;padding:0 1.2cqw;background:#282828;border-bottom:1px solid #121212;color:#c6c6c6;font:1.45cqw/1 Arial,Helvetica,sans-serif}
.l5-rd-ub i{font-style:normal}
.l5-rd-tabs{display:flex;align-self:end}
.l5-rd-tabs i{padding:.85cqw 1.6cqw;border-radius:.4cqw .4cqw 0 0;color:#9a9a9a}
.l5-rd-tabs i.is-on{background:#3c3c3c;color:#e8e8e8;box-shadow:inset 0 2px 0 #3d7be0}
.l5-rd-ctl{display:flex;gap:.2cqw}
.l5-rd-ctl i{display:grid;place-items:center;width:3cqw;height:2.5cqw;border-radius:.3cqw;background:#3a3a3a}
.l5-rd-ctl i.is-on{background:#3f74c9}
.l5-rd-ctl svg{width:1.3cqw;fill:#e6e6e6}
.l5-rd-opt{display:flex;gap:1.4cqw;color:#9a9a9a}
.l5-rd-cv{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#6f7175}
/* 장면 2 눈금자(.l5-rd-mini): 긴 눈금자의 처음 4%를 --s 배로 본 것 — 가로 화면은 같은 선 위(--rx0 · --ry), 폭 = 4% × --s.
   레드(::after)가 화살표(.l5-rd-tip)와 함께 --f 만큼 차고, 다 작아지면 긴 눈금자의 레드 구간(.l5-rd-dn)과 바꿔 켠다 */
.l5-rd-mini{position:absolute;z-index:3;left:var(--rx0);top:var(--ry);width:calc(var(--L) * .04 * var(--s));height:0;color:#fff;font-size:clamp(13px,min(1.25cqw,2.3cqh),21px);opacity:0;pointer-events:none}
.l5-rd-mini-ln{position:absolute;left:0;right:0;top:0;height:clamp(5px,.8cqh,8px);border-radius:99px;background:#2b2b31;translate:0 -50%}
.l5-rd-mini-ln::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.7em;margin-bottom:.35em;background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 1px,transparent 1px 2.5%)}
.l5-rd-mini-ln::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(100% * var(--f));border-radius:inherit;background:var(--ac);box-shadow:0 0 .9em rgba(255,65,85,.75)}
.l5-rd-tip{position:absolute;z-index:1;left:calc(100% * var(--f));top:0;width:0;height:0;border-left:1.1em solid var(--ac);border-block:.62em solid transparent;translate:-35% -50%;filter:drop-shadow(0 0 .45em rgba(255,65,85,.95));opacity:0}
.l5-rd-mini ol{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.l5-rd-mini li{position:absolute;top:0;display:grid;justify-items:center;padding-top:1.5em;translate:-50% 0;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.l5-rd-mini li::before{content:"";position:absolute;left:50%;top:0;width:2px;height:1.9em;border-radius:99px;background:#e4e4e7;translate:-50% -50%}
.l5-rd-mini li:nth-child(1){left:0}.l5-rd-mini li:nth-child(2){left:31%}.l5-rd-mini li:nth-child(3){left:64%}.l5-rd-mini li:nth-child(4){left:100%}
.l5-rd-mini li.is-goal{color:var(--ac2);font-weight:900}
.l5-rd-mini li.is-goal::before{width:3px;height:2.8em;background:var(--ac);box-shadow:0 0 .6em rgba(255,65,85,.8)}
.l5-rd-mini li.is-goal svg{position:absolute;left:50%;bottom:100%;width:2.3em;height:2.3em;margin-bottom:.1em;translate:-21% 0;fill:var(--ac);stroke:#fff;stroke-width:1.6;stroke-linejoin:round}
.l5-rd-arr{position:absolute;left:calc(50% + 1.9em);bottom:100%;margin-bottom:.9em;padding:.35em .85em;border-radius:.6em;background:#fff;color:#111;font-size:1.25em;font-weight:900;white-space:nowrap;opacity:0;transform-origin:0 50%}
.l5-rd-arr::after{content:"";position:absolute;right:100%;top:50%;border:.45em solid transparent;border-right-color:#fff;translate:0 -50%}

/* ── 세로 화면(모바일 · 세로 태블릿): 머리 아래 세로 눈금자 — 왼쪽 선에 눈금, 이름표 · 카드는 오른쪽에 차례로 ── */
@media (max-width:759px),(max-aspect-ratio:4/5){
  .l5-rd.l5-sec{padding-inline:16px}
  .l5-rd-stage{height:auto;min-height:0;container-type:inline-size;--px:clamp(12px,4cqw,20px);--pl:clamp(38px,11cqw,54px);--tk:clamp(6px,1.8cqw,9px)}
  .l5-rd-hd{position:relative;max-width:none}
  .l5-rd-k{font-size:clamp(13px,3.6cqw,18px)}
  .l5-rd-hd .l5-h2{font-size:clamp(26px,7.6cqw,46px)}
  .l5-rd-meter{font-size:clamp(12px,3.4cqw,16px)}
  .l5-rd-meter i{width:clamp(120px,40cqw,260px)}
  .l5-rd-world{position:relative;inset:auto;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,3cqw,16px);margin:clamp(26px,8cqw,44px) 0 clamp(30px,9cqw,48px);padding:0 0 0 var(--pl)}
  .l5-rd-ln{left:var(--px);top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px}
  .l5-rd-ln::before{left:auto;right:100%;top:4%;bottom:0;width:clamp(5px,1.6cqw,8px);height:auto;background:repeating-linear-gradient(180deg,rgba(255,255,255,.2) 0 1px,transparent 1px 1.0417%)}
  .l5-rd-ln::after{left:50%;top:5%;bottom:0;width:clamp(12px,4cqw,18px);height:auto;translate:-50% 0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.3) 0 1px,transparent 1px 5.2632%)}
  .l5-rd-dn{left:var(--px);top:0;width:clamp(5px,1.5cqw,7px);height:4%;translate:-50% 0}
  .l5-rd-dn::before,.l5-rd-dn::after{left:50%;width:calc(var(--tk) * 4);height:2px}
  .l5-rd-dn::before{top:0}
  .l5-rd-dn::after{top:100%;width:calc(var(--tk) * 2.4)}
  .l5-rd-start{position:relative;inset:auto;display:grid;justify-items:start;gap:clamp(10px,3cqw,14px)}
  .l5-rd-slot{display:block;width:clamp(150px,52cqw,260px);aspect-ratio:16/10}
  .l5-rd-here{position:relative;left:auto;top:auto;font-size:clamp(10.5px,3cqw,14px)}
  .l5-rd-n{position:relative;left:auto;top:auto;translate:none!important;font-size:clamp(11.5px,3.4cqw,16px)}
  .l5-rd-n::before,.l5-rd-n::after{top:50%!important;bottom:auto!important;left:calc(var(--px) - var(--pl))}
  .l5-rd-n::before{width:calc(var(--pl) - var(--px));height:1px;translate:0 -50%}
  .l5-rd-n::after{width:calc(var(--tk) * 2);height:2px;translate:-50% -50%!important}
  .l5-rd-n.is-big::after{width:calc(var(--tk) * 3);height:3px}
  .l5-rd-card,.l5-rd-card.is-a,.l5-rd-card.is-b{position:relative;left:auto;top:auto;translate:none;width:100%;margin-top:-2px;padding:clamp(8px,2.4cqw,14px) clamp(10px,3cqw,16px)}
  .l5-rd-card::after{display:none}
  .l5-rd-card figcaption{font-size:clamp(12px,3.7cqw,17px)}
  .l5-rd-desk,.l5-rd-docs{height:clamp(80px,28cqw,150px)}
  .l5-rd-ph{font-size:clamp(9px,2.6cqw,12px)}
  .l5-rd-scr{height:clamp(48px,17.5cqw,96px)}
  .l5-rd-ph.is-tall .l5-rd-scr{height:clamp(56px,20.5cqw,110px)}
  .l5-rd-ph.is-small .l5-rd-scr{height:clamp(40px,14.5cqw,80px)}
  .l5-rd-ph.is-tab .l5-rd-scr{height:clamp(36px,13cqw,72px)}
  .l5-rd-doc{font-size:clamp(8.5px,2.6cqw,12px)}
  .l5-rd-stamp{font-size:clamp(18px,6cqw,30px)}
  .l5-rd-log{font-size:clamp(10.5px,3.2cqw,14px)}
  .l5-rd-end{position:relative;left:auto;top:auto;translate:none;align-items:flex-end;gap:.35em;margin-top:clamp(6px,2cqw,12px)}
  .l5-rd-end::before{left:calc(var(--px) - var(--pl));bottom:auto;top:100%;width:calc(var(--tk) * 4.4);height:3px;translate:-50% -50%}
  .l5-rd-flag{width:clamp(36px,11cqw,70px)}
  .l5-rd-end b{position:static;translate:none;font-size:clamp(20px,6.4cqw,32px)}
  .l5-rd-t1{font-size:clamp(24px,7.4cqw,44px)}
  /* 장면 1 · 2: 프롬프트는 무대 폭, 창 위 막대 글씨는 창 묶음 폭(cqw)에 맞춰 키운다. 짧은 눈금자는 창 아래(--ml · --mt · --mw 는 road.js) */
  .l5-rd-ask{width:100cqw;padding:.55em .55em .55em 1.15em;font-size:clamp(14px,4cqw,19px)}
  .l5-rd-click{right:-.2em}
  .l5-rd-ub{height:6cqw;font-size:2.4cqw}.l5-rd-ctl i{width:4.6cqw;height:3.8cqw}.l5-rd-ctl svg{width:2cqw}.l5-rd-opt{display:none}
  .l5-rd-mini{left:var(--ml,10%);top:var(--mt,0);width:var(--mw,80%);height:4em;font-size:clamp(11px,3.3cqw,15px)}
  .l5-rd-mini-ln{height:clamp(4px,1.1cqw,6px)}
  .l5-rd-arr{left:auto;right:calc(50% + 1.5em);bottom:auto;top:-2.5em;margin:0;transform-origin:100% 50%}
  .l5-rd-arr::after{right:auto;left:100%;border-left-color:#fff;border-right-color:transparent}
}

/* ── 움직임 ── */
.lp-r1{--i:0}.lp-r2{--i:1}.lp-r3{--i:2}.lp-r4{--i:3}.lp-r5{--i:4}.lp-r6{--i:5}.lp-r7{--i:6}.lp-r8{--i:7}.lp-r9{--i:8}.lp-r10{--i:9}.lp-r11{--i:10}.lp-r12{--i:11}.lp-r13{--i:12}.lp-r14{--i:13}.lp-r15{--i:14}.lp-r16{--i:15}.lp-r17{--i:16}
@media (prefers-reduced-motion:no-preference){
  .l5-rd-spin,.l5-rd-log .is-wait b::after{animation:l5-rd-spin .9s linear infinite}
  .l5-rd-cloth{animation:l5-rd-wave 2.4s ease-in-out infinite}
  .l5-rd-ph.is-perf .l5-rd-hero{animation:l5-rd-stut 1.6s linear infinite}
  @keyframes l5-rd-spin{to{rotate:1turn}}
  @keyframes l5-rd-wave{50%{transform:skewY(-4deg) scaleX(.94)}}
  @keyframes l5-rd-stut{0%,30%{left:40%}31%,58%{left:52%}59%,64%{left:54%}65%,100%{left:64%}} /* 뚝뚝 끊기며 걷는 주인공 */
}
/* 켜지기 전 */
.l5-js .l5-rd:not(.is-on) :is(.l5-rd-hd>*,.l5-rd-world,.l5-rd-game){opacity:0}
/* 장면 1: 프롬프트 · 딸깍 */
.l5-js .l5-rd.is-on .l5-rd-ask{animation:l5-rd-in .3s var(--ease) .12s both,l5-rd-askout .27s ease-in 1.26s forwards}
.l5-js .l5-rd.is-on .l5-rd-askt span{animation:l5-rd-type .5s steps(13,end) .3s both}
.l5-js .l5-rd.is-on .l5-rd-cur{animation:l5-rd-cur .48s var(--ease) .54s both}
.l5-js .l5-rd.is-on .l5-rd-send{animation:l5-rd-press .18s ease 1.02s both}
.l5-js .l5-rd.is-on .l5-rd-click{animation:l5-rd-pop .54s var(--hop) 1.05s both}
/* 장면 2: 프롬프트 자리에 창, 아래 눈금자를 레드 화살표가 채운다(무대의 --f, 이름은 화살표가 지날 때 켜진다) */
.l5-js .l5-rd.is-on .l5-rd-win{animation:l5-rd-win .36s var(--hop) 1.3s both}
.l5-js .l5-rd.is-on .l5-rd-mini{animation:l5-rd-in .24s ease 1.38s both,l5-rd-out .3s ease 4.95s forwards}
.l5-js .l5-rd.is-on .l5-rd-tip{animation:l5-rd-in .15s ease 1.5s both,l5-rd-out .2s ease 2.45s forwards}
.l5-js .l5-rd.is-on .l5-rd-mini li{animation:l5-rd-lit .21s var(--hop) both}
.l5-js .l5-rd.is-on .l5-rd-mini li:nth-child(1){animation-delay:1.55s}
.l5-js .l5-rd.is-on .l5-rd-mini li:nth-child(2){animation-delay:1.83s}
.l5-js .l5-rd.is-on .l5-rd-mini li:nth-child(3){animation-delay:2.13s}
.l5-js .l5-rd.is-on .l5-rd-mini li:nth-child(4){animation-delay:2.45s}
.l5-js .l5-rd.is-on .l5-rd-arr{animation:l5-rd-bub .3s var(--hop) 2.5s both}
.l5-js .l5-rd.is-on .l5-rd-t1{animation:l5-rd-t1 .36s var(--hop) 2.47s both,l5-rd-t1out .3s ease 3.54s forwards}
.l5-js .l5-rd.is-on .l5-rd-conf{opacity:1}
.l5-js .l5-rd.is-on .l5-rd-conf i{animation:l5-rd-conf 1.2s cubic-bezier(.15,.7,.4,1) 2.5s both}
/* 장면 3: 같은 선이 처음(--rx0)을 중심으로 작아진다(무대의 --s 22 → 1). 짧은 눈금자 이름 · 잔 눈금은 먼저 사라지고, 긴 눈금자 · 정류장 · 카드 · 깃발은 오른쪽에서 따라 들어온다.
   창 묶음은 --g0 → --g1(처음 칸 위 작은 그림) */
.l5-js .l5-rd.is-on .l5-rd-stage{animation:l5-rd-f .9s linear 1.55s both,l5-rd-s 1.5s linear 3.54s both}
.l5-js .l5-rd.is-on .l5-rd-mini ol{animation:l5-rd-out .21s ease 3.54s forwards}
.l5-js .l5-rd.is-on .l5-rd-mini-ln::before{animation:l5-rd-out .5s ease 3.6s both}
.l5-js .l5-rd.is-on .l5-rd-ln{animation:l5-rd-in .3s ease 3.54s both}
.l5-js .l5-rd.is-on :is(.l5-rd-n,.l5-rd-end){animation:l5-rd-in .2s ease 3.6s both}
.l5-js .l5-rd.is-on .l5-rd-card{animation:l5-rd-card .36s var(--ease) both}
.l5-js .l5-rd.is-on .l5-rd-c-qa{animation-delay:5.1s}
.l5-js .l5-rd.is-on .l5-rd-c-lg{animation-delay:5.46s}
.l5-js .l5-rd.is-on .l5-rd-c-rv{animation-delay:5.58s}
/* 레드 구간은 다 줄어든 뒤 짧은 눈금자 선과 바꿔 켠다 */
.l5-js .l5-rd.is-on .l5-rd-dn{animation:l5-rd-in .3s ease 4.95s both}
.l5-js .l5-rd.is-on .l5-rd-k{animation:l5-rd-up .36s var(--ease) 4.02s both}
.l5-js .l5-rd.is-on .l5-rd-hd .l5-h2{animation:l5-rd-up .42s var(--ease) 4.17s both}
.l5-js .l5-rd.is-on .l5-rd-meter{animation:l5-rd-up .36s var(--ease) 4.38s both}
.l5-js .l5-rd.is-on .l5-rd-meter b{animation:l5-rd-bar .96s cubic-bezier(.6,0,.2,1) 4.41s both}
.l5-js .l5-rd.is-on .l5-rd-here{animation:l5-rd-pop2 .3s var(--hop) 4.8s both}
.l5-js .l5-rd.is-on .l5-rd-ph{animation:l5-rd-node .24s var(--hop) both}
.l5-js .l5-rd.is-on .l5-rd-ph:nth-child(1){animation-delay:5.16s}
.l5-js .l5-rd.is-on .l5-rd-ph:nth-child(2){animation-delay:5.22s}
.l5-js .l5-rd.is-on .l5-rd-ph:nth-child(3){animation-delay:5.28s}
.l5-js .l5-rd.is-on .l5-rd-ph:nth-child(4){animation-delay:5.34s}
.l5-js .l5-rd.is-on .l5-rd-ph:nth-child(5){animation-delay:5.4s}
.l5-js .l5-rd.is-on .l5-rd-doc{animation:l5-rd-node .24s var(--hop) both}
.l5-js .l5-rd.is-on .l5-rd-doc.is-1{animation-delay:5.46s}
.l5-js .l5-rd.is-on .l5-rd-doc.is-2{animation-delay:5.52s}
.l5-js .l5-rd.is-on .l5-rd-doc.is-3{animation-delay:5.58s}
.l5-js .l5-rd.is-on .l5-rd-stamp{animation:l5-rd-stamp .27s cubic-bezier(.5,0,.6,1.6) 5.76s both}
.l5-js .l5-rd.is-on .l5-rd-log li{animation:l5-rd-up .24s var(--ease) both}
.l5-js .l5-rd.is-on .l5-rd-log li:nth-child(1){animation-delay:5.7s}
.l5-js .l5-rd.is-on .l5-rd-log li:nth-child(2){animation-delay:5.85s}
.l5-js .l5-rd.is-on .l5-rd-log li:nth-child(3){animation-delay:6s}
/* 세로 화면: 긴 눈금자가 세로라 짧은 눈금자는 작아지기 전에 지우고, 창만 처음 칸(.l5-rd-slot)으로 작아진다. 긴 눈금자는 처음 칸을 중심으로 --wz 배 → 1, 정류장은 차례로 */
@media (max-width:759px),(max-aspect-ratio:4/5){
  .l5-js .l5-rd.is-on .l5-rd-stage{animation:l5-rd-f .9s linear 1.55s both}
  .l5-js .l5-rd.is-on .l5-rd-mini{animation:l5-rd-in .24s ease 1.38s both,l5-rd-out .3s ease 3.54s forwards}
  .l5-js .l5-rd.is-on .l5-rd-world{animation:l5-rd-zoom 1.2s cubic-bezier(.7,0,.2,1) 3.54s both}
  .l5-js .l5-rd.is-on .l5-rd-game{animation:l5-rd-shrink 1.2s cubic-bezier(.7,0,.2,1) 3.54s both}
  .l5-js .l5-rd.is-on :is(.l5-rd-ln,.l5-rd-dn){animation:none}
  .l5-js .l5-rd.is-on .l5-rd-n{animation:l5-rd-node .27s var(--hop) calc(4.62s + var(--i) * .06s) both}
  .l5-js .l5-rd.is-on .l5-rd-end{animation:l5-rd-node .36s var(--hop) 5.64s both}
  .l5-js .l5-rd.is-on .l5-rd-here{animation-delay:4.62s}
}
@keyframes l5-rd-in{from{opacity:0}to{opacity:1}}
@keyframes l5-rd-out{from{opacity:1}to{opacity:0}}
@keyframes l5-rd-up{from{opacity:0;translate:0 14px}}
@keyframes l5-rd-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes l5-rd-cur{0%{opacity:0;translate:-9em 4em}30%{opacity:1}75%{translate:0 0;scale:1}88%{scale:.8}100%{opacity:1;translate:0 0;scale:1}}
@keyframes l5-rd-press{50%{scale:.9;background:#ff6b7b}}
@keyframes l5-rd-pop{0%{opacity:0;scale:.3}25%{opacity:1;scale:1.12}70%{opacity:1;scale:1}100%{opacity:0;scale:1;translate:0 -.4em}}
@keyframes l5-rd-askout{from{opacity:1}to{opacity:0;scale:.9}}
@keyframes l5-rd-win{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
@keyframes l5-rd-f{from{--f:0}to{--f:1}}
/* 22 → 1 을 로그 꼴로(배율이 고르게 줄어 보이게): s = 22^(1 − E(t)), E = cubic-bezier(.6,0,.2,1) */
@keyframes l5-rd-s{0%{--s:22}5%{--s:21.83}10%{--s:21.27}15%{--s:20.234}20%{--s:18.628}25%{--s:16.36}30%{--s:13.364}35%{--s:9.73}40%{--s:6.097}45%{--s:3.673}50%{--s:2.491}55%{--s:1.902}60%{--s:1.571}65%{--s:1.367}70%{--s:1.234}75%{--s:1.145}80%{--s:1.084}85%{--s:1.044}90%{--s:1.018}95%{--s:1.004}100%{--s:1}}
@keyframes l5-rd-lit{0%{opacity:.25;scale:.7}100%{opacity:1;scale:1}}
@keyframes l5-rd-bub{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes l5-rd-t1{from{opacity:0;scale:.7}to{opacity:1;scale:1}}
@keyframes l5-rd-t1out{from{opacity:1}to{opacity:0;scale:.9}}
@keyframes l5-rd-conf{0%{opacity:0;translate:0 0;rotate:0deg;scale:.4}6%{opacity:1;scale:1}75%{opacity:1}100%{opacity:0;translate:var(--cx,0) var(--cy2,0);rotate:var(--cr,300deg)}}
@keyframes l5-rd-shrink{from{transform:var(--g0,none)}to{transform:var(--g1,none)}}
@keyframes l5-rd-zoom{0%{opacity:0;transform:scale(var(--wz,2.6))}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes l5-rd-bar{from{width:100%}}
@keyframes l5-rd-pop2{from{opacity:0;scale:.5}}
@keyframes l5-rd-node{from{opacity:0;scale:.4}}
@keyframes l5-rd-card{from{opacity:0;scale:.92}}
@keyframes l5-rd-stamp{0%{opacity:0;scale:2.4}70%{opacity:1;scale:.92}100%{opacity:1;scale:1}}