:root{
--bg:#F2F5F8; --surface:#FFFFFF; --ink:#0F1B2D; --muted:#4F5E77; --line:#D8E0EA;
--accent:#2B45E8; --accent-ink:#FFFFFF; --accent-soft:#E4E8FF;
--zest:#C9F25C; --zest-ink:#0F1B2D;
--solid:#0B7A55; --promising:#A55F00; --early:#5B4BC9;
--band:#0F1B2D; --band-ink:#E8EEF7; --band-muted:#A7B3C7;
--f-display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
--f-body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
--f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--r:18px; --wrap:1120px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
--bg:#0A111D; --surface:#121B2C; --ink:#E8EEF7; --muted:#9DABC2; --line:#22304A;
--accent:#8291FF; --accent-ink:#0A111D; --accent-soft:#1C2550;
--solid:#4FD1A0; --promising:#F2B35B; --early:#A99CFF;
--band:#060B14; --band-ink:#E8EEF7; --band-muted:#9DABC2; color-scheme:dark }}
:root[data-theme="dark"]{
--bg:#0A111D; --surface:#121B2C; --ink:#E8EEF7; --muted:#9DABC2; --line:#22304A;
--accent:#8291FF; --accent-ink:#0A111D; --accent-soft:#1C2550;
--solid:#4FD1A0; --promising:#F2B35B; --early:#A99CFF;
--band:#060B14; --band-ink:#E8EEF7; --band-muted:#9DABC2; color-scheme:dark }
*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--bg)}
a{color:var(--accent)}
a:focus-visible, button:focus-visible, input:focus-visible+label{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--f-display); line-height:1.08; text-wrap:balance; margin:0; letter-spacing:-0.02em}
p{margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.section{padding-block:clamp(56px, 9vw, 112px)}
.eyebrow{font-family:var(--f-mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.h2{font-size:clamp(32px, 5vw, 54px); font-weight:800}
.lede{font-size:clamp(17px, 1.6vw, 20px); color:var(--muted); max-width:62ch}
.stack{display:grid; gap:16px}
mark{background:var(--zest); color:var(--zest-ink); padding:0 .18em; border-radius:4px}

#site[data-lang="id"] .en, #site[data-lang="en"] .id{display:none}

.nav{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-weight:800; font-size:22px; color:var(--ink); text-decoration:none; letter-spacing:-0.03em}
.brand-dot{width:26px; height:26px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--zest) 0 28%, var(--accent) 29% 100%)}
.nav-links{display:flex; align-items:center; gap:20px}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:600; font-size:15px}
.nav-links a:hover{color:var(--ink)}
.lang{display:inline-flex; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--surface)}
.lang button{all:unset; cursor:pointer; font-family:var(--f-mono); font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px; color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--bg)}
.theme-btn{all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:6px 12px; font-family:var(--f-mono); font-size:12.5px; font-weight:600}
.theme-btn:hover{border-color:var(--ink)}
:root[data-theme="dark"] .device-photo, :root[data-theme="dark"] .tile img, :root[data-theme="dark"] .bphoto{filter:brightness(.9)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .device-photo, :root:not([data-theme="light"]) .tile img, :root:not([data-theme="light"]) .bphoto{filter:brightness(.9)} }
.theme-btn:focus-visible{outline:3px solid var(--accent); outline-offset:3px}
.theme-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.theme-btn .i-sun{display:none}
.theme-btn.is-dark .i-sun{display:block} .theme-btn.is-dark .i-moon{display:none}
@media (max-width:420px){ .theme-btn .t-label{display:none} }
@media (max-width:760px){ .nav-links a{display:none} }

.hero{padding-block:clamp(40px, 7vw, 88px) clamp(48px, 7vw, 96px); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px, 5vw, 64px); align-items:center}
.hero h1{font-size:clamp(46px, 8.4vw, 104px); font-weight:800; letter-spacing:-0.045em}
.hero h1 .ul{background:linear-gradient(transparent 62%, var(--zest) 62% 92%, transparent 92%); color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero h1 .ul{background:none; color:var(--zest)} }
:root[data-theme="dark"] .hero h1 .ul{background:none; color:var(--zest)}
.hero .lede{margin-top:22px}

