/* Adea hero film: a 24 s scripted motion piece, 1280×720 stage scaled to fit */

.film {
  position: relative; width: min(1080px, 100%); margin: 64px auto 0; aspect-ratio: 16 / 9;
  border-radius: 28px; overflow: hidden; background: var(--paper);
  box-shadow: var(--shadow-win);
}
.film-stage {
  position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #fff 0%, #fafafc 70%, #f3f3f7 100%);
  overflow: hidden; font-family: var(--ui);
}
.film-stage.reset *, .film-stage.reset { transition: none !important; animation: none !important; }

.f-logo { position: absolute; left: 48px; top: 40px; display: flex; align-items: center; gap: 12px; z-index: 5; transition: opacity 500ms var(--ease-out); }
.f-logo .logo-mark { width: 36px; height: 36px; }
.f-logo .logo-mark::after { left: 5px; right: 5px; top: 16px; height: 7px; border-radius: 4px; }
.f-logo .logo-word { font-size: 29px; }
.film-stage.end .f-logo { opacity: 0; }

/* scenes */
.sc { position: absolute; inset: 0; opacity: 0; transform: scale(1.03); filter: blur(10px); transition: opacity 450ms var(--ease-out), transform 700ms var(--ease-out), filter 450ms var(--ease-out); pointer-events: none; }
.sc.on { opacity: 1; transform: none; filter: none; }
.sc.off { opacity: 0; transform: scale(.96) translateY(-14px); filter: blur(10px); }

/* things that pop in */
.pi { opacity: 0; transform: translateY(34px) scale(.96); transition: opacity 380ms var(--ease-out), transform 620ms var(--ease-spring); }
.pi.in { opacity: 1; transform: none; }

