@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#101510;--panel:#192019;--line:#323c31;--muted:#a4afa2;--green:#c3ef70}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f0f3e9;font-family:'DM Sans',sans-serif}header,main{max-width:1200px;margin:auto;padding:30px 40px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.brand{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:700;letter-spacing:-1px}.brand span{display:inline-block;font:12px 'DM Sans',sans-serif;letter-spacing:0;margin-left:20px;color:var(--muted)}.tag,.eyebrow,.steps article>span{font-size:11px;letter-spacing:2px;font-weight:700}.tag{border:1px solid var(--line);border-radius:30px;padding:10px 15px;color:var(--muted)}.eyebrow{color:var(--green);margin:20px 0}.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:65px;align-items:center;padding:50px 0 75px}h1,h2,h3{font-family:'Space Grotesk',sans-serif}h1{font-size:clamp(48px,6.2vw,78px);letter-spacing:-4px;line-height:1.04;margin:24px 0}em{color:var(--green);font-style:normal}.intro{max-width:470px;font-size:18px;line-height:1.7;color:var(--muted);margin:28px 0}code{font-family:monospace;color:var(--green)}.button{background:var(--green);color:#17220e;border:0;border-radius:8px;padding:17px 22px;display:inline-flex;justify-content:space-between;gap:30px;align-items:center;font:700 14px 'DM Sans',sans-serif;cursor:pointer}.button:hover{background:#d5ff90}.button span{font-size:22px}.hint{font-size:12px!important;line-height:1.7!important;color:var(--muted)}.demo{background:var(--panel);border:1px solid #43523c;border-radius:15px;position:relative;padding:22px;box-shadow:12px 14px 0 #171e16;transform:rotate(2deg)}.demo-head{display:flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1px;color:var(--muted)}.demo-head>span:last-child{margin-left:auto;font-size:20px;color:var(--green)}.dot{width:6px;height:6px;background:var(--green);border-radius:50%}.record{width:210px;height:210px;border-radius:50%;margin:20px auto;background:repeating-radial-gradient(circle,#222a20 0px,#222a20 2px,#11180f 3px,#11180f 5px);display:grid;place-items:center}.record>div{width:90px;height:90px;border-radius:50%;display:grid;place-content:center;text-align:center;background:var(--green);color:#17220e;font-size:47px;font-weight:700}.record span{font-size:7px;font-weight:400}.chat{border:1px solid var(--line);background:#101610;border-radius:8px;padding:16px}.chat small{font-size:9px;letter-spacing:2px;color:var(--muted)}.chat p{font-size:12px;line-height:1.8}.chat b{color:#c9b7ff}.chat b.green{color:var(--green)}.example{font-size:9px;display:block;text-align:right;color:var(--muted);margin-top:10px}.steps{border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:35px 0;gap:40px}.steps article>span{color:var(--muted)}h2{font-size:21px;letter-spacing:-.6px}p{line-height:1.65}.steps p,.panel p{color:var(--muted);font-size:14px}footer{border-top:1px solid var(--line);padding:30px 0;display:flex;align-items:center;gap:25px;color:var(--muted)}footer p,footer>span{font-size:11px}footer>span{margin-left:auto}.dash-title{display:flex;justify-content:space-between;align-items:center}.dash-title h1{font-size:48px;letter-spacing:-2px}.panels{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;margin:35px 0 60px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.badge{font-size:11px;color:var(--green);border:1px solid var(--line);border-radius:20px;padding:6px 10px}.secondary{font:500 13px 'DM Sans',sans-serif;background:transparent;color:#e0e9d9;border:1px solid #586650;border-radius:7px;padding:11px 16px;cursor:pointer}.secondary:hover{border-color:var(--green)}.danger{color:#f4b3a8}hr{border:0;border-top:1px solid var(--line);margin:28px 0}label{display:block;font-size:13px;margin:18px 0 10px}input,textarea{width:100%;background:#101610;color:#e6f0de;border:1px solid #485341;border-radius:8px;padding:14px;font:14px monospace;line-height:1.6}textarea{resize:vertical;margin-bottom:14px}form .button{margin-top:16px}ol{padding-left:20px;font-size:13px;line-height:1.9;color:var(--muted)}#notice,#result:not(:empty){border:1px solid #697342;background:#29301d;padding:15px;border-radius:8px;font-size:14px;margin:15px 0}button:disabled{opacity:.5;cursor:wait}:focus-visible{outline:3px solid var(--green);outline-offset:4px}[hidden]{display:none!important}@media(max-width:800px){header,main{padding:22px}.hero{grid-template-columns:1fr;gap:35px;padding-top:25px}.demo{max-width:450px;width:100%;margin:auto;transform:none}.steps,.panels{grid-template-columns:1fr}.steps{gap:15px}h1{letter-spacing:-2px}.tag{font-size:8px}.brand span{display:none}.dash-title{display:block}.dash-title h1{font-size:40px}footer{flex-wrap:wrap}footer>span{margin-left:0}.panel{padding:20px}}

select{width:100%;background:#101610;color:#e6f0de;border:1px solid #485341;border-radius:8px;padding:14px;font:14px "DM Sans",sans-serif}#copy-update{margin:12px 0 0}#permission-status{min-height:40px}

.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer;line-height:1.5}.checkbox-label input{width:18px;height:18px;flex-shrink:0;margin:0;accent-color:var(--green)}

/* Dashboard rhythm: 8px within fields, 16px within groups, 24–32px between groups. */
#dashboard{padding-top:16px}
#dashboard>.eyebrow{margin:0 0 16px}
.dash-title{gap:24px}
.dash-title h1{margin:0 0 16px;line-height:1.15}
#welcome{margin:0}
.panels{align-items:start;margin:32px 0 48px}
.panel{min-width:0;padding:28px}
.panel-title h2{margin:0}
.panel>h2,.panel>h3{margin:0 0 16px}
.panel>.eyebrow{margin:0 0 24px}
.panel>p{margin:16px 0}
.panel>p.hint{margin:12px 0 0}
.panel>hr{margin:28px 0}
.panel label{margin:24px 0 8px;line-height:1.5}
.panel form>label:first-child{margin-top:0}
.panel form .hint{margin:8px 0 16px}
.panel form .button{margin-top:16px}
.panel input:not([type=checkbox]),.panel select{min-height:48px}
#name-form{margin:0 0 16px}
#test{margin:24px 0 0}
#permission-status{min-height:0;margin-top:8px}
.panel .checkbox-label{margin:24px 0 8px;align-items:flex-start}
.checkbox-label input{margin-top:1px}
#command-mode-help{margin:0 0 24px}
#command{display:block;margin:0;min-height:120px}
.command-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.command-actions .button,.command-actions .secondary{min-height:48px;margin:0!important;justify-content:center}
.panel ol{margin:24px 0 0;padding-left:20px}
.panel ol li+li{margin-top:4px}
.panel>ol+p.hint{margin-top:16px}
#disconnect{margin-top:4px}
@media(max-width:800px){
 #dashboard{padding-top:8px}
 .dash-title #logout{margin-top:24px}
 .panels{gap:20px;margin-top:28px}
 .panel{padding:24px}
}
@media(max-width:480px){
 .panel{padding:20px}
 .command-actions{align-items:stretch;flex-direction:column}
 .command-actions button{width:100%}
}