:root{
  --bg:#f6f8fb;--surface:#fff;--text:#202124;--muted:#5f6368;
  --primary:#1a73e8;--primary-dark:#1557b0;--green:#188038;
  --yellow:#f9ab00;--red:#d93025;--border:#dadce0;--soft:#e8f0fe;
  --radius:18px;--shadow:0 12px 30px rgba(60,64,67,.12)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);line-height:1.68}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
.container{width:min(1160px,calc(100% - 32px));margin:auto}
.topbar{background:rgba(255,255,255,.97);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{font-weight:800;display:flex;flex-direction:column;line-height:1.1}
.brand-main{font-size:1.25rem}.g-blue{color:#1a73e8}.g-red{color:#d93025}.g-yellow{color:#f9ab00}.g-green{color:#188038}
.brand small{color:var(--muted);font-size:.78rem}
.nav-links{display:flex;align-items:center;gap:17px;color:var(--muted);font-size:.94rem}
.nav-links a:hover{color:var(--primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:999px;border:1px solid transparent;font-weight:700;transition:.2s}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-secondary{background:#fff;border-color:var(--border);color:var(--primary-dark)}
.btn-secondary:hover{border-color:var(--primary);background:var(--primary);color:#fff}
.hero{padding:68px 0 42px;background:radial-gradient(circle at top left,rgba(26,115,232,.15),transparent 34%),radial-gradient(circle at top right,rgba(24,128,56,.12),transparent 30%),linear-gradient(180deg,#fff 0%,var(--bg) 100%);border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:34px;align-items:center}
.eyebrow{display:inline-flex;padding:7px 12px;border:1px solid #c6dafc;border-radius:999px;background:var(--soft);color:var(--primary-dark);font-weight:700;font-size:.9rem;margin-bottom:17px}
h1{font-size:clamp(2.2rem,5vw,4.3rem);line-height:1.03;letter-spacing:-.055em;margin:0 0 18px}
.lead{font-size:1.16rem;color:var(--muted);max-width:820px;margin:0 0 25px}
.panel,.box,.side-card,.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 22px rgba(60,64,67,.06)}
.panel{padding:27px}.panel h2{margin-top:0}
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.check-list li{display:grid;grid-template-columns:28px 1fr;gap:10px;color:var(--muted)}
.icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e6f4ea;color:var(--green);font-weight:900}
.search-box{display:flex;gap:10px;background:#fff;border:1px solid var(--border);padding:11px;border-radius:18px;box-shadow:var(--shadow);max-width:760px}
.search-box input{flex:1;border:0;outline:0;padding:11px 13px;font-size:1rem;min-width:0}
.quick-links,.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.chip{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--muted)}
.chip:hover{border-color:#aecbfa;color:var(--primary)}
section{padding:52px 0}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:23px}
.section-title h2{font-size:clamp(1.65rem,3vw,2.4rem);margin:0;letter-spacing:-.04em}
.section-title p{margin:0;color:var(--muted);max-width:600px}
.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.guide-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:0 7px 19px rgba(60,64,67,.05);transition:.2s;min-height:245px}
.guide-card:hover{border-color:#aecbfa;box-shadow:var(--shadow)}
.guide-card .tag{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--primary);font-weight:800}
.guide-card h3{font-size:1.18rem;line-height:1.28;margin:8px 0}
.guide-card p{color:var(--muted);margin:0 0 15px}
.read-more{font-weight:800;color:var(--primary);margin-top:auto}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:28px;align-items:start;padding:42px 0 60px}
.article{display:grid;gap:21px}
.box{padding:28px}
.box h2{font-size:clamp(1.4rem,3vw,2rem);line-height:1.18;letter-spacing:-.035em;margin:0 0 13px}
.box h3{margin:23px 0 7px}.box p{margin:0 0 13px}.box li{margin-bottom:8px}
.answer{background:linear-gradient(135deg,#e8f0fe,#e6f4ea);border:1px solid #aecbfa;border-radius:22px;padding:25px}
.answer h2{margin-top:0}
.note{background:#fef7e0;border:1px solid #fdd663;border-radius:15px;padding:16px;margin-top:15px}
.code-block{background:#202124;color:#e8eaed;padding:17px;border-radius:14px;overflow-x:auto;white-space:pre-wrap}
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.related a{background:var(--soft);border:1px solid #c6dafc;border-radius:14px;padding:14px;color:var(--primary-dark);font-weight:700}
.related a:hover{background:#dce8fb}
.toc{padding:20px;position:static;top:auto;}

.toc strong{display:block;color:var(--primary-dark);margin-bottom:8px}

.toc a{display:block;padding:8px 0;border-bottom:1px solid var(--border);color:var(--muted);font-size:.93rem}
.toc a:last-child{border:0}.toc a:hover{color:var(--primary)}
.side-card{padding:19px;margin-top:17px}
.ad-box{text-align:center;min-height:110px;display:flex;flex-direction:column;justify-content:center;border:1px dashed #aeb4ba;border-radius:13px;background:#fafafa;color:var(--muted);padding:16px}
.ad-horizontal{grid-column:1/-1;width:100%;margin:8px 0 4px}
.ad-horizontal .ad-box{min-height:120px;width:100%;background:#fff;border-style:solid;box-shadow:0 6px 18px rgba(60,64,67,.05)}
.ad-final{margin-top:28px;margin-bottom:0}
.course-box{background:linear-gradient(135deg,#1a73e8,#188038);color:#fff;border-radius:18px;padding:20px;margin-top:17px}
.course-box p{color:#eef3fd}.course-box .btn{background:#fff;color:var(--primary-dark);border-color:#fff}
.course-box .btn:hover{background:var(--primary-dark);color:#fff;border-color:#fff}
.cta{background:linear-gradient(135deg,#1a73e8,#1557b0);color:#fff;border-radius:25px;padding:28px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.cta h2{margin:0 0 7px}.cta p{margin:0;color:#e8f0fe}
.cta .btn-secondary{background:#fff;color:var(--primary-dark);border-color:#fff}
.cta .btn-secondary:hover{background:#0f4ca0;color:#fff;border-color:#fff}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.92rem;margin-bottom:20px}
.breadcrumb a{color:var(--primary);font-weight:700}
.footer{background:#fff;border-top:1px solid var(--border);padding:32px 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
.empty-state{display:none;text-align:center;padding:30px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);color:var(--muted);margin-top:20px}
.detailed-steps{counter-reset:steps;list-style:none;padding:0;margin:18px 0 0;display:grid;gap:12px}
.detailed-steps li{position:relative;padding:15px 16px 15px 54px;background:#f8fafd;border:1px solid var(--border);border-radius:14px;margin:0}
.detailed-steps li:before{counter-increment:steps;content:counter(steps);position:absolute;left:15px;top:14px;width:27px;height:27px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.error-list{background:#fce8e6;border:1px solid #f5c2bd;border-radius:15px;padding:16px 20px 16px 40px}
.example-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px}
.example-flow strong{width:100%;color:var(--primary-dark)}
.example-flow span{background:var(--soft);border:1px solid #c6dafc;border-radius:999px;padding:7px 11px;font-weight:700;color:var(--primary-dark)}
.example-flow span:not(:last-child):after{content:" →";margin-left:8px;color:var(--muted)}
.app-list{columns:2;column-gap:30px}
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;background:#fff}
.data-table th{background:var(--primary);color:#fff;text-align:left}
.data-table th,.data-table td{padding:12px;border:1px solid var(--border);vertical-align:top}

@media(max-width:940px){
 .hero-grid,.layout{grid-template-columns:1fr}
 .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .toc{position:static}.related{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
 .nav{align-items:flex-start;flex-direction:column;padding:16px 0}.nav-links{flex-wrap:wrap}
 .search-box{flex-direction:column}.guide-grid,.related{grid-template-columns:1fr}
 .section-title,.cta{align-items:flex-start;flex-direction:column}.hero{padding-top:42px}
 .app-list{columns:1}.box,.answer{padding:22px}
}