main.page.guide-page{
  padding-top:138px;
  padding-bottom:54px;
  background:
    radial-gradient(circle at top left, rgba(14,165,198,.12), transparent 34%),
    radial-gradient(circle at top right, rgba(11,183,131,.08), transparent 36%),
    linear-gradient(180deg, #f8fbfe, #eef4f8);
}
.guide-shell{width:min(100% - 28px, 1220px);margin:0 auto;display:grid;gap:18px}
.guide-hero{
  padding:30px;
  border-radius:30px;
  border:1px solid rgba(13,42,63,.08);
  background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(239,248,252,.95));
  box-shadow:0 20px 46px rgba(15,23,42,.08);
}
.guide-kicker{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:rgba(14,165,198,.10);border:1px solid rgba(14,165,198,.18);
  font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#0b7ea6;
}
.guide-title{margin:16px 0 0;font-size:clamp(30px,4.7vw,50px);line-height:1.02;letter-spacing:-.05em;color:#07111f}
.guide-sub{margin-top:14px;color:#4b5d73;font-size:16px;line-height:1.72;max-width:920px}
.guide-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.guide-note{
  margin-top:16px;padding:15px 16px;border-radius:18px;background:rgba(14,165,198,.08);
  border:1px solid rgba(14,165,198,.16);color:#35546a;line-height:1.66;
}
.guide-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start}
.guide-nav{
  position:sticky;top:98px;padding:20px;border-radius:26px;border:1px solid rgba(13,42,63,.08);
  background:rgba(255,255,255,.96);box-shadow:0 16px 38px rgba(15,23,42,.06);display:grid;gap:14px;
}
.guide-nav h2{margin:0;font-size:18px;color:#07111f}
.guide-nav p{margin:0;color:#5a6b82;font-size:13px;line-height:1.6}
.guide-nav-list{display:grid;gap:8px}
.guide-nav-list a{
  display:block;padding:11px 12px;border-radius:14px;border:1px solid transparent;background:rgba(248,250,252,.84);
  text-decoration:none;color:#0f172a;font-weight:800;font-size:13.5px;line-height:1.45;
}
.guide-nav-list a:hover{border-color:rgba(14,165,198,.22);background:rgba(240,249,255,.96)}
.guide-nav-list a small{display:block;margin-top:2px;font-size:11px;font-weight:600;color:#6b7c93}
.guide-content{display:grid;gap:18px}
.guide-section{
  padding:24px;border-radius:28px;border:1px solid rgba(13,42,63,.08);background:rgba(255,255,255,.96);
  box-shadow:0 16px 40px rgba(15,23,42,.06);scroll-margin-top:108px;
}
.guide-section-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}
.guide-section-no{
  flex:0 0 auto;width:42px;height:42px;border-radius:16px;display:grid;place-items:center;
  font-size:18px;font-weight:900;color:#fff;background:linear-gradient(180deg,#0ea5c6,#0b7ea6);
  box-shadow:0 12px 24px rgba(14,165,198,.22);
}
.guide-section h2{margin:0;font-size:28px;letter-spacing:-.03em;color:#07111f}
.guide-section h3{margin:0;font-size:18px;color:#07111f}
.guide-section p{margin:10px 0 0;color:#53657c;line-height:1.72;font-size:14.6px}
.guide-lead{font-size:14px;color:#6b7c93;margin-top:4px}
.guide-subsection{margin-top:18px;padding-top:18px;border-top:1px solid rgba(13,42,63,.08)}
.guide-subsection:first-of-type{margin-top:0;padding-top:0;border-top:none}
.guide-media-row{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px}
.guide-media-row.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.guide-sequence{display:grid;gap:16px;margin-top:16px}
.guide-shot-card{
  padding:14px;border-radius:22px;border:1px solid rgba(13,42,63,.10);background:linear-gradient(180deg,#fbfdff,#f3f8fc);
  box-shadow:0 18px 38px rgba(2,8,23,.07);
}
.guide-shot-link{position:relative;display:block;border-radius:18px;overflow:hidden;border:1px solid rgba(13,42,63,.08);background:#eef5fb}
.guide-shot-link img{width:100%;height:auto;display:block}
.guide-shot-badge{
  position:absolute;right:12px;bottom:12px;padding:7px 10px;border-radius:999px;background:rgba(7,17,31,.82);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em;backdrop-filter:blur(4px);
}
.guide-shot-link:hover .guide-shot-badge{background:rgba(11,126,166,.92)}
.guide-shot-desc{margin-top:10px;font-size:13px;line-height:1.58;color:#576b82}
.guide-shot-desc strong{color:#07111f}
.guide-footer-note{margin-top:4px;padding:16px;border-radius:20px;background:rgba(15,23,42,.04);border:1px solid rgba(13,42,63,.08);color:#415467}
.footer-lite{margin-top:18px;display:grid;gap:12px}
.footer-lite p{margin:0;color:var(--muted);line-height:1.65}
.support-card{display:grid;gap:10px}
.blog-article-footer{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}
.footer .support-card{border-color:rgba(13,42,63,.08);background:rgba(255,255,255,.96)}
.guide-lightbox{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:24px;z-index:1400;
  background:rgba(5,10,18,.78);backdrop-filter:blur(8px);
}
.guide-lightbox.is-open{display:flex}
.guide-lightbox__panel{position:relative;max-width:min(96vw,1460px);width:100%;display:grid;gap:12px;justify-items:center}
.guide-lightbox__close{
  position:absolute;top:-8px;right:-8px;width:44px;height:44px;border:none;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.96);color:#07111f;font-size:22px;font-weight:900;box-shadow:0 18px 36px rgba(2,8,23,.18);
}
.guide-lightbox__image-wrap{max-width:100%;max-height:82vh;overflow:auto;border-radius:24px}
.guide-lightbox__image{display:block;max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:24px;background:#fff}
.guide-lightbox__caption{max-width:min(96vw,1080px);padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.94);color:#07111f;font-size:14px;line-height:1.58}
html[data-theme="dark"] .guide-page{
  background:
    radial-gradient(circle at top left, rgba(14,165,198,.18), transparent 34%),
    radial-gradient(circle at top right, rgba(59,130,246,.12), transparent 36%),
    linear-gradient(180deg, #07111f, #0b1623);
}
html[data-theme="dark"] .guide-hero,
html[data-theme="dark"] .guide-nav,
html[data-theme="dark"] .guide-section,
html[data-theme="dark"] .guide-shot-card,
html[data-theme="dark"] .footer .support-card{
  background:linear-gradient(180deg, rgba(18,27,36,.96), rgba(14,21,30,.98));
  border-color:rgba(84,101,120,.34);
  box-shadow:0 22px 44px rgba(0,0,0,.24);
}
html[data-theme="dark"] .guide-title,
html[data-theme="dark"] .guide-section h2,
html[data-theme="dark"] .guide-section h3,
html[data-theme="dark"] .guide-nav h2,
html[data-theme="dark"] .guide-shot-desc strong{color:#f5f9fc}
html[data-theme="dark"] .guide-sub,
html[data-theme="dark"] .guide-section p,
html[data-theme="dark"] .guide-nav p,
html[data-theme="dark"] .guide-lead,
html[data-theme="dark"] .guide-note,
html[data-theme="dark"] .guide-shot-desc,
html[data-theme="dark"] .guide-footer-note,
html[data-theme="dark"] .footer .support-card p,
html[data-theme="dark"] .guide-nav-list a small{color:#c8d6df}
html[data-theme="dark"] .guide-nav-list a{background:rgba(22,30,41,.92);color:#e6edf3;border-color:rgba(84,101,120,.18)}
html[data-theme="dark"] .guide-nav-list a:hover{background:rgba(18,36,46,.96);border-color:rgba(14,165,198,.24)}
html[data-theme="dark"] .guide-note{background:rgba(14,165,198,.10);border-color:rgba(14,165,198,.22)}
html[data-theme="dark"] .guide-subsection{border-top-color:rgba(84,101,120,.24)}
html[data-theme="dark"] .guide-shot-link{background:rgba(12,19,28,.85);border-color:rgba(84,101,120,.24)}
html[data-theme="dark"] .guide-footer-note{background:rgba(255,255,255,.04);border-color:rgba(84,101,120,.24)}
html[data-theme="dark"] .guide-lightbox__caption{background:rgba(12,19,28,.94);color:#e6edf3}
@media(max-width:980px){
  .guide-shell{width:min(100% - 20px, 1220px)}
  .guide-layout{grid-template-columns:1fr}
  .guide-nav{position:static}
}
@media(max-width:760px){
  main.page.guide-page{padding-top:154px}
  .guide-hero,.guide-section,.guide-nav{padding:20px}
  .guide-section h2{font-size:24px}
  .guide-media-row.two{grid-template-columns:1fr}
  .guide-section-head{gap:12px}
  .guide-section-no{width:38px;height:38px;border-radius:14px;font-size:16px}
  .guide-lightbox{padding:16px}
  .guide-lightbox__close{top:4px;right:4px}
}