/* extras — ported from the approved design; colours come only from theme variables. */
.pal-h{display:none;font:700 .74rem/1 var(--fd);letter-spacing:.12em;text-transform:uppercase;color:var(--chrome-muted);margin:4px 0 12px}
.h3c{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);margin:0 0 .3em}
.disc{font-size:.8rem;color:var(--muted);margin:0}
.fact .bar{display:block;position:relative;height:6px;border-radius:9px;background:var(--line);margin-top:14px;overflow:hidden}
.fact .bar::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--v));transition:transform 1.1s cubic-bezier(.33,1,.68,1)}
.js .fact:not(.filled) .bar::after{transform:scaleX(0)}
.step .mini{display:none;float:right;width:96px;height:auto;margin:0 0 8px 12px;background:var(--white);border:1px solid var(--line);border-radius:12px}
.build-fig .lbl{justify-content:center}
.ccard,.plan,.team .card{transition:transform .22s ease-out,box-shadow .22s ease-out,border-color .22s}
.ccard:hover,.ccard:focus-visible,.plan:hover,.plan:focus-within,.team .card:hover{transform:translateY(-4px);box-shadow:6px 6px 0 var(--tangerine),12px 12px 0 var(--mint)}
.ccard .thumb svg{transition:transform .3s var(--ease)}
.ccard:hover .thumb svg,.ccard:focus-visible .thumb svg{transform:scale(1.03)}
.ccard.wide{flex-direction:row;margin-top:clamp(16px,2vw,26px)}
.ccard.wide .thumb{flex:0 0 38%;aspect-ratio:auto;background:var(--night);border-bottom:0;border-right:1px solid var(--line);display:grid;place-items:center}
.ccard.wide .thumb svg{height:auto;aspect-ratio:16/10}
.ccard .foot .note{font-size:.8rem}
.bopt .ac{stroke:var(--accent)}.bopt .acf{fill:var(--accent)}
.cmap svg text{font-family:var(--fd)}
.cmap .tipg{opacity:0;transition:opacity .25s}
.cmap .tipg rect{fill:var(--night)}
.cmap .tipg text{fill:var(--white);font-size:16px;font-weight:700}
.cmap a:hover .tipg,.cmap a:focus .tipg{opacity:1}
.cmap a:focus{outline:none}
.cmap a:hover circle,.cmap a:focus-visible circle,.cmap a:focus-visible rect:first-child{stroke:var(--accent-ink);stroke-width:6}
.js .cmap.in a.node:nth-of-type(1){transition-delay:.4s}.js .cmap.in a.node:nth-of-type(2){transition-delay:.7s}.js .cmap.in a.node:nth-of-type(3){transition-delay:1s}.js .cmap.in a.node:nth-of-type(4){transition-delay:1.3s}
.path4{position:relative;margin:24px 0 8px}
.path4::before{content:"";position:absolute;left:18px;right:18px;top:17px;border-top:3px dashed var(--night);transform-origin:left top}
.js .path4::before{transform:scaleX(0);transition:transform 1.4s var(--ease)}
.js .path4.in::before{transform:none}
.path4 ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:p;position:relative}
.path4 li{counter-increment:p;position:relative;padding-top:50px;margin:0}
.path4 li::before{content:counter(p);position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);font:800 .95rem/1 var(--fd);transition:transform .4s var(--ease)}
.path4 li:nth-child(2)::before{background:var(--tangerine);color:var(--night)}
.path4 li:nth-child(3)::before{background:var(--mint);color:var(--night)}
.path4 li:nth-child(4)::before{background:var(--night);color:var(--white)}
.js .path4 li::before{transform:scale(0)}
.js .path4.in li::before{transform:none}
.js .path4.in li:nth-child(2)::before{transition-delay:.12s}.js .path4.in li:nth-child(3)::before{transition-delay:.24s}.js .path4.in li:nth-child(4)::before{transition-delay:.36s}
.path4 li>a,.path4 li>b{font:700 1rem/1.3 var(--fd);color:var(--night)}
.path4 li span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}
.chero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,56px);align-items:center}
.chero .detail-art{margin:0}
.chero .hero-ctas{margin:22px 0 0}
.player{background:var(--chrome);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.pl-frame{position:relative;background:var(--white);aspect-ratio:16/9;display:grid;place-items:center}
.pl-frame svg{height:86%;width:auto}
.pl-cc{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:color-mix(in srgb,var(--night) 88%,transparent);color:var(--white);font-size:.86rem;line-height:1.35;padding:6px 12px;border-radius:8px;width:max-content;max-width:90%;text-align:center}
.pl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;color:var(--chrome-text);font:700 .78rem/1 var(--fd)}
.pl-play{width:0;height:0;border-left:12px solid var(--white);border-top:7px solid transparent;border-bottom:7px solid transparent}
.pl-prog{flex:1;min-width:80px;height:6px;border-radius:9px;background:var(--chrome-3);overflow:hidden}
.pl-prog i{display:block;height:100%;background:var(--accent)}
.pl-btn{border:1px solid var(--chrome-3);border-radius:6px;padding:5px 7px}
.case{margin-top:28px}
.mets{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px}
.mets li{margin:0;font-size:.86rem;color:var(--muted)}
.mets b{display:block;font:800 1.5rem/1.1 var(--fd);color:var(--night);margin-bottom:4px}
.vdemo label{font:700 .95rem/1.3 var(--fd);display:block;margin-bottom:8px}
.vdemo input[type=range]{width:100%;accent-color:var(--accent-ink)}
.vscale{display:grid;grid-template-columns:repeat(9,1fr);height:34px;border-radius:10px;overflow:hidden;margin:12px 0}
.vscale i:nth-child(1){background:color-mix(in srgb,var(--night) 0%,var(--white))}.vscale i:nth-child(2){background:color-mix(in srgb,var(--night) 12%,var(--white))}.vscale i:nth-child(3){background:color-mix(in srgb,var(--night) 23%,var(--white))}.vscale i:nth-child(4){background:color-mix(in srgb,var(--night) 35%,var(--white))}.vscale i:nth-child(5){background:color-mix(in srgb,var(--night) 46%,var(--white))}.vscale i:nth-child(6){background:color-mix(in srgb,var(--night) 58%,var(--white))}.vscale i:nth-child(7){background:color-mix(in srgb,var(--night) 70%,var(--white))}.vscale i:nth-child(8){background:color-mix(in srgb,var(--night) 81%,var(--white))}.vscale i:nth-child(9){background:color-mix(in srgb,var(--night) 93%,var(--white))}
.vscale i.on{box-shadow:inset 0 0 0 3px var(--accent);border-radius:8px}
.vsample{height:64px;border-radius:12px;border:1px solid var(--line);margin-bottom:18px;transition:background-color .3s}
.harm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.harm div{display:flex;flex-wrap:wrap;gap:4px}
.harm span{flex:1;aspect-ratio:1;border-radius:8px}
.harm b{width:100%;font:700 .82rem/1 var(--fd);margin-top:6px}
.flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:f}
.flow li{counter-increment:f;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;margin:0;font-size:.92rem;color:var(--muted)}
.flow li::before{content:counter(f,decimal-leading-zero);display:block;font:800 .9rem/1 var(--fd);color:var(--accent-ink);margin-bottom:10px}
.flow b{display:block;color:var(--night);font-family:var(--fd)}
.gal.masonry{display:block;columns:4 220px;column-gap:18px}
.gal.masonry .gitem{break-inside:avoid;margin-bottom:22px}
.gitem .frame{transition:transform .22s ease-out,box-shadow .22s ease-out}
.gitem:hover .frame{transform:translateY(-4px);box-shadow:6px 6px 0 var(--tangerine),12px 12px 0 var(--mint)}
.cardbox{border:2px dashed var(--line-2);border-radius:12px;padding:12px 14px;font-size:.88rem;color:var(--muted);background:var(--violet-wash)}
#coDlg .ok p{margin:0 0 14px}
dl.acc dt{font:700 1.05rem/1.35 var(--fd);margin-top:16px}
dl.acc dd{margin:4px 0 0;color:var(--muted)}
.acc-btn .eye{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center}
.acc-btn .eye svg{width:20px;height:20px}
.acc-btn .eye .open,.acc-btn[aria-expanded="true"] .eye .closed{display:none}
.acc-btn[aria-expanded="true"] .eye .open{display:block}
.acc-panel{transition:grid-template-rows .28s ease}
.js .acc-panel:not(.open)>div{transition:visibility 0s .28s}
.cookie.up{transform:none;opacity:1}
@media (min-width:992px){.cookie{bottom:16px;left:calc(var(--rail) + 16px)}}
.linkbtn.inl{color:var(--accent-ink);text-decoration:underline;font-weight:700}
.fact>span{font-size:.92rem;color:var(--muted)}
.bopt label{color:var(--night)}
.appbar.open~.cookie{display:none}
.doctab .file{white-space:nowrap}