/* How-to guides (tools/i18n/howto.py writes the pages) */
.howto-page{background:var(--bg-deep)}
.guide-hero{padding:118px 0 46px;position:relative;overflow:hidden;border-bottom:1px solid rgba(42,55,79,.55)}
.guide-hero::before{content:"";position:absolute;inset:-60% 0 0;background:radial-gradient(circle at 50% 40%,rgba(107,159,255,.14),transparent 55%);pointer-events:none}
.guide-hero-inner{position:relative;max-width:1088px;padding-left:304px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin-bottom:18px;font-size:.8rem;color:var(--text-muted)}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--text-muted)}
.crumbs a{color:var(--text-body)}.crumbs a:hover{color:var(--accent-light)}
.crumbs [aria-current]{color:var(--text-label)}
.guide-hero h1{margin-bottom:16px;color:var(--text-title);font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;letter-spacing:-.035em}
.guide-meta{display:flex;flex-wrap:wrap;gap:8px}
.guide-meta span{padding:5px 10px;border:1px solid rgba(107,159,255,.16);border-radius:999px;background:rgba(31,38,51,.64);color:var(--text-label);font-size:.76rem}

.guide-layout{display:grid;grid-template-columns:220px minmax(0,760px);gap:60px;justify-content:center;align-items:start;padding-top:48px;padding-bottom:96px}
.guide-toc{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:thin}
.guide-toc-title{margin-bottom:10px;color:var(--text-title);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.guide-toc ol{list-style:none;border-left:1px solid rgba(42,55,79,.9)}
.guide-toc a{display:block;margin-left:-1px;padding:6px 12px;border-left:2px solid transparent;color:var(--text-muted);font-size:.8rem;line-height:1.3}
.guide-toc a:hover{color:var(--text-title);border-left-color:var(--accent)}

.guide{min-width:0;color:var(--text-body)}
.guide .lede{margin-bottom:28px;color:var(--text-label);font-size:1.08rem;line-height:1.7}
.guide h2{margin:52px 0 18px;color:var(--text-title);font-size:clamp(1.45rem,3.4vw,1.95rem);line-height:1.2;letter-spacing:-.02em;scroll-margin-top:84px}
.guide h3{margin:32px 0 12px;color:var(--text-title);font-size:1.14rem;line-height:1.3;scroll-margin-top:84px}
.guide p{margin:0 0 16px;font-size:.98rem;line-height:1.75}
.guide strong{color:var(--text-label);font-weight:650}
.guide a{color:var(--accent-light);text-decoration:underline;text-decoration-color:rgba(152,189,255,.35);text-underline-offset:3px}
.guide a:hover{text-decoration-color:var(--accent-light)}
.guide ul,.guide ol{margin:0 0 20px 1.3rem}
.guide li{margin:7px 0;padding-left:4px;line-height:1.65;font-size:.96rem}
.guide li::marker{color:var(--accent)}
.guide ol.steps{list-style:none;margin-left:0;counter-reset:step}
.guide ol.steps>li{position:relative;margin:0;padding:0 0 18px 44px;counter-increment:step}
.guide ol.steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:rgba(107,159,255,.14);border:1px solid rgba(107,159,255,.4);color:var(--accent-light);font-size:.8rem;font-weight:700;line-height:26px;text-align:center}
.guide ol.steps>li:not(:last-child)::after{content:"";position:absolute;left:14px;top:32px;bottom:4px;width:1px;background:rgba(107,159,255,.2)}
.guide kbd,.guide code{padding:2px 6px;border:1px solid rgba(107,159,255,.18);border-radius:5px;background:var(--bg-controls);color:#B9CFFF;font:500 .84em ui-monospace,SFMono-Regular,Menlo,monospace}
.guide table{width:100%;margin:22px 0 26px;border-collapse:separate;border-spacing:0;overflow:hidden;border:1px solid rgba(42,55,79,.85);border-radius:10px;font-size:.88rem}
.guide th,.guide td{padding:11px 13px;border-bottom:1px solid rgba(42,55,79,.68);text-align:left;vertical-align:top;line-height:1.5}
.guide th{background:var(--bg-controls);color:var(--text-title);font-weight:650}
.guide tr:last-child td{border-bottom:0}
.guide figure{margin:24px 0 28px}
.guide li figure{margin:14px 0 6px}
.guide li figure img{margin:0}
.guide figure img{display:block;max-width:100%;height:auto;margin:0 auto;border:1px solid rgba(42,55,79,.85);border-radius:10px;background:#0a0f17}
.guide figcaption{margin-top:9px;color:var(--text-muted);font-size:.8rem;line-height:1.5;text-align:center}
.guide aside{margin:22px 0;padding:15px 18px;border:1px solid rgba(107,159,255,.2);border-left:3px solid var(--accent);border-radius:9px;background:rgba(107,159,255,.06)}
.guide aside.warn{border-color:rgba(217,199,76,.3);border-left-color:#D9C74C;background:rgba(217,199,76,.06)}
.guide aside p:last-child,.guide aside ul:last-child,.guide aside ol:last-child{margin-bottom:0}
.guide dl{margin:0 0 20px}
.guide dt{margin-top:18px;color:var(--text-title);font-weight:650}
.guide dd{margin:6px 0 0;line-height:1.7}

.guide-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:22px 0 30px}
.guide a.guide-card{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid rgba(107,159,255,.16);border-radius:11px;background:rgba(23,30,43,.7);text-decoration:none;transition:transform .25s var(--ease-out-expo),border-color .25s,background .25s}
.guide a.guide-card:hover{transform:translateY(-3px);border-color:rgba(107,159,255,.5);background:rgba(42,55,79,.55)}
.guide-card strong{color:var(--text-title);font-size:1rem;line-height:1.3}
.guide-card span{color:var(--text-muted);font-size:.84rem;line-height:1.5}

.guide-cta{margin:56px 0 0;padding:30px;border:1px solid rgba(107,159,255,.24);border-radius:14px;background:linear-gradient(135deg,rgba(31,38,51,.98),rgba(23,30,43,.96));text-align:center}
.guide-cta h2{margin:0 0 10px;font-size:1.5rem}
.guide-cta p{max-width:540px;margin:0 auto 20px}
.guide .guide-cta .btn-primary{color:#fff;text-decoration:none}
.guide-more{margin-top:52px}
.guide-more h2{margin-top:0;font-size:1.25rem}
.guide-more ul{list-style:none;margin:0;display:grid;gap:8px}
.guide-more li{margin:0;padding:0}

:is(:lang(ja),:lang(ko),:lang(zh)) .guide-hero h1{letter-spacing:0}
:is(:lang(ja),:lang(zh)) .guide :is(h2,h3,p,li,td,dd){line-break:strict}
:lang(ja) .guide :is(h2,h3,p){word-break:auto-phrase}
:lang(ko) .guide :is(h2,h3,p,li){word-break:keep-all}

@media(max-width:900px){
  .guide-hero-inner{padding-left:24px}
  .guide-layout{grid-template-columns:1fr;gap:20px;padding-top:28px}
  .guide-toc{position:static;max-height:none;padding:14px 16px;border:1px solid rgba(42,55,79,.9);border-radius:10px;background:rgba(23,30,43,.7)}
}
@media(max-width:680px){
  .guide-hero{padding:98px 0 34px}
  .guide table{display:block;overflow-x:auto;font-size:.8rem}
  .guide th,.guide td{padding:9px 8px;hyphens:auto}
  .guide-cta{padding:24px 18px}
}