:root{
  color-scheme:dark;
  --bg:#061013;--bg2:#0a1b20;--panel:rgba(7,20,24,.88);--panel2:rgba(10,29,35,.76);
  --text:#e7fbff;--muted:#87aab4;--line:rgba(147,214,229,.18);--line-strong:rgba(147,214,229,.36);
  --cyan:#9cdef2;--coral:#e98291;--good:#55e6a5;--warn:#f6c85f;--bad:#ff7285;
  --accent:#67e8f9;--accent2:#a78bfa;--shadow:0 30px 90px rgba(0,0,0,.38);
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:var(--mono);line-height:1.5;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}
a{color:inherit}img,svg{max-width:100%}
[hidden]{display:none!important}.skip-link{position:fixed;left:12px;top:-70px;z-index:999;padding:10px 14px;border-radius:10px;background:#fff;color:#071014;transition:.2s}.skip-link:focus{top:12px}
.site-art,.site-art::before,.site-art::after{position:fixed;inset:0;pointer-events:none}.site-art{z-index:-5;background:#10262a url('./assets/flow-lines.svg') center/cover no-repeat;opacity:.95}.site-art::before{content:"";inset:-10%;background:url('./assets/flow-lines.svg') center/cover no-repeat;opacity:.22;transform:scale(1.08);animation:drift 34s ease-in-out infinite alternate}.site-art::after{content:"";background:radial-gradient(800px 520px at 86% 10%,color-mix(in srgb,var(--accent2) 12%,transparent),transparent 68%),radial-gradient(900px 620px at 8% 24%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 72%),linear-gradient(180deg,rgba(4,12,14,.22),rgba(4,11,13,.72))}
@keyframes drift{from{transform:scale(1.06) translate3d(-.6%,-.4%,0)}to{transform:scale(1.1) translate3d(.6%,.4%,0)}}
.wrap{width:min(1220px,calc(100% - 40px));margin-inline:auto}
.topbar{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line-strong);background:rgba(4,13,16,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.nav-inner{min-height:76px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;min-width:230px}.brand-mark{position:relative;display:grid;place-items:center;width:48px;height:48px;overflow:hidden;border:1px solid var(--line-strong);border-radius:15px;background:linear-gradient(145deg,rgba(156,222,242,.11),rgba(233,130,145,.08));box-shadow:inset 0 0 28px rgba(255,255,255,.02)}.brand-mark::before{content:"";position:absolute;width:34px;height:34px;border:1px solid var(--accent);border-radius:50%;opacity:.22;animation:spin 10s linear infinite}.brand-mark b{position:relative;color:var(--accent);font-size:13px;letter-spacing:-.08em}.brand strong,.brand small{display:block}.brand strong{color:var(--cyan);font-size:16px}.brand small{margin-top:2px;color:var(--muted);font-size:9px;letter-spacing:.05em}.nav{display:flex;justify-content:center;align-items:center;gap:4px}.nav-btn{min-height:38px;padding:0 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;transition:.2s}.nav-btn:hover,.nav-btn:focus-visible{color:var(--text);border-color:var(--line)}.nav-btn.active{color:#fff;border-color:color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.nav-actions{display:flex;align-items:center;gap:8px}.icon-btn,.menu-button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-strong);border-radius:12px;background:rgba(8,20,24,.66);color:var(--cyan);cursor:pointer}.menu-button{display:none}.nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 15px;border:1px solid var(--line-strong);border-radius:11px;text-decoration:none;color:var(--cyan);font-size:10px;font-weight:800}.nav-cta:hover{border-color:var(--accent);color:#fff}
.view-context{position:sticky;top:76px;z-index:70;border-bottom:1px solid var(--line);background:rgba(5,16,19,.88);backdrop-filter:blur(15px)}.view-context-inner{min-height:70px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:16px}.view-index{display:grid;place-items:center;width:48px;height:48px;border:1px solid color-mix(in srgb,var(--accent) 65%,transparent);border-radius:13px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:11px;font-weight:900}.view-context small,.view-context strong{display:block}.view-context small{color:var(--muted);font-size:8px;letter-spacing:.17em}.view-context strong{margin-top:2px;color:var(--accent);font-size:13px}.view-context p{margin:0;text-align:right;color:var(--muted);font-family:var(--sans);font-size:12px;line-height:1.5}
.app-view{min-height:calc(100vh - 146px)}
.hero{position:relative;display:grid;place-items:center;min-height:calc(100vh - 146px);padding:64px 0 78px;overflow:hidden;text-align:center}.hero::before,.hero::after{content:"";position:absolute;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:50%;pointer-events:none}.hero::before{width:430px;height:430px;right:-180px;top:40px;box-shadow:0 0 120px color-mix(in srgb,var(--accent2) 15%,transparent);animation:orbit 18s linear infinite}.hero::after{width:240px;height:240px;left:-120px;bottom:50px;border-style:dashed;animation:orbitReverse 22s linear infinite}.hero-inner{position:relative;z-index:2;max-width:990px}.status-pill{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(5,15,18,.63);color:var(--muted);font-size:9px;letter-spacing:.08em;text-transform:uppercase}.status-pill i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 15px var(--good)}.status-pill b{color:var(--accent);font-weight:700}.hero-logo{display:flex;align-items:center;justify-content:center;gap:13px;margin:28px 0 20px}.hero-logo-mark{display:grid;place-items:center;width:58px;height:58px;border:1px solid var(--line-strong);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 17%,transparent),color-mix(in srgb,var(--accent2) 12%,transparent));color:var(--accent);font-size:19px;font-weight:900;box-shadow:0 18px 45px rgba(0,0,0,.25)}.hero-wordmark{text-align:left}.hero-wordmark strong,.hero-wordmark small{display:block}.hero-wordmark strong{font-size:22px;color:var(--cyan)}.hero-wordmark small{margin-top:3px;color:var(--accent);font-size:9px;letter-spacing:.14em}.hero h1{max-width:1000px;margin:0 auto;color:#eafbff;font-family:var(--sans);font-size:clamp(42px,6.1vw,78px);line-height:1.02;letter-spacing:-.064em}.gradient-text{background:linear-gradient(100deg,var(--accent),var(--cyan) 45%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.typing-cursor{color:var(--accent);animation:blink .9s steps(1) infinite}.hero .lead{max-width:840px;margin:24px auto 0;color:var(--muted);font-family:var(--sans);font-size:clamp(15px,1.55vw,19px);line-height:1.75}.hero-actions,.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:11px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 17px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(5,16,19,.72);color:var(--cyan);text-decoration:none;font-size:11px;font-weight:850;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}.btn:hover,.btn:focus-visible{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 17px 42px rgba(0,0,0,.28);outline:none}.btn.primary,.btn:not(.secondary){border:0;background:linear-gradient(125deg,var(--accent),var(--accent2));color:#061115}.btn.secondary{background:rgba(4,14,17,.72)}
.terminal{max-width:870px;margin:34px auto 0;overflow:hidden;border:1px solid var(--line-strong);border-radius:15px;background:rgba(2,10,12,.82);text-align:left;box-shadow:var(--shadow)}.terminal-head,.panel-head{min-height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px}.terminal-dots{display:flex;gap:6px}.terminal-dots i{width:8px;height:8px;border-radius:50%;background:var(--accent)}.terminal-dots i:nth-child(2){background:var(--warn)}.terminal-dots i:nth-child(3){background:var(--good)}.terminal pre{min-height:118px;margin:0;padding:19px;color:#c7edf5;font-size:11px;line-height:1.75;white-space:pre-wrap}.hero-facts{max-width:870px;margin:14px auto 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:14px;background:rgba(4,14,17,.57);overflow:hidden}.hero-facts span{padding:16px 12px;border-right:1px solid var(--line)}.hero-facts span:last-child{border-right:0}.hero-facts strong,.hero-facts small{display:block}.hero-facts strong{color:var(--cyan);font-size:19px}.hero-facts small{margin-top:4px;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.09em}
.section{padding:70px 0}.section.alt{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(4,14,17,.24)}.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);align-items:end;gap:42px;margin-bottom:28px}.section-head .eyebrow,.eyebrow,.kicker{color:var(--accent);font-size:9px;letter-spacing:.15em;text-transform:uppercase}.section-head h2{margin:8px 0 0;color:var(--cyan);font-family:var(--sans);font-size:clamp(32px,4.5vw,56px);line-height:1.04;letter-spacing:-.05em}.section-head p{margin:0;color:var(--muted);font-family:var(--sans);font-size:14px;line-height:1.72}.grid{display:grid;gap:16px}.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card,.panel,.accuracy-block article{position:relative;overflow:hidden;padding:24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(6,20,24,.88),rgba(8,24,29,.65));box-shadow:0 17px 50px rgba(0,0,0,.16);transition:transform .22s,border-color .22s,box-shadow .22s}.card::before,.panel::before,.accuracy-block article::before{content:"";position:absolute;inset:auto -70px -85px auto;width:180px;height:180px;border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);border-radius:50%;pointer-events:none}.card:hover,.panel:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 28px 70px rgba(0,0,0,.28)}.card h3,.panel h3,.accuracy-block h3{margin:8px 0 0;color:#d9f7ff;font-family:var(--sans);font-size:20px;letter-spacing:-.025em}.card p,.panel p,.accuracy-block p,.muted{color:var(--muted);font-family:var(--sans);font-size:13px;line-height:1.7}.overview-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.overview-main{min-height:290px;padding:30px}.overview-main h3{max-width:650px;font-size:30px}.overview-main p{max-width:720px;font-size:15px}.overview-stack{display:grid;gap:16px}.overview-stack .card{min-height:137px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.process-card{padding:23px;border:1px solid var(--line);border-radius:15px;background:rgba(4,15,18,.68)}.process-card span{display:grid;place-items:center;width:38px;height:38px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:10px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);font-size:9px}.process-card h3{margin:17px 0 7px;color:var(--cyan);font-family:var(--sans);font-size:17px}.process-card p{margin:0;color:var(--muted);font-family:var(--sans);font-size:12px;line-height:1.65}
.workspace>.section{padding-left:0;padding-right:0}.workspace{width:min(1220px,calc(100% - 40px));margin-inline:auto}.workspace .section:first-child{padding-top:65px}.workspace .section:last-child{padding-bottom:80px}.workspace .section-head{margin-bottom:28px}.workspace .section-head>p{max-width:540px;justify-self:end}.workspace-status,.hero-panel,.use-strip{display:none!important}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}label{display:grid;gap:7px;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.09em}input,select,textarea{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(1,9,11,.82);color:var(--text);outline:none}textarea{min-height:170px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.log,pre.log{overflow:auto;margin:12px 0 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:#031013;color:#c5edf4;font-size:10px;line-height:1.7;white-space:pre-wrap}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px;background:rgba(4,15,18,.72)}table{width:100%;border-collapse:collapse;min-width:680px}th,td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:11px}th{color:var(--accent);font-size:9px;text-transform:uppercase;letter-spacing:.08em}td{color:#c9e9ef}.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.chip{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:rgba(4,15,18,.72);color:var(--muted);font-size:9px;cursor:pointer}.chip.active,.chip:hover{border-color:var(--accent);color:#fff;background:color-mix(in srgb,var(--accent) 11%,transparent)}.progress{overflow:hidden;height:9px;border-radius:999px;background:rgba(255,255,255,.07)}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s}.metric{background:linear-gradient(100deg,var(--accent),var(--cyan),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.accuracy-block{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.empty{padding:22px;border:1px dashed var(--line-strong);border-radius:14px;color:var(--muted);text-align:center}.danger{color:var(--bad)}
.footer{border-top:1px solid var(--line);background:rgba(3,11,13,.74)}.footer-inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:9px}.footer a{text-decoration:none;color:var(--cyan)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .48s ease,transform .48s ease}.reveal.in{opacity:1;transform:none}.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}.soft-contrast{--panel:rgba(10,26,31,.98);--panel2:rgba(13,34,41,.96);--muted:#b2d1d8;--line:rgba(166,225,237,.29)}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes orbitReverse{to{transform:rotate(-360deg)}}@keyframes blink{50%{opacity:0}}
@media(max-width:1020px){.nav-inner{grid-template-columns:auto auto}.brand{min-width:0}.menu-button{display:grid;justify-self:end}.nav{position:absolute;left:20px;right:20px;top:66px;display:none;flex-direction:column;align-items:stretch;padding:10px;border:1px solid var(--line-strong);border-radius:15px;background:rgba(3,13,16,.97);box-shadow:var(--shadow)}.nav.open{display:flex}.nav-btn{text-align:left;min-height:44px}.nav-actions{grid-column:2;grid-row:1}.nav-cta{display:none}.view-context-inner{grid-template-columns:auto 1fr}.view-context p{grid-column:1/-1;text-align:left;padding-bottom:12px}.section-head{grid-template-columns:1fr;gap:14px}.section-head p,.workspace .section-head>p{justify-self:start}.overview-grid{grid-template-columns:1fr}.process-grid{grid-template-columns:repeat(2,1fr)}.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.wrap,.workspace{width:min(100% - 22px,1220px)}.nav-inner{min-height:66px;gap:10px}.brand-mark{width:42px;height:42px}.brand strong{font-size:13px}.brand small{font-size:7.5px}.view-context{top:66px}.view-context-inner{min-height:64px}.view-context p{font-size:10px}.hero{min-height:auto;padding:54px 0 60px}.hero-logo{margin-top:22px}.hero-logo-mark{width:50px;height:50px}.hero-wordmark strong{font-size:17px}.hero h1{font-size:clamp(38px,12vw,57px)}.hero .lead{font-size:14px;line-height:1.65}.hero-actions{display:grid;grid-template-columns:1fr;width:100%;max-width:420px;margin-inline:auto;margin-top:24px}.terminal{margin-top:28px}.terminal pre{min-height:104px;font-size:9px}.hero-facts{grid-template-columns:repeat(2,1fr)}.hero-facts span:nth-child(2){border-right:0}.hero-facts span:nth-child(-n+2){border-bottom:1px solid var(--line)}.section{padding:52px 0}.section-head h2{font-size:36px}.cols-2,.cols-3,.cols-4,.accuracy-block{grid-template-columns:1fr}.process-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.card,.panel,.accuracy-block article{padding:20px}.footer-inner{min-height:110px;flex-direction:column;justify-content:center;text-align:center}.hero::before{width:280px;height:280px;right:-170px}.hero::after{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.site-art::before,.brand-mark::before,.hero::before,.hero::after,.typing-cursor{animation:none!important}.reveal{opacity:1;transform:none}}


/* MetricForge Dynamic Review v4 */
.site-art{overflow:hidden;background:#061013;opacity:1;isolation:isolate}
.site-art .bg-layer{position:absolute;inset:-10%;background-position:center;background-repeat:no-repeat;background-size:cover;will-change:transform,opacity}
.site-art .bg-flow-a{background-image:url('./assets/flow-lines.svg');opacity:.78;animation:mfFlowA 38s ease-in-out infinite alternate}
.site-art .bg-flow-b{background-image:url('./assets/flow-lines.svg');opacity:.30;mix-blend-mode:screen;transform:scale(1.16) rotate(180deg);animation:mfFlowB 48s ease-in-out infinite alternate}
.site-art .bg-orbits{background-image:url('./assets/orbit-lines.svg');opacity:.72;animation:mfOrbitField 54s linear infinite}
.site-art .bg-mesh{background-image:url('./assets/neural-mesh.svg');opacity:.34;animation:mfMeshDrift 62s linear infinite}
.site-art::before{content:"";position:absolute;inset:-25%;background:radial-gradient(42% 34% at calc(50% + var(--px,0px)) calc(35% + var(--py,0px)),color-mix(in srgb,var(--accent) 16%,transparent),transparent 72%),radial-gradient(36% 34% at 84% 18%,color-mix(in srgb,var(--accent2) 15%,transparent),transparent 72%),radial-gradient(38% 42% at 14% 82%,rgba(104,220,235,.08),transparent 74%);opacity:.92;animation:mfAurora 20s ease-in-out infinite alternate}
.site-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,8,10,.08),rgba(3,11,14,.65)),linear-gradient(110deg,transparent 0 42%,rgba(255,255,255,.018) 50%,transparent 58%);background-size:auto,220% 100%;animation:mfScan 18s linear infinite}
@keyframes mfFlowA{from{transform:translate3d(-1.4%,-.8%,0) scale(1.05)}to{transform:translate3d(1.4%,.8%,0) scale(1.10)}}
@keyframes mfFlowB{from{transform:translate3d(1.2%,-.8%,0) scale(1.16) rotate(180deg)}to{transform:translate3d(-1.2%,.8%,0) scale(1.22) rotate(181deg)}}
@keyframes mfOrbitField{to{transform:rotate(360deg) scale(1.03)}}
@keyframes mfMeshDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-72px,-72px,0)}}
@keyframes mfAurora{from{transform:translate3d(-1%,0,0) scale(1)}to{transform:translate3d(1%,1%,0) scale(1.06)}}
@keyframes mfScan{to{background-position:0 0,-220% 0}}
.brand-mark img,.hero-logo-mark img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 42%,transparent))}
.brand-mark::before{width:38px;height:38px;border-style:dashed;animation:spin 14s linear infinite}
.nav-btn{display:inline-flex;align-items:center;gap:7px}.nav-btn img{width:15px;height:15px;opacity:.72;transition:.2s}.nav-btn:hover img,.nav-btn.active img{opacity:1;filter:drop-shadow(0 0 7px color-mix(in srgb,var(--accent) 48%,transparent))}
.icon-btn img,.menu-button img,.nav-cta img,.btn img{width:17px;height:17px;object-fit:contain}.icon-btn{position:relative;overflow:hidden}.icon-btn::after{content:"";position:absolute;inset:4px;border:1px solid color-mix(in srgb,var(--accent) 0%,transparent);border-radius:9px;transition:.24s}.icon-btn:hover::after,.icon-btn:focus-visible::after{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:rotate(8deg)}
.view-index{position:relative;overflow:hidden}.view-index img{width:23px;height:23px;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 42%,transparent))}.view-index em{position:absolute;right:4px;bottom:3px;font-style:normal;font-size:6.5px;color:var(--muted);letter-spacing:.03em}
.hero-logo-mark{position:relative;overflow:hidden}.hero-logo-mark::after{content:"";position:absolute;inset:7px;border:1px dashed color-mix(in srgb,var(--accent) 38%,transparent);border-radius:14px;animation:spin 16s linear infinite}
.hero-logo-mark img{position:relative;z-index:2;width:70%;height:70%}
.music-shell{position:relative}.music-panel{position:absolute;right:0;top:50px;width:min(340px,calc(100vw - 28px));padding:16px;border:1px solid var(--line-strong);border-radius:16px;background:rgba(3,13,16,.97);box-shadow:0 28px 85px rgba(0,0,0,.52);backdrop-filter:blur(20px);z-index:120}.music-panel[hidden]{display:none!important}.music-header{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}.music-cover{width:52px;height:52px;border-radius:14px;border:1px solid var(--line-strong);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent2) 18%,transparent));padding:9px}.music-meta strong,.music-meta small{display:block}.music-meta strong{font-size:11px;color:var(--cyan)}.music-meta small{margin-top:4px;font-size:7px;color:var(--muted);letter-spacing:.1em}.music-controls{display:grid;grid-template-columns:40px 1fr 40px;gap:8px;margin-top:14px}.music-control{height:38px;border:1px solid var(--line-strong);border-radius:11px;background:rgba(7,22,26,.8);color:var(--cyan);cursor:pointer}.music-control.primary{background:linear-gradient(125deg,var(--accent),var(--accent2));border:0;color:#061115}.music-control img{width:16px;height:16px}.music-volume{display:grid;grid-template-columns:18px 1fr;align-items:center;gap:9px;margin-top:13px}.music-volume img{width:16px;height:16px}.music-volume input{min-height:0;height:5px;padding:0;border:0;background:transparent;accent-color:var(--accent)}.music-note{margin:12px 0 0;color:var(--muted);font-family:var(--sans);font-size:9px;line-height:1.5}.music-equalizer{display:flex;align-items:end;gap:3px;height:17px;margin-top:10px}.music-equalizer i{display:block;width:3px;height:5px;border-radius:4px;background:linear-gradient(var(--accent),var(--accent2));animation:mfEq .9s ease-in-out infinite alternate}.music-equalizer i:nth-child(2){animation-delay:.15s}.music-equalizer i:nth-child(3){animation-delay:.3s}.music-equalizer i:nth-child(4){animation-delay:.45s}.music-equalizer.paused i{animation-play-state:paused;height:3px}.music-equalizer i:nth-child(2){height:12px}.music-equalizer i:nth-child(3){height:8px}.music-equalizer i:nth-child(4){height:15px}@keyframes mfEq{to{height:16px}}
.hero::before{box-shadow:0 0 140px color-mix(in srgb,var(--accent2) 17%,transparent),inset 0 0 80px color-mix(in srgb,var(--accent) 5%,transparent)}
.hero::after{box-shadow:0 0 85px color-mix(in srgb,var(--accent) 10%,transparent)}
.card,.panel,.process-card,.terminal,.hero-facts{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.card::after,.panel::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 68%);opacity:0;transition:opacity .2s;pointer-events:none}.card:hover::after,.panel:hover::after{opacity:1}
.review-badge{display:inline-flex;align-items:center;gap:7px;margin-left:8px;color:var(--accent);font-size:7px;letter-spacing:.12em}.review-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
@media(max-width:1020px){.music-panel{position:fixed;right:14px;top:74px}.nav-btn img{width:17px;height:17px}}
@media(max-width:720px){.nav-actions{gap:5px}.icon-btn,.menu-button{width:38px;height:38px}.music-panel{left:11px;right:11px;top:72px;width:auto}.site-art .bg-flow-b,.site-art .bg-mesh{display:none}.site-art .bg-orbits{opacity:.48}.site-art::before{opacity:.68}}
@media(prefers-reduced-motion:reduce){.site-art .bg-layer,.site-art::before,.site-art::after,.music-equalizer i{animation:none!important}.site-art .bg-flow-b{display:none}.music-equalizer i{height:4px!important}}



