.guide-learning { display:grid; grid-template-columns:250px minmax(0,1fr); gap:40px; align-items:start; padding-bottom:56px; }
.guide-contents { position:sticky; top:105px; min-width:0; }
.guide-contents h2 { font-size:16px; margin-bottom:18px; letter-spacing:0; }
.guide-contents nav { display:grid; gap:4px; }
.guide-contents button { display:flex; align-items:center; gap:12px; text-align:left; min-height:44px; padding:12px 8px; border:0; border-radius:6px; background:none; color:var(--color-text-soft); font:inherit; font-size:13px; line-height:1.5; cursor:pointer; }
.guide-contents button:hover { background:var(--color-surface); color:var(--color-text); }
.guide-contents button span { color:var(--color-primary-ink); font-size:11px; }
.guide-contents p { margin-top:24px; padding-top:20px; border-top:1px solid var(--color-border); font-size:12px; line-height:1.8; color:var(--color-text-muted); }
.guide-lessons { min-width:0; display:grid; gap:14px; }
.guide-lesson { min-width:0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; overflow:hidden; }
.guide-lesson summary { display:flex; align-items:flex-start; gap:18px; padding:26px; list-style:none; cursor:pointer; }
.guide-lesson summary::-webkit-details-marker { display:none; }
.guide-lesson summary>span:nth-child(2) { min-width:0; flex:1; }
.guide-number { display:grid; place-items:center; width:36px; height:36px; flex:none; border:1px solid var(--color-border); border-radius:6px; font-size:12px; color:var(--color-primary-ink); }
.guide-lesson h2 { font-size:22px; line-height:1.35; letter-spacing:0; }
.guide-lesson summary>span>span { display:block; font-size:14px; line-height:1.7; margin-top:9px; color:var(--color-text-soft); }
.guide-chevron { width:8px; height:8px; flex:none; margin:12px 3px 0 8px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform .2s; }
.guide-lesson[open] .guide-chevron { transform:rotate(225deg); }
.guide-lesson[open] summary { border-bottom:1px solid var(--color-border); }
.guide-lesson-body { padding:26px; }
.guide-lesson-step + .guide-lesson-step { margin-top:24px; }
.guide-lesson-step h3 { font-size:13px; letter-spacing:0; margin-bottom:10px; }
.guide-lesson-step p,.guide-lesson-step pre { font-size:14px; line-height:1.85; color:var(--color-text-soft); overflow-wrap:anywhere; }
.guide-lesson-step pre { white-space:pre-wrap; margin:0; font-family:inherit; }
.guide-lesson-step.is-example { border-left:3px solid var(--color-primary); padding:2px 0 2px 18px; }
.guide-lesson-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:26px; padding-top:22px; border-top:1px solid var(--color-border); }
.guide-lesson-actions>div { display:flex; flex-wrap:wrap; gap:12px 20px; }
.guide-lesson-actions a { min-height:44px; display:inline-flex; align-items:center; font-size:12px; max-width:100%; white-space:normal; }
.guide-field-note { padding-bottom:60px; }
.guide-field-note .guide-intro { border-radius:8px; }
.guide-field-note h2 { font-size:28px; }
.guide-learning :is(button,a,summary):focus-visible { outline:2px solid var(--color-primary); outline-offset:-3px; }
html[data-theme="light"] .guide-lesson,html[data-theme="light"] .guide-field-note .guide-intro { background:#fff; }
@media(max-width:980px) { .guide-learning { grid-template-columns:1fr; gap:26px; } .guide-contents { position:static; } .guide-contents nav { grid-template-columns:repeat(2,minmax(0,1fr)); } .guide-contents p { margin-top:14px; } }
@media(max-width:560px) { .guide-contents nav { grid-template-columns:1fr; } .guide-lesson summary { padding:20px 16px; gap:12px; } .guide-number { width:28px; height:28px; } .guide-lesson h2 { font-size:19px; } .guide-lesson-body { padding:22px 18px; } .guide-lesson-actions { align-items:stretch; } .guide-lesson-actions>.button { width:100%; justify-content:center; } }
@media(prefers-reduced-motion:reduce) { .guide-chevron { transition:none; } }