:root{--mui-primary:#1976d2;--mui-primary-dark:#0d47a1;--mui-bg:#f7f9fc;--mui-paper:#fff;--mui-text:#17202a;--mui-muted:#5f6b7a;--mui-divider:#e2e8f0;--mui-radius:16px;--mui-shadow-1:0 2px 8px rgba(15,23,42,.08);--mui-shadow-2:0 8px 24px rgba(15,23,42,.10)}
body{font-family:Inter,sans-serif;background:var(--mui-bg);color:var(--mui-text)}
.guide-hero{padding:82px clamp(24px,6vw,96px) 76px;background:linear-gradient(135deg,#f8fbff 0%,#edf7ff 58%,#f7f9fc 100%)}.guide-hero>span{display:inline-flex;padding:6px 12px;border-radius:999px;background:#e3f2fd;color:var(--mui-primary-dark);font-weight:700;letter-spacing:.09em}.guide-hero h1{max-width:920px;margin:22px auto;font-family:Inter,sans-serif;color:#102a43}.guide-hero h1 em{color:var(--mui-primary)}.guide-hero p{color:var(--mui-muted);font-size:17px}
.guide-toolbar{top:72px;padding:14px clamp(24px,6vw,96px);border:0;border-bottom:1px solid var(--mui-divider);background:rgba(255,255,255,.97);box-shadow:0 2px 8px rgba(15,23,42,.06);backdrop-filter:blur(10px)}.guide-toolbar label{width:min(560px,70%);padding:12px 16px;border:1px solid #c5d4e2;border-radius:10px;background:#fff;box-shadow:inset 0 1px 2px rgba(15,23,42,.04);transition:border-color .2s,box-shadow .2s}.guide-toolbar label:focus-within{border-color:var(--mui-primary);box-shadow:0 0 0 3px rgba(25,118,210,.13)}.guide-toolbar svg{stroke:var(--mui-primary)}.guide-toolbar input{font-family:Inter,sans-serif;color:#263849}.guide-toolbar>span{padding:6px 12px;border-radius:999px;background:#e3f2fd;color:var(--mui-primary-dark);font-weight:600}
.guide-layout{width:100%;max-width:none;padding-inline:clamp(24px,6vw,96px);grid-template-columns:280px minmax(0,1fr);gap:52px;margin:46px 0 100px;align-items:start}.guide-layout aside{top:154px;max-height:calc(100vh - 180px);padding:20px;border:1px solid var(--mui-divider);border-radius:14px;background:#fff;box-shadow:var(--mui-shadow-1)}.guide-layout aside>strong{display:block;padding:0 10px 10px;color:#60758a}.guide-layout aside nav{gap:3px;margin-top:4px}.guide-layout aside a{padding:9px 11px;border:0;border-radius:7px;color:#5f7182;transition:background .18s,color .18s}.guide-layout aside a.active,.guide-layout aside a:hover{border:0;background:#e3f2fd;color:var(--mui-primary-dark);font-weight:600}
.guide-content{padding:38px 42px 56px;border:1px solid var(--mui-divider);border-radius:16px;background:#fff;box-shadow:var(--mui-shadow-1)}.guide-content h2{margin:62px 0 20px;font-family:Inter,sans-serif;color:#102a43;letter-spacing:-.025em;scroll-margin-top:160px}.guide-content h2:first-of-type{margin-top:0}.guide-content h2:after{content:"";display:block;width:48px;height:3px;margin-top:12px;border-radius:3px;background:var(--mui-primary)}.guide-content h3{margin-top:32px;color:#174f78;font-family:Inter,sans-serif}.guide-content p,.guide-content li{color:#526372;font-size:14px;line-height:1.8}.guide-content a{color:var(--mui-primary);font-weight:600}.guide-content ul,.guide-content ol{padding-left:24px}.guide-content li::marker{color:var(--mui-primary)}.guide-content blockquote{margin:24px 0;padding:16px 20px;border-left:4px solid var(--mui-primary);border-radius:0 10px 10px 0;background:#eef6fd;color:#35546f}.guide-content table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--mui-divider);border-radius:10px;background:#fff}.guide-content th,.guide-content td{border:0;border-bottom:1px solid var(--mui-divider);padding:13px 15px}.guide-content th{background:#eaf3fb;color:#173e61;font-weight:700}.guide-content tr:last-child td{border-bottom:0}.guide-content code{padding:3px 6px;border-radius:5px;background:#eef3f8;color:#174f78}.guide-content pre{padding:22px;border:1px solid #234a68;border-radius:12px;background:#092d4b;box-shadow:0 8px 22px rgba(8,39,67,.16)}.guide-content pre code{padding:0;background:transparent;color:#dceaf1}
.lp-footer{background:#102a43}
@media(max-width:900px){.guide-layout{grid-template-columns:1fr;width:min(calc(100% - 40px),900px);padding-inline:0;margin-inline:auto}.guide-layout aside{display:none}.guide-content{padding:32px}.guide-toolbar{top:72px}}
@media(max-width:560px){.guide-hero{padding:56px 18px}.guide-hero h1{font-size:44px}.guide-toolbar{top:64px;padding:12px 18px}.guide-layout{width:calc(100% - 28px);margin-top:24px}.guide-content{padding:26px 20px;border-radius:14px}.guide-content h2{font-size:27px;scroll-margin-top:140px}.guide-content table{display:block;overflow-x:auto}.guide-content pre{margin-inline:-6px;padding:16px}}
