/* The demo reel: a scripted re-enactment of the viewer on the synthetic "window typo" project (web/landing/reel.js).
   The stage is a fixed 1280 x 720 canvas of real DOM, scaled to its frame by reel.js; it always uses the viewer's light theme.
   State changes are class flags driven by the timeline; the transitions below make them move. */
.reel{margin-top:2.6rem;outline:none}
.reel-frame{background:#0c0b26;border:1px solid #34337a;border-radius:1.1rem;box-shadow:0 30px 80px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04) inset;overflow:hidden}
.reel-clip{position:relative;aspect-ratio:16/9;overflow:hidden;background:#eceff3;border-bottom:1px solid #34337a}
.reel-stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;font:13px/1.35 var(--font);color:#161b22;user-select:none;-webkit-user-select:none;pointer-events:none;
  --paper:#ffffff;--plan-ink:#1f2340;--plan-room:#eef3f8;--plan-line:#7f86ad;--plan-grid:#f3f4f9;--line-strong:#cfd5de;--brand:#4338ca;
  --ok:#0b8a63;--alarm:#d1242f;--nf:#6b7380;--amber:#f59e0b;--amber-node:#fbbf24}
.reel-poster{position:absolute;inset:0;display:grid;place-items:center;background:rgba(21,20,58,.38);transition:opacity .35s,visibility .35s}
.reel-poster.off{opacity:0;visibility:hidden}
.reel-poster.end{background:transparent;align-items:end;padding-bottom:5%}
.reel-poster.end .reel-big{width:clamp(2.6rem,6vw,3.6rem);height:clamp(2.6rem,6vw,3.6rem);font-size:clamp(1.1rem,2.6vw,1.5rem)}
.reel-poster.end .reel-big .ic{translate:0 0}
.reel-big{display:grid;place-items:center;width:clamp(3.6rem,9vw,5.5rem);height:clamp(3.6rem,9vw,5.5rem);border-radius:50%;border:0;background:#fbbf24;color:#1e1b4b;font-size:clamp(1.5rem,4vw,2.3rem);box-shadow:0 14px 40px rgba(0,0,0,.45);transition:transform .2s var(--ease)}
.reel-big:hover{transform:scale(1.06)}
.reel-big .ic{translate:.08em 0}
.reel-caption{min-height:3.5em;display:flex;align-items:center;justify-content:center;text-align:center;padding:.7rem 1.2rem .2rem;color:#f4f5ff;font-size:clamp(.95rem,1.5vw,1.12rem);font-weight:550;line-height:1.4;text-wrap:balance}
.reel-caption.off{visibility:hidden}
.reel-bar{display:flex;align-items:center;gap:.5rem;padding:.3rem .8rem .5rem}
.rbtn{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;flex:none;border-radius:50%;border:0;background:transparent;color:#dfe2ff;font-size:1.15rem}
.rbtn:hover{background:rgba(255,255,255,.1);color:#fff}
.rbtn[aria-pressed="false"]{color:#7d80b3}
.reel-time{font:600 .8rem var(--mono);color:#b9bdea;white-space:nowrap;font-variant-numeric:tabular-nums}
.reel-scrub{flex:1;min-width:0;height:1.6rem;margin:0 .3rem;background:transparent;accent-color:#fbbf24;cursor:pointer}
.reel-chapters{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem 1rem}
.reel-chapters button{border:1px solid #34337a;background:transparent;color:#b9bdea;border-radius:999px;padding:.25rem .8rem;font-size:.8rem;font-weight:650}
.reel-chapters button:hover{border-color:#a5b4fc;color:#fff}
.reel-chapters button[aria-current="true"]{background:#fbbf24;border-color:#fbbf24;color:#1e1b4b}
.reel-noscript{padding:1rem 1.2rem;color:#dfe2ff}
.transcript{margin-top:1rem;color:var(--band-text);font-size:.92rem}
.transcript summary{cursor:pointer;color:#c7d2fe;font-weight:600;width:fit-content}
.transcript ol{margin-top:.8rem;padding-left:1.4rem;list-style:decimal;display:grid;gap:.3rem;max-width:52rem}

/* ---------------------------------------------------------------- the re-enacted viewer */
.rl-app{position:absolute;inset:0;background:#eceff3;overflow:hidden}
.rl-top{position:absolute;left:0;top:0;width:1280px;height:46px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#fff;border-bottom:1px solid #e2e6ec}
.rl-brand{display:flex;align-items:center;gap:7px;font-size:16px;letter-spacing:-.02em;color:#1e1b4b;margin-right:4px}
.rl-brand svg{width:22px;height:22px}
.rl-brand b{font-weight:500}.rl-brand b.s{font-weight:800;color:#4338ca;margin-left:-7px}
.rl-sel{border:1px solid #cfd5de;border-radius:6px;padding:5px 26px 5px 10px;font-size:13px;background:#fff;position:relative;white-space:nowrap}
.rl-sel::after{content:"";position:absolute;right:10px;top:11px;width:6px;height:6px;border-right:1.6px solid #444c59;border-bottom:1.6px solid #444c59;transform:rotate(45deg)}
.rl-tabs{display:flex;gap:2px;background:#f4f6f9;border-radius:8px;padding:3px;margin-left:6px}
.rl-tab{padding:4px 12px;border-radius:6px;font-size:13px;color:#444c59;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
.rl-tab.on{background:#fff;color:#161b22;font-weight:650;box-shadow:0 1px 2px rgba(15,23,42,.14)}
.rl-tab i{font-style:normal;display:inline-block;margin-left:6px;background:#d1242f;color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:0 6px}
.rl-export{margin-left:auto;display:flex;align-items:center;gap:6px;border:1px solid #cfd5de;border-radius:6px;padding:5px 12px;font-size:13px;font-weight:600;background:#fff;transition:background .2s,border-color .2s}
.rl-export svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rl-export.on{background:#e6e8fc;border-color:#4338ca;color:#4338ca}
.rl-strip{position:absolute;left:0;top:46px;width:1280px;height:38px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#f4f6f9;border-bottom:1px solid #cfd5de}
.rl-ctr{display:flex;align-items:baseline;gap:5px;border:1px solid #e2e6ec;background:#fff;border-radius:6px;padding:3px 10px;font-size:13px;color:#444c59;transition:box-shadow .3s,border-color .3s,transform .3s}
.rl-ctr b{font-size:15px;color:#161b22;font-variant-numeric:tabular-nums}
.rl-ctr::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c,#0b8a63);align-self:center}
.rl-ctr.nf{--c:#6b7380}.rl-ctr.cf{--c:#7b3fe0}.rl-ctr.gs{--c:#f59e0b}.rl-ctr.man{--c:#4338ca}
.rl-ctr.hi{border-color:#f59e0b;box-shadow:0 0 0 4px rgba(251,191,36,.35);transform:scale(1.08)}
.rl-sp{flex:1}
.rl-badge{font-size:11.5px;border:1px solid #c7ccf6;background:#eef0ff;color:#3730a3;border-radius:999px;padding:2px 10px;white-space:nowrap}
.rl-left{position:absolute;left:0;top:84px;width:790px;height:590px;background:#dfe3ea;overflow:hidden}
.rl-plan{position:absolute;inset:0;width:790px;height:590px;opacity:0;transition:opacity .6s}
.rl-plan.on{opacity:1}
.rl-plan .pl-paper{filter:drop-shadow(0 4px 10px rgba(15,23,42,.18))}
.rl-box{fill:rgba(11,138,99,.12);stroke:#0b8a63;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(1.5);transition:opacity .3s,transform .4s var(--ease),fill .3s,stroke .3s}
.rl-box.on{opacity:1;transform:none}
.rl-box.geom{fill:rgba(10,115,136,.05);stroke:#0a7388;stroke-dasharray:6 4}
.rl-box.nf{fill:none;stroke:#6b7380;stroke-dasharray:3 2.5}
.rl-box.leaf{fill:rgba(251,191,36,.28);stroke:#f59e0b;stroke-width:1.8}
.rl-box.alarm{fill:rgba(209,36,47,.14);stroke:#d1242f;stroke-width:1.8}
.rl-box.user{fill:rgba(67,56,202,.14);stroke:#4338ca;stroke-width:1.8}
.rl-halo{fill:none;stroke:#f59e0b;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.rl-halo.on{animation:rl-halo 1.4s ease-out infinite}
@keyframes rl-halo{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
.rl-scan{fill:url(#rl-scan-g);opacity:0}
.rl-over{position:absolute;left:0;top:0;pointer-events:none}
.rl-thr{fill:none;stroke:#f59e0b;stroke-width:1.4;stroke-dasharray:3 4;opacity:0;transition:opacity .4s}
.rl-thr.on{opacity:.9}
.rl-f07{transition:fill .3s}
.rl-drop{position:absolute;left:145px;top:150px;width:500px;height:290px;border:2px dashed #9aa3b2;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#444c59;background:rgba(255,255,255,.55);transition:opacity .4s,transform .4s var(--ease),border-color .3s,background .3s}
.rl-drop svg{width:52px;height:52px;margin-bottom:6px}
.rl-drop b{font-size:17px;color:#161b22}
.rl-drop.hot{border-color:#4338ca;background:rgba(230,232,252,.9);transform:scale(1.03)}
.rl-drop.off{opacity:0;transform:scale(.96)}
.rl-file{position:absolute;left:0;top:0;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #cfd5de;border-radius:10px;padding:9px 14px 9px 10px;font-weight:650;font-size:14px;box-shadow:0 10px 28px rgba(15,23,42,.25);opacity:0}
.rl-file i{display:grid;place-items:center;width:28px;height:34px;border-radius:5px;background:#d1242f;color:#fff;font:800 9px var(--font);font-style:normal;letter-spacing:.04em}
.rl-reading{position:absolute;left:14px;bottom:12px;display:flex;align-items:center;gap:8px;background:#161b22;color:#fff;border-radius:999px;padding:5px 14px;font-size:12.5px;opacity:0;transition:opacity .3s}
.rl-reading.on{opacity:.92}
.rl-reading::before{content:"";width:8px;height:8px;border-radius:50%;background:#fbbf24;animation:rl-blink .8s infinite alternate}
@keyframes rl-blink{to{opacity:.25}}
.rl-zoom{position:absolute;right:12px;bottom:12px;background:#fff;border:1px solid #cfd5de;border-radius:6px;padding:2px 8px;font:12px var(--mono);color:#444c59}

/* right: table + provenance */
.rl-right{position:absolute;left:790px;top:84px;width:490px;height:590px;background:#fff;border-left:1px solid #cfd5de}
.rl-thead{position:absolute;left:0;top:0;width:490px;height:28px;display:grid;grid-template-columns:1fr 104px 86px 70px;align-items:center;padding:0 14px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:#5d6673;border-bottom:1px solid #e2e6ec;background:#f4f6f9}
.rl-row{position:absolute;left:0;width:490px;height:36px;display:grid;grid-template-columns:1fr 104px 86px 70px;align-items:center;padding:0 14px;border-bottom:1px solid #eef0f4;border-left:3px solid transparent;font-size:13px;opacity:0;transform:translateX(12px);transition:opacity .35s,transform .35s var(--ease),background .25s,border-color .25s}
.rl-row.on{opacity:1;transform:none}
.rl-row.sel{background:#e6e8fc;border-left-color:#4338ca}
.rl-row .n{font-weight:650;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-row .n small{display:block;font:11px var(--mono);color:#5d6673;font-weight:400}
.rl-row .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;padding-right:14px;white-space:nowrap;transition:color .3s}
.rl-row .m{font-size:11.5px;color:#444c59}
.rl-row .c{display:flex;align-items:center;gap:6px;font:11.5px var(--mono);color:#444c59}
.rl-row .c::before{content:"";width:28px;height:4px;border-radius:2px;background:var(--cb,#0b8a63)}
.rl-row.mid .c::before{--cb:#c07400}
.rl-row.alarm .v{color:#98131d}.rl-row.alarm{border-left-color:#d1242f}.rl-row.alarm .c::before{--cb:#d1242f}
.rl-row.nf .v,.rl-row.nf .m{color:#6b7380;font-weight:500}.rl-row.nf .c{visibility:hidden}
.rl-row.flash{background:#fef3c7}
.rl-prov{position:absolute;left:0;top:286px;width:490px;height:304px;padding:16px 18px;border-top:1px solid #cfd5de;background:#fff;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s var(--ease)}
.rl-prov.on{opacity:1;transform:none}
.rl-prov h5{margin:0;font-size:15px;font-weight:700}
.rl-prov .id{font:11.5px var(--mono);color:#5d6673}
.rl-prov .big{display:flex;align-items:center;gap:10px;font-size:26px;font-weight:750;letter-spacing:-.02em;margin-top:4px}
.rl-chip{font-size:11.5px;font-weight:700;border-radius:999px;padding:2px 10px;background:#dcf4ea;color:#065a40;letter-spacing:0;white-space:nowrap}
.rl-chip.alarm{background:#fce0e2;color:#98131d}.rl-chip.user{background:#e6e8fc;color:#3730a3}
.rl-kv{display:grid;grid-template-columns:96px 1fr;gap:3px 10px;margin-top:8px;font-size:12.5px;color:#444c59}
.rl-kv b{font-weight:500;color:#5d6673}
.rl-bar{display:inline-block;width:96px;height:5px;border-radius:3px;background:#e2e6ec;vertical-align:middle;margin-right:8px;overflow:hidden}
.rl-bar i{display:block;height:100%;background:#0b8a63}
.rl-bar.alarm i{background:#d1242f}
.rl-sec{margin-top:12px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5d6673;font-weight:700}
.rl-tree{margin-top:6px;font-size:12.5px}
.rl-tree .root{font-family:var(--mono);font-size:12px;font-weight:600;color:#3730a3}
.rl-leaf{display:grid;grid-template-columns:14px 1fr 78px 44px;align-items:center;height:21px;padding-left:10px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s var(--ease)}
.rl-leaf.on{opacity:1;transform:none}
.rl-leaf::before{content:"";width:7px;height:7px;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 2px rgba(251,191,36,.3)}
.rl-leaf .lv{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.rl-leaf .lc{text-align:right;font:11px var(--mono);color:#5d6673}
.rl-evi{display:grid;grid-template-columns:1fr 150px;gap:12px;margin-top:6px;align-items:start}
.rl-quote{font:12px var(--mono);background:#f4f6f9;border-left:3px solid #1a62d6;padding:5px 9px;margin-top:5px}
.rl-crop{height:58px;border:1px solid #cfd5de;border-radius:6px;display:grid;place-items:center;background:#fff;font:700 17px var(--font);color:#4338ca;box-shadow:0 1px 3px rgba(15,23,42,.1)}
.rl-crop span{outline:2px solid #d1242f;outline-offset:3px;padding:0 3px;transition:outline-color .3s}
.rl-edit{display:flex;align-items:center;gap:8px;margin-top:12px}
.rl-btn{border:1px solid #cfd5de;border-radius:6px;padding:5px 12px;font-size:12.5px;font-weight:600;background:#fff;white-space:nowrap;transition:background .2s,color .2s,border-color .2s,opacity .3s}
.rl-btn.on{background:#e6e8fc;border-color:#4338ca;color:#3730a3}
.rl-btn.primary{background:#4338ca;border-color:#4338ca;color:#fff}
.rl-input{width:92px;border:1.5px solid #4338ca;border-radius:6px;padding:4px 9px;font:600 13px var(--mono);background:#fff;box-shadow:0 0 0 3px rgba(67,56,202,.15);min-height:28px}
.rl-input::after{content:"";display:inline-block;width:1.5px;height:14px;background:#161b22;vertical-align:-2px;margin-left:1px;animation:rl-blink .5s infinite alternate}
.rl-edit .rl-input,.rl-edit .rl-btn.primary,.rl-edit .rl-note{opacity:0;transition:opacity .3s}
.rl-edit.open .rl-input,.rl-edit.open .rl-btn.primary,.rl-edit.open .rl-note{opacity:1}
.rl-note{font-size:11.5px;color:#5d6673;white-space:nowrap}

/* dock */
.rl-dock{position:absolute;left:0;top:674px;width:1280px;height:46px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#fff;border-top:1px solid #cfd5de;font-size:13px}
.rl-dock>b{font-weight:700}
.rl-alarm{display:flex;align-items:center;gap:8px;border-radius:999px;padding:3px 12px 3px 10px;font-weight:700;font-size:12.5px;background:#e8ebef;color:#454c58;opacity:0;transition:opacity .3s,background .4s,color .4s,box-shadow .4s}
.rl-alarm.on{opacity:1;background:#fce0e2;color:#98131d;box-shadow:0 0 0 0 rgba(209,36,47,.5);animation:rl-ring 1.2s 3}
.rl-alarm.ok{opacity:1;background:#dcf4ea;color:#065a40;animation:none}
@keyframes rl-ring{0%{box-shadow:0 0 0 0 rgba(209,36,47,.5)}100%{box-shadow:0 0 0 12px rgba(209,36,47,0)}}
.rl-atext{color:#444c59;opacity:0;transition:opacity .3s}
.rl-atext.on{opacity:1}
.rl-whybtn{opacity:0}
.rl-whybtn.show{opacity:1}

/* Why? graph */
.rl-why{position:absolute;inset:0;background:#fff radial-gradient(#d5dae3 1px,transparent 1.2px) 0 0/22px 22px;opacity:0;transition:opacity .4s}
.rl-why.on{opacity:1}
.rl-why h5{position:absolute;left:24px;top:18px;margin:0;font-size:18px;font-weight:750}
.rl-why h5 small{font-size:13px;font-weight:500;color:#444c59;margin-left:10px}
.rl-whytext{position:absolute;left:24px;top:52px;width:740px;margin:0;font-size:14px;color:#444c59;line-height:1.5}
.rl-whytext b{color:#161b22}
.rl-why svg{position:absolute;inset:0;width:790px;height:590px}
.rl-edge{fill:none;stroke:#8b93a3;stroke-width:1.8;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset .6s var(--ease)}
.rl-edge.on{stroke-dashoffset:0}
.rl-node{position:absolute;width:172px;border:1.6px solid #0b8a63;border-radius:9px;background:#fff;padding:8px 11px 9px;box-shadow:0 2px 8px rgba(15,23,42,.1);opacity:0;transform:scale(.9);transition:opacity .35s,transform .4s var(--ease),box-shadow .3s,border-color .4s,background .4s}
.rl-node.on{opacity:1;transform:none}
.rl-node .t{font-size:12.5px;font-weight:650;color:#444c59;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-node .v{font-size:21px;font-weight:750;letter-spacing:-.01em;margin-top:2px}
.rl-node .s{font:11.5px var(--mono);color:#5d6673;margin-top:3px}
.rl-node.weak{border-style:dashed;border-color:#c07400;background:#fffaf0}
.rl-node.alarm{border-color:#d1242f;background:#fff1f2;box-shadow:0 0 0 4px rgba(209,36,47,.12),0 2px 8px rgba(15,23,42,.1)}
.rl-node.alarm .v{color:#98131d}
.rl-node.pick{box-shadow:0 0 0 4px rgba(251,191,36,.55),0 6px 18px rgba(15,23,42,.18)}
.rl-sus{position:absolute;left:14px;top:-12px;background:#d1242f;color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:2px 9px;opacity:0;transform:translateY(6px) scale(.8);transition:opacity .3s,transform .4s var(--ease)}
.rl-sus.on{opacity:1;transform:none}

/* before -> after card */
.rl-diff{position:absolute;left:125px;top:128px;width:540px;background:#fff;border:1px solid #cfd5de;border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.3);padding:18px 22px 20px;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .45s,transform .5s var(--ease)}
.rl-diff.on{opacity:1;transform:none}
.rl-diff h5{margin:0 0 6px;font-size:16px;font-weight:750;display:flex;align-items:center;gap:10px}
.rl-drow{display:grid;grid-template-columns:1fr 92px 26px 92px;align-items:center;height:38px;border-top:1px solid #eef0f4;font-size:13.5px;opacity:0;transform:translateX(-10px);transition:opacity .35s,transform .35s var(--ease)}
.rl-drow.on{opacity:1;transform:none}
.rl-drow.head{height:24px;border-top:0;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#5d6673;opacity:1;transform:none}
.rl-drow .b{text-align:right;color:#98131d;text-decoration:line-through;text-decoration-color:rgba(152,19,29,.5);font-variant-numeric:tabular-nums}
.rl-drow .a{text-align:right;font-weight:750;color:#065a40;font-variant-numeric:tabular-nums}
.rl-drow .ar{text-align:center;color:#8b93a3}
.rl-drow.head .b,.rl-drow.head .a{color:#5d6673;text-decoration:none;font-weight:700}
.rl-cleared{display:inline-flex;align-items:center;gap:7px;margin-top:12px;background:#dcf4ea;color:#065a40;border-radius:999px;padding:5px 14px 5px 10px;font-weight:700;font-size:13px;opacity:0;transform:scale(.85);transition:opacity .35s,transform .45s var(--ease)}
.rl-cleared.on{opacity:1;transform:none}
.rl-cleared svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* export menu + end card + cursor */
.rl-menu{position:absolute;right:14px;top:42px;width:300px;background:#fff;border:1px solid #cfd5de;border-radius:10px;box-shadow:0 18px 44px rgba(15,23,42,.28);padding:6px;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .3s var(--ease)}
.rl-menu.on{opacity:1;transform:none}
.rl-mi{display:grid;grid-template-columns:34px 1fr 22px;align-items:center;padding:8px 10px;border-radius:7px;opacity:0;transition:opacity .3s,background .2s}
.rl-mi.on{opacity:1}
.rl-mi.pick{background:#e6e8fc}
.rl-mi i{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#0b8a63;color:#fff;font:800 9.5px var(--font);font-style:normal}
.rl-mi:nth-child(2) i{background:#0a7388}.rl-mi:nth-child(3) i{background:#4338ca}.rl-mi:nth-child(4) i{background:#c07400}
.rl-mi b{display:block;font-size:13px}
.rl-mi small{display:block;font-size:11.5px;color:#5d6673}
.rl-mi svg{width:16px;height:16px;fill:none;stroke:#0b8a63;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s}
.rl-mi.done svg{opacity:1}
.rl-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,rgba(49,46,129,.97),rgba(67,56,202,.96));color:#fff;opacity:0;transition:opacity .7s}
.rl-end.on{opacity:1}
.rl-end svg.mk{width:84px;height:84px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.rl-end h5{margin:14px 0 0;font:780 46px/1.1 var(--display);letter-spacing:-.03em}
.rl-end p{font:650 30px/1.2 var(--display);letter-spacing:-.02em;color:#fbbf24}
.rl-lvls{display:flex;gap:12px;margin-top:26px}
.rl-lvl{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);border-radius:999px;padding:8px 18px 8px 12px;font-size:16px;font-weight:600;opacity:0;transform:translateY(12px);transition:opacity .4s,transform .45s var(--ease)}
.rl-lvl.on{opacity:1;transform:none}
.rl-lvl svg{width:18px;height:18px;fill:none;stroke:#fbbf24;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.rl-cursor{position:absolute;left:0;top:0;width:26px;height:26px;margin:-3px 0 0 -5px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));opacity:0;will-change:transform}
.rl-click{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2.5px solid #f59e0b;background:rgba(251,191,36,.25);opacity:0;will-change:transform,opacity}

/* phones: a taller frame; reel.js follows the action there instead of showing the whole viewer */
@media (max-width:38.7rem){.reel-clip{aspect-ratio:4/3}.reel-bar{padding-inline:.4rem}.reel-time{font-size:.72rem}}
@media (prefers-reduced-motion:reduce){.rl-halo.on,.rl-alarm.on{animation:none}.rl-halo.on{opacity:.8}}