:root{--bg:#f4f8fa;--ink:#14233d;--muted:#5e6f86;--line:#d2dbe5;--surface:#fff;--accent:#397b16;--soft:#e7f4e2}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Segoe UI",Arial,sans-serif}a{color:inherit;text-underline-offset:5px}button,select,input{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button,summary,select{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{color:inherit}header{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 max(28px,calc((100vw - 1160px)/2));background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}header nav{display:flex;align-items:center;gap:26px}header a{text-decoration:none;font-size:14px;font-weight:600}.brand{display:flex;align-items:center;gap:10px;font-size:21px;letter-spacing:-.7px}.mark{display:grid;place-items:center;background:var(--accent);color:#fff;width:34px;height:34px;border-radius:8px;font-weight:700;font-size:23px}.wrap{max-width:1160px;margin:auto;padding-left:28px;padding-right:28px}.hero{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:80px;min-height:650px;padding-top:72px;padding-bottom:80px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--accent);margin:0 0 22px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(42px,4.9vw,66px);line-height:1.08;letter-spacing:-2.8px;font-weight:650;margin-bottom:26px}h1 span{color:var(--accent)}h2{font-size:36px;line-height:1.2;letter-spacing:-1.2px;font-weight:650;margin-bottom:22px}h3{font-size:23px;line-height:1.3;letter-spacing:-.5px}.lead{font-size:18px;line-height:1.7;color:var(--muted);max-width:540px;margin-bottom:30px}.button{border:1px solid var(--line);display:inline-flex;gap:28px;align-items:center;justify-content:center;padding:12px 20px;border-radius:6px;background:var(--surface);text-decoration:none;font-size:14px;font-weight:600;min-height:46px}.primary{background:var(--accent);color:white;border-color:var(--accent)}.button:hover{filter:brightness(.96)}.hint,small{font-size:12px;color:var(--muted)}.hint{margin-top:14px}.demo{background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 48px #14233d0a;overflow:hidden}.demo-head{padding:18px 22px;border-bottom:1px solid var(--line);font-size:12px;display:flex;align-items:center;gap:8px}.dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}.tag{margin-left:auto;font-size:10px;color:var(--muted)}.question{margin:26px 24px 12px;padding:16px 20px;border-radius:8px;background:var(--bg);font-weight:600;font-size:15px}.trace{padding:8px 28px 18px}.trace>div{display:flex;gap:16px;align-items:center;padding:12px 0}.trace span{font:12px monospace;color:var(--accent);border:1px solid var(--line);width:30px;height:30px;border-radius:50%;display:grid;place-items:center}.trace p{margin:0;font-size:14px}.trace small{display:block}.demo-foot{font-size:12px;padding:15px 24px;background:var(--soft);color:var(--accent)}.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}.flow{display:flex;justify-content:space-between;align-items:center;padding-top:30px;padding-bottom:30px}.flow>span{font-size:16px;font-weight:600}.flow small{display:block;font-weight:400}.flow i{color:var(--muted);font-style:normal}.accent{color:var(--accent)}.section{padding-top:85px;padding-bottom:85px;display:grid;grid-template-columns:1fr 1fr;gap:90px}.section-heading>p:last-child,.boundary p{color:var(--muted)}.comparison{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:10px}.segment{display:flex;gap:4px;border-radius:7px;background:var(--bg);padding:4px;margin-bottom:28px}.segment button{flex:1;background:transparent;border:0;border-radius:4px;padding:10px 8px;font-size:13px}.segment .active{background:var(--surface);box-shadow:0 1px 4px #14233d14;color:var(--accent);font-weight:600}.example-label{font-size:12px;color:var(--muted)}.comparison>p:not(.example-label){min-height:105px;color:var(--muted);font-size:15px}.comparison>a{font-size:14px;font-weight:600;color:var(--accent)}.boundary{border-top:1px solid var(--line)}.closing{border-top:1px solid var(--line);text-align:center;padding-top:75px;padding-bottom:85px}.closing h2{font-size:42px}footer{display:flex;justify-content:space-between;gap:20px;padding-top:25px;padding-bottom:28px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.skip{position:fixed;top:-80px;left:16px;padding:12px;background:var(--surface);z-index:30}.skip:focus{top:10px}.guide-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:65px;padding-top:52px;padding-bottom:60px}aside{position:sticky;top:120px;align-self:start}.steps-nav{display:grid;gap:5px}.steps-nav a{display:flex;align-items:center;gap:12px;text-decoration:none;padding:10px 12px;font-size:11px;color:var(--muted);border-radius:6px}.steps-nav a span{font-size:14px}.steps-nav a:hover,.steps-nav a.current{background:var(--soft);color:var(--accent)}.progress-box{margin-top:35px;padding:18px 12px;border-top:1px solid var(--line);font-size:12px}.progress-box small{display:block;font-size:11px;margin-top:10px}progress{width:100%;height:6px;display:block;margin:12px 0;accent-color:var(--accent)}.text-button{padding:0;border:0;text-decoration:underline;text-underline-offset:3px;background:transparent;font-size:11px;color:var(--muted)}.guide-title{padding-bottom:28px}.guide-title h1{font-size:46px;letter-spacing:-1.8px}.guide-step{padding:38px 0 34px;border-top:1px solid var(--line);scroll-margin-top:0}.step-title{display:flex;align-items:center;gap:16px;margin-bottom:22px}.step-title h2{margin:0;font-size:27px;letter-spacing:-.7px}.number{font:12px monospace;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--accent)}.requirements{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}.requirements p{font-size:14px;color:var(--muted);margin:6px 0 12px}.requirements b{font-size:15px}details{border-top:1px solid var(--line);padding:14px 0;font-size:14px}summary{font-weight:600;padding-right:14px}details p{margin:14px 0 5px;color:var(--muted)}.done{display:flex;align-items:center;gap:12px;margin-top:24px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 18px;font-size:13px;cursor:pointer}.done input{width:18px;height:18px;accent-color:var(--accent);flex:none}.done:has(input:checked){background:var(--soft);border-color:#b4d3a4}.path{font-size:12px;font-weight:600;color:var(--accent);background:var(--soft);padding:10px 14px;border-radius:5px}ol{padding-left:24px}li{padding-left:8px;margin:12px 0;font-size:15px}.note{border-left:3px solid var(--accent);background:var(--surface);padding:14px 18px;font-size:14px;color:var(--muted);margin:24px 0}code{font:13px Consolas,monospace;color:var(--ink);overflow-wrap:anywhere}.chooser{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:24px;margin:22px 0}label[for]{display:block;font-size:13px;font-weight:600;margin-bottom:10px}select{color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:12px;width:100%;border-radius:6px;max-width:100%;font-size:14px}#permission-result{margin-top:20px;font-size:14px}#permission-result strong{color:var(--accent)}#connection-result{margin-top:22px}#connection-result h3{font-size:19px}.prompt{border:1px solid var(--line);padding:24px;border-radius:8px;background:var(--surface);font-size:15px}.prompt .button{font-size:12px}#copy-status{font-size:12px;margin-left:12px}#finished{padding:22px;margin-top:22px;border-radius:8px;background:var(--soft)}#finished p{margin:0;font-size:14px}[hidden]{display:none!important}@media(max-width:900px){.hero{gap:35px}.section{gap:35px}.guide-layout{gap:28px;grid-template-columns:190px minmax(0,1fr)}.guide-title h1{font-size:36px}}@media(max-width:680px){html{scroll-padding-top:86px}header{height:68px;padding:0 20px}.brand{font-size:18px}header nav{gap:15px}.wrap{padding-left:22px;padding-right:22px}.hero{grid-template-columns:1fr;gap:32px;padding-top:45px;padding-bottom:45px;min-height:0}h1{font-size:48px;letter-spacing:-2px}.lead{font-size:16px}.flow{flex-wrap:wrap;gap:18px}.flow>span{width:43%;font-size:14px}.flow i{display:none}.section{grid-template-columns:1fr;gap:24px;padding-top:48px;padding-bottom:48px}h2{font-size:30px}.closing{padding-top:50px;padding-bottom:55px}.closing h2{font-size:32px}footer{flex-wrap:wrap}footer span:nth-child(2){display:none}.guide-layout{display:block;padding-top:25px}aside{position:static;margin-bottom:28px}aside>.eyebrow{display:none}.steps-nav{grid-template-columns:1fr 1fr;gap:2px}.steps-nav a{padding:8px;font-size:10px;gap:8px}.steps-nav a span{font-size:12px}.progress-box{margin-top:16px;padding:12px 8px}.progress-box small{display:none}.guide-title h1{font-size:35px}.guide-title{padding-top:18px}.guide-step{padding:30px 0}.step-title h2{font-size:24px}.requirements{grid-template-columns:1fr;gap:8px}.chooser,.prompt{padding:18px}.comparison>p:not(.example-label){min-height:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.task-examples{display:grid;gap:16px}.task-example h3{font-size:18px;margin-bottom:12px}.copy-status{font-size:12px;margin-left:12px}
/* Product landing */
.hero h1{font-size:clamp(38px,4vw,55px);letter-spacing:-2px}.hero-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.product-link{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}.product-link:hover{text-decoration:underline}.product-features{padding-top:80px;padding-bottom:75px}.feature-intro{color:var(--muted);max-width:650px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}.feature-grid article{border-top:2px solid var(--accent);padding-top:23px}.feature-number{font-size:11px;letter-spacing:1.2px;color:var(--muted)}.feature-grid h3{font-size:23px;margin:16px 0}.feature-grid p{font-size:15px;color:var(--muted)}.feature-grid blockquote{margin:22px 0 0;background:var(--surface);border-left:3px solid var(--line);padding:15px;font-size:14px}.product-explanation{border-top:1px solid var(--line)}.closing>p:not(.eyebrow){color:var(--muted)}@media(max-width:680px){.hero h1{font-size:40px;letter-spacing:-1.7px}.feature-grid{grid-template-columns:1fr;gap:30px}.product-features{padding-top:48px;padding-bottom:48px}.feature-grid h3{margin:12px 0}header nav{gap:14px}header nav a{font-size:12px}.brand{font-size:16px}.mark{width:28px;height:28px;font-size:20px}}

.quick-start{border-top:1px solid var(--line);padding-top:65px;padding-bottom:65px}.quick-start>div>p:last-child{max-width:650px;color:var(--muted)}.quick-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;padding-left:22px;margin:30px 0}.quick-steps li{padding-left:5px}.quick-steps li::marker{color:var(--accent);font-weight:700}.quick-steps b,.quick-steps span{display:block}.quick-steps span{color:var(--muted);font-size:14px;margin-top:8px}@media(max-width:680px){.quick-start{padding-top:45px;padding-bottom:45px}.quick-steps{grid-template-columns:1fr;gap:5px}}

.product-control{border-top:1px solid var(--line);padding-top:65px;padding-bottom:65px}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 50px;margin:30px 0}.control-grid h3{font-size:19px;margin-bottom:10px}.control-grid p{font-size:15px;color:var(--muted);margin:0}.feature-grid{row-gap:40px}@media(max-width:680px){.product-control{padding-top:45px;padding-bottom:45px}.control-grid{grid-template-columns:1fr;gap:25px}}