.hero h1.mm{display:grid; gap:0; letter-spacing:normal}
.mm-micro{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-weight:600; font-size:clamp(15px,1.5vw,19px); letter-spacing:.18em; text-transform:lowercase; color:var(--muted)}
.mm-tag{text-transform:none; font-size:11px; letter-spacing:.06em; padding:3px 8px; border-radius:999px; border:1px solid var(--line); color:var(--ink); background:var(--surface)}
.mm-macro{font-family:var(--f-display); font-weight:800; font-size:clamp(84px,13.5vw,176px); line-height:.86; letter-spacing:-0.06em; margin:6px 0 0 -0.04em; color:var(--ink)}
.mm-rest{font-family:var(--f-display); font-weight:700; font-size:clamp(30px,4.4vw,56px); line-height:1.05; letter-spacing:-0.035em}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:999px; font-weight:700; text-decoration:none; font-size:16px; border:1.5px solid transparent; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--ink); color:var(--ink); background:transparent}
.btn-ghost:hover{background:var(--ink); color:var(--bg)}
.hero-note{margin-top:22px; font-size:14px; color:var(--muted); display:flex; gap:8px; align-items:flex-start; max-width:52ch}
.hero-note b{font-family:var(--f-mono); color:var(--ink); font-weight:600}
.meter{background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:26px; position:relative; box-shadow:0 30px 60px -40px color-mix(in srgb, var(--accent) 60%, transparent)}
.meter-top{display:flex; justify-content:space-between; align-items:center; font-family:var(--f-mono); font-size:12px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.live{display:inline-flex; align-items:center; gap:6px}
.live i{width:8px; height:8px; border-radius:50%; background:var(--solid); animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.device{display:block; width:100%; height:auto; margin:10px 0 4px}
.meter-read{display:flex; align-items:baseline; gap:8px; font-family:var(--f-display); font-weight:800; font-size:clamp(40px,5vw,56px); letter-spacing:-0.03em}
.meter-read small{font-family:var(--f-mono); font-size:14px; font-weight:600; color:var(--muted); letter-spacing:0}
.meter-sub{font-size:14.5px; color:var(--muted); margin-top:4px}
.flow-path{fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-dasharray:4 14; animation:flow 3.2s linear infinite; opacity:.7}
.flow-path.b{stroke:var(--zest); animation-duration:4.4s; opacity:.9}
@keyframes flow{to{stroke-dashoffset:-180}}
@media (max-width:880px){ .hero-grid{grid-template-columns:1fr} }

.pillars{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:44px}
.pillar{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:grid; gap:12px; align-content:start}
.pillar .tag{font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.pillar h3{font-size:28px; font-weight:800}
.pillar p{color:var(--muted); font-size:15.5px}
.pillar .rule{font-family:var(--f-mono); font-size:13px; background:var(--bg); border-radius:10px; padding:10px 12px; color:var(--ink); line-height:1.5}
.pillar.amp{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.pillar.amp p, .pillar.amp .tag{color:color-mix(in srgb, var(--accent-ink) 82%, transparent)}
.pillar.amp .rule{background:color-mix(in srgb, var(--accent-ink) 14%, transparent); color:var(--accent-ink)}
@media (max-width:980px){ .pillars{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:560px){ .pillars{grid-template-columns:1fr} }

.band{background:var(--band); color:var(--band-ink)}
.band .eyebrow, .band .lede{color:var(--band-muted)}
.band a{color:var(--zest)}
.lymph-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center}
.lymph-facts{display:grid; gap:0; margin-top:28px; border-top:1px solid color-mix(in srgb, var(--band-ink) 18%, transparent)}
.lymph-facts div{display:grid; grid-template-columns:110px 1fr; gap:16px; padding-block:16px; border-bottom:1px solid color-mix(in srgb, var(--band-ink) 18%, transparent)}
.lymph-facts dt{font-family:var(--f-mono); font-size:12.5px; color:var(--zest); letter-spacing:.06em; text-transform:uppercase; padding-top:3px}
.lymph-facts dd{margin:0; font-size:16px}
.lymph-svg{width:100%; height:auto; max-width:520px; justify-self:center}
.lymph-svg .vessel{fill:none; stroke:color-mix(in srgb, var(--band-ink) 30%, transparent); stroke-width:14; stroke-linecap:round}
.lymph-svg .lflow{fill:none; stroke:var(--zest); stroke-width:3; stroke-linecap:round; stroke-dasharray:3 16; animation:flow 5s linear infinite}
.lymph-svg text{fill:var(--band-muted); font-family:var(--f-mono); font-size:12px}
.lymph-svg .muscle{fill:color-mix(in srgb, var(--accent) 55%, transparent)}
.lymph-svg .valve{fill:var(--band-ink)}
@media (max-width:880px){ .lymph-grid{grid-template-columns:1fr} }

.scale-card{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(20px,3vw,36px); margin-top:40px; overflow-x:auto}
.scale{position:relative; min-width:640px; height:250px}
.scale .axis{position:absolute; left:0; right:0; top:150px; height:2px; background:var(--ink)}
.scale .tick{position:absolute; top:142px; width:2px; height:18px; background:var(--ink); transform:translateX(-1px)}
.scale .tlabel{position:absolute; top:168px; transform:translateX(-50%); font-family:var(--f-mono); font-size:13px; font-weight:600; white-space:nowrap}
.scale .tlabel.first{transform:none} .scale .tlabel.last{transform:translateX(-100%)}
.zone{position:absolute; border-radius:10px; padding:8px 10px; font-size:13px; line-height:1.3; display:flex; flex-direction:column; justify-content:flex-end}
.zone b{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600}
.zone.body{top:92px; height:50px; background:color-mix(in srgb, var(--solid) 16%, transparent); border:1px dashed var(--solid); color:var(--ink)}
.zone.mct{top:40px; height:102px; background:var(--accent-soft); border:1.5px solid var(--accent); color:var(--ink)}
.zone.peak{top:6px; height:30px; background:var(--zest); color:var(--zest-ink); border-radius:8px; padding:6px 7px; justify-content:flex-start}
.zone.tens{top:92px; height:50px; background:color-mix(in srgb, var(--promising) 15%, transparent); border:1px dashed var(--promising); color:var(--ink)}
.scale-foot{position:absolute; left:0; right:0; top:200px; font-size:13.5px; color:var(--muted)}
.scale-legend{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:28px}
.scale-legend p{font-size:15px; color:var(--muted)}
.scale-legend strong{color:var(--ink); display:block; font-family:var(--f-display); font-size:19px; margin-bottom:4px}
@media (max-width:760px){ .scale-legend{grid-template-columns:1fr} }

.filters{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.chip{all:unset; cursor:pointer; font-weight:600; font-size:14.5px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.benefits{display:grid; gap:18px; margin-top:28px}
.benefit{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(20px,3vw,34px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(20px,4vw,48px)}
.benefit h3{font-size:clamp(28px,3.4vw,40px); font-weight:800}
.benefit .claim{font-size:17.5px; margin-top:12px}
.benefit .forYou{margin-top:16px; font-size:15px; color:var(--muted); border-left:3px solid var(--zest); padding-left:12px}
.grade{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1.5px solid currentColor}
.grade::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor}
.g-solid{color:var(--solid)} .g-promising{color:var(--promising)} .g-early{color:var(--early)}
.receipts{display:grid; gap:10px; align-content:start}
.receipt{border:1px solid var(--line); border-radius:14px; padding:14px 16px; display:grid; gap:6px; background:var(--bg)}
.receipt .meta{display:flex; flex-wrap:wrap; gap:6px 12px; font-family:var(--f-mono); font-size:12px; color:var(--muted)}
.receipt .meta .n{color:var(--ink); font-weight:600}
.receipt p{font-size:15px}
.receipt a{font-family:var(--f-mono); font-size:12.5px; word-break:break-all}
.receipt.null{border-style:dashed}
.receipt.null .meta::after{content:"null result"; color:var(--promising)}
#site[data-lang="id"] .receipt.null .meta::after{content:"hasil nihil"}
@media (max-width:860px){ .benefit{grid-template-columns:1fr} }

.nocap{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:36px}
.nc{border:1px solid color-mix(in srgb, var(--band-ink) 18%, transparent); border-radius:var(--r); padding:22px; display:grid; gap:10px}
.nc .x{font-family:var(--f-mono); font-size:12.5px; color:var(--zest); letter-spacing:.06em; text-transform:uppercase}
.nc h3{font-size:22px; font-weight:700; letter-spacing:-0.01em}
.nc p{color:var(--band-muted); font-size:15.5px}
@media (max-width:760px){ .nocap{grid-template-columns:1fr} }

.routine{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); margin-top:36px; align-items:start}
.today{background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:24px}
.today-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.today-head h3{font-size:26px; font-weight:800}
.count{font-family:var(--f-mono); font-size:13px; color:var(--muted)}
.bar{height:8px; border-radius:99px; background:var(--bg); margin:14px 0 8px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--accent); transition:width .4s ease}
.task{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; padding-block:14px; border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.task input{appearance:none; width:26px; height:26px; border:2px solid var(--line); border-radius:8px; margin:2px 0 0; cursor:pointer; display:grid; place-content:center; background:var(--bg)}
.task input:checked{background:var(--accent); border-color:var(--accent)}
.task input:checked::after{content:""; width:11px; height:6px; border-left:2.5px solid var(--accent-ink); border-bottom:2.5px solid var(--accent-ink); transform:rotate(-45deg) translate(1px,-1px)}
.task input:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.task label{cursor:pointer}
.task label strong{display:block; font-size:16.5px}
.task label span.d{font-size:14.5px; color:var(--muted)}
.task input:checked + label strong{text-decoration:line-through; text-decoration-color:var(--accent)}
.week{display:grid; gap:0; border-top:1px solid var(--line)}
.week div{display:grid; grid-template-columns:120px 1fr; gap:16px; padding-block:16px; border-bottom:1px solid var(--line)}
.week dt{font-family:var(--f-mono); font-size:13px; font-weight:600; padding-top:2px}
.week dd{margin:0; color:var(--muted); font-size:15.5px}
.week dd b{color:var(--ink)}
@media (max-width:860px){ .routine{grid-template-columns:1fr} }

.safety{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; margin-top:32px}
.safe-card{border-radius:var(--r); padding:24px; border:1px solid var(--line); background:var(--surface)}
.safe-card h3{font-size:22px; font-weight:700; margin-bottom:10px}
.safe-card ul{margin:0; padding-left:20px; display:grid; gap:8px; color:var(--muted)}
.safe-card.warn{border-color:var(--promising); background:color-mix(in srgb, var(--promising) 7%, var(--surface))}
.big-stat{font-family:var(--f-display); font-weight:800; font-size:clamp(44px,6vw,72px); letter-spacing:-0.04em; line-height:1}
@media (max-width:760px){ .safety{grid-template-columns:1fr} }

.refs{margin-top:28px; padding-left:0; list-style:none; counter-reset:r; display:grid; gap:0; border-top:1px solid var(--line)}
.refs li{counter-increment:r; display:grid; grid-template-columns:42px 1fr; gap:12px; padding-block:14px; border-bottom:1px solid var(--line); font-size:15px}
.refs li::before{content:"[" counter(r) "]"; font-family:var(--f-mono); font-size:13px; color:var(--muted); padding-top:2px}
.refs li > div{min-width:0}
.refs .t{font-weight:600}
.refs .note{display:block; font-size:13.5px; color:var(--muted); margin-top:3px}
.refs a{font-family:var(--f-mono); font-size:12.5px; word-break:break-all}
footer{border-top:1px solid var(--line); padding-block:40px}
.foot{display:grid; grid-template-columns:1fr 1.4fr; gap:28px}
.foot p{font-size:14px; color:var(--muted)}
@media (max-width:760px){ .foot{grid-template-columns:1fr} }

:root{--photo-bg:#F3F3F3}
.device-photo{display:block; width:100%; max-width:100%; height:300px; object-fit:contain; background:var(--photo-bg); border-radius:18px; margin:14px 0 16px}
.bphoto{display:block; width:100%; max-width:100%; height:auto; aspect-ratio:16/11; object-fit:cover; object-position:50% 35%; border-radius:16px; margin-top:20px; background:var(--photo-bg)}
.bento{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:14px; margin-top:40px}
.tile{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:22px; overflow:hidden; display:flex; flex-direction:column; min-width:0}
.tile img{display:block; width:100%; max-width:100%; height:240px; object-fit:contain; background:var(--photo-bg)}
.tile.wide{grid-column:span 4} .tile.wide img{height:240px; object-fit:cover}
.tile.s2{grid-column:span 2} .tile.s3{grid-column:span 3}
.tile figcaption{padding:16px 18px 18px; display:grid; gap:4px}
.tile .spec{font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--accent)}
.tile strong{font-family:var(--f-display); font-size:20px; line-height:1.2}
.tile p{font-size:14.5px; color:var(--muted)}
.spec-tile{justify-content:center}
.specs{margin:8px 0 0; display:grid; border-top:1px solid var(--line)}
.specs div{display:grid; grid-template-columns:90px 1fr; gap:12px; padding-block:10px; border-bottom:1px solid var(--line)}
.specs dt{font-family:var(--f-mono); font-size:12.5px; color:var(--muted); padding-top:2px}
.specs dd{margin:0; font-size:15px}
.mfr{margin-top:16px; font-size:13.5px; color:var(--muted)}
@media (max-width:900px){ .bento{grid-template-columns:repeat(2, minmax(0,1fr))} .tile.wide{grid-column:span 2} .tile.s2,.tile.s3{grid-column:span 1} }
@media (max-width:520px){ .bento{grid-template-columns:1fr} .tile.wide,.tile.s2,.tile.s3{grid-column:span 1} }

@keyframes macroGrow{0%{transform:scale(.16); letter-spacing:.02em; opacity:.55}60%{opacity:1}100%{transform:scale(1); letter-spacing:-0.06em; opacity:1}}
@keyframes microIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.mm-macro{display:inline-block; transform-origin:0% 78%; animation:macroGrow 1.15s cubic-bezier(.2,.85,.25,1) .25s both}
.mm-rest{animation:microIn .6s ease 1.1s both}
@media (prefers-reduced-motion: reduce){ .mm-macro,.mm-rest{animation:none} }

.admin-mode #site > :not(#admin):not(.nav){display:none !important}
#admin{padding-block:40px 80px}
.adm-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px}
.adm-head h1{font-size:clamp(34px,5vw,52px); font-weight:800}
.adm-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.adm-status{margin-top:18px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); font-size:15px}
.adm-status[data-kind="ok"]{border-color:var(--solid); color:var(--solid)}
.adm-status[data-kind="warn"]{border-color:var(--promising); color:var(--promising)}
.adm-status[data-kind="err"]{border-color:#C2410C; color:#C2410C}
.adm-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:14px; margin-top:24px}
.adm-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; min-width:0}
.adm-card.changed{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}
.adm-card img{display:block; width:100%; max-width:100%; height:190px; object-fit:contain; background:var(--photo-bg)}
.adm-body{padding:14px 16px 16px; display:grid; gap:8px}
.adm-body strong{font-family:var(--f-display); font-size:18px}
.adm-where{font-size:13.5px; color:var(--muted)}
.adm-pill{justify-self:start; font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted)}
.adm-pill.custom{border-color:var(--solid); color:var(--solid)}
.adm-pill.pending{border-color:var(--accent); color:var(--accent)}
.adm-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.adm-btn{all:unset; cursor:pointer; font-weight:600; font-size:14px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--ink); color:var(--ink)}
.adm-btn:hover{background:var(--ink); color:var(--bg)}
.adm-btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.adm-btn.primary:hover{filter:brightness(1.08)}
.adm-btn[disabled]{opacity:.4; pointer-events:none}
.adm-btn:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.adm-file{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.adm-login{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface)}
.adm-login label{font-weight:600; font-size:15px}
.adm-login input{font:inherit; padding:9px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); color:var(--ink); min-width:0; flex:1 1 200px}
.adm-note{margin-top:14px; font-size:14px; color:var(--muted); max-width:70ch}
.adm-link{font-family:var(--f-mono); font-size:12.5px}
@media (prefers-reduced-motion: reduce){
.flow-path, .lymph-svg .lflow, .live i{animation:none}
.bar i{transition:none}
}