/* film highlighter */
.fmark {
  background-image: linear-gradient(100deg, transparent 0 .5%, var(--mark) 1.5% 98.5%, transparent 99.5%);
  background-repeat: no-repeat; background-position: 0 85%; background-size: 0% 46%;
  transition: background-size 520ms var(--ease-out); padding: 0 .05em; margin: 0 -.05em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.fmark.on { background-size: 100% 46%; }

/* S1 question */
.s1 { display: flex; align-items: center; justify-content: center; }
.f-kq { margin: 0; text-align: center; font-family: var(--display); font-weight: 700; font-size: 116px; line-height: 1; letter-spacing: -.05em; color: var(--ink); }
.f-kq .w { display: inline-block; opacity: 0; transform: translateY(60px) rotate(3deg); transition: opacity 260ms var(--ease-out), transform 560ms var(--ease-spring); }
.f-kq .w.in { opacity: 1; transform: none; }

/* S2 working */
.f-pal { position: absolute; left: 160px; right: 160px; top: 116px; height: 86px; border-radius: 24px; background: var(--paper); box-shadow: var(--shadow-pop); display: flex; align-items: center; gap: 18px; padding: 0 30px; font-size: 30px; color: var(--ink); }
.f-pal svg { width: 30px; height: 30px; color: var(--faint); flex: none; }
.f-pal .caret { height: 34px; width: 3px; }
.f-steps { position: absolute; left: 172px; top: 268px; display: flex; flex-direction: column; gap: 22px; }
.f-step { display: flex; align-items: center; gap: 18px; font-size: 30px; color: var(--ink-2); opacity: 0; transform: translateX(-24px); transition: opacity 300ms var(--ease-out), transform 500ms var(--ease-out); }
.f-step.run, .f-step.done { opacity: 1; transform: none; }
.fs-i { width: 28px; height: 28px; border-radius: 50%; flex: none; position: relative; box-shadow: inset 0 0 0 3px var(--line-2); }
.f-step.run .fs-i { box-shadow: inset 0 0 0 3px var(--line-2); border-top: 3px solid var(--cobalt); border-radius: 50%; animation: spin 700ms linear infinite; box-sizing: border-box; }
.f-step.done .fs-i { background: var(--navy); box-shadow: none; animation: pop 380ms var(--ease-spring); border: 0; }
.f-step.done .fs-i::after { content: ""; position: absolute; left: 10px; top: 6px; width: 7px; height: 12px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.f-code { position: absolute; right: 150px; top: 262px; width: 400px; padding: 24px 28px; border-radius: 22px; background: var(--navy); color: rgb(255 255 255 / .72); box-shadow: 0 40px 80px -30px rgb(14 14 19 / .5); opacity: 0; transform: translateX(60px) rotate(2deg); transition: opacity 400ms var(--ease-out), transform 700ms var(--ease-spring); }
.f-code.in { opacity: 1; transform: rotate(-1deg); }
.fc-h { margin: 0 0 14px; font-size: 16px; color: rgb(255 255 255 / .45); }
.f-code pre { margin: 0; font-size: 22px; line-height: 1.6; }
.fc-hl { color: #fff; background-image: linear-gradient(var(--mark), var(--mark)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 480ms var(--ease-out), color 300ms; border-radius: 4px; padding: 0 4px; margin: 0 -4px; }
.fc-hl.on { background-size: 100% 100%; color: var(--ink); }

/* S3 answer */
.s3 { display: grid; grid-template-columns: 520px 1fr; gap: 70px; align-items: center; padding: 0 120px; }
.f-lbl { margin: 0 0 10px; font-size: 28px; color: var(--muted); }
.f-big { margin: 0; font-family: var(--display); font-weight: 700; font-size: 196px; line-height: .9; letter-spacing: -.055em; color: var(--ink); font-variant-numeric: proportional-nums; }
.f-delta { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; margin-top: 26px; border-radius: 999px; background: var(--cobalt-soft); color: var(--navy); font-size: 24px; font-weight: 600; }
.f-chips { margin-top: 22px; }
.f-chips .chip { height: 50px; padding: 0 22px; font-size: 22px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--line-2); }
.f-chips .chip.is-pop { transform: scale(1.1); box-shadow: inset 0 0 0 2px var(--cobalt); }
.f-bars { display: flex; flex-direction: column; gap: 18px; }
.f-bar { display: grid; grid-template-columns: 170px 1fr 92px; gap: 18px; align-items: center; font-size: 22px; color: var(--ink-2); }
.f-bar i { display: block; height: 34px; }
.f-bar b { display: block; height: 100%; border-radius: 8px; background: var(--bar-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease-out); }
.f-bar:first-child b { background: var(--navy); }
.f-bar.in b { transform: scaleX(1); }
.f-bar em { font-style: normal; text-align: right; font-weight: 600; color: var(--ink); opacity: 0; transition: opacity 300ms 200ms; font-variant-numeric: tabular-nums; }
.f-bar.in em { opacity: 1; }

/* S4 why */
.f-slam { position: absolute; left: 0; right: 0; top: 230px; margin: 0; text-align: center; font-family: var(--display); font-weight: 800; font-size: 230px; line-height: 1; letter-spacing: -.06em; opacity: 0; transform: scale(1.5); transition: opacity 200ms var(--ease-out), transform 520ms var(--ease-spring); }
.f-slam.in { opacity: 1; transform: none; }
.f-slam.up { opacity: 0; transform: translateY(-200px) scale(.4); transition: opacity 400ms var(--ease-out), transform 700ms var(--ease-out); }
.f-why { position: absolute; left: 140px; right: 140px; top: 130px; }
.f-wq { margin: 0; font-family: var(--display); font-weight: 700; font-size: 52px; letter-spacing: -.035em; color: var(--ink); }
.f-tl { list-style: none; margin: 70px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.f-tl::before { content: ""; position: absolute; left: 14px; right: 14px; top: 13px; height: 3px; background: var(--line-2); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.f-tl li { position: relative; padding-top: 50px; opacity: 0; transform: translateY(18px); transition: opacity 300ms var(--ease-out), transform 520ms var(--ease-spring); }
.f-tl li.in { opacity: 1; transform: none; }
.f-tl li::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 4px var(--ink); }
.f-tl li.end::before { background: var(--bad); box-shadow: 0 0 0 8px var(--bad-soft); }
.f-tl time { display: block; font-family: var(--mono); font-size: 18px; color: var(--faint); }
.f-tl span { display: block; margin-top: 6px; font-size: 25px; color: var(--ink-2); padding-right: 24px; line-height: 1.3; }
.f-tl li.end span { color: var(--ink); font-weight: 600; }
.f-wa { margin: 64px 0 0; font-size: 40px; line-height: 1.35; color: var(--ink-2); letter-spacing: -.01em; }

/* S5 slack */
.f-slack { position: absolute; left: 200px; right: 200px; top: 110px; padding: 34px 40px; border-radius: 28px; background: var(--paper); box-shadow: var(--shadow-pop); }
.f-chan { font-size: 24px; font-weight: 650; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 2px solid var(--line); }
.f-chan span { color: var(--faint); font-weight: 500; margin-right: 4px; }
.f-msg { display: flex; gap: 18px; margin-bottom: 26px; }
.f-av { width: 56px; height: 56px; border-radius: 16px; flex: none; display: grid; place-items: center; }
.f-av-a { background: radial-gradient(circle at 50% 40%, #b97a5c 0 20%, transparent 21%), radial-gradient(ellipse 34% 30% at 50% 100%, #b97a5c 0 98%, transparent 100%), #f4dccf; }
.f-av-bot { background: var(--navy); }
.f-av-bot .logo-mark { width: 28px; height: 28px; background: #fff; border-radius: 8px; }
.f-av-bot .logo-mark::after { left: 5px; right: 5px; top: 15px; height: 6px; background: var(--navy); }
.f-who { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--ink); }
.f-who small { font-weight: 400; color: var(--faint); font-size: 18px; margin-left: 8px; }
.f-txt { margin: 0; font-size: 26px; color: var(--ink-2); }
.f-at { background: var(--cobalt-soft); color: var(--cobalt-ink); border-radius: 6px; padding: 0 5px; font-weight: 550; }
.f-flow { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.f-node { padding: 14px 18px; border-radius: 16px; background: var(--haze); box-shadow: inset 0 0 0 2px var(--line); font-size: 21px; font-weight: 600; color: var(--ink); }
.f-node.last { background: var(--navy); color: #fff; box-shadow: none; }
.f-arr { width: 22px; height: 3px; background: var(--line-2); position: relative; flex: none; }
.f-arr::after { content: ""; position: absolute; right: -1px; top: -5px; width: 10px; height: 10px; border: solid var(--faint); border-width: 3px 3px 0 0; transform: rotate(45deg); }
.f-react { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--cobalt-soft); color: var(--cobalt-ink); font-size: 19px; font-weight: 600; box-shadow: inset 0 0 0 2px rgb(47 69 255 / .25); }
.f-react svg { width: 20px; height: 20px; }

/* S6 end */
.s6 { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.f-end-logo { width: 170px; height: 170px; margin-bottom: 10px; background: var(--navy); -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M.8%2022.5%209.7%201.5h3.1L4.4%2022.5Z%22/%3E%3Cpath%20d%3D%22M13.9%206.9%2015.6%202.8l7.6%2019.7h-3.6Z%22/%3E%3Cpath%20d%3D%22M7.4%2015.6h9.3l1.2%203H6.2Z%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M.8%2022.5%209.7%201.5h3.1L4.4%2022.5Z%22/%3E%3Cpath%20d%3D%22M13.9%206.9%2015.6%202.8l7.6%2019.7h-3.6Z%22/%3E%3Cpath%20d%3D%22M7.4%2015.6h9.3l1.2%203H6.2Z%22/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: scale(.3) rotate(-12deg); transition: opacity 300ms, transform 700ms var(--ease-spring); }
.f-end-logo.in { opacity: 1; transform: none; }
.f-end-word { display: none; margin: 26px 0 0; font-family: var(--display); font-weight: 800; font-size: 150px; letter-spacing: -.06em; line-height: .9; }
.f-end-tag { margin: 22px 0 0; font-family: var(--display); font-weight: 700; font-size: 58px; letter-spacing: -.04em; color: var(--ink); }
.f-end-cta { margin: 40px 0 0; display: inline-flex; align-items: center; height: 70px; padding: 0 34px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 26px; font-weight: 550; }

/* controls */
.film-sound {
  position: absolute; right: 18px; top: 18px; z-index: 10; display: inline-flex; align-items: center; gap: 9px;
  width: 42px; height: 42px; padding: 0; justify-content: center; border: 0; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 550;
  background: rgb(14 14 19 / .78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -10px rgb(14 14 19 / .5); transition: transform 300ms var(--ease-spring), background 200ms;
}
.film-sound:hover { background: rgb(14 14 19 / .9); transform: scale(1.04); }
.film-sound svg { width: 18px; height: 18px; flex: none; }
.film-sound .wave { display: none; }
.film-sound.is-on .wave { display: inline; }
.film-sound.is-on .x { display: none; }
.film-sound.nudge::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; box-shadow: 0 0 0 0 rgb(47 69 255 / .6); animation: nudge 2.2s var(--ease-out) infinite; }
@keyframes nudge { 0% { box-shadow: 0 0 0 0 rgb(47 69 255 / .6); } 70%, 100% { box-shadow: 0 0 0 12px rgb(47 69 255 / 0); } }
.film-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgb(14 14 19 / .06); z-index: 10; }
.film-bar i { display: block; height: 100%; width: 100%; background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; }

@media (max-width: 900px) {
  .film { margin-top: 40px; border-radius: 18px; }
  .film-sound { right: 10px; top: 10px; width: 36px; height: 36px; }
}

/* ===== Liquid glass: film frame + sound button ===== */
.film {
  box-shadow: var(--glass-edge), var(--glass-rim), var(--glass-shadow);
}
/* thin glass border laid over the video edge (no padding: film.js scales by clientWidth) */
.film::after {
  content: ""; position: absolute; inset: 0; z-index: 11; border-radius: inherit; pointer-events: none;
  border: 6px solid rgb(255 255 255 / .55);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 0 0 1px rgb(255 255 255 / .6), 0 0 0 1px rgb(19 40 79 / .07);
}
.film-sound {
  background: rgb(14 18 32 / .55);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .1), 0 10px 30px -12px rgb(0 0 0 / .45);
}
.film-sound:hover { background: rgb(14 18 32 / .7); }
.film-sound { right: 20px; top: 20px; }
@media (max-width: 900px) { .film::after { border-width: 4px; } .film-sound { right: 14px; top: 14px; } }
@media (prefers-reduced-transparency: reduce) {
  .film-sound { background: rgb(14 18 32 / .92); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* S7: saved question with graph and table */
.s7 { display: flex; align-items: center; justify-content: center; padding: 70px 150px 60px; }
.g-card { width: 100%; padding: 34px 40px 36px; border-radius: 30px; background: rgb(255 255 255 / .82); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(19 40 79 / .07), 0 30px 70px -36px rgb(19 40 79 / .35); }
.g-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.g-title { margin: 0; font-size: 34px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.g-sub { margin: 6px 0 0; font-size: 19px; color: var(--muted); }
.g-seg { position: relative; display: inline-flex; padding: 5px; border-radius: 999px; background: var(--haze); box-shadow: inset 0 0 0 1px var(--line); }
.g-pill { position: absolute; top: 5px; left: 5px; width: 108px; height: 46px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgb(14 14 19 / .1), 0 0 0 1px var(--line); transition: transform 520ms var(--ease-out); }
.g-seg.tab .g-pill { transform: translateX(108px); }
.g-opt { position: relative; z-index: 1; width: 108px; height: 46px; display: grid; place-items: center; font-size: 20px; font-weight: 550; color: var(--muted); transition: color 300ms; }
.g-seg:not(.tab) .g-on, .g-seg.tab .g-tab { color: var(--ink); }
.g-chips { display: flex; align-items: center; gap: 12px; margin: 24px 0 26px; }
.g-chips .chip { height: 46px; padding: 0 20px; font-size: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.g-chips .chip svg { width: 16px; height: 16px; }
.g-chips .chip.is-pop { transform: scale(1.08); box-shadow: inset 0 0 0 2px var(--navy); }
.g-total { margin-left: auto; font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: proportional-nums; }
.g-body { position: relative; height: 300px; }
.g-chart { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; align-items: end; transition: opacity 450ms var(--ease-out), filter 450ms; }
.g-col { display: flex; flex-direction: column; align-items: stretch; gap: 12px; height: 100%; justify-content: flex-end; }
.g-col i { display: flex; align-items: flex-end; height: 250px; }
.g-col b { display: block; width: 100%; border-radius: 12px 12px 6px 6px; background: var(--bar-2); height: 0; transition: height 650ms var(--ease-out); }
.g-col:last-child b { background: var(--navy); }
.g-col span { text-align: center; font-size: 18px; color: var(--muted); }
.g-table { position: absolute; inset: 0; width: 100%; border-collapse: collapse; font-size: 23px; opacity: 0; transition: opacity 450ms var(--ease-out); }
.g-table th { text-align: left; font-weight: 550; font-size: 18px; color: var(--muted); padding: 0 0 14px; border-bottom: 1.5px solid var(--line); }
.g-table td { padding: 15px 0; border-bottom: 1.5px solid var(--line); color: var(--ink-2); }
.g-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.g-table tr.pi { transform: translateY(14px); }
.g-table tr.pi.in { transform: none; }
.s7.tabmode .g-chart { opacity: 0; filter: blur(6px); }
.s7.tabmode .g-table { opacity: 1; }

/* S8: sources */
.s8 { display: grid; grid-template-columns: 420px 1fr; gap: 56px; align-items: center; padding: 70px 110px 60px 130px; }
.k-left .f-lbl { font-size: 24px; }
.k-big { margin: 6px 0 0; font-family: var(--display); font-weight: 700; font-size: 120px; line-height: .9; letter-spacing: -.055em; color: var(--ink); font-variant-numeric: proportional-nums; }
.k-left .f-delta { height: 40px; font-size: 20px; margin-top: 20px; }
.k-btn { margin-top: 28px; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font-size: 21px; font-weight: 600; box-shadow: inset 0 0 0 1.5px var(--line-2), 0 8px 20px -12px rgb(19 40 79 / .3); transition: transform 300ms var(--ease-spring), box-shadow 300ms, background 300ms; }
.k-btn svg { width: 22px; height: 22px; }
.k-btn.press { transform: scale(.92); background: var(--cobalt-soft); box-shadow: inset 0 0 0 2px var(--navy); }
.k-panel { align-self: stretch; padding: 30px 34px; border-radius: 28px; background: rgb(255 255 255 / .86); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(19 40 79 / .07), 0 30px 70px -30px rgb(19 40 79 / .4); opacity: 0; transform: translateX(120px); transition: opacity 450ms var(--ease-out), transform 750ms var(--ease-out); display: flex; flex-direction: column; gap: 18px; }
.k-panel.in { opacity: 1; transform: none; }
.k-h { margin: 0 0 2px; font-size: 28px; font-weight: 650; letter-spacing: -.02em; }
.k-sec { padding-bottom: 14px; border-bottom: 1.5px solid var(--line); }
.k-k { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--muted); }
.k-v { margin: 0; font-size: 21px; color: var(--ink); }
.k-file, .k-mono { margin: 0; font-family: var(--mono); font-size: 18px; color: var(--navy); }
.k-code { margin: 8px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--haze); font-family: var(--mono); font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.k-hl { background-image: linear-gradient(var(--mark-deep), var(--mark-deep)); background-repeat: no-repeat; background-size: 0% 100%; transition: background-size 480ms var(--ease-out); border-radius: 4px; padding: 0 4px; margin: 0 -4px; color: var(--ink); }
.k-hl.on { background-size: 100% 100%; }
.k-ok { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--cobalt-soft); color: var(--navy); font-size: 18px; font-weight: 600; }
.k-ok svg { width: 18px; height: 18px; }

/* S9: line chart, revenue per month */
.s9 { display: flex; align-items: center; justify-content: center; padding: 64px 130px 56px; }
.l-now { margin: 0; text-align: right; font-size: 20px; color: var(--muted); }
.l-now b { display: block; font-family: var(--display); font-weight: 700; font-size: 54px; line-height: 1; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: proportional-nums; }
.l-now small { display: block; margin-top: 4px; font-size: 16px; }
.l-tog { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line-2); font-size: 19px; color: var(--ink-2); transition: transform 380ms var(--ease-spring), box-shadow 300ms; }
.l-tog i { width: 42px; height: 26px; border-radius: 999px; background: var(--fog); position: relative; transition: background 300ms; }
.l-tog i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(14 14 19 / .25); transition: transform 380ms var(--ease-spring); }
.l-tog.on i { background: var(--navy); }
.l-tog.on i::after { transform: translateX(16px); }
.l-tog.on { transform: scale(1.04); box-shadow: inset 0 0 0 2px var(--navy); }
.l-plot { position: relative; margin: 6px 0 0 76px; height: 270px; }
.l-svg { position: absolute; left: 0; top: 0; width: 100%; height: 240px; overflow: visible; }
.l-grid line { stroke: var(--line); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.l-line { fill: none; stroke: var(--navy); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.l-cmp { fill: none; stroke: #a7adbb; stroke-width: 2.5; stroke-dasharray: 7 7; vector-effect: non-scaling-stroke; }
.l-cross { stroke: rgb(19 40 79 / .35); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity 300ms; }
.l-cross.on { opacity: 1; }
.l-y { position: absolute; left: -76px; top: 0; width: 64px; height: 240px; }
.l-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 14px; color: var(--faint); white-space: nowrap; }
.l-x { position: absolute; left: 0; right: 0; top: 252px; height: 20px; }
.l-x span { position: absolute; transform: translateX(-50%); font-size: 15px; color: var(--muted); }
.l-dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px var(--navy), 0 0 0 7px rgb(28 58 110 / .14); opacity: 0; transform: scale(.3); transition: opacity 250ms, transform 450ms var(--ease-spring); }
.l-dot.in { opacity: 1; transform: none; }
.l-tip { position: absolute; right: 22px; top: -18px; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 16px; background: rgb(255 255 255 / .72); -webkit-backdrop-filter: blur(14px) saturate(1.8); backdrop-filter: blur(14px) saturate(1.8); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(19 40 79 / .08), 0 18px 40px -18px rgb(19 40 79 / .4); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity 350ms var(--ease-out), transform 520ms var(--ease-spring); }
.l-tip.in { opacity: 1; transform: none; }
.l-tip b { font-size: 15px; color: var(--muted); font-weight: 550; }
.l-tip span { font-size: 24px; font-weight: 650; color: var(--ink); font-variant-numeric: proportional-nums; }
.l-tip em { font-style: normal; font-size: 15px; font-weight: 600; color: var(--ok); }