.guide-layout { display:grid; grid-template-columns:205px minmax(0,1fr); gap:72px; padding-top:72px; padding-bottom:110px; }
.guide-sidebar { position:sticky; top:116px; align-self:start; display:grid; gap:16px; padding-top:11px; }
.guide-sidebar span, .guide-number, .demo-form-head > span, .demo-preview-head > span { color:#7d8a77; font:700 10px var(--mono); letter-spacing:.12em; }
.guide-sidebar a { color:#536052; font-size:13px; font-weight:650; }
.guide-sidebar a:hover { color:#376318; }
.guide-content { max-width:810px; }
.guide-hero h1, .demo-heading h1 { max-width:800px; margin:0; font-size:clamp(48px,6vw,78px); line-height:1; letter-spacing:-.065em; font-weight:650; }
.guide-hero > p, .demo-heading p { max-width:690px; margin:25px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }
.guide-notice { display:grid; grid-template-columns:auto 1fr; gap:17px; margin-top:35px; padding:19px 22px; border:1px solid #cfe0b6; border-radius:14px; background:#f1f8e5; color:#4f6242; font-size:12px; line-height:1.6; }
.guide-notice strong { color:#355417; }
.guide-section { padding-top:66px; margin-top:66px; border-top:1px solid var(--line); scroll-margin-top:130px; }
.guide-section h2 { margin:15px 0 22px; font-size:clamp(32px,4vw,48px); font-weight:650; letter-spacing:-.05em; }
.guide-section p { color:#5d685b; font-size:14px; line-height:1.7; }
.guide-section code, .guide-code { font-family:var(--mono); }
.guide-section p code { padding:2px 5px; border-radius:4px; background:#eaf0e2; color:#365323; font-size:12px; }
.guide-table { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; }
.guide-table > div { display:grid; grid-template-columns:180px 1fr; gap:18px; padding:19px 22px; border-bottom:1px solid var(--line); font-size:13px; line-height:1.5; }
.guide-table > div:last-child { border-bottom:0; }
.guide-table strong { color:#263522; }
.guide-table span { color:#647063; }
.guide-code { overflow:auto; margin:24px 0; padding:27px 28px; border-radius:16px; color:#d6f3bd; background:#202820; font-size:12px; line-height:1.8; }
.guide-steps { display:grid; gap:16px; margin:0; padding:0; list-style:none; counter-reset:step; }
.guide-steps li { display:grid; grid-template-columns:28px 1fr; gap:7px 12px; padding:17px 18px; border:1px solid var(--line); border-radius:12px; background:#fff; counter-increment:step; }
.guide-steps li::before { display:grid; place-items:center; grid-row:span 2; width:27px; height:27px; border-radius:50%; background:var(--lime-soft); color:#476d15; content:counter(step); font:700 11px var(--mono); }
.guide-steps strong { font-size:13px; }
.guide-steps span { color:#647063; font-size:12px; line-height:1.6; }
.guide-next { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:30px; padding:25px 27px; border-radius:16px; background:#f0f5e8; }
.guide-next strong { font-size:15px; }
.guide-next p { margin:6px 0 0; font-size:12px; }
.guide-next .button { flex:none; }
.demo-page { padding-top:78px; padding-bottom:100px; }
.demo-heading { max-width:760px; margin-bottom:48px; }
.demo-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
.demo-form, .demo-preview { overflow:hidden; border:1px solid #d6ddd1; border-radius:22px; background:#fff; box-shadow:0 20px 55px rgba(30,43,27,.07); }
.demo-form { display:flex; flex-direction:column; padding:32px; }
.demo-form-head, .demo-preview-head { display:flex; align-items:center; gap:13px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.demo-form-head strong, .demo-preview-head strong { font-size:19px; letter-spacing:-.04em; }
.demo-form label { display:block; margin:23px 0 8px; color:#334130; font-size:12px; font-weight:750; }
.demo-form input, .demo-form select, .demo-form textarea { display:block; width:100%; padding:13px 14px; border:1px solid #d6ded0; border-radius:9px; color:#242f22; background:#fafcf8; font:13px var(--sans); outline:none; }
.demo-form input:focus, .demo-form select:focus, .demo-form textarea:focus { border-color:#80ab37; box-shadow:0 0 0 3px #caff5240; }
.demo-form textarea { min-height:126px; line-height:1.5; resize:vertical; }
.demo-form small { display:block; margin-top:6px; color:#829080; font-size:10px; line-height:1.45; }
.demo-form .button { align-self:flex-start; margin-top:27px; cursor:pointer; }
.demo-error { min-height:17px; margin:12px 0 0; color:#b34832; font-size:12px; }
.demo-preview { background:#202820; color:#f0f5ea; }
.demo-preview-head { flex-wrap:wrap; padding:32px; border-color:#424d40; }
.demo-preview-head > span { color:#a6c486; }
.demo-preview-head b { margin-left:auto; padding:8px 10px; border-radius:999px; color:#d6ecb3; background:#3b5232; font-size:10px; font-weight:650; }
.demo-preview-body { padding:33px 32px; }
.demo-preview-row { display:grid; grid-template-columns:90px 1fr; gap:12px; padding:17px 0; border-bottom:1px solid #414a40; font-size:12px; }
.demo-preview-row span, .demo-progress > span { color:#a3b29d; }
.demo-preview-row strong { min-width:0; overflow-wrap:anywhere; font-weight:650; }
.demo-preview-comment { margin:34px 0; padding:22px; border:1px solid #506044; border-radius:13px; background:#2b3829; }
.demo-preview-comment small { color:#b5d995; font:700 9px var(--mono); letter-spacing:.1em; }
.demo-preview-comment p { margin:12px 0 0; color:#f1f5ec; font-size:16px; line-height:1.5; }
.demo-progress { display:grid; grid-template-columns:1fr auto; gap:13px; align-items:center; font-size:11px; }
.demo-progress-track { grid-column:1/-1; grid-row:2; overflow:hidden; height:10px; border-radius:999px; background:#465442; }
.demo-progress-track i { display:block; width:0%; height:100%; border-radius:inherit; background:var(--lime); transition:width .3s; }
.demo-progress strong { font-size:11px; }
.demo-outcome { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:26px; padding:14px 17px; border:1px solid #718a61; border-radius:10px; color:#e2f7c5; background:#33472e; cursor:pointer; font:700 12px var(--sans); }
.demo-outcome:hover { background:#3f5b35; }
.demo-outcome:disabled { opacity:.45; cursor:not-allowed; }
.demo-preview-note { margin:20px 0 0; color:#96a593; font-size:11px; line-height:1.55; }
.demo-next { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-top:65px; padding:35px 0 0; border-top:1px solid var(--line); }
.demo-next .kicker { margin-bottom:10px; }
.demo-next h2 { margin:0; font-size:34px; letter-spacing:-.05em; }
.demo-next p { margin:9px 0 0; color:var(--muted); font-size:13px; }
.demo-next > div:last-child { display:flex; gap:10px; flex:none; }
[hidden] { display:none!important; }
@media(max-width:1000px) { .guide-layout { gap:35px; grid-template-columns:150px minmax(0,1fr); } }
@media(max-width:760px) { .guide-layout { display:block; padding-top:55px; } .guide-sidebar { display:none; } .guide-notice { grid-template-columns:1fr; gap:4px; } .guide-table > div { grid-template-columns:1fr; gap:5px; } .guide-next, .demo-next { align-items:flex-start; flex-direction:column; } .demo-grid { grid-template-columns:1fr; } .demo-page { padding-top:55px; } .demo-next > div:last-child { flex-wrap:wrap; } }