:root{
 --bg:#050811;--bg-2:#080b16;--text:#edf3ff;--muted:#a4b3ce;--subtle:#7789a8;
 --panel:rgba(11,19,34,.78);--panel-strong:rgba(13,22,40,.94);--panel-soft:rgba(18,28,48,.68);
 --line:rgba(132,173,236,.30);--line-soft:rgba(128,163,220,.13);--input:rgba(3,9,20,.64);
 --accent:#419dff;--accent-2:#945bff;--accent-3:#62dec8;--focus:#e5f1ff;
 --radius:16px;--small-radius:9px;--header-height:86px;--sidebar-width:216px;--footer-height:30px;
 --glass-blur:14px;--glow-mult:.72;--panel-pad:22px;
 --shadow:0 12px 42px rgba(0,0,0,.25);--inset:inset 0 1px 1px rgba(217,234,255,.12),inset 0 -1px 0 rgba(127,158,232,.09);
 --fast:150ms;--medium:260ms;--slow:520ms;--ease:cubic-bezier(.2,.72,.2,1);
 --sans:"Segoe UI",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
 --serif:Georgia,"Times New Roman",serif;--mono:"Cascadia Code",Consolas,ui-monospace,SFMono-Regular,monospace;
 color-scheme:dark
}
:root[data-theme=aurora]{
 --bg:#02090e;--bg-2:#06131c;--text:#effcff;--muted:#9ebec7;--subtle:#6e959e;
 --panel:rgba(5,26,36,.72);--panel-strong:rgba(5,25,36,.94);--panel-soft:rgba(8,34,45,.72);
 --line:rgba(77,211,235,.28);--line-soft:rgba(89,197,219,.13);--input:rgba(0,13,19,.72);
 --accent:#22cfee;--accent-2:#9c63ff;--accent-3:#60efbd;--focus:#ddfbff;
}
:root[data-theme=obsidian]{
 --bg:#090a0d;--bg-2:#101319;--text:#f1f4f8;--muted:#aab2bf;--subtle:#7c8798;
 --panel:rgba(20,23,29,.86);--panel-strong:rgba(23,27,34,.96);--panel-soft:rgba(28,32,40,.82);
 --line:rgba(183,198,220,.22);--line-soft:rgba(183,198,220,.09);--input:rgba(7,8,11,.72);
 --accent:#a8b9d4;--accent-2:#68768f;--accent-3:#d8e2ef;--focus:#fff;
 --shadow:0 12px 36px rgba(0,0,0,.30);
}
:root[data-theme=ember]{
 --bg:#0d0807;--bg-2:#160d0b;--text:#fff2e8;--muted:#c0a79a;--subtle:#90776d;
 --panel:rgba(35,21,16,.78);--panel-strong:rgba(38,22,17,.95);--panel-soft:rgba(43,25,19,.76);
 --line:rgba(235,152,101,.28);--line-soft:rgba(235,152,101,.12);--input:rgba(15,8,6,.72);
 --accent:#ef9865;--accent-2:#d56878;--accent-3:#f4c786;--focus:#fff1e4;
}
:root[data-theme=paper]{
 --bg:#edf1f8;--bg-2:#f7f9fd;--text:#17233a;--muted:#53627a;--subtle:#73809a;
 --panel:rgba(255,255,255,.78);--panel-strong:rgba(255,255,255,.96);--panel-soft:rgba(248,250,255,.82);
 --line:#b6c5db;--line-soft:#d9e2ef;--input:#f1f5fb;
 --accent:#2e68b2;--accent-2:#7454bd;--accent-3:#178c7d;--focus:#174682;
 --shadow:0 10px 34px rgba(43,65,98,.10);--inset:inset 0 1px 0 rgba(255,255,255,.96);
 color-scheme:light
}
:root[data-theme=contrast]{
 --bg:#000;--bg-2:#000;--text:#fff;--muted:#f0f0f0;--subtle:#d4d4d4;
 --panel:#070707;--panel-strong:#090909;--panel-soft:#0d0d0d;--line:#fff;--line-soft:#777;--input:#000;
 --accent:#ffe76b;--accent-2:#71e6ff;--accent-3:#8eff83;--focus:#ffe76b;
 --radius:5px;--small-radius:3px;--glass-blur:0px!important;--shadow:none;--inset:none;
}
:root[data-density=compact]{--panel-pad:17px;--header-height:78px;--sidebar-width:202px}
:root[data-motion=off]{--fast:0ms;--medium:0ms;--slow:0ms}

