*{box-sizing:border-box}
html{color-scheme:dark}
html[data-theme=light]{color-scheme:light}
body{margin:var(--space-0);background:var(--bg);color:var(--fg);font:var(--text-body)/var(--leading-ui) var(--font-ui)}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{touch-action:manipulation}
button,a{ -webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-underline-offset:var(--space-1)}
button:disabled{cursor:not-allowed;opacity:.6}
button,input,select,textarea{color:var(--fg)}
a,button{transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
:focus-visible{outline:var(--focus-width) solid var(--focus);outline-offset:var(--space-1)}
h1,h2,h3,p{margin:var(--space-0)}
h1{font-size:var(--text-h1);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);font-weight:var(--weight-medium)}
h2{font-size:var(--text-title);font-weight:var(--weight-medium);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
h3{font-size:var(--text-md);font-weight:var(--weight-medium)}
small,.small{font-size:var(--text-xs)}
b,strong{font-weight:var(--weight-bold)}
code,kbd,.mono{font-family:var(--font-mono)}
kbd{font-size:var(--text-micro);border:var(--line) solid var(--border);border-radius:var(--radius);padding:var(--space-1) var(--space-2);color:var(--muted)}
.muted{color:var(--muted)}
.subtle{color:var(--subtle)}
.eyebrow{font:var(--text-micro)/var(--leading-ui) var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}
.success{color:var(--success)}
.failure{color:var(--failure)}
.needs-you{color:var(--needs-you)}
.running{color:var(--running)}
.nowrap{white-space:nowrap}
.row{display:flex;align-items:center;gap:var(--space-3)}
.spread{justify-content:space-between}
.wrap{flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.gap-sm{gap:var(--space-2)}
.grow{flex:1;min-width:0}
.end{margin-left:auto}
.hidden,[hidden]{display:none!important}
.divider{height:var(--line);background:var(--border);margin:var(--space-6) var(--space-0)}
.btn{min-height:var(--target);padding:var(--space-2) var(--space-4);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);border:var(--line) solid var(--control-border);border-radius:var(--radius);background:transparent;color:var(--fg);text-decoration:none;font-weight:var(--weight-medium);white-space:normal;text-align:center}
.btn:hover{background:var(--hover);color:var(--fg)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}
.btn.ghost{border-color:transparent}
.btn.danger{color:var(--failure)}
.btn.small{font-size:var(--text-xs)}
.icon-btn{min-width:var(--target);padding:var(--space-2)}
.link{background:none;border:0;color:var(--fg);padding:var(--space-2) var(--space-0);min-height:var(--target);text-decoration:underline;display:inline-flex;align-items:center;cursor:pointer}
.link:hover{color:var(--fg);text-decoration-thickness:var(--focus-width)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-micro);line-height:var(--leading-ui);padding:var(--space-1) var(--space-2);border:var(--line) solid var(--border);border-radius:var(--radius);white-space:nowrap}
.brand{display:flex;gap:var(--space-2);align-items:center;text-decoration:none;font-size:var(--text-title);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight)}
.brand svg{width:var(--logo-size);height:var(--logo-size);fill:currentColor;flex-shrink:0}
.theme-switch{font-size:var(--text-xs)}
.demo-label{color:var(--muted);font-size:var(--text-micro);font-family:var(--font-mono)}
.app{max-width:var(--desktop-width);height:var(--desktop-height);margin:auto;display:flex;flex-direction:column;border:var(--line) solid var(--border);background:var(--surface)}
.topbar{min-height:var(--topbar-height);padding:var(--space-2) var(--space-5);display:flex;align-items:center;gap:var(--space-4);border-bottom:var(--line) solid var(--border);background:var(--bg)}
.topbar .brand{min-width:calc(var(--rail-width) - var(--space-8))}
.topbar .context{color:var(--muted);font-size:var(--text-xs)}
.workspace{display:flex;min-height:0;flex:1}
.sidebar{width:var(--rail-width);flex-shrink:0;background:var(--bg);border-right:var(--line) solid var(--border);display:flex;flex-direction:column;overflow:auto}
.rail-top{padding:var(--space-4)}
.rail-top .btn{width:100%}
.host-label{padding:var(--space-4) var(--space-4) var(--space-2);display:flex;align-items:center;justify-content:space-between;font-size:var(--text-micro);color:var(--muted);letter-spacing:var(--tracking-label)}
.session-link{padding:var(--space-3) var(--space-4);margin:var(--space-1) var(--space-2);display:block;text-decoration:none;border:var(--line) solid transparent;border-radius:var(--radius)}
.session-link:hover{background:var(--hover)}
.session-link.selected{background:var(--selected);border-color:var(--border)}
.session-link .title{font-weight:var(--weight-medium);display:flex;justify-content:space-between;gap:var(--space-1);font-size:var(--text-sm)}
.session-link .meta{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-1);font-size:var(--text-micro);color:var(--muted)}
.rail-bottom{margin-top:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.rail-bottom a{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2);min-height:var(--target);text-decoration:none;color:var(--muted);border-radius:var(--radius)}
.rail-bottom a:hover,.rail-bottom a.current{background:var(--hover);color:var(--fg)}
.rail-bottom .demo-label{padding:var(--space-2)}
.main-pane{flex:1;min-width:0;display:flex;flex-direction:column;overflow:auto;background:var(--surface)}
.tabs{display:flex;align-items:stretch;min-height:var(--tab-height);border-bottom:var(--line) solid var(--border);background:var(--bg);overflow-x:auto;flex-shrink:0}
.tab{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border:0;border-right:var(--line) solid var(--border);border-bottom:var(--focus-width) solid transparent;text-decoration:none;font-size:var(--text-xs);white-space:nowrap;min-height:var(--target)}
.tab.active{background:var(--surface);border-bottom-color:var(--fg)}
.tab:hover{background:var(--hover)}
.dev-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);border-bottom:var(--line) solid var(--border);flex-wrap:wrap}
.dev-header .path{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1);overflow-wrap:anywhere}
.dev-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}
.terminal{background:var(--terminal);color:var(--fg);font:var(--terminal-size)/var(--leading-terminal) var(--font-mono);padding:var(--space-4) var(--space-6);min-width:0;overflow:auto;flex:1}
.command{border:var(--line) solid transparent;border-radius:var(--radius);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-2);cursor:pointer;overflow-wrap:anywhere}
.command:hover{border-color:var(--control-border)}
.command.selected{border-color:var(--control-border);background:var(--surface)}
.command .cmd-head{display:flex;justify-content:space-between;gap:var(--space-4);font-size:var(--text-micro);margin-bottom:var(--space-1)}
.command pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere;margin:var(--space-2) var(--space-0) var(--space-0)}
.command .prompt{color:var(--subtle)}
.command .output{color:var(--subtle)}
.terminal .file-link{color:inherit;text-decoration:underline;min-height:var(--target);display:inline-flex;align-items:center}
.terminal .file-link:hover{background:var(--hover)}
.agent-prompt{border:var(--line) solid var(--control-border);border-radius:var(--radius);padding:var(--space-4);margin:var(--space-3) var(--space-4);font-family:var(--font-ui);background:var(--surface)}
.agent-prompt p{margin:var(--space-2) var(--space-0)}
.agent-prompt .row{flex-wrap:wrap}
.prompt-box{display:flex;gap:var(--space-2);align-items:center;border:var(--line) solid var(--control-border);border-radius:var(--radius);padding:var(--space-2);background:var(--terminal)}
.prompt-box input{flex:1;min-width:0;border:0;background:none;font-family:var(--font-mono);color:var(--fg);min-height:var(--target);padding:var(--space-2)}
input::placeholder,textarea::placeholder{color:var(--muted)}
.statusbar{border-top:var(--line) solid var(--border);min-height:var(--footer-height);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-5);font:var(--text-micro)/var(--leading-ui) var(--font-mono);color:var(--muted);flex-wrap:wrap;background:var(--bg)}
.notice{padding:var(--space-3) var(--space-6);background:var(--raised);border-bottom:var(--line) solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);font-size:var(--text-xs)}
.notice strong{display:block}
.searchbar{display:flex;gap:var(--space-2);align-items:center;padding:var(--space-2) var(--space-6);border-bottom:var(--line) solid var(--border)}
input,select,textarea{background:var(--bg);border:var(--line) solid var(--control-border);border-radius:var(--radius);padding:var(--space-3);min-height:var(--target);min-width:0}
label{font-size:var(--text-sm)}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field input,.field select{width:100%}
.field small{color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.page-content{padding:var(--space-8);width:100%;max-width:var(--content-width);margin:var(--space-0) auto}
.page-heading{display:flex;align-items:start;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-8)}
.page-heading h1{font-size:var(--text-h2)}
.page-heading p{color:var(--muted);margin-top:var(--space-2);max-width:65ch}
.panel{border:var(--line) solid var(--border);border-radius:var(--radius);background:var(--surface);padding:var(--space-6)}
.panel h2{font-size:var(--text-lg);letter-spacing:normal}
.panel p{color:var(--muted)}
.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.settings-section{padding:var(--space-6) var(--space-0);border-top:var(--line) solid var(--border);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-8)}
.settings-section>div>p{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-2);max-width:32ch}
.theme-cards{display:flex;gap:var(--space-3)}
.theme-card{flex:1;border:var(--line) solid var(--control-border);border-radius:var(--radius);padding:var(--space-3);background:var(--surface);color:var(--fg);text-align:left;min-height:var(--target)}
.theme-card[aria-pressed=true]{outline:var(--focus-width) solid var(--fg);outline-offset:var(--space-1)}
.theme-card:hover{background:var(--hover)}
.theme-preview{height:var(--mini-bar-height);background:var(--bg);border:var(--line) solid var(--border);display:grid;grid-template-columns:25% 1fr;margin-bottom:var(--space-3);border-radius:var(--radius);overflow:hidden}
.theme-preview span:first-child{background:var(--raised);border-right:var(--line) solid var(--border)}
.theme-preview span:last-child{padding:var(--space-3);color:var(--fg);font:var(--text-micro)/var(--leading-terminal) var(--font-mono)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-4) var(--space-0);border-bottom:var(--line) solid var(--border)}
.setting-row:last-child{border-bottom:0}
.setting-row p{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-1)}
.switch{border:var(--line) solid var(--control-border);background:var(--bg);border-radius:var(--radius);padding:var(--space-2) var(--space-3);min-height:var(--target);min-width:var(--space-20);color:var(--fg);flex-shrink:0}
.switch[aria-checked=true]{background:var(--selected);border-color:var(--fg)}
.switch:hover{background:var(--hover)}
.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;flex:1}
.split-pane{display:flex;flex-direction:column;min-width:0;overflow:auto}
.split-pane+.split-pane{border-left:var(--line) solid var(--control-border)}
.split-pane .terminal{padding:var(--space-3)}
.split-pane .dev-header{padding:var(--space-4)}
.inspector-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--inspector-width);flex:1;min-height:0}
.inspector{border-left:var(--line) solid var(--border);padding:var(--space-5);overflow:auto;background:var(--bg)}
.detail-list{display:grid;grid-template-columns:1fr 1.3fr;font-size:var(--text-xs);gap:var(--space-4) var(--space-3);margin:var(--space-6) var(--space-0)}
.detail-list dt{color:var(--muted)}
.detail-list dd{margin:0;overflow-wrap:anywhere;font-family:var(--font-mono)}
.table-wrap{overflow-x:auto;border:var(--line) solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;text-align:left;font-size:var(--text-xs)}
th{font:var(--text-micro)/var(--leading-ui) var(--font-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted);background:var(--bg)}
th,td{padding:var(--space-4);border-bottom:var(--line) solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:0}
td small{display:block;color:var(--muted);margin-top:var(--space-1)}
td .btn{font-size:var(--text-xs)}
.table-wrap table{min-width:520px}
.compact th,.compact td{padding:var(--space-3) var(--space-2)}
.compact{font-size:var(--text-micro)}
.dialog-stage{display:grid;place-items:center;padding:var(--space-8);min-height:100%;background:var(--bg)}
.dialog-card{width:100%;max-width:var(--dialog-width);background:var(--surface);border:var(--line) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-8)}
.dialog-card h1{font-size:var(--text-title)}
.presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:var(--space-6) var(--space-0)}
.preset{padding:var(--space-4);background:var(--bg);border:var(--line) solid var(--control-border);border-radius:var(--radius);text-align:left;color:var(--fg);min-height:var(--target)}
.preset:hover{background:var(--hover)}
.preset[aria-pressed=true]{border-color:var(--fg);box-shadow:inset 0 0 0 var(--line) var(--fg)}
.preset small{display:block;color:var(--muted);margin-top:var(--space-2)}
.dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6)}
.safety-code{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2);margin:var(--space-5) var(--space-0)}
.safety-code span{font:var(--text-lg)/var(--leading-ui) var(--font-mono);letter-spacing:var(--tracking-label);padding:var(--space-3) var(--space-2);text-align:center;background:var(--bg);border:var(--line) solid var(--border);border-radius:var(--radius)}
.qr{width:var(--mark-hero);height:var(--mark-hero);display:block;image-rendering:pixelated}
.security-diagram{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:var(--space-4);align-items:center}
.security-node{border:var(--line) solid var(--border);padding:var(--space-6);border-radius:var(--radius);min-width:0}
.security-node p{margin-top:var(--space-2)}
.security-arrow{font-size:var(--text-title);color:var(--muted)}
.step-list{display:flex;flex-direction:column;gap:var(--space-5);counter-reset:step}
.step{display:flex;gap:var(--space-4)}
.step:before{counter-increment:step;content:counter(step,decimal-leading-zero);font:var(--text-xs)/var(--leading-ui) var(--font-mono);color:var(--muted);padding-top:var(--space-1)}
.step p{color:var(--muted);font-size:var(--text-sm);margin-top:var(--space-2)}
.signin{display:grid;grid-template-columns:1fr 1fr;min-height:100%;background:var(--bg)}
.signin-story{padding:var(--space-16);display:flex;flex-direction:column;justify-content:space-between;border-right:var(--line) solid var(--border)}
.signin-story h1{font-size:var(--text-h1);max-width:12ch}
.signin-form{padding:var(--space-12);display:flex;align-items:center;justify-content:center}
.signin-form>div{width:100%;max-width:var(--dialog-width)}
.signin-form h2{margin-bottom:var(--space-3)}
.phone-shell{width:min(100%,var(--phone-width));min-height:var(--phone-height);margin:auto;background:var(--surface);border:var(--line) solid var(--border);display:flex;flex-direction:column}
.phone-shell.terminal-phone{height:var(--phone-height)}
.phone-top{padding:var(--space-4);border-bottom:var(--line) solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);background:var(--bg)}
.phone-top .brand{font-size:var(--text-lg)}
.phone-content{padding:var(--space-5);flex:1;min-height:0}
.phone-content h1{font-size:var(--text-h2)}
.phone-host{margin-top:var(--space-6);margin-bottom:var(--space-2)}
.phone-session{display:block;text-decoration:none;padding:var(--space-4);border:var(--line) solid var(--border);border-radius:var(--radius);margin-bottom:var(--space-3);background:var(--bg)}
.phone-session:hover{background:var(--hover)}
.phone-session .meta{font-size:var(--text-xs);color:var(--muted);margin-top:var(--space-2)}
.phone-nav{display:flex;border-top:var(--line) solid var(--border);background:var(--bg);padding:var(--space-2);margin-top:auto}
.phone-nav a{min-height:var(--target);flex:1;display:flex;justify-content:center;align-items:center;text-decoration:none;font-size:var(--text-xs);border-radius:var(--radius)}
.phone-nav a.active{background:var(--selected)}
.phone-nav a:hover{background:var(--hover)}
.phone-shell .dev-header{padding:var(--space-3) var(--space-4);gap:var(--space-2)}
.phone-shell .terminal{font-size:var(--phone-terminal-size);padding:var(--space-2);min-height:0}
.phone-shell .command{padding:var(--space-3) var(--space-2)}
.phone-shell .agent-prompt{margin:var(--space-2);padding:var(--space-3)}
.phone-shell .notice{padding:var(--space-2) var(--space-4)}
.lease{padding:var(--space-2) var(--space-4);font-size:var(--text-xs);border-top:var(--line) solid var(--border);background:var(--raised);display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.lease .btn{font-size:var(--text-xs);padding:var(--space-2)}
.phone-input{padding:var(--space-2);border-top:var(--line) solid var(--border);background:var(--bg)}
.ai-keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-1);padding:var(--space-2);background:var(--bg)}
.ai-keys button{padding:var(--space-1);font:var(--text-xs)/var(--leading-ui) var(--font-mono)}
.ai-keys button:last-child{grid-column:span 2}
.phone-shell .statusbar{font-size:var(--text-micro);padding:var(--space-2) var(--space-3)}
.phone-shell .safety-code span{font-size:var(--text-md)}
.phone-shell .settings-section{display:block}
.phone-shell .theme-cards{margin-top:var(--space-4)}
.phone-shell .theme-preview{height:var(--space-16)}
.phone-shell .panel{padding:var(--space-4)}
.phone-shell .page-heading{margin-bottom:var(--space-5)}
.pair-step{display:none}
.pair-step.active{display:block}
.pair-progress{display:flex;gap:var(--space-2);margin:var(--space-6) var(--space-0)}
.pair-progress span{flex:1;height:var(--space-1);background:var(--border)}
.pair-progress span.active{background:var(--fg)}
.scan-box{padding:var(--space-8);border:var(--line) solid var(--control-border);border-radius:var(--radius);background:var(--bg);display:grid;place-items:center;gap:var(--space-4);margin:var(--space-6) var(--space-0);text-align:center}
.phone-shell .dialog-actions{flex-direction:column}
.website{max-width:var(--desktop-width);margin:auto}
.site-nav{padding:var(--space-5) var(--space-10);border-bottom:var(--line) solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}
.site-links{display:flex;align-items:center;gap:var(--space-5)}
.site-links>a{min-height:var(--target);display:flex;align-items:center;text-decoration:none;font-size:var(--text-sm)}
.site-links>a:hover{text-decoration:underline}
.site-content{max-width:var(--content-width);margin:auto;padding:var(--space-0) var(--space-8)}
.site-hero{padding:var(--space-20) var(--space-0) var(--space-12);display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-16);align-items:center}
.site-hero h1{font-size:var(--text-hero);max-width:11ch}
.site-hero p{font-size:var(--text-lg);color:var(--muted);max-width:43ch;margin:var(--space-6) var(--space-0)}
.site-hero .eyebrow{margin-bottom:var(--space-5)}
.hero-terminal{background:var(--terminal);border:var(--line) solid var(--control-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.hero-terminal .terminal{font-size:var(--text-xs);padding:var(--space-4)}
.hero-terminal .command{padding:var(--space-2)}
.hero-terminal .dev-header{padding:var(--space-4)}
.site-section{padding:var(--space-16) var(--space-0);border-top:var(--line) solid var(--border)}
.site-section>h2{font-size:var(--text-h2);margin-bottom:var(--space-8)}
.site-section .panel{background:var(--bg)}
.site-section .panel h3{margin:var(--space-5) var(--space-0) var(--space-3)}
.site-section .panel p{line-height:var(--leading-terminal)}
.site-footer{padding:var(--space-8) var(--space-10);border-top:var(--line) solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);font-size:var(--text-xs);color:var(--muted);flex-wrap:wrap}
.download-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.platform-card{display:flex;flex-direction:column;gap:var(--space-4);border:var(--line) solid var(--border);border-radius:var(--radius);padding:var(--space-8);background:var(--surface)}
.platform-card.featured{border-color:var(--control-border)}
.platform-card h2{font-size:var(--text-h2)}
.platform-card .btn{align-self:start}
.platform-card p{color:var(--muted)}
.security-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
.security-facts h3{margin-bottom:var(--space-3)}
.security-facts p{color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.stat{padding:var(--space-5);border:var(--line) solid var(--border);border-radius:var(--radius);background:var(--bg)}
.stat strong{font-size:var(--text-h2);font-weight:var(--weight-medium);display:block;margin:var(--space-3) var(--space-0)}
.chart{display:flex;align-items:end;height:var(--mark-hero);gap:var(--space-2);padding-top:var(--space-5);border-bottom:var(--line) solid var(--border)}
.chart span{flex:1;background:var(--control-border);border-radius:var(--radius) var(--radius) 0 0;min-width:0}
.chart span:last-child{background:var(--fg)}
.chart-labels{display:flex;justify-content:space-between;font:var(--text-micro)/var(--leading-ui) var(--font-mono);color:var(--muted);margin-top:var(--space-2)}
.operator-nav{display:flex;flex-direction:column;padding:var(--space-4);gap:var(--space-2)}
.operator-nav a{padding:var(--space-3);min-height:var(--target);text-decoration:none;border-radius:var(--radius)}
.operator-nav a.active,.operator-nav a:hover{background:var(--selected)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-5)}
.toolbar input{flex:1;max-width:var(--dialog-width)}
.directory{max-width:var(--content-width);margin:auto;padding:var(--space-8)}
.directory-header{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);border-bottom:var(--line) solid var(--border);padding-bottom:var(--space-6)}
.directory-hero{padding:var(--space-16) var(--space-0)}
.directory-hero h1{max-width:18ch;margin:var(--space-4) var(--space-0);font-size:var(--text-hero)}
.directory-hero p{max-width:65ch;color:var(--muted);font-size:var(--text-md)}
.screen-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.screen-card{border:var(--line) solid var(--border);padding:var(--space-5);border-radius:var(--radius);text-decoration:none;display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface);min-width:0}
.screen-card:hover{background:var(--hover);border-color:var(--control-border)}
.screen-card strong{font-size:var(--text-lg);font-weight:var(--weight-medium)}
.screen-card p{color:var(--muted);font-size:var(--text-xs)}
.screen-card .number{font:var(--text-xs)/var(--leading-ui) var(--font-mono);color:var(--muted)}
.directory-section{padding:var(--space-8) var(--space-0);border-top:var(--line) solid var(--border)}
.directory-section h2{margin-bottom:var(--space-6)}
.mini-screen{height:var(--mini-bar-height);border:var(--line) solid var(--border);display:flex;background:var(--terminal);border-radius:var(--radius);overflow:hidden}
.mini-rail{width:22%;background:var(--raised);border-right:var(--line) solid var(--border)}
.mini-lines{flex:1;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.mini-lines i{height:var(--space-1);width:80%;background:var(--control-border)}
.mini-lines i:nth-child(2){width:60%}
.mini-lines i:nth-child(3){width:40%;background:var(--muted)}
dialog{background:var(--surface);color:var(--fg);border:var(--line) solid var(--control-border);border-radius:var(--radius);padding:var(--space-8);width:calc(100% - var(--space-8));max-width:var(--dialog-width);box-shadow:var(--shadow)}
dialog::backdrop{background:var(--scrim);opacity:.7}
dialog p{margin-top:var(--space-4);color:var(--muted)}
.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%);z-index:10;background:var(--fg);color:var(--bg);padding:var(--space-3) var(--space-5);border-radius:var(--radius);max-width:calc(100% - var(--space-8));box-shadow:var(--shadow);font-size:var(--text-xs)}
.notification{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:8;background:var(--surface);border:var(--line) solid var(--control-border);border-radius:var(--radius);padding:var(--space-5);width:min(calc(100% - var(--space-8)),var(--inspector-width));box-shadow:var(--shadow)}
.notification p{font-size:var(--text-xs);margin:var(--space-2) var(--space-0);color:var(--muted)}
.mobile-menu{display:none}
.terminal-sample{background:var(--terminal);font:var(--terminal-size)/var(--leading-terminal) var(--font-mono);padding:var(--space-4);border:var(--line) solid var(--border);border-radius:var(--radius);overflow-wrap:anywhere}
.mark-large{width:var(--mark-hero);height:var(--mark-hero);fill:currentColor}
.filter-tabs{display:flex;gap:var(--space-2);margin:var(--space-6) var(--space-0);flex-wrap:wrap}
.filter-tabs .btn[aria-pressed=true]{background:var(--selected);border-color:var(--fg)}
.success-block{padding:var(--space-6);border:var(--line) solid var(--border);border-radius:var(--radius);background:var(--bg)}
.empty-result{padding:var(--space-8);text-align:center;color:var(--muted)}
@media(max-width:1100px){.app{height:auto;min-height:var(--desktop-height)}
.workspace{min-height:calc(var(--desktop-height) - var(--topbar-height))}
.sidebar{width:calc(var(--rail-width) - var(--space-8))}
.inspector-layout{grid-template-columns:minmax(0,1fr) calc(var(--inspector-width) - var(--space-12))}
.page-content{padding:var(--space-6)}
.topbar .brand{min-width:0}
.topbar .context{display:none}
.site-hero{gap:var(--space-8)}
.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.settings-section{grid-template-columns:1fr 2fr;gap:var(--space-5)}
.signin-story{padding:var(--space-8)}
.signin-form{padding:var(--space-8)}
}
@media(max-width:820px){.sidebar{width:calc(var(--rail-width) - var(--space-12))}
.inspector-layout{grid-template-columns:1fr}
.inspector{border-left:0;border-top:var(--line) solid var(--border)}
.split-grid{grid-template-columns:1fr}
.split-pane+.split-pane{border-left:0;border-top:var(--line) solid var(--control-border)}
.split-pane .terminal{min-height:var(--phone-width)}
.settings-section{grid-template-columns:1fr}
.grid3,.screen-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.site-hero{grid-template-columns:1fr}
.site-hero h1{max-width:15ch}
.site-hero p{max-width:50ch}
.security-diagram{grid-template-columns:1fr}
.security-arrow{text-align:center;transform:rotate(90deg)}
.signin{grid-template-columns:1fr}
.signin-story{border-right:0;border-bottom:var(--line) solid var(--border);gap:var(--space-6)}
.signin-story h1{max-width:20ch}
.signin-story .mark-large{display:none}
}
@media(max-width:600px){.topbar{padding:var(--space-2) var(--space-3);gap:var(--space-2);flex-wrap:wrap}
.topbar .brand{font-size:var(--text-lg)}
.topbar .demo-label{display:none}
.mobile-menu{display:inline-flex}
.sidebar{display:none;width:100%;border-right:0;border-bottom:var(--line) solid var(--border);max-height:70vh}
.sidebar.open{display:flex}
.workspace{flex-direction:column}
.main-pane{overflow:visible}
.page-content{padding:var(--space-5)}
.page-heading{flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-6)}
.dev-header{padding:var(--space-3);gap:var(--space-2)}
.dev-header .dev-actions{width:100%}
.terminal{padding:var(--space-2);font-size:var(--phone-terminal-size);overflow:visible}
.command{padding:var(--space-3) var(--space-2)}
.terminal .cmd-head{flex-wrap:wrap;gap:var(--space-1)}
.notice{padding:var(--space-3);flex-wrap:wrap}
.statusbar{padding:var(--space-2) var(--space-3)}
.grid2,.grid3,.screen-grid,.fields,.download-grid,.security-facts{grid-template-columns:1fr}
.dialog-stage,.dialog-card{padding:var(--space-5)}
.site-nav{padding:var(--space-4);flex-wrap:wrap}
.site-links{gap:var(--space-4);width:100%;justify-content:space-between}
.site-content{padding:var(--space-0) var(--space-5)}
.site-hero{padding:var(--space-10) var(--space-0);gap:var(--space-8)}
.site-section{padding:var(--space-10) var(--space-0)}
.site-footer{padding:var(--space-6)}
.directory{padding:var(--space-5)}
.directory-hero{padding:var(--space-10) var(--space-0)}
.directory-header{flex-wrap:wrap}
.settings-section{gap:var(--space-4)}
.setting-row{gap:var(--space-3)}
.setting-row select{max-width:55%}
.theme-card{padding:var(--space-2)}
.theme-cards{gap:var(--space-2)}
.theme-preview span:last-child{padding:var(--space-2)}
.phone-shell .terminal{overflow:auto}
.searchbar{padding:var(--space-2);flex-wrap:wrap}
.searchbar input{max-width:100%;width:100%}
.notification{right:var(--space-4);bottom:var(--space-4)}
.toolbar{align-items:stretch}
.toolbar input{max-width:100%;width:100%;flex-basis:100%}
.phone-shell .page-heading{gap:var(--space-3)}
.signin-form,.signin-story{padding:var(--space-6)}
}