/* micro caption: elevated pill + animated marker */
.hero h1.mm .mm-micro{justify-self:start; display:inline-flex; align-items:center; gap:12px; margin-bottom:12px; padding:10px 16px 10px 14px; border-radius:16px; background:var(--accent); color:var(--accent-ink); font-size:clamp(16px,1.9vw,23px); letter-spacing:.14em; box-shadow:0 22px 44px -20px color-mix(in srgb, var(--accent) 85%, transparent), 0 2px 0 color-mix(in srgb, var(--ink) 14%, transparent); transform-origin:left center; animation:microPop .7s cubic-bezier(.2,.9,.3,1.25) .05s both}
.mm-mark{background:linear-gradient(var(--zest),var(--zest)) left calc(100% - 1px)/0% 6px no-repeat; padding-bottom:5px; animation:markDraw .65s cubic-bezier(.6,0,.2,1) .75s forwards}
.mm-wave{width:34px; height:14px; flex:none}
.mm-wave path{fill:none; stroke:var(--zest); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:7 5; animation:waveFlow 1.4s linear infinite}
.hero h1.mm .mm-tag{background:var(--zest); color:var(--zest-ink); border:0; font-weight:700; letter-spacing:.04em; padding:4px 9px}
@keyframes microPop{from{opacity:0; transform:translateY(12px) scale(.9)}to{opacity:1; transform:none}}
@keyframes markDraw{to{background-size:100% 6px}}
@keyframes waveFlow{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion: reduce){ .hero h1.mm .mm-micro, .mm-wave path{animation:none} .mm-mark{animation:none; background-size:100% 6px} }