*{box-sizing:border-box;min-width:0}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;overflow-x:hidden;color:var(--text);font-family:var(--sans);background:
 radial-gradient(900px 620px at 92% 5%,color-mix(in srgb,var(--accent-2) 9%,transparent),transparent 68%),
 radial-gradient(720px 520px at 7% 93%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),
 linear-gradient(145deg,var(--bg),var(--bg-2))}
button,input{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit;text-decoration:none}
button{color:inherit}
svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.skip{position:fixed;left:14px;top:-70px;z-index:100;background:var(--focus);color:var(--bg);padding:8px 12px;border-radius:8px;font-size:12px;transition:top var(--fast)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.ambient span{position:absolute;display:block;border-radius:999px;filter:blur(0)}
.ambient .a{width:58vw;height:58vw;right:-27vw;top:-32vw;border:1px solid color-mix(in srgb,var(--accent) 12%,transparent)}
.ambient .b{width:44vw;height:44vw;left:-26vw;bottom:-25vw;border:1px solid color-mix(in srgb,var(--accent-2) 10%,transparent)}
.ambient .c{width:24vw;height:24vw;right:9vw;bottom:-19vw;background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 10%,transparent),transparent 70%);filter:blur(28px)}

.glass{background:
 linear-gradient(160deg,color-mix(in srgb,var(--panel) 90%,white 2%),color-mix(in srgb,var(--panel) 98%,transparent));
 border:1px solid var(--line-soft);box-shadow:var(--shadow),var(--inset);
 backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))
}