/* MetricForge Cinematic Background System v5 */
:root{
  --px-fast:0px;--py-fast:0px;--px-fast-neg:0px;--py-fast-neg:0px;--px-slow:0px;--py-slow:0px;
  --scroll-near:0px;--scroll-far:0px;--view-x:0px;--view-y:0px;
}
.site-art{
  overflow:hidden;isolation:isolate;contain:strict;
  background:
    radial-gradient(1200px 760px at 50% -20%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 72%),
    linear-gradient(150deg,#041013 0%,#07171b 45%,#071116 100%);
  opacity:1;
}
.site-art .bg-layer{
  position:absolute;inset:-14%;background-position:center;background-repeat:no-repeat;background-size:cover;
  transform:translateZ(0);backface-visibility:hidden;will-change:auto;pointer-events:none;
}
.site-art .bg-aurora{
  will-change:transform,opacity;inset:-32%;z-index:0;opacity:.72;filter:blur(56px) saturate(125%);
  background:
    radial-gradient(34% 30% at 22% 28%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 74%),
    radial-gradient(30% 34% at 78% 20%,color-mix(in srgb,var(--accent2) 25%,transparent),transparent 75%),
    radial-gradient(36% 34% at 58% 82%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 76%);
  animation:v5Aurora 17s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.site-art .bg-grid{
  z-index:1;inset:-8%;opacity:.26;background-image:url('./assets/circuit-grid.svg');background-size:980px 680px;
  mix-blend-mode:screen;mask-image:radial-gradient(ellipse at center,#000 0 56%,transparent 88%);
  animation:v5Grid 30s linear infinite;
}
.site-art .bg-flow-a{
  will-change:transform;z-index:2;opacity:.72;background-image:url('./assets/flow-lines.svg');
  transform:translate3d(var(--px-slow),var(--py-slow),0) scale(1.08);
  animation:v5FlowA 29s ease-in-out infinite alternate;
}
.site-art .bg-flow-b{
  z-index:2;opacity:.27;background-image:url('./assets/flow-lines.svg');mix-blend-mode:screen;
  transform:translate3d(var(--px-fast),var(--py-fast),0) scale(1.22) rotate(180deg);
  animation:v5FlowB 43s ease-in-out infinite alternate;
}
.site-art .bg-scene{
  will-change:transform,opacity;z-index:3;inset:-8%;opacity:.88;background-image:url('./assets/scene-primary.svg');background-size:min(1780px,128vw) auto;
  filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 18%,transparent));
  transform:translate3d(calc(var(--px-slow) + var(--view-x)),calc(var(--py-slow) + var(--view-y) + var(--scroll-far)),0) scale(1.04);
  animation:v5Scene 24s ease-in-out infinite alternate;
}
.site-art .bg-scene-echo{
  z-index:3;inset:-18%;opacity:.16;background-image:url('./assets/scene-primary.svg');background-size:min(1900px,145vw) auto;
  mix-blend-mode:screen;transform:translate3d(var(--px-fast-neg),calc(var(--py-fast-neg) + var(--scroll-far)),0) scale(1.16) rotate(180deg);
  animation:v5SceneEcho 39s ease-in-out infinite alternate;
}
.site-art .bg-orbits{
  z-index:4;inset:-20%;opacity:.58;background-image:url('./assets/orbit-lines.svg');background-size:min(1680px,140vw) auto;
  mix-blend-mode:screen;transform:translate3d(var(--px-slow),var(--py-slow),0);
  animation:v5Orbit 68s linear infinite;
}
.site-art .bg-mesh{
  z-index:4;inset:-6%;opacity:.28;background-image:url('./assets/neural-mesh.svg');background-size:840px 840px;
  mask-image:linear-gradient(115deg,transparent 2%,#000 24% 72%,transparent 98%);
  animation:v5Mesh 44s linear infinite;
}
.site-art .bg-particles{
  will-change:transform,opacity;z-index:5;inset:-6%;opacity:.78;background-image:url('./assets/particle-field.svg');background-size:1200px 780px;
  mix-blend-mode:screen;transform:translate3d(var(--px-fast),calc(var(--py-fast) + var(--scroll-near)),0);
  animation:v5Particles 22s ease-in-out infinite alternate;
}
.site-art .bg-beam{
  will-change:transform,opacity;z-index:6;inset:-25%;opacity:.55;
  background:linear-gradient(105deg,transparent 0 38%,color-mix(in srgb,var(--accent) 0%,transparent) 43%,color-mix(in srgb,var(--accent) 14%,transparent) 48%,rgba(255,255,255,.065) 50%,color-mix(in srgb,var(--accent2) 10%,transparent) 53%,transparent 61%);
  transform:translate3d(-55%,0,0) rotate(-4deg);animation:v5Beam 13s cubic-bezier(.55,.02,.32,.99) infinite;
}
.site-art::before{
  content:"";position:absolute;inset:0;z-index:7;opacity:.34;
  background:
    repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.055) 0 1px,transparent 1px 5px),
    linear-gradient(90deg,transparent 0 49.8%,color-mix(in srgb,var(--accent) 4%,transparent) 50%,transparent 50.2%);
  background-size:220px 220px,100% 100%;mix-blend-mode:soft-light;
  animation:v5Micro 19s linear infinite;
}
.site-art::after{
  content:"";position:absolute;inset:0;z-index:9;
  background:
    linear-gradient(180deg,rgba(2,8,10,.02),rgba(3,11,14,.34) 56%,rgba(2,8,10,.72)),
    radial-gradient(ellipse at center,transparent 20%,rgba(2,8,10,.18) 72%,rgba(2,8,10,.58) 100%);
}
.workspace{position:relative;isolation:isolate}
.workspace::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.48;
  background:radial-gradient(640px 340px at 50% 0,color-mix(in srgb,var(--accent) 8%,transparent),transparent 75%);
  animation:v5WorkspacePulse 8s ease-in-out infinite alternate;
}
.topbar,.view-context{box-shadow:0 18px 48px rgba(0,0,0,.14),inset 0 -1px rgba(255,255,255,.018)}
.hero::before{animation:v5HeroOrbit 21s linear infinite,v5HeroBreath 6s ease-in-out infinite alternate}
.hero::after{animation:v5HeroOrbitReverse 27s linear infinite,v5HeroBreath 8s ease-in-out infinite alternate-reverse}
.status-pill i{animation:v5Status 1.8s ease-in-out infinite}
.brand-mark,.hero-logo-mark{box-shadow:inset 0 0 32px color-mix(in srgb,var(--accent) 8%,transparent),0 18px 56px rgba(0,0,0,.28)}
.brand-mark img,.hero-logo-mark img{animation:v5IconFloat 5.5s ease-in-out infinite alternate}
.card,.panel,.process-card,.terminal,.hero-facts{position:relative;overflow:hidden}
.card::before,.panel::before,.process-card::before{
  content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:inherit;opacity:.0;
  background:linear-gradient(120deg,transparent 22%,color-mix(in srgb,var(--accent) 13%,transparent) 46%,rgba(255,255,255,.055) 50%,transparent 72%);
  transform:translateX(-75%);transition:opacity .3s;animation:v5CardSheen 9s ease-in-out infinite;
}
.card:hover::before,.panel:hover::before,.process-card:hover::before{opacity:.72}
body.motion-paused .site-art *,body.motion-paused .site-art::before,body.motion-paused .site-art::after,
body.motion-paused .workspace::before,body.motion-paused .hero::before,body.motion-paused .hero::after,
body.motion-paused .brand-mark img,body.motion-paused .hero-logo-mark img,body.motion-paused .status-pill i,
body.tab-hidden .site-art *,body.tab-hidden .site-art::before,body.tab-hidden .site-art::after{animation-play-state:paused!important}
@keyframes v5Aurora{0%{transform:translate3d(-3%,-2%,0) rotate(-4deg) scale(.98)}50%{opacity:.92}100%{transform:translate3d(4%,3%,0) rotate(5deg) scale(1.10)}}
@keyframes v5Grid{from{transform:translate3d(-40px,-30px,0) scale(1.02)}to{transform:translate3d(40px,30px,0) scale(1.06)}}
@keyframes v5FlowA{0%{transform:translate3d(calc(var(--px-slow) - 2%),calc(var(--py-slow) - 1%),0) scale(1.06)}100%{transform:translate3d(calc(var(--px-slow) + 2%),calc(var(--py-slow) + 1.2%),0) scale(1.13)}}
@keyframes v5FlowB{0%{transform:translate3d(calc(var(--px-fast) + 1.5%),calc(var(--py-fast) - 1%),0) scale(1.20) rotate(179deg)}100%{transform:translate3d(calc(var(--px-fast) - 1.5%),calc(var(--py-fast) + 1%),0) scale(1.28) rotate(182deg)}}
@keyframes v5Scene{0%{transform:translate3d(calc(var(--px-slow) + var(--view-x) - 1%),calc(var(--py-slow) + var(--view-y) + var(--scroll-far) - .7%),0) scale(1.03) rotate(-.25deg);opacity:.76}100%{transform:translate3d(calc(var(--px-slow) + var(--view-x) + 1%),calc(var(--py-slow) + var(--view-y) + var(--scroll-far) + .7%),0) scale(1.08) rotate(.25deg);opacity:.92}}
@keyframes v5SceneEcho{0%{transform:translate3d(calc(var(--px-fast-neg) - 1.3%),calc(var(--py-fast-neg) + var(--scroll-far) - .8%),0) scale(1.13) rotate(179deg);opacity:.08}100%{transform:translate3d(calc(var(--px-fast-neg) + 1.3%),calc(var(--py-fast-neg) + var(--scroll-far) + .8%),0) scale(1.20) rotate(181deg);opacity:.20}}
@keyframes v5Orbit{to{transform:translate3d(var(--px-slow),var(--py-slow),0) rotate(360deg) scale(1.04)}}
@keyframes v5Mesh{from{transform:translate3d(-36px,28px,0) rotate(-.3deg)}to{transform:translate3d(36px,-28px,0) rotate(.3deg)}}
@keyframes v5Particles{0%{transform:translate3d(calc(var(--px-fast) - 16px),calc(var(--py-fast) + var(--scroll-near) + 10px),0) scale(1);opacity:.55}100%{transform:translate3d(calc(var(--px-fast) + 16px),calc(var(--py-fast) + var(--scroll-near) - 10px),0) scale(1.035);opacity:.88}}
@keyframes v5Beam{0%,16%{transform:translate3d(-62%,0,0) rotate(-4deg);opacity:0}28%{opacity:.58}58%{opacity:.30}72%,100%{transform:translate3d(62%,0,0) rotate(-4deg);opacity:0}}
@keyframes v5Micro{from{opacity:.22;transform:scale(1)}to{opacity:.38;transform:scale(1.015)}}
@keyframes v5WorkspacePulse{from{opacity:.26;transform:scale(.98)}to{opacity:.58;transform:scale(1.03)}}
@keyframes v5HeroOrbit{to{transform:rotate(360deg)}}
@keyframes v5HeroOrbitReverse{to{transform:rotate(-360deg)}}
@keyframes v5HeroBreath{from{opacity:.45;box-shadow:0 0 90px color-mix(in srgb,var(--accent2) 12%,transparent)}to{opacity:.9;box-shadow:0 0 170px color-mix(in srgb,var(--accent) 20%,transparent)}}
@keyframes v5Status{50%{transform:scale(1.55);box-shadow:0 0 24px var(--good)}}
@keyframes v5IconFloat{from{transform:translateY(-2px) rotate(-2deg)}to{transform:translateY(2px) rotate(2deg)}}
@keyframes v5CardSheen{0%,72%{transform:translateX(-85%)}100%{transform:translateX(85%)}}
@media(max-width:1020px){
  .site-art .bg-scene{background-size:1780px auto}.site-art .bg-scene-echo{opacity:.10}.site-art .bg-grid{opacity:.18}
}
@media(max-width:720px){
  .site-art .bg-flow-b,.site-art .bg-scene-echo,.site-art .bg-mesh,.site-art .bg-beam{display:none}
  .site-art .bg-aurora{filter:blur(42px);opacity:.56}.site-art .bg-scene{opacity:.68;background-size:1350px auto}
  .site-art .bg-grid{background-size:720px 500px;opacity:.16}.site-art .bg-orbits{opacity:.34}.site-art .bg-particles{opacity:.55}
  .workspace::before{opacity:.34}
}
@media(prefers-reduced-motion:reduce){
  .site-art .bg-layer,.site-art::before,.site-art::after,.workspace::before,.hero::before,.hero::after,
  .brand-mark img,.hero-logo-mark img,.status-pill i,.card::before,.panel::before,.process-card::before{animation:none!important}
  .site-art .bg-flow-b,.site-art .bg-scene-echo,.site-art .bg-beam,.site-art .bg-mesh{display:none!important}
  .site-art .bg-scene{transform:none!important}.site-art .bg-aurora{filter:blur(34px)}
}