:root{--ink: #14212b;--ink-soft: #3a4a57;--fog: #e8eef2;--mist: #f3f7f9;--paper: rgba(255, 255, 255, .72);--sea: #1f6f7a;--sea-deep: #0f3d45;--foam: #7eb8c0;--signal: #c45c26;--ok: #2f6b4f;--line: rgba(20, 33, 43, .1);--shadow: 0 18px 50px rgba(15, 40, 50, .12);--radius: 18px;--font-display: "Fraunces", Georgia, serif;--font-body: "Sora", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--ink);font-family:var(--font-body);background:radial-gradient(1200px 600px at 10% -10%,rgba(126,184,192,.35),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(196,92,38,.12),transparent 45%),linear-gradient(165deg,#dfe9ee,#f5f8fa 42%,#e7f0f2);background-attachment:fixed}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");mix-blend-mode:soft-light}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{max-width:980px;margin:0 auto;padding:1.25rem 1.25rem 4rem}.topnav{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:baseline;justify-content:space-between;margin-bottom:2rem;animation:rise .6s ease both}.brand{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:700;letter-spacing:-.02em;color:var(--sea-deep)}.brand span{display:block;font-family:var(--font-body);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.15rem}.nav-links{display:flex;flex-wrap:wrap;gap:.85rem;font-size:.92rem;color:var(--ink-soft)}.nav-links a.active,.nav-links a:hover{color:var(--sea-deep)}.hero-panel{position:relative;padding:2.25rem 1.75rem 2rem;border-radius:calc(var(--radius) + 6px);background:linear-gradient(135deg,#0f3d45eb,#1f6f7ae0),radial-gradient(circle at 80% 20%,rgba(126,184,192,.45),transparent 40%);color:#f4fafb;overflow:hidden;box-shadow:var(--shadow);animation:rise .7s .05s ease both}.hero-panel:after{content:"";position:absolute;inset:auto -10% -40% 40%;height:180px;background:radial-gradient(ellipse,rgba(255,255,255,.18),transparent 65%);animation:drift 8s ease-in-out infinite alternate}.hero-panel h1{position:relative;z-index:1;margin:0 0 .55rem;font-family:var(--font-display);font-size:clamp(1.7rem,4vw,2.35rem);font-weight:500;max-width:16ch;line-height:1.15}.hero-panel p{position:relative;z-index:1;margin:0;max-width:36ch;color:#f4fafbd9;line-height:1.5}.section{margin-top:1.75rem;animation:rise .65s .12s ease both}.section h2{margin:0 0 .35rem;font-family:var(--font-display);font-size:1.45rem;font-weight:500}.section .lede{margin:0 0 1.1rem;color:var(--ink-soft);max-width:48ch}.stack{display:grid;gap:1rem}.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}.metric-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.85rem}.metric{padding:1rem 1.05rem;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.metric .label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}.metric .value{margin-top:.35rem;font-family:var(--font-display);font-size:1.55rem}.form-panel{padding:1.25rem;border-radius:var(--radius);background:var(--paper);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.pairing-qr{display:inline-flex;padding:.75rem;border-radius:12px;background:#fff;border:1px solid var(--line)}.pairing-qr img{display:block;width:280px;height:280px;max-width:100%}.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.85rem}.slider-stack{display:grid;gap:1rem}.slider-row{display:grid;gap:.35rem}.slider-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--ink-soft)}.slider-value{font-family:var(--font-display);font-size:1.25rem;color:var(--sea-deep);min-width:1.5rem;text-align:right}.slider-ends{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-soft)}.slider-row input[type=range]{width:100%;height:.45rem;padding:0;border:none;border-radius:999px;background:linear-gradient(90deg,#1f6f7a33,#1f6f7a73);accent-color:var(--sea-deep);cursor:pointer}label{display:grid;gap:.35rem;font-size:.85rem;color:var(--ink-soft)}input,select,textarea{width:100%;padding:.7rem .8rem;border-radius:12px;border:1px solid var(--line);background:#ffffffe6;color:var(--ink)}textarea{min-height:88px;resize:vertical}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:999px;padding:.75rem 1.2rem;background:var(--sea-deep);color:#f4fafb;font-weight:600;cursor:pointer;transition:transform .15s ease,background .15s ease}.btn:hover{transform:translateY(-1px);background:var(--sea)}.btn.secondary{background:transparent;color:var(--sea-deep);border:1px solid rgba(15,61,69,.25)}.btn.ghost{background:#ffffff1f;color:#f4fafb;border:1px solid rgba(255,255,255,.25)}.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}.chip{border-radius:999px;border:1px solid var(--line);background:#ffffffa6;padding:.4rem .75rem;font-size:.85rem;cursor:pointer}.chip.on{background:#1f6f7a1f;border-color:#1f6f7a59;color:var(--sea-deep)}.timeline{display:grid;gap:.85rem}.timeline-item{display:grid;grid-template-columns:8px 1fr;gap:.9rem}.timeline-item .dot{width:8px;border-radius:999px;background:linear-gradient(var(--foam),var(--sea))}.timeline-item .body{padding-bottom:.85rem;border-bottom:1px solid var(--line)}.muted{color:var(--ink-soft)}.err{color:#8b2e1f;margin:.5rem 0}.packet{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;line-height:1.45;max-height:360px;overflow:auto;padding:1rem;border-radius:12px;background:#102028;color:#d7ecef}.spark{width:100%;height:72px}.login-stage{min-height:100vh;display:grid;place-items:center;padding:1.5rem}.login-stage .brand{text-align:center;margin-bottom:1.25rem;animation:rise .55s ease both}.login-stage .form-panel{width:min(420px,100%);animation:rise .65s .08s ease both}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes drift{0%{transform:translate(0)}to{transform:translate(-30px)}}@media (max-width: 640px){.app-shell{padding:1rem 1rem 3.5rem}.hero-panel{padding:1.6rem 1.2rem}}