.guide{max-width:1120px;margin:64px auto;padding:0 24px 80px}.guide header{max-width:760px}.guide h1{font-size:clamp(38px,6vw,70px);letter-spacing:-.055em;line-height:1.05}.guide p,.guide li,.guide dd{color:#d8bdc8;line-height:1.75}.guide label{display:block;margin:28px 0 8px}.guide input{width:100%;padding:16px;border:1px solid #814356;border-radius:12px;background:#210b16;color:#fff;font:inherit}.guide input:focus-visible,.guide a:focus-visible{outline:2px solid #ff8caf;outline-offset:4px}.guide-topics{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 40px}.guide-topics a{padding:8px 12px;border:1px solid #59313e;border-radius:8px;font-size:13px;color:#f5d6e1}.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.guide article,.guide aside{padding:28px;border:1px solid #623145;border-radius:18px;background:#190c15df;scroll-margin-top:30px}.guide article[hidden]{display:none}.guide h2{font-size:24px;letter-spacing:-.03em}.guide ol{padding-left:22px}.guide li+li{margin-top:12px}.guide aside{margin-top:24px}.guide dt{font-weight:700;margin-top:16px}.guide dd{margin:4px 0}.connection-map{display:flex;gap:8px;align-items:center;font-size:12px}.connection-map span{border:1px solid #9c4963;border-radius:8px;padding:10px;flex:1}.connection-map b{color:#ff729a}@media(max-width:700px){.guide-grid{grid-template-columns:1fr}.guide{margin-top:36px}.guide article{padding:22px}.guide-topics{gap:7px}}
@media(max-width:700px){.guide-grid{grid-template-columns:minmax(0,1fr)}.guide article{min-width:0;overflow-wrap:anywhere}.connection-map{flex-wrap:wrap}.connection-map span{min-width:0;padding:6px}.guide+.site-nav{padding-inline:20px}}

.guide-photo{margin:24px 0 0}.guide-photo img{display:block;max-width:100%;width:100%;height:auto;border:1px solid #633145;border-radius:10px;background:#10090e}.guide-photo figcaption{color:#bb9bab;font-size:12px;line-height:1.6;margin-top:10px}.guide h3{margin-top:24px;font-size:18px}.guide article a,.guide-example-note{color:#ef9fb6}.guide article{min-width:0}.guide-photo a:focus-visible{outline:2px solid #ff8caf}

.guide-photo img{object-fit:contain;aspect-ratio:auto}.guide-photo a{display:block;cursor:zoom-in}
.guide-photo-viewer{width:min(1140px,94vw);max-width:94vw;max-height:92dvh;padding:16px;border:1px solid #804456;border-radius:14px;background:#150b12;color:#f7e5eb}
.guide-photo-viewer::backdrop{background:#000c}.guide-photo-viewer>div:first-child{display:flex;gap:12px;align-items:center;margin-bottom:14px}.guide-photo-viewer strong{margin-right:auto;font-size:14px}.guide-photo-viewer button{padding:10px;border:1px solid #794052;border-radius:8px;background:#36141f;color:#fff;cursor:pointer;min-height:44px}.guide-photo-area{overflow:auto;max-height:72dvh}.guide-photo-area img{display:block;max-width:100%;height:auto;margin:auto}.guide-photo-area.original-size img{max-width:none;width:auto}

/* Handbook typography and restrained chapter surfaces. */
.guide{max-width:1100px}.guide h1{font-size:clamp(34px,5vw,52px);line-height:1.12;letter-spacing:-.035em;margin:18px 0}
.guide header>p{max-width:600px;font-size:16px}.guide label{font-size:13px;color:#c5b2bb}
.guide input{background:#170c1280;border-color:#ffffff26;border-radius:9px;padding:14px 16px}
.guide-topics{gap:8px}.guide-topics a{background:#170c1255;border-color:#ffffff20;border-radius:7px;min-height:40px;display:inline-flex;align-items:center}
.guide-topics a:hover{background:#3a172580;border-color:#c6718b80}
.guide article,.guide aside{background:#170c12a3;border-color:#ffffff20;border-radius:12px;padding:28px}
.guide h2{font-size:21px;line-height:1.3;letter-spacing:-.025em}.guide p,.guide li,.guide dd{font-size:14px;color:#ccbdc5;line-height:1.85}
.guide ol{padding-left:20px}.guide li::marker{color:#e69aae;font-variant-numeric:tabular-nums}.guide li+li{margin-top:16px}
.guide-photo img{border-color:#ffffff24;border-radius:8px}.guide-photo figcaption{color:#b6a4ae;font-size:12px}
@media(max-width:700px){.guide{padding-inline:20px}.guide article,.guide aside{padding:22px}.guide-topics a{font-size:12px}}

/* Keep screenshots readable in narrow browser panels and on tablets. */
@media(max-width:1000px){.guide-grid{grid-template-columns:minmax(0,1fr)}}
