.guide-main{max-width:1120px;padding-top:26px;padding-bottom:56px;color:var(--text);font-size:1.0625rem}
.guide-hero{padding:clamp(18px,3.5vw,34px);border:1px solid var(--line);border-radius:26px;background:linear-gradient(135deg,var(--green-soft,#e9f4ed),var(--surface,#fff) 70%);box-shadow:var(--shadow)}
.guide-main h1,.guide-main h2,.guide-main h3{color:var(--text,#17261f)}
.guide-hero h1{margin:.15em 0 .45em;font-size:clamp(1.85rem,4.4vw,2.9rem);line-height:1.12;letter-spacing:-.01em}
.guide-hero .eyebrow{font-size:.86rem;font-weight:800;letter-spacing:.09em;color:var(--green)}
.guide-lead{max-width:64ch;color:var(--muted);font-size:clamp(1.08rem,2vw,1.22rem);line-height:1.65}
.guide-actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}
.guide-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:12px 24px;border-radius:14px;border:2px solid var(--line);background:var(--surface,#fff);color:var(--text);font-size:1.05rem;font-weight:800;text-decoration:none;text-align:center}
.guide-btn:hover,.guide-btn:focus-visible{border-color:var(--green)}
.guide-btn-primary{background:var(--green,#1c8058);border-color:var(--green,#1c8058);color:#fff}
.guide-fig{margin:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--surface,#fff);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.guide-fig img{display:block;width:100%;height:auto}
.guide-fig figcaption{padding:12px 16px;font-size:.98rem;line-height:1.5;color:var(--muted);border-top:1px solid var(--line)}
.guide-fig-wide{margin-top:8px}

.guide-toc{margin:28px 0;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--surface,#fff)}
.guide-toc>strong{display:block;font-size:1.2rem;margin-bottom:12px}
.guide-toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;counter-reset:toc}
.guide-toc li{counter-increment:toc;margin:0}
.guide-toc a{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--soft,#f7f9f6);color:var(--text);font-weight:700;line-height:1.3;text-decoration:none}
.guide-toc a::before{content:counter(toc);flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green);color:#fff;font-size:.95rem;font-weight:800}
.guide-toc a:hover,.guide-toc a:focus-visible{border-color:var(--green)}

#guide-steps{counter-reset:gs;display:grid;gap:22px}
.guide-step{counter-increment:gs;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:clamp(18px,3vw,36px);align-items:start;padding:clamp(18px,3vw,32px);border:1px solid var(--line);border-radius:26px;background:var(--surface,#fff);box-shadow:var(--shadow);scroll-margin-top:84px}
.guide-step h2{display:flex;align-items:center;gap:16px;margin:0 0 .8em;font-size:clamp(1.4rem,2.8vw,1.85rem);line-height:1.2}
.guide-num{position:relative;flex:none;display:block;width:64px;height:64px;border-radius:20px;background:var(--green-soft,#e9f4ed);color:var(--green);font-size:0;line-height:0}
.guide-num::before{content:"";position:absolute;inset:15px;background:var(--green);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.guide-num::after{content:counter(gs);position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;border:2px solid var(--surface,#fff);font-size:.9rem;font-weight:800;line-height:1}
#s1{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0114 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
#s2{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='6' cy='6' r='2'/%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Ccircle cx='18' cy='6' r='2'/%3E%3Ccircle cx='6' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='18' cy='12' r='2'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E")}
#s3{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 018 0v3'/%3E%3C/svg%3E")}
#s4{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='black'/%3E%3C/svg%3E")}
#s5{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Cpath d='M8.5 18H15a3 3 0 000-6H9a3 3 0 010-6h6.5'/%3E%3C/svg%3E")}
#s6{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E")}
#s7{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.5 6 11a6 6 0 01-12 0c0-4.5 6-11 6-11z'/%3E%3C/svg%3E")}
#s8{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 11l5 5 5-5M5 20h14'/%3E%3C/svg%3E")}

.guide-copy p,.guide-copy li{line-height:1.7}
.guide-copy p{margin:0 0 1em}
.guide-copy ul{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:10px}
.guide-copy li{position:relative;padding:12px 14px 12px 44px;border-radius:14px;background:var(--soft,#f7f9f6);border:1px solid var(--line)}
.guide-copy li::before{content:"";position:absolute;left:15px;top:1.05em;width:16px;height:16px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.guide-note{position:relative;margin:0 0 1em;padding:14px 16px 14px 52px;border:1px solid var(--green);border-radius:14px;background:var(--green-soft,#e9f4ed);color:var(--text);font-size:1rem;line-height:1.6}
.guide-note::before{content:"i";position:absolute;left:14px;top:14px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-family:Georgia,serif}
.guide-beta{border-color:#d59a38;background:#fff5df;color:#65420a;font-weight:700}
.guide-beta::before{content:"β";background:#b56a00;color:#fff;font-family:system-ui,sans-serif}
html[data-theme="dark"] .guide-beta{border-color:#8f6322;background:#241b0b;color:#ffe0a6}
html[data-theme="dark"] .guide-beta::before{background:#f1b84b;color:#201400}
.guide-shots{display:grid;gap:16px;justify-items:center}
.guide-shots .guide-fig{width:100%;max-width:380px}

.guide-tips{margin-top:22px;padding:clamp(18px,3vw,30px);border:1px solid var(--line);border-radius:26px;background:var(--surface,#fff);box-shadow:var(--shadow);scroll-margin-top:84px;--ic-tip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c8058' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 00-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0012 3z'/%3E%3C/svg%3E")}
.guide-tips h2{display:flex;align-items:center;gap:14px;margin:0 0 .8em;font-size:clamp(1.4rem,2.8vw,1.85rem)}
.guide-tips h2::before{content:"";flex:none;width:64px;height:64px;border-radius:20px;background:var(--green-soft,#e9f4ed) var(--ic-tip) center/50% no-repeat}
.guide-tips ul{list-style:none;margin:0 0 1.1em;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.guide-tips li{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--soft,#f7f9f6);line-height:1.6}

html[data-theme="dark"] .guide-hero{background:linear-gradient(135deg,#10231c,var(--surface,#111) 70%)}
html[data-theme="dark"] .guide-fig{box-shadow:none}
html[data-theme="dark"] .guide-main{--green:#5fd8a8;--green-soft:#14342a}
html[data-theme="dark"] .guide-num{background:rgba(99,210,170,.14)}
html[data-theme="dark"] .guide-btn-primary,html[data-theme="dark"] .guide-toc a::before,html[data-theme="dark"] .guide-num::after,html[data-theme="dark"] .guide-note::before{color:#06231a}

@media (max-width:900px){
  .guide-step,.guide-tips{scroll-margin-top:130px}
  .guide-step{grid-template-columns:minmax(0,1fr)}
  .guide-toc ol{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-shots{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
  .guide-shots .guide-fig{max-width:360px}
}
@media (max-width:600px){
  .guide-main{font-size:1.04rem;padding-top:16px}
  .guide-hero,.guide-step,.guide-tips,.guide-toc{border-radius:20px}
  .guide-toc ol,.guide-tips ul{grid-template-columns:minmax(0,1fr)}
  .guide-num,.guide-tips h2::before{width:54px;height:54px;border-radius:16px}
  .guide-num::before{inset:12px}
  .guide-step h2{gap:14px}
  .guide-actions .guide-btn{flex:1 1 100%}
  .guide-copy li{padding-left:42px}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}