:root{
        --paper:#F4F6F7; --paper-2:#EBEFF1; --card:#FFFFFF;
        --ink:#17222B; --muted:#4E5D68; --muted-2:#71808A;
        --line:#D9DFE3; --line-strong:#BCC7CD; --hairline:#CFD7DC;
        --panel:#0E2233; --panel-2:#143049; --panel-line:#26445C;
        --blue:#1F6FB2; --blue-ink:#155A94; --blue-soft:#E1EEF8;
        --amber:#E8A83E; --amber-ink:#B9822B;
        --on-panel:#EDF2F5; --on-panel-mut:#93A7B7;
        --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Consolas,monospace;
        --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
        --sh:0 16px 44px -18px rgba(14,34,51,.32);
        --sh-s:0 4px 14px -8px rgba(14,34,51,.25);
        color-scheme:light;
  }
  @media (prefers-color-scheme: dark){
        :root{
                --paper:#101820; --paper-2:#0B1218; --card:#16222D;
                --ink:#E9EEF2; --muted:#A2B2BE; --muted-2:#7E8F9B;
                --line:#243542; --line-strong:#33495A; --hairline:#20303C;
                --panel:#0A1926; --panel-2:#122536; --panel-line:#24425A;
                --blue:#4C9BD8; --blue-ink:#2F7FBF; --blue-soft:#152C3F;
                --amber:#EDB055; --amber-ink:#EDB055;
                --on-panel:#EDF2F5; --on-panel-mut:#93A7B7;
                --sh:0 16px 44px -18px rgba(0,0,0,.7);
                --sh-s:0 4px 14px -8px rgba(0,0,0,.5);
                color-scheme:dark;
        }
  }
  :root[data-theme="dark"]{
        --paper:#101820; --paper-2:#0B1218; --card:#16222D;
        --ink:#E9EEF2; --muted:#A2B2BE; --muted-2:#7E8F9B;
        --line:#243542; --line-strong:#33495A; --hairline:#20303C;
        --panel:#0A1926; --panel-2:#122536; --panel-line:#24425A;
        --blue:#4C9BD8; --blue-ink:#2F7FBF; --blue-soft:#152C3F;
        --amber:#EDB055; --amber-ink:#EDB055;
        --on-panel:#EDF2F5; --on-panel-mut:#93A7B7;
        --sh:0 16px 44px -18px rgba(0,0,0,.7);
        --sh-s:0 4px 14px -8px rgba(0,0,0,.5);
        color-scheme:dark;
  }
  :root[data-theme="light"]{
        --paper:#F4F6F7; --paper-2:#EBEFF1; --card:#FFFFFF;
        --ink:#17222B; --muted:#4E5D68; --muted-2:#71808A;
        --line:#D9DFE3; --line-strong:#BCC7CD; --hairline:#CFD7DC;
        --panel:#0E2233; --panel-2:#143049; --panel-line:#26445C;
        --blue:#1F6FB2; --blue-ink:#155A94; --blue-soft:#E1EEF8;
        --amber:#E8A83E; --amber-ink:#B9822B;
        --on-panel:#EDF2F5; --on-panel-mut:#93A7B7;
        --sh:0 16px 44px -18px rgba(14,34,51,.32);
        --sh-s:0 4px 14px -8px rgba(14,34,51,.25);
        color-scheme:light;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 var(--sans); -webkit-font-smoothing:antialiased;}
  a{color:inherit;}
  p{margin:0;}
  h1,h2,h3,h4{margin:0; color:var(--ink); letter-spacing:-.012em; text-wrap:balance; font-weight:680;}
  ::selection{background:var(--blue); color:#fff;}
  :focus-visible{outline:2.5px solid var(--blue); outline-offset:2px; border-radius:3px;}
  .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
  .page{display:none;}
  .page.active{display:block;}

  .idx{font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--blue); font-weight:700;}
  .sec{padding:clamp(26px,2.8vw,40px) 0;}
  .sec + .sec{border-top:1px solid var(--hairline);}
  .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:26px; margin-bottom:20px;}
  .sec-head h2{font-size:clamp(1.25rem,1.8vw,1.6rem); line-height:1.25; margin-top:9px;}
  .sec-link{font-family:var(--mono); font-size:13px; font-weight:700; color:var(--blue); text-decoration:none; white-space:nowrap; position:relative; padding-bottom:3px; flex:none;}
  .sec-link::after{content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
  .sec-link:hover::after{transform:scaleX(1);}
  .crumb{padding:14px 0 0; font:600 12.5px var(--mono); color:var(--muted-2);}
  .crumb a{color:var(--blue); text-decoration:none;}
  .crumb a:hover{text-decoration:underline;}
  .page-head{padding:10px 0 22px;}
  .page-head h1{font-size:clamp(1.45rem,2.3vw,1.9rem); font-weight:700; margin-top:8px;}
  .page-head p{color:var(--muted); font-size:15.5px; max-width:68ch; margin-top:10px; line-height:1.7;}

  .btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; font:700 15px var(--sans); border-radius:6px; padding:13px 24px; border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;}
  .btn:hover{transform:translateY(-2px); box-shadow:var(--sh-s);}
  .btn:active{transform:translateY(0);}
  .btn-blue{background:var(--blue); color:#fff;}
  .btn-blue:hover{background:var(--blue-ink);}
  .btn-amber{background:var(--amber); color:#0E2233;}
  .btn-amber:hover{background:#f0b955;}
  .btn-line{border-color:var(--line-strong); color:var(--ink); background:transparent;}
  .btn-line:hover{border-color:var(--blue); color:var(--blue);}
  .btn-panel{border-color:var(--panel-line); color:var(--on-panel); background:transparent;}
  .btn-panel:hover{border-color:var(--amber); color:var(--amber); box-shadow:none;}

  .skip{position:absolute; left:16px; top:-60px; z-index:200; background:var(--blue); color:#fff; padding:10px 18px; border-radius:6px; font:700 14px var(--sans); text-decoration:none; transition:top .2s ease;}
  .skip:focus{top:12px;}

  header.site{position:sticky; top:0; z-index:80;}
  .hrow1{background:var(--paper); border-bottom:1px solid var(--line);}
  .hrow1 .wrap{display:flex; align-items:center; gap:24px; padding-top:13px; padding-bottom:13px; transition:padding .25s ease;}
  header.site.scrolled .hrow1 .wrap{padding-top:8px; padding-bottom:8px;}
  .logo{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none;}
  .logo-mark{width:40px; height:40px; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font:800 18px var(--sans); border-radius:8px; transition:transform .2s ease;}
  .logo:hover .logo-mark{transform:rotate(-6deg) scale(1.05);}
  .logo-word{font:750 21px/1 var(--sans); letter-spacing:-.02em; color:var(--ink);}
  .logo-word small{display:block; font:600 8.5px var(--mono); letter-spacing:.24em; color:var(--muted-2); margin-top:4px;}
  .searchbox{position:relative; flex:1 1 320px; max-width:430px; margin:0 auto;}
  .searchbox input{width:100%; height:44px; border-radius:99px; border:1.5px solid var(--line-strong); background:var(--card); padding:0 18px 0 44px; font:500 14.5px var(--sans); color:var(--ink); outline:none; transition:border-color .18s ease, box-shadow .18s ease;}
  .searchbox input:hover{border-color:var(--blue);}
  .searchbox input:focus{border-color:var(--blue); box-shadow:0 0 0 3.5px var(--blue-soft);}
  .searchbox svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--muted-2); pointer-events:none;}
  .sugg{position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:var(--sh); overflow:hidden; display:none; z-index:95;}
  .sugg.show{display:block;}
  .sugg a{display:flex; justify-content:space-between; gap:10px; padding:11px 16px; font:550 14px var(--sans); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
  .sugg a:last-child{border-bottom:0;}
  .sugg a:hover{background:var(--blue-soft); color:var(--blue-ink);}
  .sugg a small{font:600 11px var(--mono); color:var(--muted-2);}
  .nav-actions{display:flex; align-items:center; gap:16px; flex:none;}
  .hotline{text-align:right; line-height:1.3;}
  .hotline span{display:block; font:600 10px var(--mono); letter-spacing:.16em; color:var(--muted-2); text-transform:uppercase;}
  .hotline a{font:700 16.5px var(--mono); color:var(--ink); text-decoration:none; transition:color .16s;}
  .hotline a:hover{color:var(--blue);}

  .navbar{background:var(--panel); border-bottom:1px solid var(--panel-line);}
  .navbar .wrap{display:flex; align-items:stretch; padding:0 32px;}
  .navbar ul.top{display:flex; list-style:none; margin:0; padding:0; flex:1;}
  .navbar ul.top > li{position:relative;}
  .navbar ul.top > li > a{display:flex; align-items:center; gap:7px; padding:15px 22px; font:650 16px var(--sans); color:var(--on-panel); text-decoration:none; white-space:nowrap; position:relative; transition:background .18s ease, color .18s ease;}
  .navbar ul.top > li > a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
  .navbar ul.top > li > a:hover, .navbar ul.top > li:focus-within > a{background:var(--panel-2); color:var(--amber); text-shadow:.4px 0 0 currentColor;}
  .navbar ul.top > li > a:hover::after, .navbar ul.top > li:focus-within > a::after{transform:scaleX(1);}
  .navbar .car{font-size:10px; color:var(--on-panel-mut); transition:transform .2s ease, color .2s ease;}
  .navbar li:hover .car{transform:rotate(180deg); color:var(--amber);}
  .navbar .hot-tab{color:var(--amber) !important;}
  .dd{position:absolute; top:100%; left:0; z-index:90; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease, visibility .22s;}
  .dd.right{left:auto; right:0;}
  .navbar li:hover > .dd, .navbar li:focus-within > .dd{opacity:1; visibility:visible; transform:translateY(0);}
  .ddp{background:var(--card); border:1px solid var(--line); box-shadow:var(--sh); padding:26px 30px; display:flex; gap:44px; border-radius:0 0 12px 12px; border-top:3px solid var(--amber);}
  .ddc{min-width:215px;}
  .ddc h5{margin:0 0 12px; font:700 11px var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--blue);}
  .ddc a{display:block; padding:7px 0; font:550 15px var(--sans); color:var(--muted); text-decoration:none; white-space:nowrap; transition:color .15s ease;}
  .ddc a:hover{color:var(--amber-ink); text-shadow:.5px 0 0 currentColor;}
  .dd-cta{background:var(--panel); border-radius:10px; padding:18px 20px; min-width:215px; display:flex; flex-direction:column; gap:8px; justify-content:center;}
  .dd-cta b{color:var(--on-panel); font:750 15.5px var(--sans);}
  .dd-cta span{color:var(--on-panel-mut); font:500 13px var(--sans); line-height:1.5;}
  .dd-cta a{margin-top:6px; color:var(--amber); font:700 13.5px var(--mono); text-decoration:none;}
  .dd-cta a:hover{letter-spacing:.05em;}

  .burger{display:none; flex:none; width:44px; height:44px; border:1.5px solid var(--line-strong); border-radius:8px; background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px;}
  .burger i{display:block; width:20px; height:2.5px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .25s ease;}
  .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .burger[aria-expanded="true"] i:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  .mnav{display:none; background:var(--card); border-bottom:1px solid var(--line-strong); box-shadow:var(--sh);}
  .mnav.open{display:block;}
  .mnav a.mtop{display:block; padding:15px 32px; font:700 16.5px var(--sans); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}

  .hero{background:var(--panel); color:var(--on-panel); border-bottom:1px solid var(--panel-line); position:relative; overflow:hidden;}
  .hero::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:46px 46px;}
  .hero .wrap{position:relative; z-index:1;}
  .hero-grid{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center; padding:clamp(30px,3.8vw,50px) 0;}
  .hero-kicker{display:flex; align-items:center; gap:14px; font:650 12px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin-bottom:18px;}
  .hero-kicker::before{content:""; width:30px; height:2.5px; background:var(--amber);}
  .hero h1{color:var(--on-panel); font-size:clamp(1.75rem,2.8vw,2.4rem); font-weight:700; line-height:1.15; letter-spacing:-.02em; margin-bottom:14px;}
  .hero h1 em{font-style:normal; color:var(--amber);}
  .hero-lead{color:var(--on-panel-mut); font-size:16px; line-height:1.7; max-width:44ch; margin-bottom:24px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:28px;}
  .hero-facts{display:flex; border-top:1px solid var(--panel-line); flex-wrap:wrap;}
  .hf{padding:16px 26px 2px 0; margin-right:26px; border-right:1px dashed var(--panel-line);}
  .hf:last-child{border-right:0;}
  .hf b{display:block; font:700 22px var(--mono); color:var(--amber); font-variant-numeric:tabular-nums;}
  .hf span{font:550 12.5px var(--sans); color:var(--on-panel-mut);}
  .analyzer{position:relative; border:1px solid var(--panel-line); background:var(--panel-2); border-radius:12px; overflow:hidden; box-shadow:var(--sh);}
  .an-head{display:flex; justify-content:space-between; align-items:center; padding:12px 18px; border-bottom:1px solid var(--panel-line); font:650 11px var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--on-panel-mut);}
  .an-head .lamps{display:flex; gap:7px;}
  .an-head .lamps i{width:9px; height:9px; border-radius:50%; background:var(--panel-line);}
  .an-head .lamps i.on{background:var(--amber); box-shadow:0 0 8px var(--amber);}
  .analyzer canvas{display:block; width:100%; height:215px;}
  .an-freq{display:flex; justify-content:space-between; padding:0 18px 7px; font:600 10px var(--mono); color:var(--on-panel-mut);}
  .an-foot{display:flex; justify-content:space-between; padding:10px 18px; border-top:1px solid var(--panel-line); font:650 11px var(--mono); color:var(--on-panel-mut);}
  .an-foot b{color:var(--on-panel); font-weight:650;}

  .groups{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .group{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px 24px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;}
  .group::before{content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .3s ease;}
  .group:hover{transform:translateY(-4px); box-shadow:var(--sh-s); border-color:var(--blue);}
  .group:hover::before{transform:scaleX(1);}
  .group h3{font-size:16.5px; font-weight:700;}
  .group > p{color:var(--muted); font-size:13.5px; line-height:1.55;}
  .group ol{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column;}
  .group ol a{display:flex; align-items:center; gap:9px; padding:7.5px 0; font:600 14px var(--sans); color:var(--muted); text-decoration:none; border-bottom:1px dashed var(--line); transition:color .16s ease, padding-left .16s ease;}
  .group ol li:last-child a{border-bottom:0;}
  .group ol a::before{content:"go"; font-size:12px; color:var(--line-strong); transition:color .16s ease;}
  .group ol a:hover{color:var(--blue-ink); padding-left:6px;}
  .group ol a:hover::before{color:var(--blue);}
  .group .g{margin-top:auto; padding-top:10px; font:700 12.5px var(--mono); color:var(--blue); text-decoration:none; display:inline-flex; align-items:center; gap:7px;}
  .group .g i{font-style:normal; transition:transform .2s ease;}
  .group .g:hover i{transform:translateX(5px);}

  .studio{background:var(--panel); color:var(--on-panel); border-top:1px solid var(--panel-line); border-bottom:1px solid var(--panel-line);}
  .studio .wrap{padding-top:clamp(24px,2.8vw,38px); padding-bottom:clamp(28px,3.2vw,44px);}
  .studio .idx{color:var(--amber);}
  .studio h2{color:var(--on-panel); font-size:clamp(1.25rem,1.8vw,1.6rem); margin:11px 0 13px;}
  .studio p.lead{color:var(--on-panel-mut); font-size:15px; line-height:1.7; max-width:72ch;}
  .ease{display:grid; grid-template-columns:340px 1fr; gap:20px; margin-top:22px; align-items:start;}
  .cfgpanel{background:var(--panel-2); border:1px solid var(--panel-line); border-radius:12px; overflow:hidden;}
  .cfgpanel .console-head{display:flex; justify-content:space-between; align-items:center; padding:13px 18px; border-bottom:1px solid var(--panel-line);}
  .cfgpanel .console-head h3{font:700 14.5px var(--sans); color:var(--on-panel);}
  .cfgpanel .badge{font:700 10px var(--mono); letter-spacing:.1em; background:var(--amber); color:#0E2233; padding:4px 10px; border-radius:4px;}
  .cfgpanel .body{padding:15px 18px 18px;}
  .cf{margin-bottom:11px;}
  .cf label{display:block; font:650 10px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--on-panel-mut); margin-bottom:6px;}
  .cf select,.cf input{width:100%; background:var(--panel); border:1.5px solid var(--panel-line); border-radius:6px; color:var(--on-panel); font:550 14px var(--sans); padding:9px 11px; outline:none; transition:border-color .18s ease;}

  }
  }
        }
  }
  }