/* top */
.topbar{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--header-height);display:grid;grid-template-columns:var(--sidebar-width) minmax(240px,1fr) auto;align-items:center;border-width:0 0 1px 0}
.brand{height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 20px;border-right:1px solid var(--line-soft);overflow:hidden}
.wordmark{font-family:var(--serif);font-weight:700;font-size:20px;line-height:1;letter-spacing:.075em;background:linear-gradient(180deg,#eaf4ff 6%,color-mix(in srgb,var(--accent) 92%,white),color-mix(in srgb,var(--accent-2) 90%,white 6%));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 calc(18px * var(--glow-mult)) color-mix(in srgb,var(--accent) 28%,transparent);white-space:nowrap}
.brand-sub{margin-top:7px;font:700 7.5px/1 var(--sans);letter-spacing:.27em;color:var(--subtle);white-space:nowrap}
.search-trigger{justify-self:center;width:min(620px,calc(100% - 58px));height:42px;display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;border:1px solid color-mix(in srgb,var(--line) 74%,transparent);border-radius:11px;padding:0 12px;color:var(--muted);background:color-mix(in srgb,var(--input) 76%,transparent);box-shadow:0 0 calc(17px * var(--glow-mult)) color-mix(in srgb,var(--accent) 8%,transparent);opacity:.88}
.search-trigger>span[data-icon]{width:16px;height:16px;color:var(--muted)}
.search-trigger .search-copy{text-align:left;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-trigger kbd{font:600 9px/1 var(--mono);letter-spacing:.04em;border:1px solid var(--line);border-bottom-color:color-mix(in srgb,var(--line) 65%,#000);border-radius:5px;padding:5px 7px;color:var(--subtle);background:var(--panel-strong)}
.top-actions{display:flex;align-items:center;gap:8px;padding:0 17px}
.source-pill{height:32px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--line-soft);border-radius:999px;color:var(--muted);font-size:10px;background:color-mix(in srgb,var(--panel) 66%,transparent);white-space:nowrap}
.source-pill i,.connection>i,.signal-row i{width:6px;height:6px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 calc(12px * var(--glow-mult)) color-mix(in srgb,var(--accent-3) 70%,transparent);flex:none}
.icon-button{width:34px;height:34px;padding:8px;border:1px solid var(--line-soft);border-radius:9px;background:color-mix(in srgb,var(--panel) 68%,transparent);cursor:pointer;display:grid;place-items:center;color:var(--muted);transition:border-color var(--fast),background var(--fast),color var(--fast),transform var(--fast)}
.icon-button:hover{border-color:var(--line);background:var(--panel-strong);color:var(--text);transform:translateY(-1px)}
.profile{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(145deg,var(--accent),var(--accent-2));box-shadow:0 0 calc(24px * var(--glow-mult)) color-mix(in srgb,var(--accent-2) 22%,transparent)}
.mobile-menu{display:none}

/* sidebar */
.sidebar{position:fixed;z-index:35;top:var(--header-height);left:12px;bottom:calc(var(--footer-height) + 10px);width:calc(var(--sidebar-width) - 12px);border-radius:14px;display:flex;flex-direction:column;padding:15px 10px 10px;transition:transform var(--medium) var(--ease)}
.sidebar-label{padding:8px 10px 7px;font:700 8px/1 var(--sans);letter-spacing:.22em;color:var(--subtle)}
#nav{display:grid;gap:2px}
#nav a,.nav-button{width:100%;min-height:40px;display:grid;grid-template-columns:26px 1fr;align-items:center;gap:8px;padding:5px 8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);font-size:11px;font-weight:600;text-align:left;cursor:pointer;transition:background var(--fast),color var(--fast),border-color var(--fast),transform var(--fast)}
.nav-icon{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;padding:5px;color:var(--subtle);border:1px solid transparent;transition:inherit}
#nav a:hover,.nav-button:hover{color:var(--text);background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
#nav a.active{color:var(--text);border-color:color-mix(in srgb,var(--accent) 24%,var(--line-soft));background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 11%,var(--panel)),color-mix(in srgb,var(--accent-2) 6%,var(--panel)))}
#nav a.active .nav-icon{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 25%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:0 0 calc(16px * var(--glow-mult)) color-mix(in srgb,var(--accent) 11%,transparent)}
.sidebar-spacer{flex:1}
.connection{margin-top:10px;border-top:1px solid var(--line-soft);padding:13px 9px 4px;display:grid;grid-template-columns:8px 1fr;gap:9px;align-items:start}
.connection>i{margin-top:4px}
.connection strong,.connection small{display:block}
.connection strong{font-size:9.5px;font-weight:700;color:var(--text)}
.connection small{font-size:8px;line-height:1.45;color:var(--subtle);margin-top:3px}

/* main */
main{position:relative;z-index:1;margin-left:var(--sidebar-width);padding:calc(var(--header-height) + 18px) clamp(18px,3vw,42px) calc(var(--footer-height) + 46px);min-height:100vh;outline:none}
#homeView,.reserved-view{width:min(1180px,100%);margin:0 auto}
.hero{position:relative;overflow:hidden;min-height:336px;border-radius:18px;padding:36px 38px;display:grid;grid-template-columns:minmax(0,1fr) 285px;align-items:center;isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-2;background:
 linear-gradient(108deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent 46%),
 radial-gradient(460px 310px at 80% 54%,color-mix(in srgb,var(--accent-2) 11%,transparent),transparent 70%)}
.hero:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 72%,white 10%),color-mix(in srgb,var(--accent-2) 60%,transparent),transparent);opacity:calc(.8 * var(--glow-mult))}
.hero-architecture{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.72}
.thread{position:absolute;display:block;height:1px;transform-origin:left center;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 34%,transparent),transparent)}
.t1{width:58%;right:-8%;top:30%;transform:rotate(16deg)}
.t2{width:52%;right:-1%;top:66%;transform:rotate(-12deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent-2) 33%,transparent),transparent)}
.t3{width:35%;right:9%;top:49%;transform:rotate(4deg);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent-3) 23%,transparent),transparent)}
.node{position:absolute;width:7px;height:7px;border-radius:50%;box-shadow:0 0 calc(17px * var(--glow-mult)) currentColor}
.n1{right:24%;top:28%;background:var(--accent);color:var(--accent)}.n2{right:13%;top:67%;background:var(--accent-3);color:var(--accent-3)}.n3{right:35%;top:50%;background:var(--accent-2);color:var(--accent-2)}
.hero-copy{position:relative;z-index:2;max-width:690px}
.eyebrow{display:flex;align-items:center;gap:8px;font:800 8.5px/1.3 var(--sans);letter-spacing:.22em;color:var(--accent);text-transform:uppercase}
.eyebrow>i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 calc(12px * var(--glow-mult)) color-mix(in srgb,var(--accent) 70%,transparent)}
.hero h1{margin:18px 0 15px;font-size:clamp(40px,4vw,54px);line-height:.98;letter-spacing:-.044em;font-weight:650}
.hero h1 em{font-style:normal;font-weight:390;color:color-mix(in srgb,var(--text) 69%,var(--accent-2))}
.hero-copy>p{max-width:620px;margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.hero-actions{display:flex;align-items:center;gap:9px;margin-top:23px}
.button{min-height:38px;border-radius:9px;padding:0 13px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:11px;font-weight:700;cursor:pointer;transition:transform var(--fast),border-color var(--fast),background var(--fast),box-shadow var(--fast)}
.button [data-icon]{width:14px;height:14px}
.button.primary{color:#fff;border-color:color-mix(in srgb,var(--accent) 65%,var(--accent-2));background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 82%,#1f4fa6),color-mix(in srgb,var(--accent-2) 75%,#5638a8));box-shadow:0 5px 18px color-mix(in srgb,var(--accent) calc(13% * var(--glow-mult)),transparent)}
.button.secondary{background:color-mix(in srgb,var(--panel-strong) 72%,transparent);color:var(--muted)}
.button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 65%,var(--line))}
.hero-meta{display:flex;align-items:center;gap:18px;margin-top:24px;color:var(--subtle);font-size:8.5px;letter-spacing:.02em}
.hero-meta span+span{border-left:1px solid var(--line-soft);padding-left:18px}
.hero-meta strong{color:var(--text);font:700 11px/1 var(--mono);margin-right:5px}
.bind-mark{position:relative;justify-self:center;width:220px;height:220px;display:grid;place-items:center}
.bind-ring{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--line) 80%,transparent)}
.bind-ring.outer{inset:0}.bind-ring.inner{inset:24%}
.bind-mark:before,.bind-mark:after{content:"";position:absolute;width:1px;height:74%;top:13%;left:50%;transform-origin:center;background:linear-gradient(transparent,color-mix(in srgb,var(--accent) 30%,transparent),transparent)}
.bind-mark:before{transform:rotate(58deg)}.bind-mark:after{transform:rotate(-43deg);background:linear-gradient(transparent,color-mix(in srgb,var(--accent-2) 28%,transparent),transparent)}
.bind-mark b{font-family:var(--serif);font-size:56px;line-height:1;background:linear-gradient(160deg,#fff,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 calc(26px * var(--glow-mult)) color-mix(in srgb,var(--accent) 16%,transparent)}
.bind-node{position:absolute;width:8px;height:8px;border-radius:50%;box-shadow:0 0 calc(15px * var(--glow-mult)) currentColor}
.bind-node.one{left:17%;top:26%;background:var(--accent);color:var(--accent)}.bind-node.two{right:11%;bottom:30%;background:var(--accent-3);color:var(--accent-3)}.bind-node.three{right:31%;top:14%;background:var(--accent-2);color:var(--accent-2)}

.quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.quick-card{min-height:82px;border-radius:13px;padding:13px;display:grid;grid-template-columns:32px 1fr 14px;align-items:center;gap:10px;transition:transform var(--fast),border-color var(--fast),background var(--fast)}
.quick-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line-soft));background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel))}
.quick-icon{width:32px;height:32px;padding:7px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line-soft));color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:0 0 calc(15px * var(--glow-mult)) color-mix(in srgb,var(--accent) 8%,transparent)}
.quick-card strong,.quick-card small{display:block}
.quick-card strong{font-size:11px;line-height:1.2}
.quick-card small{margin-top:5px;font-size:8.5px;line-height:1.25;color:var(--subtle)}
.chevron{width:12px;height:12px;color:var(--subtle)}