/* Narrow-layout finishing: labels may wrap, never squeeze controls. */
.panel,.platform-card,.security-node,.stat{min-width:0}
.platform-card>.row,.panel-heading,.directory-section>.row{flex-wrap:wrap}
.phone-session .row{flex-wrap:wrap}
.phone-session .row>strong{overflow-wrap:anywhere}
.pair-qr-layout{flex-wrap:wrap}
.pair-qr-layout>div{flex:1;min-width:var(--mark-hero)}
.site-hero h1,.page-heading h1,.signin-story h1{text-wrap:balance}
.phone-content .row>div{min-width:0}
.phone-content .setting-row>div{min-width:0}
.command pre a{max-width:100%;overflow-wrap:anywhere}
.theme-preview{pointer-events:none}

@media(max-width:600px){.stat-grid{gap:var(--space-3)}
.stat{padding:var(--space-4)}
.stat strong{font-size:var(--text-title)}
.safety-code{gap:var(--space-1)}
.safety-code span{font-size:var(--text-md)}
.page-content .panel{padding:var(--space-4)}
.directory-section>.row{align-items:flex-start}
.phone-content .setting-row{flex-wrap:wrap}
.phone-content .setting-row select{max-width:100%}
.phone-content .setting-row .btn{margin-left:auto}
}