/* Platform page: how BAU AI works. All white, a hairline outline on every box, soft stacked depth. */
.pl { --line:#E6E4EC; --line2:#EFEDF3; --mut:#6B6B6E; --ink:#0A0A0B; --pu:#5000A8;
  --raise:inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 1px 2px rgba(16,12,40,.05), 0 14px 32px -18px rgba(16,12,40,.26);
  --soft:inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 1px 1px rgba(16,12,40,.04);
  --ease:cubic-bezier(.22,1,.36,1); color:var(--ink); background:#fff; }
.pl-in { max-width:80rem; margin:0 auto; padding:0 1.5rem; }
@media (min-width:1024px) { .pl-in { padding:0 2rem; } }
.pl .mut { color:var(--mut); }
.pl-eye { display:inline-flex; align-items:center; gap:.55rem; margin:0 0 .9rem; font-size:.84rem; font-weight:600; color:var(--pu); }
.pl-eye i { width:7px; height:7px; border-radius:50%; background:var(--pu); box-shadow:0 0 0 4px rgba(80,0,168,.1); }
.pl-sec { padding:clamp(4rem,8vw,6.5rem) 0; border-top:1px solid var(--line2); }
.pl-head { max-width:46rem; margin-bottom:2.4rem; }
.pl-head h2 { margin:0; font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.07; letter-spacing:-.03em; font-weight:600; }
.pl-head p { margin:1rem 0 0; font-size:1.05rem; line-height:1.62; color:#45454A; }
.pl-head p a { color:var(--pu); }
.pl-note { margin:1.2rem 0 0; font-size:.86rem; color:var(--mut); }
.pl-lk { display:inline-flex; align-items:center; gap:.4rem; margin-top:1.2rem; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }
.pl-lk:hover { color:var(--pu); }
.pl-two { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
@media (max-width:900px) { .pl-two { grid-template-columns:1fr; } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* reveal */
.pl [data-rv] { opacity:0; transform:translateY(14px); transition:opacity .6s ease calc(var(--i,0) * 70ms), transform .9s var(--ease) calc(var(--i,0) * 70ms); }
.pl .in [data-rv], .pl [data-rv].in { opacity:1; transform:none; }

/* ---------- hero ---------- */
.pl-hero { padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(3rem,6vw,4.5rem); overflow:hidden; }
.pl-hgrid { display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:clamp(2rem,4vw,4rem); align-items:center; }
.pl-hero .bc { margin-bottom:1.4rem; }
.pl-hero h1 { margin:0; font-size:clamp(2.3rem,4.6vw,3.9rem); line-height:1.03; letter-spacing:-.04em; font-weight:600; }
.pl-hero h1 .ac { color:var(--pu); }
.pl-lede { margin:1.3rem 0 0; max-width:36rem; font-size:1.08rem; line-height:1.62; color:#3B3B40; }
.pl-cta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:1.8rem; }
.pl-btn { display:inline-flex; align-items:center; gap:.5rem; height:46px; padding:0 20px; border-radius:999px; color:#fff; font-weight:500; text-decoration:none;
  background:linear-gradient(180deg,#2B2B31,#0A0A0B); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(10,10,11,.3), 0 8px 18px -10px rgba(10,10,11,.6); transition:transform .15s ease, box-shadow .2s ease; }
.pl-btn:hover { transform:translateY(-1px); } .pl-btn:active { transform:scale(.97); }
.pl-ghost { display:inline-flex; align-items:center; gap:.5rem; height:46px; padding:0 18px; border-radius:999px; color:var(--ink); font-weight:500; text-decoration:none; background:linear-gradient(180deg,#fff,#FAFAFC); box-shadow:var(--soft); }
.pl-ghost:hover { color:var(--pu); }
.pl-facts { list-style:none; margin:2.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:38rem; }
.pl-facts li { padding:.8rem .85rem; border-radius:14px; background:linear-gradient(180deg,#fff,#FDFDFE); box-shadow:var(--soft); }
.pl-facts b { display:block; font-size:1.25rem; font-weight:600; letter-spacing:-.02em; }
.pl-facts span { display:block; margin-top:.2rem; font-size:.78rem; line-height:1.35; color:var(--mut); }
@media (max-width:1023px) { .pl-hgrid { grid-template-columns:1fr; } .pl-hvis { max-width:560px; margin:0 auto; width:100%; } }
@media (max-width:600px) { .pl-facts { grid-template-columns:1fr 1fr; } }

/* hero system: nine agents around one record */
.hv { position:relative; margin:0; aspect-ratio:1; max-width:580px; margin-left:auto; }
.hv-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hv-l { fill:none; stroke:#E2E0E8; stroke-width:.25; stroke-dasharray:1; stroke-dashoffset:1; animation:hv-draw 1.1s var(--ease) forwards; animation-delay:calc(.3s + var(--i) * .08s); }
.hv-p { fill:#5000A8; }
@keyframes hv-draw { to { stroke-dashoffset:0; } }
.hv-core { position:absolute; left:50%; top:50%; width:46%; transform:translate(-50%,-50%); padding:12px; border-radius:18px; background:linear-gradient(180deg,#fff,#FDFDFE);
  box-shadow:inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 2px 4px rgba(16,12,40,.04), 0 30px 60px -30px rgba(80,0,168,.35); z-index:2; animation:hv-in .9s var(--ease) both .1s; }
.hv-ch { display:flex; align-items:center; gap:8px; padding-bottom:8px; border-bottom:1px solid var(--line2); }
.hv-ch b { display:block; font-size:.85rem; } .hv-ch small { display:block; font-size:.68rem; color:var(--mut); }
.hv-feed { list-style:none; margin:6px 0 0; padding:0; height:132px; overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(#000 70%,transparent); mask-image:linear-gradient(#000 70%,transparent); }
.hv-feed li { display:flex; align-items:center; gap:7px; padding:5px 0; font-size:.72rem; color:#45454A; animation:hv-feed 8.1s linear infinite; }
.hv-feed li b { color:var(--ac); font-weight:600; }
@keyframes hv-feed { from { transform:translateY(0); } to { transform:translateY(-100%); } }
.hv-feed { display:flex; flex-direction:column; }
.hv-n { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:flex; align-items:center; gap:7px; padding:6px 10px 6px 6px; border-radius:999px; text-decoration:none; color:var(--ink); white-space:nowrap;
  background:linear-gradient(180deg,#fff,#FCFCFE); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 1px 2px rgba(16,12,40,.05), 0 10px 22px -14px rgba(16,12,40,.3); z-index:3;
  animation:hv-in .8s var(--ease) both; animation-delay:calc(.25s + var(--i) * .07s); transition:box-shadow .25s ease, transform .25s var(--ease); }
.hv-n:hover { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px var(--ac), 0 14px 26px -14px rgba(16,12,40,.35); transform:translate(-50%,-52%); }
.hv-n b { display:block; font-size:.78rem; font-weight:600; } .hv-n small { display:block; font-size:.64rem; color:var(--mut); }
.hv-n.on { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px var(--ac), 0 0 0 5px color-mix(in srgb, var(--ac) 12%, transparent), 0 14px 26px -14px rgba(16,12,40,.35); }
@keyframes hv-in { from { opacity:0; transform:translate(-50%,-40%) scale(.96); } }
.hv-core { animation-name:hv-core; } @keyframes hv-core { from { opacity:0; transform:translate(-50%,-44%) scale(.97); } }
.fm-av { width:var(--s); height:var(--s); border-radius:50%; object-fit:cover; flex:none; background:#fff; box-shadow:0 0 0 1px var(--line, #E6E4EC); }
@media (max-width:600px) { .hv-n span { display:none; } .hv-n { padding:4px; } .hv-core { width:54%; } .hv-feed { height:110px; } }

/* ---------- film ---------- */
.pl-film { background:#fff; }
.fm { --W:1120; --H:660; }
.fm-frame { border-radius:22px; padding:10px; background:linear-gradient(180deg,#fff,#FCFCFE);
  box-shadow:inset 0 1px 0 #fff, inset 0 -1px 0 rgba(16,12,40,.04), 0 0 0 1px var(--line), 0 2px 4px rgba(16,12,40,.04), 0 50px 90px -50px rgba(16,12,40,.4); }
.fm-vp { position:relative; aspect-ratio:1120 / 600; overflow:hidden; border-radius:14px; box-shadow:0 0 0 1px var(--line); background:#fff; }
.fm-cv { position:absolute; left:0; top:0; width:1120px; height:600px; transform-origin:0 0; transform:scale(var(--k,1)); }
.fm-big { position:absolute; inset:0; margin:auto; width:max-content; height:56px; display:flex; align-items:center; gap:10px; padding:0 22px 0 18px; border:0; border-radius:999px; cursor:pointer; font:inherit; font-weight:600; color:#fff; z-index:20;
  background:linear-gradient(180deg,#2B2B31,#0A0A0B); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 20px 40px -16px rgba(10,10,11,.6); transition:opacity .3s ease, transform .3s var(--ease); }
.fm-big .i { width:18px; height:18px; fill:#fff; stroke:none; }
.fm.started .fm-big { opacity:0; pointer-events:none; transform:scale(.94); }
.fm-bar { display:flex; align-items:center; gap:14px; padding:12px 8px 4px; }
.fm-pp { flex:none; width:38px; height:38px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:linear-gradient(180deg,#fff,#FAFAFC); box-shadow:var(--soft); color:var(--ink); }
.fm-pp svg { width:14px; height:14px; fill:currentColor; } .fm-pp .i-pl { display:none; } .fm.paused .fm-pp .i-pl, .fm:not(.started) .fm-pp .i-pl { display:block; } .fm.paused .fm-pp .i-pa, .fm:not(.started) .fm-pp .i-pa { display:none; }
.fm-now { flex:none; width:210px; min-width:0; } .fm-now b { display:block; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .fm-now small { display:block; font-size:.74rem; color:var(--mut); }
.fm-segs { flex:1; display:flex; gap:4px; min-width:0; }
.fm-segs i { flex:1; height:4px; border-radius:4px; background:#fff; box-shadow:inset 0 0 0 1px #E2E0E8; overflow:hidden; cursor:pointer; }
.fm-segs u { display:block; height:100%; width:100%; background:var(--ink); transform-origin:left; transform:scaleX(var(--p,0)); }
.fm-time { flex:none; font-size:.78rem; color:var(--mut); font-variant-numeric:tabular-nums; }
.fm-ch { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.fm-ch button { position:relative; width:100%; height:100%; display:flex; gap:10px; text-align:left; padding:12px 12px 14px; border:0; border-radius:14px; cursor:pointer; font:inherit; color:var(--ink);
  background:linear-gradient(180deg,#fff,#FDFDFE); box-shadow:var(--soft); transition:box-shadow .25s ease, transform .25s var(--ease); overflow:hidden; }
.fm-ch button:hover { transform:translateY(-2px); }
.fm-ch button.on { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px var(--ac), 0 10px 24px -16px rgba(16,12,40,.35); }
.fm-ch .n { flex:none; font-size:.72rem; font-weight:600; color:var(--ac); font-variant-numeric:tabular-nums; padding-top:2px; }
.fm-ch b { display:block; font-size:.88rem; font-weight:600; } .fm-ch small { display:block; margin-top:.25rem; font-size:.76rem; line-height:1.45; color:var(--mut); }
.fm-ch .pg { position:absolute; left:0; right:0; bottom:0; height:2px; } .fm-ch .pg u { display:block; height:100%; background:var(--ac); transform-origin:left; transform:scaleX(var(--p,0)); }
@media (max-width:1023px) { .fm-ch { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
  .fm-frame { padding:5px; border-radius:16px; } .fm-vp { border-radius:11px; }
  .fm-ch { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:8px; padding:2px 2px 8px; scrollbar-width:none; } .fm-ch::-webkit-scrollbar { display:none; }
  .fm-ch li { flex:0 0 78%; scroll-snap-align:start; }
  .fm-now { width:auto; flex:1; } .fm-segs { display:none; } .fm-bar { padding:10px 4px 2px; }
  .fm-big { height:46px; font-size:.9rem; }
}

/* film app shell (design size 1120 x 660) */
.fm-app { position:relative; width:1120px; height:600px; display:flex; background:#fff; font-size:13px; color:var(--ink); line-height:1.35; }
.fm-app .i { width:15px; height:15px; flex:none; }
.fm-rail { flex:none; width:60px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 0; box-shadow:inset -1px 0 0 var(--line2); }
.fm-rail .lg { margin-bottom:6px; } .fm-rail .nv { display:grid; gap:6px; } .fm-rail i { width:34px; height:34px; display:grid; place-items:center; color:#8A8A90; border-radius:10px; }
.fm-rail .sep { width:24px; height:1px; background:var(--line); margin:4px 0; } .fm-rail .ags { display:grid; gap:7px; } .fm-rail .sp { flex:1; }
.fm-rail .ra { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; transition:box-shadow .35s ease, transform .35s var(--ease); }
.fm-rail .ra .fm-av { filter:grayscale(1); opacity:.6; transition:filter .35s, opacity .35s; }
.fm-rail .ra.on { box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--ac,#5000A8); transform:scale(1.06); } .fm-rail .ra.on .fm-av { filter:none; opacity:1; }
.fm-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.fm-top { flex:none; height:56px; display:flex; align-items:center; gap:12px; padding:0 20px; box-shadow:inset 0 -1px 0 var(--line2); }
.fm-top .who { display:flex; align-items:center; gap:10px; } .fm-top .wav { width:30px; height:30px; display:grid; place-items:center; }
.fm-top .wn { display:block; font-size:14px; color:var(--ac,#5000A8); transition:color .3s; } .fm-top .wc { display:block; font-size:11.5px; color:var(--mut); }
.fm-top .who > span:last-child { transition:opacity .25s ease; } .fm-top.sw .who > span:last-child { opacity:0; }
.fm-top .sp { flex:1; }
.fm-top .job, .fm-top .apr { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:999px; font-size:11.5px; color:#45454A; background:linear-gradient(180deg,#fff,#FAFAFC); box-shadow:var(--soft); }
.fm-top .apr { color:#2D7A4F; }
.fm-sc { position:relative; flex:1; min-height:0; }
.fm-s { position:absolute; inset:0; padding:20px 22px; opacity:0; visibility:hidden; transition:opacity .45s ease, visibility 0s linear .45s; }
.fm-s.cur { opacity:1; visibility:visible; transition:opacity .45s ease .15s, visibility 0s; }
.fm-s [data-k] { opacity:0; transform:translateY(10px); transition:opacity .45s ease, transform .7s var(--ease); }
.fm-s.k1 [data-k="1"], .fm-s.k2 [data-k="2"], .fm-s.k3 [data-k="3"], .fm-s.k4 [data-k="4"], .fm-s.k5 [data-k="5"], .fm-s.k6 [data-k="6"] { opacity:1; transform:none; }
.fm-cur { position:absolute; left:0; top:0; width:20px; height:20px; z-index:30; opacity:0; transition:transform 1s cubic-bezier(.65,0,.35,1), opacity .3s ease; pointer-events:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.fm-cur.on { opacity:1; } .fm-cur svg { width:20px; height:20px; display:block; }
.fm-cur.ck::after { content:""; position:absolute; left:-9px; top:-9px; width:22px; height:22px; border-radius:50%; border:2px solid rgba(80,0,168,.5); animation:fm-ck .5s ease-out forwards; }
@keyframes fm-ck { from { transform:scale(.3); opacity:1; } to { transform:scale(1.5); opacity:0; } }
.fm-ho { position:absolute; right:20px; bottom:18px; z-index:25; display:flex; align-items:center; gap:9px; max-width:520px; padding:10px 14px 10px 11px; border-radius:14px; font-size:12px; font-weight:500;
  background:linear-gradient(180deg,#fff,#FDFDFE); box-shadow:inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 18px 36px -18px rgba(80,0,168,.45); opacity:0; transform:translateY(12px) scale(.98); transition:opacity .4s ease, transform .6s var(--ease); }
.fm-ho .i { color:#5000A8; } .fm-ho.on { opacity:1; transform:none; }

/* shared pieces inside scenes */
.fm-app .h { display:flex; align-items:baseline; gap:8px; margin:0 0 10px; } .fm-app .h b { font-size:13.5px; font-weight:600; }
.fm-app .fm-btn { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px; border-radius:9px; font-size:12px; font-weight:600; white-space:nowrap; transition:transform .15s ease; }
.fm-app .fm-btn.pr { color:#fff; background:linear-gradient(180deg,#2B2B31,#0A0A0B); box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(10,10,11,.3), 0 6px 14px -8px rgba(10,10,11,.5); }
.fm-app .fm-btn.ghost { color:var(--ink); background:linear-gradient(180deg,#fff,#FAFAFC); box-shadow:var(--soft); }
.fm-app .fm-btn.press { transform:scale(.95); }
.fm-chip { display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border-radius:999px; font-style:normal; font-size:10.5px; font-weight:600; white-space:nowrap; color:#45454A; background:#fff; box-shadow:inset 0 0 0 1px #E2E0E8; }
.fm-chip .i { width:11px; height:11px; }
.fm-chip.g { color:#2D7A4F; box-shadow:inset 0 0 0 1px #BFDCCB; } .fm-chip.r { color:#B14242; box-shadow:inset 0 0 0 1px #E9C3C3; } .fm-chip.a { color:#9A5A26; box-shadow:inset 0 0 0 1px #EBCFB5; } .fm-chip.k { color:#5000A8; box-shadow:inset 0 0 0 1px #D9C7F0; }
.cd, .fm-app .card { background:linear-gradient(180deg,#fff,#FDFDFE); border-radius:14px; box-shadow:var(--raise); }
.fm-ring { --p:50; position:relative; flex:none; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--ac,#5000A8) calc(var(--p) * 1%), #EDEBF2 0); }
.fm-ring::before { content:""; position:absolute; inset:4px; border-radius:50%; background:#fff; box-shadow:inset 0 1px 2px rgba(16,12,40,.08); }
.fm-ring b { position:relative; font-size:12.5px; font-weight:600; } .fm-ring.big { width:64px; height:64px; } .fm-ring.big::before { inset:6px; } .fm-ring.big b { font-size:14px; }
.ag-msg { display:flex; gap:9px; align-items:flex-start; } .ag-msg p { margin:0; padding:9px 12px; border-radius:4px 14px 14px 14px; background:#fff; box-shadow:var(--soft); font-size:12.5px; line-height:1.45; max-width:420px; }
.fmn { font-variant-numeric:tabular-nums; }

/* 1 profile */
.pf-grid { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:22px; height:100%; }
.pf-chat { display:flex; flex-direction:column; gap:14px; padding-top:6px; }
.pf-hi { margin:0; font-size:22px; font-weight:600; letter-spacing:-.02em; }
.pf-url { display:flex; gap:8px; padding:10px; border-radius:14px; background:#fff; box-shadow:var(--raise); max-width:520px; }
.pf-url .fld { flex:1; display:flex; align-items:center; gap:8px; height:34px; padding:0 11px; border-radius:9px; box-shadow:inset 0 0 0 1px #E2E0E8, inset 0 1px 2px rgba(16,12,40,.05); color:#45454A; font-size:12.5px; }
.pf-url .caret { width:1px; height:14px; background:var(--ink); animation:fm-blink 1s steps(1) infinite; } @keyframes fm-blink { 50% { opacity:0; } }
.pf-prog { padding:12px 14px; border-radius:14px; background:#fff; box-shadow:var(--raise); max-width:520px; } .pf-prog p { margin:0 0 8px; } .pf-prog b { display:block; } .pf-prog small { color:var(--mut); }
.pf-prog ul, .pf-fl, .fd-list, .fd-why ul, .rd-docs ul, .rd-f ul, .tk-q ul, .ct-dv ul, .by-po ul, .by-mt ul, .fl-rep ul, .gt, .pu-it .tl, .bl-g ul, .bl-s ul, .rc-log ul, .rc-st ul { list-style:none; margin:0; padding:0; }
.pf-prog li { display:flex; align-items:center; gap:7px; padding:4px 0; font-size:12px; color:#45454A; } .pf-prog li .i { color:#2D7A4F; }
.pf-panel { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); align-self:start; }
.pf-ph b { display:block; font-size:15px; } .pf-ph span { font-size:11.5px; }
.pf-bar { margin:14px 0 12px; display:grid; grid-template-columns:1fr auto; gap:6px; font-size:11.5px; color:var(--mut); } .pf-bar b { color:var(--ink); font-weight:600; }
.pf-bar i { grid-column:1 / -1; height:5px; border-radius:5px; box-shadow:inset 0 0 0 1px #E2E0E8; overflow:hidden; } .pf-bar u { display:block; height:100%; width:0; background:#5000A8; transition:width 1.2s var(--ease); }
.fm-profile.k5 .pf-bar u { width:100%; }
.pf-fl li { display:flex; align-items:center; gap:10px; padding:9px 11px; margin-bottom:7px; border-radius:11px; box-shadow:var(--soft); }
.pf-fl li > span { flex:1; min-width:0; } .pf-fl small { display:block; font-size:10.5px; color:var(--mut); } .pf-fl b { display:block; font-size:12.5px; font-weight:500; }
.pf-fl .s-conf { display:none; } .fm-profile.k5 .pf-fl .s-sug { display:none; } .fm-profile.k5 .pf-fl .s-conf { display:inline-flex; animation:fm-pop .4s var(--ease); }
@keyframes fm-pop { from { transform:scale(.8); opacity:0; } }
.pf-act { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

/* 2 find */
.fd-top { display:flex; align-items:center; gap:16px; margin-bottom:14px; font-size:12px; } .fd-top .sp { flex:1; } .fd-top b { color:var(--ink); }
.scan-pill { display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 11px; border-radius:999px; font-weight:600; color:#5000A8; box-shadow:inset 0 0 0 1px #D9C7F0; }
.scan-pill i { width:7px; height:7px; border-radius:50%; background:#5000A8; animation:fm-ping 1.4s ease-out infinite; } @keyframes fm-ping { 0% { box-shadow:0 0 0 0 rgba(80,0,168,.45); } 100% { box-shadow:0 0 0 8px rgba(80,0,168,0); } }
.fd-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; }
.fd-list { display:grid; gap:10px; }
.fd-list .bd { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px; background:#fff; box-shadow:var(--raise); transition:box-shadow .35s ease; }
.fm-find.k4 .bd.b1 { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px #5000A8, 0 14px 30px -16px rgba(80,0,168,.4); }
.fd-list .t { flex:1; min-width:0; } .fd-list .t b { display:block; font-size:14px; } .fd-list .t small { display:block; color:var(--mut); font-size:11.5px; }
.fd-list .meta { display:flex; gap:14px; margin-top:6px; font-size:11.5px; color:#45454A; } .fd-list .meta span { display:inline-flex; align-items:center; gap:5px; }
.fd-why { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); } .fd-why .h { font-size:11px; font-weight:600; color:var(--mut); margin:0 0 4px; } .fd-why .tt { display:block; font-size:15px; } .fd-why > small { display:block; margin:2px 0 10px; }
.fd-why li { display:flex; gap:8px; padding:8px 0; border-top:1px solid var(--line2); } .fd-why li .i { color:#2D7A4F; margin-top:1px; } .fd-why li b { display:block; font-size:12px; } .fd-why li small { color:var(--mut); font-size:11.5px; }
.fd-why .fm-btn { margin-top:12px; width:100%; justify-content:center; }

/* 3 read */
.rd-grid { display:grid; grid-template-columns:400px minmax(0,1fr); gap:18px; height:100%; }
.rd-docs, .rd-f { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); align-self:start; }
.rd-docs .bar { height:5px; border-radius:5px; box-shadow:inset 0 0 0 1px #E2E0E8; overflow:hidden; margin-bottom:10px; } .rd-bar { display:block; height:100%; width:0; background:#5000A8; transition:width 2.6s linear; }
.fm-read.k1 .rd-bar { width:60%; } .fm-read.k3 .rd-bar { width:100%; }
.rd-docs li { display:flex; align-items:center; gap:9px; padding:8px 0; border-top:1px solid var(--line2); } .rd-docs li > .i { color:#8A8A90; } .rd-docs li span { flex:1; min-width:0; } .rd-docs b { display:block; font-weight:500; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rd-docs small { color:var(--mut); font-size:11px; }
.rd-docs .ok { color:#2D7A4F; }
.rd-f li { display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--line2); } .rd-f li .fm-chip { flex:none; width:62px; justify-content:center; } .rd-f li b { display:block; font-size:12.5px; } .rd-f li small { display:inline-flex; align-items:center; gap:5px; margin-top:3px; font-size:11px; color:#5000A8; font-weight:500; } .rd-f li small .i { width:12px; height:12px; }
.gng { display:flex; align-items:center; gap:14px; margin-top:12px; padding:14px; border-radius:14px; box-shadow:inset 0 0 0 1.5px #BFDCCB, 0 10px 24px -16px rgba(45,122,79,.4); }
.gng .fm-ring { --ac:#2D7A4F; } .gng > span:nth-child(2) { flex:1; } .gng small { display:block; font-size:11px; color:var(--mut); } .gng b { display:block; font-size:14px; } .gng .mut { font-size:11.5px; }

/* 4 takeoff */
.tk-grid { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:18px; height:100%; }
.tk-sheet { position:relative; padding:12px; border-radius:16px; background:#fff; box-shadow:var(--raise); }
.tk-sheet .tb { display:flex; gap:10px; align-items:baseline; margin-bottom:6px; font-size:11.5px; color:var(--mut); } .tk-sheet .tb b { color:var(--ink); font-size:13px; }
.tk-sheet svg { width:100%; height:auto; display:block; }
.tk-sheet .ol { fill:none; stroke:#0A0A0B; stroke-width:2.2; } .tk-sheet .wl { fill:none; stroke:#0A0A0B; stroke-width:1.2; }
.tk-sheet .rm { fill:rgba(15,124,140,.1); stroke:#0F7C8C; stroke-width:1.4; transform:none !important; }
.tk-sheet text { font-size:9.5px; fill:#45454A; text-anchor:middle; } .tk-sheet .dr circle { fill:none; stroke:#C97B3F; stroke-width:2; } .tk-sheet .dr text { fill:#9A5A26; font-weight:600; text-anchor:start; }
.tk-q { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); align-self:start; }
.tk-q li { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line2); } .tk-q li span { flex:1; min-width:0; } .tk-q li b { display:block; font-size:12.5px; font-weight:500; } .tk-q li small { display:inline-flex; gap:5px; align-items:center; font-size:11px; color:#0F7C8C; font-weight:500; } .tk-q li small .i { width:12px; height:12px; }
.tk-q .n { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.disc { display:flex; gap:9px; margin-top:12px; padding:11px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px #EBCFB5; } .disc .i { color:#C97B3F; } .disc b { display:block; font-size:12px; } .disc small { color:var(--mut); font-size:11.5px; }

/* 5 level */
.lv-wrap { display:flex; flex-direction:column; gap:14px; }
.lv { width:100%; border-collapse:separate; border-spacing:0; border-radius:16px; background:#fff; box-shadow:var(--raise); overflow:hidden; font-variant-numeric:tabular-nums; }
.lv th { text-align:left; font-size:11.5px; font-weight:600; color:var(--mut); padding:12px 14px; border-bottom:1px solid var(--line2); } .lv th:not(:first-child), .lv td:not(:first-child) { text-align:right; }
.lv td { position:relative; padding:10px 14px; border-bottom:1px solid var(--line2); font-size:12.5px; } .lv tfoot td { font-weight:500; } .lv .fm-lvd td { border-bottom:0; } .lv .fm-lvd .fm-chip { margin-left:8px; }
.lv tr[data-k] { transform:none !important; }
.lv td.gap { color:#B14242; } .lv td.ub { color:#B14242; font-weight:600; }
.lv .plug, .lv .flag { display:block; font-style:normal; font-size:10.5px; font-weight:600; } .lv .plug { color:#9A5A26; } .lv .flag { color:#B14242; }
.lv-rec { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:14px; box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px #C97B3F, 0 14px 30px -18px rgba(201,123,63,.5); background:#fff; }
.lv-rec > span:nth-child(2) { flex:1; } .lv-rec small { display:block; font-size:11px; color:var(--mut); } .lv-rec b { display:block; font-size:14.5px; } .lv-rec .mut { font-size:11.5px; }

/* 6 contract */
.ct-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; height:100%; }
.ct-doc { border-radius:14px; background:#fff; box-shadow:var(--raise); overflow:hidden; align-self:start; }
.ct-doc .strip { display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; box-shadow:inset 0 -1px 0 var(--line2); font-size:12px; } .ct-doc .strip .mut { margin-left:auto; }
.ct-doc .pg { position:relative; padding:18px 20px 22px; min-height:380px; } .ct-doc .sec { margin:0 0 8px; font-weight:700; letter-spacing:.02em; font-size:12.5px; }
.ct-doc .cl { margin:0 0 10px; font-size:13px; line-height:1.7; max-width:calc(100% - 280px); }
.ct-doc ins { text-decoration:none; background:linear-gradient(transparent 92%, #2D7A4F 92%); color:#1F6A41; transition:opacity .5s ease !important; transform:none !important; }
.cm { position:absolute; right:14px; top:58px; width:250px; display:flex; gap:8px; padding:10px 11px; border-radius:12px; background:#fff; box-shadow:inset 0 1px 0 #fff, 0 0 0 1px #D9C7F0, 0 14px 28px -14px rgba(60,20,120,.4); font-size:11.5px; line-height:1.45; }
.cm p { margin:4px 0 0; } .cm .hi { color:#B14242; font-weight:600; } .cm .q b { font-weight:600; } .cm small { color:var(--mut); }
.ct-dv { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); align-self:start; }
.ct-dv li { display:flex; align-items:center; gap:10px; padding:8px 8px; margin:0 -8px; border-radius:9px; } .ct-dv li > b { width:18px; font-size:11px; color:var(--mut); } .ct-dv li span { flex:1; font-size:12.5px; } .ct-dv li small { display:block; font-size:11px; color:var(--mut); }
.ct-dv li.on { box-shadow:inset 0 0 0 1px #D9C7F0; }
.ct-dv .sum { margin-top:10px; padding-top:10px; border-top:1px solid var(--line2); } .ct-dv .sum b { display:block; } .ct-dv .sum span { font-size:11.5px; }

/* 7 buy */
.by-grid { display:grid; grid-template-columns:330px 250px minmax(0,1fr); gap:16px; height:100%; align-items:start; }
.by-po, .by-mt { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); }
.by-po .h .fm-chip { margin-left:auto; } .by-po .s-ap, .fm-buy.k2 .by-po .s-dr { display:none; } .fm-buy.k2 .by-po .s-ap { display:inline-flex; animation:fm-pop .4s var(--ease); }
.by-po > small { display:block; margin:-4px 0 8px; font-size:11px; }
.by-po li { display:grid; grid-template-columns:1fr auto; padding:8px 0; border-top:1px solid var(--line2); } .by-po li span { font-size:12px; } .by-po li b { font-size:12.5px; font-weight:600; text-align:right; } .by-po li small { grid-column:1 / -1; font-size:10.5px; color:#0F7C8C; font-weight:500; }
.by-po .ft { display:flex; align-items:center; justify-content:space-between; margin-top:10px; } .appr { display:flex; align-items:center; gap:6px; margin:10px 0 0; font-size:11.5px; color:#2D7A4F; font-weight:500; }
.by-tk { padding:9px; border-radius:16px; background:#fff; box-shadow:var(--raise); } .by-tk .ph, .pu-ph .ph { position:relative; display:block; border-radius:11px; overflow:hidden; aspect-ratio:4 / 3.4; }
.by-tk img, .pu-ph img, .fl-phone .ph img { width:100%; height:100%; object-fit:cover; display:block; }
.by-tk p, .pu-ph p { margin:8px 4px 2px; } .by-tk b, .pu-ph b { display:block; font-size:12.5px; } .by-tk small, .pu-ph small { color:var(--mut); font-size:11px; }
.by-tk .scan { position:absolute; left:0; right:0; top:0; height:30%; background:linear-gradient(180deg, transparent, rgba(45,122,79,.35)); border-bottom:2px solid #2D7A4F; transform:translateY(-100%); }
.fm-buy.k3 .by-tk .scan { animation:fm-scan 1.4s ease-in-out .3s 2; } @keyframes fm-scan { to { transform:translateY(340%); } }
.by-tk .ocr { position:absolute; border:1.5px solid #fff; box-shadow:0 0 0 1px #2D7A4F; border-radius:4px; opacity:0; transition:opacity .3s ease 2.6s; } .by-tk .o1 { left:30%; top:38%; width:46%; height:10%; } .by-tk .o2 { left:30%; top:52%; width:46%; height:10%; }
.fm-buy.k3 .by-tk .ocr { opacity:1; }
.by-mt .th, .by-mt li { display:grid; grid-template-columns:1fr 70px 70px 76px; gap:8px; align-items:center; } .by-mt .th { font-size:10.5px; color:var(--mut); padding-bottom:6px; } .by-mt li { padding:9px 0; border-top:1px solid var(--line2); font-size:12px; font-variant-numeric:tabular-nums; } .by-mt li .fm-chip { justify-self:end; }
.hold { display:flex; gap:9px; margin-top:12px; padding:11px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px #E9C3C3; } .hold .i { color:#B14242; } .hold b { display:block; font-size:12.5px; } .hold small { font-size:11.5px; color:var(--mut); }

/* 8 field */
.fl-grid { display:grid; grid-template-columns:270px minmax(0,1fr); gap:22px; height:100%; align-items:start; }
.fl-phone { height:476px; padding:12px 10px; border-radius:34px; background:#fff; box-shadow:0 0 0 7px #0E0E10, 0 0 0 8px #3A3A3F, 0 30px 50px -26px rgba(10,10,11,.55); margin:8px 0 0 10px; display:flex; flex-direction:column; overflow:hidden; }
.fl-phone .sb { display:flex; justify-content:space-between; align-items:center; padding:0 10px 8px; font-size:11px; } .fl-phone .sb i { width:70px; height:18px; border-radius:10px; background:#0A0A0B; }
.fl-phone .tt { margin:0; padding:0 8px 8px; border-bottom:1px solid var(--line2); } .fl-phone .tt b { display:block; font-size:12.5px; } .fl-phone .tt small { color:var(--mut); font-size:10.5px; }
.fl-phone .ms { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:8px 4px 4px; }
.fl-phone .m { width:88%; padding:6px 8px; border-radius:4px 12px 12px 12px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(16,12,40,.05); font-size:11.5px; }
.fl-phone .m > b { display:block; font-size:10.5px; margin-bottom:3px; } .fl-phone .m > small { display:block; text-align:right; font-size:9.5px; color:var(--mut); margin-top:3px; }
.fl-phone .ph { display:block; border-radius:8px; overflow:hidden; aspect-ratio:16 / 10; }
.fl-phone .vo { display:flex; align-items:center; gap:7px; } .fl-phone .pb { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:#424B5A; color:#fff; } .fl-phone .pb .i { width:10px; height:10px; fill:#fff; stroke:none; }
.fl-phone .wv { flex:1; display:flex; align-items:center; gap:2px; height:20px; } .fl-phone .wv i { flex:1; height:calc(var(--h) * 1px); border-radius:2px; background:#C3C7CC; }
.fl-phone .sys { align-self:center; font-size:10px; color:#8A5A2B; padding:3px 9px; border-radius:7px; box-shadow:inset 0 0 0 1px #E6D3BF; }
.fl-rep { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); }
.fl-rep .h .fm-chip { margin-left:auto; } .fl-rep .s-ap, .fm-field.k6 .fl-rep .s-dr { display:none; } .fm-field.k6 .fl-rep .s-ap { display:inline-flex; animation:fm-pop .4s var(--ease); }
.fl-rep li { display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line2); font-size:12.5px; }
.fl-rep .k { color:var(--mut); font-size:12px; } .fl-rep .src { font-style:normal; font-size:10.5px; font-weight:600; color:#8A5A2B; padding:2px 7px; border-radius:6px; box-shadow:inset 0 0 0 1px #E6D3BF; white-space:nowrap; }
.rfi { display:flex; align-items:center; gap:12px; margin-top:10px; padding:11px 12px; border-radius:12px; box-shadow:var(--soft); } .rfi > b { color:#8A5A2B; font-size:12.5px; } .rfi span { flex:1; } .rfi span b { display:block; font-size:12.5px; } .rfi small { color:var(--mut); font-size:11px; }
.fl-rep .ft { display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:11.5px; }

/* 9 schedule */
.sc-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:18px; height:100%; align-items:start; }
.sc-g, .sc-o { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); }
.sc-g .h .fm-chip:first-of-type { margin-left:auto; } .sc-g .s-rk { display:none; } .fm-sched.k2 .sc-g .s-rk { display:inline-flex; } .fm-sched.k2 .sc-g .s-ok { display:none; } .fm-sched.k5 .sc-g .s-rk { display:none; } .fm-sched.k5 .sc-g .s-ok { display:inline-flex; }
.sc-g .h .mut { font-size:11px; }
.sc-g .days { position:relative; height:20px; margin-left:170px; font-size:10.5px; color:var(--mut); } .sc-g .days span { position:absolute; left:var(--l); white-space:nowrap; } .sc-g .days span:last-child { transform:translateX(-100%); }
.gt { position:relative; } .gt li { display:flex; align-items:center; height:42px; border-top:1px solid var(--line2); } .gt li[data-k] { transform:none !important; }
.gt .t { width:170px; flex:none; font-size:12px; } .gt .tr { position:relative; flex:1; height:100%; background-image:linear-gradient(90deg, var(--line2) 1px, transparent 1px); background-size:calc(100% / 22) 100%; }
.gt .br { position:absolute; top:12px; height:18px; left:var(--l); width:var(--w); border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px #D9D6C2; transition:left 1s var(--ease), width 1s var(--ease), background .4s ease; transform-origin:left; animation:fm-grow .9s var(--ease) both; }
.gt .br.cp { background:#7A6A1F; box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.fm-sched.k2 .gt .br.dl { background:#B14242; box-shadow:none; }
.fm-sched.k2 .gt .br.mv { left:calc(var(--l) + 9.1%); } .fm-sched.k5 .gt .br.mv { left:var(--l); }
@keyframes fm-grow { from { transform:scaleX(0); } }
.gt .ms { position:absolute; top:14px; left:var(--l); width:13px; height:13px; margin-left:-6px; background:#2D7A4F; transform:rotate(45deg); border-radius:2px; transition:left 1s var(--ease), background .4s; }
.gt .fm-md { position:absolute; top:13px; left:calc(var(--l) - 58px); font-size:11px; font-weight:600; color:#2D7A4F; white-space:nowrap; transition:left 1s var(--ease); } .gt .fm-md .d2 { display:none; }
.fm-sched.k2 .gt .ms { left:calc(var(--l) + 18.2%); background:#B14242; } .fm-sched.k2 .gt .fm-md { left:calc(var(--l) + 18.2% - 58px); color:#B14242; } .fm-sched.k2 .gt .fm-md .d1 { display:none; } .fm-sched.k2 .gt .fm-md .d2 { display:inline; }
.fm-sched.k5 .gt .ms { left:var(--l); background:#2D7A4F; } .fm-sched.k5 .gt .fm-md { left:calc(var(--l) - 58px); color:#2D7A4F; } .fm-sched.k5 .gt .fm-md .d1 { display:inline; } .fm-sched.k5 .gt .fm-md .d2 { display:none; }
.gt .today { position:absolute; top:0; bottom:0; left:170px; width:2px; background:#7A6A1F; }
.sc-g .why { display:flex; gap:8px; margin:12px 0 0; padding:10px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px #E9C3C3; font-size:12px; } .sc-g .why .i { color:#B14242; }
.sc-o .op { display:flex; align-items:center; gap:10px; padding:11px 12px; margin-bottom:8px; border-radius:12px; box-shadow:var(--soft); transition:box-shadow .35s ease; } .sc-o .op span { flex:1; } .sc-o .op b { display:block; font-size:12.5px; } .sc-o .op small { font-size:11px; color:var(--mut); }
.fm-sched.k4 .sc-o .op.a { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px #7A6A1F, 0 12px 24px -16px rgba(122,106,31,.5); }

/* 10 punch */
.pu-grid { display:grid; grid-template-columns:380px minmax(0,1fr); grid-template-rows:auto auto; gap:16px 18px; height:100%; align-items:start; }
.pu-ph { grid-row:1 / span 2; padding:9px; border-radius:16px; background:#fff; box-shadow:var(--raise); } .pu-ph .ph { aspect-ratio:4 / 4.4; }
.pu-ph .bx { position:absolute; left:34%; top:36%; width:26%; height:24%; border:2px solid #B14242; border-radius:7px; } .pu-ph .bx em { position:absolute; left:-2px; top:100%; margin-top:4px; font-style:normal; font-size:10.5px; font-weight:600; color:#fff; background:#B14242; padding:2px 7px; border-radius:5px; white-space:nowrap; }
.pu-it { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); } .pu-it .h .fm-chip { margin-left:auto; } .pu-it .s-ap, .fm-punch.k5 .pu-it .s-dr { display:none; } .fm-punch.k5 .pu-it .s-ap { display:inline-flex; animation:fm-pop .4s var(--ease); }
.pu-it dl { display:grid; grid-template-columns:80px 1fr; gap:6px 10px; margin:0 0 12px; font-size:12px; } .pu-it dt { color:var(--mut); } .pu-it dd { margin:0; }
.pu-it .tl { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .pu-it .tl::before { content:""; position:absolute; left:6px; right:12%; top:6px; height:2px; background:#E6E4EC; }
.pu-it .tl li { position:relative; } .pu-it .tl i { display:block; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 2px #B14242; margin-bottom:7px; }
.pu-it .tl li.t4 i { box-shadow:inset 0 0 0 2px #2D7A4F; background:#2D7A4F; } .pu-it .tl b { display:block; font-size:11.5px; } .pu-it .tl small { font-size:10.5px; color:var(--mut); }
.pu-ct { display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); } .pu-ct .fm-ring { --ac:#B14242; transition:background .6s; } .fm-punch.k6 .pu-ct .fm-ring { --p:100; --ac:#2D7A4F; }
.pu-ct b { display:block; font-size:14px; } .pu-ct small { display:block; font-size:12px; } .pu-ct .rdy { display:inline-flex; align-items:center; gap:6px; margin-top:6px; font-size:11.5px; font-weight:600; color:#2D7A4F; }

/* 11 bill */
.bl-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; height:100%; align-items:start; }
.bl-g, .bl-s .mg, .bl-s .src { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); }
.bl-g .h .fm-chip { margin-left:auto; } .bl-g .s-ap, .fm-bill.k5 .bl-g .s-dr { display:none; } .fm-bill.k5 .bl-g .s-ap { display:inline-flex; animation:fm-pop .4s var(--ease); }
.bl-g li { display:flex; justify-content:space-between; padding:11px 0; border-top:1px solid var(--line2); font-size:13px; font-variant-numeric:tabular-nums; } .bl-g li span { color:#45454A; }
.bl-g li.tot { margin-top:4px; padding:12px 14px; border:0; border-radius:12px; box-shadow:inset 0 0 0 1.5px #2F5E8C; } .bl-g li.tot span { color:#2F5E8C; font-weight:600; } .bl-g li.tot b { font-size:16px; }
.bl-g .ft { display:flex; align-items:center; justify-content:space-between; margin-top:12px; font-size:11.5px; }
.bl-s { display:grid; gap:14px; } .bl-s .mg { display:flex; align-items:center; gap:14px; } .bl-s .fm-ring { --ac:#2F5E8C; } .bl-s .mg small { display:block; font-size:11px; color:var(--mut); } .bl-s .mg b { display:block; font-size:14px; } .bl-s .dn { font-size:11.5px; color:#B14242; font-weight:500; }
.bl-s .src .h { font-size:11px; color:var(--mut); font-weight:600; margin:0 0 6px; } .bl-s .src li { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line2); font-size:12px; }

/* 12 record */
.rc-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:18px; height:100%; align-items:start; }
.rc-log { padding:14px 16px; border-radius:16px; background:#fff; box-shadow:var(--raise); } .rc-log .h .mut { font-size:11px; }
.rc-log .th, .rc-log li { display:grid; grid-template-columns:24px minmax(0,1.3fr) minmax(0,1fr) 140px; gap:10px; align-items:center; } .rc-log .th { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 140px; padding:0 0 6px 34px; font-size:10.5px; color:var(--mut); }
.rc-log li { padding:7px 0; border-top:1px solid var(--line2); font-size:12px; } .rc-log .fm-w b { color:var(--ac); font-weight:600; margin-right:5px; } .rc-log .fm-w small { color:var(--ink); font-size:12px; }
.rc-log .c, .rc-log .p { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rc-log .p { color:#2D7A4F; font-weight:500; } .rc-log .c .i, .rc-log .p .i { width:12px; height:12px; }
.rc-st ul { display:grid; gap:10px; } .rc-st li { padding:14px; border-radius:14px; background:#fff; box-shadow:var(--raise); } .rc-st b { display:block; font-size:24px; font-weight:600; letter-spacing:-.02em; } .rc-st small { font-size:11.5px; color:var(--mut); } .rc-st .sm { font-size:10.5px; margin:8px 2px 0; }
.rc-end { position:absolute; inset:-20px -22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); z-index:5; text-align:center; }
.rc-end b { font-size:40px; letter-spacing:-.03em; font-weight:600; } .rc-end span { font-size:18px; color:#45454A; }

/* ---------- layers ---------- */
.ly-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ly { display:flex; flex-direction:column; padding:20px; border-radius:18px; background:linear-gradient(180deg,#fff,#FDFDFE); box-shadow:var(--raise); }
.ly-n { font-size:.74rem; font-weight:600; color:var(--pu); } .ly-t { margin-top:.5rem; font-size:1.2rem; font-weight:600; letter-spacing:-.01em; } .ly-s { font-size:.86rem; color:var(--mut); margin-top:.15rem; }
.ly p { margin:.8rem 0 1rem; font-size:.9rem; line-height:1.55; color:#45454A; }
.ly-avs { display:flex; flex-wrap:wrap; gap:4px; } .ly-avs .fm-av { box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--line); }
.ly-mini, .ly-kv, .ly-ap { list-style:none; margin:0; padding:10px; border-radius:12px; box-shadow:var(--soft); font-size:.76rem; }
.ly-mini li, .ly-kv li, .ly-ap li { display:flex; align-items:center; gap:7px; padding:5px 0; } .ly-mini li + li, .ly-kv li + li, .ly-ap li + li { border-top:1px solid var(--line2); }
.ly-mini span, .ly-kv span, .ly-ap span { flex:1; min-width:0; } .ly-mini em { font-style:normal; color:var(--pu); font-weight:600; } .ly-kv span { color:var(--mut); } .ly-ap .i { width:13px; height:13px; color:#2D7A4F; } .ly-ap small { color:var(--mut); }
.ly .i { width:14px; height:14px; }
.ly-lk { margin-top:auto; padding-top:1rem; display:inline-flex; align-items:center; gap:.35rem; font-size:.88rem; font-weight:600; color:var(--ink); text-decoration:none; } .ly-lk:hover { color:var(--pu); }
@media (max-width:1023px) { .ly-grid { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { .ly-grid { grid-template-columns:1fr; } }

/* ---------- agent table ---------- */
.tb-wrap { border-radius:18px; background:#fff; box-shadow:var(--raise); overflow:auto; }
.pl-tb { width:100%; min-width:860px; border-collapse:collapse; font-size:.9rem; }
.pl-tb th, .pl-tb td { text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--line2); line-height:1.5; }
.pl-tb thead th { font-size:.78rem; font-weight:600; color:var(--mut); background:#fff; }
.pl-tb tbody tr:last-child > * { border-bottom:0; }
.pl-tb tbody th a { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; } .pl-tb tbody th b { display:block; color:var(--ac); font-weight:600; } .pl-tb tbody th small { display:block; font-size:.78rem; color:var(--mut); font-weight:400; }
.pl-tb .st { display:inline-flex; white-space:nowrap; font-size:.76rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); }
.pl-tb tbody tr { transition:background .2s ease; } .pl-tb tbody tr:hover { background:#FCFCFE; }
.pl-tb td:last-child { white-space:nowrap; font-weight:500; }

/* ---------- handoffs ---------- */
.hm { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(1.5rem,3vw,3rem); align-items:start; }
.hm-map { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:18px; border-radius:20px; background:linear-gradient(180deg,#fff,#FDFDFE); box-shadow:var(--raise); }
.hm-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:0; }
.hm-svg path { fill:none; stroke:#B9A2E6; stroke-width:1.8; stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1s var(--ease), stroke .3s ease, stroke-width .3s ease; }
.hm.in .hm-svg path { stroke-dashoffset:0; } .hm-svg path.on { stroke:#5000A8; stroke-width:2.6; }
.hm-col { position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; }
.hm-st { margin:0 0 4px; font-size:.78rem; font-weight:600; color:var(--mut); } .hm-st span { color:var(--pu); margin-right:.4rem; }
.hm-n { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:14px; background:#fff; box-shadow:var(--soft); transition:box-shadow .3s ease, transform .3s var(--ease); }
.hm-n b { display:block; font-size:.86rem; color:var(--ac); } .hm-n small { display:block; font-size:.72rem; color:var(--mut); }
.hm-n.on { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px var(--ac), 0 12px 24px -14px rgba(16,12,40,.35); transform:translateY(-2px); }
.hm-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.hm-list li { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:14px; background:#fff; box-shadow:var(--soft); cursor:default; transition:box-shadow .3s ease, transform .3s var(--ease); }
.hm-list li.on { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px #5000A8, 0 12px 24px -16px rgba(80,0,168,.4); transform:translateX(3px); }
.hm-list .pr { flex:none; display:flex; align-items:center; gap:4px; color:#8A8A90; } .hm-list b { display:block; font-size:.86rem; font-weight:600; } .hm-list small { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:var(--pu); font-weight:500; } .hm-list small .i { width:12px; height:12px; }
.hm-list .tx { min-width:0; } .hm-list .i { width:14px; height:14px; }
@media (max-width:1023px) { .hm { grid-template-columns:1fr; } }
@media (max-width:640px) { .hm-map { grid-template-columns:1fr 1fr; } }

/* ---------- control ---------- */
.ctl { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ctl li { display:flex; gap:12px; padding:14px 16px; border-radius:16px; background:#fff; box-shadow:var(--soft); }
.ck { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#2D7A4F; box-shadow:inset 0 0 0 1px #BFDCCB; } .ck .i { width:14px; height:14px; }
.ctl b, .sec-l b { display:block; font-size:.95rem; font-weight:600; } .ctl small, .sec-l small { display:block; margin-top:.2rem; font-size:.86rem; line-height:1.5; color:var(--mut); }
.al { margin:0; padding:16px; border-radius:20px; background:linear-gradient(180deg,#fff,#FDFDFE); box-shadow:var(--raise); position:sticky; top:7rem; }
.al-h { display:flex; align-items:baseline; gap:10px; padding:0 4px 12px; border-bottom:1px solid var(--line2); } .al-h .mut { font-size:.8rem; }
.al ul { list-style:none; margin:0; padding:0; }
.al li { display:grid; grid-template-columns:64px 22px minmax(0,1fr) auto; gap:10px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--line2); font-size:.86rem; opacity:0; transform:translateY(8px); transition:opacity .45s ease calc(var(--i) * 260ms), transform .7s var(--ease) calc(var(--i) * 260ms); }
.al.in li { opacity:1; transform:none; } .al li:last-child { border-bottom:0; }
.al time { font-size:.76rem; color:var(--mut); font-variant-numeric:tabular-nums; } .al li b { font-weight:600; } .al .o { color:#45454A; }
.al em { font-style:normal; display:grid; place-items:center; height:22px; min-width:22px; padding:0 7px; border-radius:999px; font-size:.7rem; font-weight:600; }
.al em.ok { color:#2D7A4F; box-shadow:inset 0 0 0 1px #BFDCCB; padding:0; } .al em.ok .i { width:12px; height:12px; } .al em.dr { color:#5000A8; box-shadow:inset 0 0 0 1px #D9C7F0; }
@media (max-width:900px) { .al { position:static; } .al li { grid-template-columns:56px 20px minmax(0,1fr) auto; font-size:.8rem; } }

/* ---------- reads ---------- */
.pl .in-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.pl .rd-col { padding:20px; border-radius:18px; background:linear-gradient(180deg,#fff,#FDFDFE); box-shadow:var(--raise); }
.pl .rd-h { margin:0 0 .6rem; font-size:.8rem; font-weight:600; color:var(--pu); }
.pl .rd-col ul { list-style:none; margin:0; padding:0; } .pl .rd-col li { padding:.7rem 0; border-top:1px solid var(--line2); } .pl .rd-col li:first-child { border-top:0; }
.pl .rd-col b { display:block; font-size:.95rem; font-weight:600; } .pl .rd-col span { display:block; font-size:.84rem; color:var(--mut); margin-top:.1rem; }
@media (max-width:900px) { .pl .in-grid { grid-template-columns:1fr; } }

/* ---------- security ---------- */
.sec-l { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sec-l li { display:flex; gap:12px; padding:16px; border-radius:16px; background:#fff; box-shadow:var(--soft); } .sec-l .ck { color:var(--pu); box-shadow:inset 0 0 0 1px #D9C7F0; }
@media (max-width:600px) { .sec-l { grid-template-columns:1fr; } }

/* ---------- start ---------- */
.st-l { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; counter-reset:s; }
.st-l li { position:relative; display:flex; flex-direction:column; padding:20px; border-radius:18px; background:linear-gradient(180deg,#fff,#FDFDFE); box-shadow:var(--raise); }
.st-l .n { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:600; font-size:.9rem; box-shadow:var(--soft); margin-bottom:1rem; }
.st-l b { font-size:1.02rem; font-weight:600; } .st-l p { margin:.5rem 0 1rem; font-size:.88rem; line-height:1.55; color:var(--mut); }
.st-l a { margin-top:auto; display:inline-flex; align-items:center; gap:.35rem; font-size:.86rem; font-weight:600; color:var(--ink); text-decoration:none; } .st-l a:hover { color:var(--pu); }
@media (max-width:1023px) { .st-l { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { .st-l { grid-template-columns:1fr; } }

/* ---------- faq ---------- */
.faq details { border-radius:16px; background:#fff; box-shadow:var(--soft); margin-bottom:10px; transition:box-shadow .25s ease; }
.faq details[open] { box-shadow:var(--raise); }
.faq summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:16px 18px; cursor:pointer; font-weight:600; font-size:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq .pm { position:relative; flex:none; width:24px; height:24px; border-radius:50%; box-shadow:var(--soft); } .faq .pm::before, .faq .pm::after { content:""; position:absolute; left:7px; right:7px; top:11px; height:1.6px; background:var(--ink); transition:transform .3s var(--ease); } .faq .pm::after { transform:rotate(90deg); } .faq details[open] .pm::after { transform:none; }
.faq details p { margin:0; padding:0 18px 18px; font-size:.95rem; line-height:1.62; color:#45454A; }

@media (prefers-reduced-motion: reduce) {
  .pl [data-rv], .al li, .hv-n, .hv-core, .hv-l, .gt .br { animation:none !important; transition:none !important; opacity:1 !important; transform:none; stroke-dashoffset:0; }
  .hv-feed li { animation:none; } .hv-p { display:none; }
}

/* handoffs, second pass: the map runs full width, the handoffs sit under it in two columns */
.hm { grid-template-columns:1fr; }
.hm-map { gap:18px 28px; padding:22px 24px; }
.hm-n { padding:11px 12px; }
.hm-list { grid-template-columns:1fr 1fr; }
@media (max-width:760px) { .hm-list { grid-template-columns:1fr; } }
.pl-tb tbody th { min-width:170px; }

/* full screen: the film fills the screen; on a phone held upright it turns sideways */
.fm-fs { flex:none; order:9; width:38px; height:38px; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer; background:linear-gradient(180deg,#fff,#FAFAFC); box-shadow:var(--soft); color:var(--ink); }
.fm-fs svg { width:15px; height:15px; } .fm-fs .i-out, .fm.fs .fm-fs .i-in { display:none; } .fm.fs .fm-fs .i-out { display:block; }
.fm.fs .fm-frame { position:fixed; z-index:1000; inset:0; border-radius:0; display:flex; flex-direction:column; justify-content:center; padding:max(12px, env(safe-area-inset-top)) 16px 12px; background:#fff; box-shadow:none; }
.fm.fs .fm-vp { width:min(100%, calc((100vh - 90px) * 1120 / 600)); margin:0 auto; }
.fm.fs .fm-bar { width:min(100%, calc((100vh - 90px) * 1120 / 600)); margin:0 auto; }
@media (orientation:portrait) and (max-width:760px) {
  .fm.fs .fm-frame { inset:auto; left:0; top:0; width:100vh; width:100dvh; height:100vw; transform-origin:0 0; transform:rotate(90deg) translateY(-100%); padding:10px 18px; }
  .fm.fs .fm-vp, .fm.fs .fm-bar { width:min(100%, calc((100vw - 74px) * 1120 / 600)); }
  .fm.fs .fm-segs { display:flex; }
}
html.fm-lock, html.fm-lock body { overflow:hidden; }
html.fm-lock .po-fab, html.fm-lock .po-bub, html.fm-lock .po-panel, html.fm-lock .po-tour { display:none !important; }
@media (orientation:portrait) and (max-width:760px) { .fm.fs .fm-vp, .fm.fs .fm-bar { width:min(100%, calc((100vw - 104px) * 1120 / 600)); } }
/* phones: each agent row becomes a card */
@media (max-width:700px) {
  .tb-wrap { background:none; box-shadow:none; overflow:visible; border-radius:0; }
  .pl-tb, .pl-tb tbody, .pl-tb tr, .pl-tb th, .pl-tb td { display:block; min-width:0; }
  .pl-tb thead { display:none; }
  .pl-tb tbody tr { margin-bottom:12px; padding:14px 16px; border-radius:16px; background:#fff; box-shadow:var(--soft); }
  .pl-tb tbody th, .pl-tb td { padding:0; border:0; }
  .pl-tb tbody th { margin-bottom:10px; }
  .pl-tb td { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; padding:7px 0; border-top:1px solid var(--line2); font-size:.88rem; white-space:normal !important; }
  .pl-tb td::before { content:attr(data-l); font-size:.76rem; font-weight:600; color:var(--mut); }
  .pl-tb td .st { justify-self:start; }
  .hv-core { width:50%; } .hv-feed { height:92px; }
}

/* ===== ten-agent team (Nov 2026) ===== */
.fm-rail { gap:8px; padding:14px 0; } .fm-rail .ags { gap:4px; } .fm-rail .ra { width:30px; height:30px; } .fm-rail .ra .fm-av { --s:24px !important; width:24px; height:24px; } .fm-rail i { width:30px; height:30px; } .fm-rail .nv { gap:3px; }
.rc-log li { padding:5px 0; } .rc-log .th, .rc-log li { grid-template-columns:24px minmax(0,1.3fr) minmax(0,1fr) 128px; } .rc-log .th { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 128px; }

/* chapter: Pixer submits and wins */
.wn-grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:18px; height:100%; align-items:start; }
.wn-board, .wn-pr { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); }
.wn-cols { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.wn-col { min-height:210px; padding:8px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--line2); } .wn-col p { margin:0 0 6px; font-size:11px; font-weight:600; color:var(--mut); }
.wn-col ol { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.wn-c { padding:8px 9px; border-radius:10px; background:#fff; box-shadow:var(--soft); transition:opacity .5s ease, transform .7s var(--ease), box-shadow .4s; } .wn-c b { display:block; font-size:11.5px; line-height:1.3; } .wn-c span { display:block; margin-top:3px; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.wn-c.lib { box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px #9B3D5C, 0 10px 22px -14px rgba(155,61,92,.45); }
.wn-c.won { opacity:0; transform:translateY(-8px) scale(.97); } .fm-win.k5 .wn-c.won { opacity:1; transform:none; box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px #2D7A4F, 0 12px 24px -14px rgba(45,122,79,.45); }
.fm-win.k5 .wn-c.lib { opacity:0 !important; transform:translateX(30px) scale(.96) !important; }
.wn-cal { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .wn-cal span { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:9px; font-size:11px; color:#45454A; box-shadow:var(--soft); } .wn-cal b { color:#9B3D5C; } .wn-cal .i { width:12px; height:12px; color:#9B3D5C; }
.wn-pr ul { list-style:none; margin:0; padding:0; } .wn-pr li { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line2); } .wn-pr li span { flex:1; } .wn-pr li b { display:block; font-size:12.5px; } .wn-pr li small { font-size:11px; color:var(--mut); }
.wn-pr .fm-chip.k { color:#9B3D5C; box-shadow:inset 0 0 0 1px #E6C3CF; }
.wn-pr .ft { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; font-size:11px; }

/* chapter: Colin keeps everyone answered */
.tk2-grid { display:grid; grid-template-columns:330px minmax(0,1fr); gap:18px; height:100%; align-items:start; }
.tk2-in, .tk2-th { padding:16px; border-radius:16px; background:#fff; box-shadow:var(--raise); }
.tk2-in ul { list-style:none; margin:0; padding:0; } .tk2-in li { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line2); } .tk2-in li > .i { color:#6A4C93; } .tk2-in li span { flex:1; min-width:0; } .tk2-in li b { display:block; font-size:12px; } .tk2-in li small { display:block; font-size:11px; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk2-in .fm-chip.k, .tk2-th .fm-chip.k { color:#6A4C93; box-shadow:inset 0 0 0 1px #D6CCE6; }
.tk2-th { display:flex; flex-direction:column; gap:10px; }
.tk2-q { padding:10px 12px; border-radius:12px; box-shadow:inset 0 0 0 1px var(--line2); font-size:12.5px; } .tk2-q b { color:#6A4C93; margin-right:6px; } .tk2-q small { display:block; margin-top:3px; }
.tk2-m { width:88%; padding:10px 12px; border-radius:4px 14px 14px 14px; box-shadow:var(--soft); font-size:12.5px; } .tk2-m b { font-size:11.5px; } .tk2-m p { margin:4px 0 0; line-height:1.45; }
.tk2-m .es { color:var(--mut); } .tk2-m .en { display:flex; gap:6px; align-items:flex-start; padding-top:6px; border-top:1px dashed var(--line); } .tk2-m .en .i { width:12px; height:12px; color:#6A4C93; margin-top:2px; }
.tk2-min { display:grid; gap:4px; padding:12px 14px; border-radius:14px; box-shadow:inset 0 1px 0 #fff, 0 0 0 1.5px #6A4C93, 0 14px 30px -18px rgba(106,76,147,.5); font-size:12px; } .tk2-min b { font-size:13px; } .tk2-min span { color:#45454A; } .tk2-min .fm-btn { justify-self:end; margin-top:4px; }

/* ===== hero: the system, premium pass ===== */
.hv { --hv-c:#5000A8; }
.hv-orbit { position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.hv-orbit.o1 { width:64%; height:64%; border:1px dashed #E3DFEE; animation:hv-spin 60s linear infinite; }
.hv-orbit.o2 { width:94%; height:94%; border:1px solid #F0EEF5; }
.hv-orbit.o1::after { content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:#5000A8; box-shadow:0 0 0 4px rgba(80,0,168,.12); }
@keyframes hv-spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.hv-l { fill:none; stroke:url(#hvg); stroke-width:.32; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:.9; animation:hv-draw 1.4s var(--ease) forwards; animation-delay:calc(.35s + var(--i) * .07s); }
.hv-b { fill:none; stroke:var(--ac); stroke-width:.75; stroke-linecap:round; stroke-dasharray:.09 1; stroke-dashoffset:1.09; opacity:0; filter:url(#hvglow); animation:hv-beam 9s linear infinite; animation-delay:calc(1.6s + var(--i) * .9s); }
@keyframes hv-beam { 0% { stroke-dashoffset:1.09; opacity:0; } 1% { opacity:1; } 9% { stroke-dashoffset:0; opacity:1; } 10%, 100% { stroke-dashoffset:0; opacity:0; } }
.hv-core { box-shadow:inset 0 1px 0 #fff, 0 0 0 1px var(--line), 0 2px 4px rgba(16,12,40,.04), 0 34px 70px -30px rgba(80,0,168,.38) !important; }
.hv-core::before { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:conic-gradient(from var(--hv-a,0deg), transparent 0 70%, rgba(80,0,168,.55) 82%, transparent 94%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; animation:hv-rim 6s linear infinite; pointer-events:none; }
@property --hv-a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes hv-rim { to { --hv-a:360deg; } }
.hv-core .hv-hit { position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 rgba(80,0,168,0); }
.hv-core.hit .hv-hit { animation:hv-hitk .9s ease-out; } @keyframes hv-hitk { from { box-shadow:0 0 0 0 color-mix(in srgb, var(--hv-c) 30%, transparent); } to { box-shadow:0 0 0 18px transparent; } }
.hv-n::after { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; box-shadow:0 0 0 0 color-mix(in srgb, var(--ac) 35%, transparent); }
.hv-n.on::after { animation:hv-ping 1.1s ease-out; } @keyframes hv-ping { from { box-shadow:0 0 0 0 color-mix(in srgb, var(--ac) 35%, transparent); } to { box-shadow:0 0 0 14px transparent; } }
.hv-feed li { animation:none; transform:translateY(calc(var(--y, 0) * -100%)); transition:transform .7s var(--ease), opacity .5s; }
.hv-feed li.nw b { position:relative; }
@media (prefers-reduced-motion: reduce) { .hv-b, .hv-orbit, .hv-core::before { animation:none !important; opacity:0; } .hv-l { stroke-dashoffset:0; } }