.home-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.75fr);gap:12px;margin-top:12px}
.panel{min-height:156px;border-radius:14px;padding:var(--panel-pad)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.panel h2{font-size:17px;line-height:1.15;letter-spacing:-.025em;margin:7px 0 0}
.panel>p,.panel-head+ p{font-size:10.5px;line-height:1.65;color:var(--muted);max-width:700px;margin:18px 0 0}
.badge{border:1px solid var(--line);border-radius:999px;padding:6px 8px;font:700 7.5px/1 var(--mono);letter-spacing:.08em;color:var(--subtle);white-space:nowrap;background:color-mix(in srgb,var(--panel-strong) 65%,transparent)}
.signal-row{display:flex;flex-wrap:wrap;gap:15px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line-soft);color:var(--subtle);font-size:8.5px}
.signal-row span{display:flex;align-items:center;gap:7px}.signal-row i:not(.ok){background:var(--subtle);box-shadow:none}
.compact-panel{background:linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 7%,var(--panel)),color-mix(in srgb,var(--panel) 96%,transparent))}
.compact-panel h2{font-size:18px;margin-top:10px}.compact-panel p{margin-top:12px}

/* reserved pages */
.reserved-view{padding-top:45px}
.reserved-view>h1{font-size:clamp(42px,5vw,64px);letter-spacing:-.045em;margin:15px 0 12px}
.reserved-view>p{margin:0;max-width:620px;color:var(--muted);font-size:13px;line-height:1.65}
.reserved-frame{height:280px;margin-top:34px;border-radius:16px;display:grid;place-items:center;text-align:center;align-content:center;gap:9px}
.reserved-frame>[data-icon]{width:32px;height:32px;color:var(--accent);margin-bottom:4px}
.reserved-frame strong{font-size:13px}.reserved-frame small{color:var(--subtle);font-size:9px}

/* footer */
.footer{position:fixed;z-index:38;left:0;right:0;bottom:0;height:var(--footer-height);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 13px;border-top:1px solid var(--line-soft);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);font:700 7px/1 var(--sans);letter-spacing:.14em;color:var(--subtle)}
.footer span:nth-child(2){text-align:center}.footer span:last-child{text-align:right}.footer b{color:var(--accent)}

/* appearance */
.appearance-dialog{width:min(720px,calc(100vw - 28px));max-height:min(840px,88vh);overflow:auto;border-radius:18px;padding:22px;color:var(--text)}
.appearance-dialog::backdrop{background:rgba(0,0,0,.64);backdrop-filter:blur(5px)}
.dialog-title{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dialog-title h2{font-size:24px;letter-spacing:-.03em;margin:7px 0 0}
.muted{color:var(--muted)}.small{font-size:9px}
.appearance-dialog>p{font-size:11px;line-height:1.5}
.theme-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:19px 0}
.theme-option{position:relative;min-height:72px;border:1px solid var(--line-soft);border-radius:12px;padding:10px;background:color-mix(in srgb,var(--panel) 88%,transparent);color:var(--text);display:grid;grid-template-columns:74px 1fr 16px;gap:10px;align-items:center;text-align:left;cursor:pointer;transition:border-color var(--fast),background var(--fast),transform var(--fast)}
.theme-option:hover{border-color:var(--line);transform:translateY(-1px)}
.theme-option.selected{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.theme-preview{position:relative;height:48px;border-radius:9px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:var(--p0)}
.theme-preview:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 20%,color-mix(in srgb,var(--p2) 30%,transparent),transparent 52%)}
.theme-preview i{position:absolute;display:block;border:1px solid color-mix(in srgb,var(--p1) 50%,transparent);border-radius:4px;background:color-mix(in srgb,var(--p0) 75%,var(--p1) 7%)}
.theme-preview i:nth-child(1){left:6px;top:6px;width:14px;bottom:6px}
.theme-preview i:nth-child(2){left:24px;right:6px;top:6px;height:12px}
.theme-preview i:nth-child(3){left:24px;right:6px;top:22px;bottom:6px;border-color:color-mix(in srgb,var(--p2) 45%,transparent)}
.theme-option strong,.theme-option small{display:block}.theme-option strong{font-size:11px}.theme-option small{font-size:8.5px;color:var(--subtle);margin-top:4px}
.theme-check{opacity:0;color:var(--accent);font-weight:800}.theme-option.selected .theme-check{opacity:1}
.appearance-controls{border-top:1px solid var(--line-soft);padding-top:9px}
.appearance-controls>label{display:grid;grid-template-columns:1fr auto;grid-template-areas:"name out" "range range";gap:8px;font-size:10.5px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.appearance-controls output{grid-area:out;color:var(--subtle);font:600 9px/1 var(--mono)}
.appearance-controls input[type=range]{grid-area:range;width:100%;accent-color:var(--accent)}
.color-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.color-row label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10.5px}
.color-row input[type=color]{width:34px;height:25px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--panel)}
.toggle-row{display:flex!important;grid-template:none!important;align-items:center;justify-content:space-between}
.toggle-row input{width:17px;height:17px;accent-color:var(--accent)}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.dialog-actions .button{cursor:pointer}

/* theme material behavior */
:root[data-theme=obsidian] .ambient,:root[data-theme=contrast] .ambient{opacity:.45}
:root[data-theme=obsidian] .hero-architecture{opacity:.38}
:root[data-theme=paper] body{background:linear-gradient(145deg,#edf1f8,#f8faff)}
:root[data-theme=paper] .topbar,:root[data-theme=paper] .footer{background:rgba(247,250,255,.89)}
:root[data-theme=paper] .wordmark{background:linear-gradient(180deg,#173d78,#2e68b2,#7454bd);-webkit-background-clip:text;background-clip:text}
:root[data-theme=contrast] .glass{box-shadow:none!important;backdrop-filter:none}
:root[data-theme=contrast] .hero-architecture,:root[data-theme=contrast] .bind-mark{opacity:.68}

/* responsive */
@media(max-width:1180px){
 :root{--sidebar-width:190px}
 .wordmark{font-size:18px}.brand-sub{font-size:7px}
 .hero{grid-template-columns:minmax(0,1fr) 230px;padding:31px}.bind-mark{width:190px;height:190px}
 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:920px){
 .source-pill{display:none}
 .hero{grid-template-columns:minmax(0,1fr) 180px}.bind-mark{width:160px;height:160px}.bind-mark b{font-size:44px}
 .home-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
 :root{--header-height:68px;--sidebar-width:224px}
 .topbar{grid-template-columns:auto 1fr auto;padding:0 10px;gap:8px}
 .mobile-menu{display:grid;flex:none}
 .brand{height:100%;width:auto;border-right:0;padding:0 4px}
 .wordmark{font-size:17px}.brand-sub{font-size:6.5px;letter-spacing:.22em;margin-top:5px}
 .search-trigger{display:none}
 .top-actions{padding:0;gap:7px}.profile{display:none}
 .sidebar{top:var(--header-height);left:0;bottom:var(--footer-height);width:min(280px,82vw);border-radius:0 14px 14px 0;transform:translateX(-103%);z-index:55;padding-top:12px}
 .sidebar.open{transform:translateX(0)}
 .nav-scrim{position:fixed;z-index:50;top:var(--header-height);right:0;bottom:var(--footer-height);left:min(280px,82vw);border:0;background:rgba(0,0,0,.62)}
 body.nav-open{overflow:hidden}
 main{margin-left:0;padding:calc(var(--header-height) + 12px) 12px calc(var(--footer-height) + 28px)}
 #homeView,.reserved-view{width:100%}
 .hero{min-height:286px;grid-template-columns:minmax(0,1fr) 150px;padding:25px 24px}
 .hero h1{font-size:clamp(34px,7vw,44px)}
 .bind-mark{width:138px;height:138px}.bind-mark b{font-size:38px}
 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .footer span:last-child{display:none}.footer{grid-template-columns:1fr auto}.footer span:nth-child(2){text-align:right}
}
@media(max-width:560px){
 :root{--header-height:64px;--footer-height:28px;--panel-pad:16px}
 .topbar{padding:0 9px;gap:7px}
 .icon-button{width:32px;height:32px;padding:7px}
 .wordmark{font-size:15px;letter-spacing:.06em}.brand-sub{font-size:6px;letter-spacing:.18em}
 .top-actions{margin-left:auto}
 main{padding-left:10px;padding-right:10px}
 .hero{display:block;min-height:0;padding:20px 18px 18px;border-radius:14px}
 .hero:before{background:radial-gradient(300px 220px at 93% 20%,color-mix(in srgb,var(--accent-2) 11%,transparent),transparent 70%),linear-gradient(125deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent 60%)}
 .hero-architecture{opacity:.45}
 .t1{width:80%;right:-36%;top:19%}.t2{width:70%;right:-30%;top:48%}.t3{display:none}
 .n1{right:8%;top:18%}.n2{right:4%;top:47%}.n3{display:none}
 .eyebrow{font-size:7.5px;letter-spacing:.18em;gap:6px}.eyebrow>i{width:5px;height:5px}
 .hero h1{margin:14px 0 12px;font-size:31px;line-height:1.01;letter-spacing:-.035em;max-width:350px}
 .hero-copy>p{font-size:11.5px;line-height:1.58;max-width:330px;padding-right:4px}
 .hero-actions{margin-top:18px;gap:7px}.button{min-height:36px;padding:0 11px;font-size:10px}
 .hero-actions .primary{flex:1;max-width:170px}
 .hero-meta{margin-top:18px;gap:10px;font-size:7px;overflow:hidden}
 .hero-meta span{white-space:nowrap}.hero-meta span+span{padding-left:10px}.hero-meta strong{font-size:9px;margin-right:3px}
 .bind-mark{display:none}
 .quick-grid{gap:8px;margin-top:8px}
 .quick-card{min-height:74px;border-radius:11px;padding:10px;grid-template-columns:28px 1fr 10px;gap:8px}
 .quick-icon{width:28px;height:28px;padding:6px;border-radius:8px}
 .quick-card strong{font-size:10px}.quick-card small{display:none}.chevron{width:10px;height:10px}
 .home-grid{gap:8px;margin-top:8px}
 .panel{min-height:auto;border-radius:12px;padding:16px}
 .panel-head{gap:10px}.panel h2{font-size:15px}.panel>p,.panel-head+p{font-size:9.5px;margin-top:13px}
 .badge{font-size:6.5px;padding:5px 7px}
 .signal-row{margin-top:14px;padding-top:11px;gap:10px;font-size:7.5px}
 .compact-panel h2{font-size:16px}
 .reserved-view{padding-top:24px}.reserved-view>h1{font-size:36px;margin:12px 0 9px}.reserved-view>p{font-size:11.5px}
 .reserved-frame{height:200px;margin-top:22px}
 .footer{font-size:6.3px;padding:0 10px}.footer span:nth-child(2){display:none}.footer{grid-template-columns:1fr}
 .appearance-dialog{width:calc(100vw - 16px);max-height:88vh;margin:auto 8px 8px;padding:16px;border-radius:16px}
 .dialog-title h2{font-size:21px}
 .theme-options{grid-template-columns:1fr 1fr;gap:7px;margin:14px 0}
 .theme-option{min-height:86px;padding:8px;grid-template-columns:1fr 14px;grid-template-areas:"preview check" "copy copy";gap:6px}
 .theme-preview{grid-area:preview;width:100%;height:39px}.theme-option>span:nth-child(2){grid-area:copy}.theme-check{grid-area:check}
 .theme-option strong{font-size:9.5px}.theme-option small{font-size:7.5px}
 .appearance-controls>label,.color-row label{font-size:9.5px}
 .dialog-actions{position:sticky;bottom:-16px;background:linear-gradient(transparent,var(--panel-strong) 34%);padding-top:17px;padding-bottom:3px}
}
@media(max-width:360px){
 .brand-sub{display:none}.wordmark{font-size:14px}
 .hero{padding:18px 15px}.hero h1{font-size:28px}.hero-copy>p{font-size:11px}
 .hero-meta span:nth-child(2){display:none}
 .quick-grid{grid-template-columns:1fr 1fr}
 .quick-card{padding:9px 8px;grid-template-columns:26px 1fr}.quick-icon{width:26px;height:26px}.quick-card .chevron{display:none}
 .theme-options{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){:root{--fast:0ms;--medium:0ms;--slow:0ms}}