/* Reading-first layouts, scoped to the Sanyu guide collection. */
.guides-page{--guide-violet:#69587c;--guide-muted:#736c7b;--guide-line:#e1dbe5}
.guides-page .guide-wrap{max-width:1264px;padding-block:46px 64px}
.guides-page .guide-index-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:35px}
.guides-page .guide-kicker{font-size:12px;font-weight:550;letter-spacing:.16em;color:#73627f;margin:0 0 15px}
.guides-page .guide-index-heading h1{font-size:48px;line-height:1.3;margin:0;letter-spacing:-.035em}
.guides-page .guide-index-heading h1 span{display:block;font-size:23px;font-weight:400;color:#76687f;margin-top:13px;letter-spacing:0}
.guides-page .guide-index-heading>p{font-size:15px;line-height:1.9;color:var(--guide-muted);margin:0 0 2px}
.guides-page .guide-preview-note{display:flex;align-items:center;gap:13px;font-size:14px;color:#74677e;line-height:1.6;margin:0 0 22px;padding:12px 16px;border:1px dashed #d6cbdc;border-radius:10px;background:#fcfafc}
.guides-page .guide-preview-note span{font-size:12px;white-space:nowrap;font-weight:600;color:#6e587e}
.guides-page .guide-collection{display:grid;gap:26px}
.guides-page .guide-feature{display:grid;grid-template-columns:.93fr 1.07fr;position:relative;overflow:hidden;min-height:385px;border:1px solid #e5dfea;border-radius:22px;background:#eeE9f3}
.guides-page .guide-tone-windows{background:#e7eef1;border-color:#dce5e7}
.guides-page .guide-feature-copy{padding:38px 0 38px 42px;align-self:center;z-index:1}
.guides-page .guide-issue{display:flex;align-items:center;gap:15px;margin:0 0 26px;color:#776584;font-size:13px;letter-spacing:.03em}
.guides-page .guide-issue>span{display:inline-grid;place-content:center;width:33px;height:33px;border:1px solid #bcacc9;border-radius:50%;font-size:12px;font-family:ui-monospace,monospace}
.guides-page .guide-feature h2{font-size:clamp(27px,2.85vw,40px);line-height:1.48;max-width:400px;font-weight:550;margin:0 0 15px;letter-spacing:-.03em;color:#3e334b}
.guides-page .guide-feature h2 a{color:inherit;text-decoration:none}
.guides-page .guide-feature-summary{font-size:17px;line-height:1.9;color:#72657e;max-width:375px;margin:0 0 26px}
.guides-page .guide-read{display:inline-flex;align-items:center;justify-content:space-between;gap:33px;padding:13px 22px;background:#746084;border:1px solid #746084;color:#fff;border-radius:10px;font-size:16px;font-weight:500;text-decoration:none;min-height:48px;transition:background .2s,transform .2s}
.guides-page .guide-read:hover{background:#5d496e;transform:translateY(-2px)}
.guides-page .guide-read>span{font-size:21px;line-height:1}
.guides-page .guide-feature-art{display:grid;align-self:stretch;align-items:center;padding:12px 3px 12px 0;overflow:hidden}
.guides-page .guide-feature-art img{display:block;width:100%;height:100%;max-height:410px;object-fit:contain;transition:transform .4s}
.guides-page .guide-feature:has(a:hover) .guide-feature-art img{transform:translateY(-4px)}
.guides-page .guide-tone-windows .guide-issue,.guides-page .guide-tone-windows .guide-feature-summary{color:#536b73}
.guides-page .guide-tone-windows .guide-read{background:#5b737c;border-color:#5b737c}
.guides-page .guide-tone-windows .guide-read:hover{background:#405b65}
.guides-page .guide-tone-windows .guide-issue>span{border-color:#9fb6bd}
.guides-page .guide-tone-windows h2{color:#304d56}
.guides-page .guide-companion{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:38px;margin-top:42px;border-top:1px solid var(--guide-line)}
.guides-page .guide-companion h2{font-size:26px;margin:6px 0;color:#4f425e}
.guides-page .guide-companion p{font-size:16px;color:var(--guide-muted);margin:0}
.guides-page .guide-companion .guide-read{background:transparent;color:#6f5b80;border-color:#cfc2d9;flex-shrink:0}
.guides-page .guide-companion .guide-read:hover{background:#eee8f3}
.guides-page .guide-empty{padding:40px;background:#fff;border-radius:18px}
.guides-page .guide-empty p{margin-block:15px}
.guides-page .guide-breadcrumb{display:flex;gap:14px;align-items:center;font-size:14px;color:#7b6b88;margin-bottom:25px}
.guide-detail-page .guide-wrap{padding-top:26px}
.guides-page .guide-article-hero{display:grid;grid-template-columns:1.1fr 1fr;background:#eee9f3;border-radius:20px;overflow:hidden;border:1px solid #e1d8e8}
.guides-page .guide-article-hero.guide-tone-windows{background:#e7eef1;border-color:#dce5e7}
.guides-page .guide-article-intro{padding:40px 0 38px 38px;align-self:center}
.guides-page .guide-article-intro h1{font-size:clamp(30px,3.4vw,43px);line-height:1.45;margin:0 0 16px;max-width:550px}
.guides-page .guide-article-intro>p:not(.guide-kicker){font-size:17px;color:#73677f;line-height:1.85;max-width:460px;margin:0}
.guides-page .guide-byline{display:flex;flex-wrap:wrap;gap:20px;font-size:13px;color:#7c6a89;margin-top:26px}
.guides-page .guide-article-art{display:grid;align-items:center;padding-right:10px}
.guides-page .guide-article-art img{display:block;width:100%;height:100%;max-height:335px;object-fit:contain}
.guides-page .guide-reading-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:64px;padding-top:48px;align-items:start}
.guides-page .guide-toc{position:sticky;top:104px;font-size:14px}
.guides-page .guide-toc details{border-bottom:1px solid var(--guide-line);padding-bottom:20px}
.guides-page .guide-toc summary{font-size:17px;font-weight:550;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;color:#564361}
.guides-page .guide-toc summary::-webkit-details-marker{display:none}
.guides-page .guide-toc nav{display:grid;gap:3px;margin-top:18px}
.guides-page .guide-toc nav a{display:flex;gap:12px;font-size:15px;color:#75677f;padding:9px 12px;line-height:1.75;border-radius:8px}
.guides-page .guide-toc nav a span{font-size:12px;color:#92809f;margin-top:3px;font-family:ui-monospace,monospace}
.guides-page .guide-toc nav a:hover,.guides-page .guide-toc nav a[aria-current]{background:#eae3f1;color:#553d66}
.guides-page .guide-toc>p{font-size:13px;color:#82738c;margin:16px 0 10px}
.guides-page .guide-toc>a{font-size:13px;color:#766187;text-decoration:underline;text-underline-offset:5px}
.guides-page .guide-article{max-width:860px;font-size:18px;line-height:1.95;min-width:0;color:#48414f}
.guides-page .guide-step{scroll-margin-top:106px;padding-bottom:36px;margin-bottom:34px;border-bottom:1px solid var(--guide-line)}
.guides-page .guide-step-title{display:flex;align-items:baseline;gap:18px;margin-bottom:20px}
.guides-page .guide-step-title>span{font-size:17px;font-family:ui-monospace,monospace;color:#9b87ac}
.guides-page .guide-step h2{font-size:28px;line-height:1.5;margin:0;color:#44334f}
.guides-page .guide-step>p{margin-bottom:18px;overflow-wrap:anywhere}
.guides-page .guide-warning{border-left:3px solid #b39466;background:#f2eee5;border-radius:0 10px 10px 0;padding:18px 22px;margin:24px 0;font-size:16px;color:#725939}
.guides-page .guide-warning strong{font-size:15px;font-weight:600}.guides-page .guide-warning p{margin:6px 0 0}
.guides-page .guide-figure{margin:26px 0}.guides-page .guide-figure>a{display:block;position:relative;background:#eeebf0;padding:10px;border:1px solid #ded8e4;border-radius:12px;overflow:hidden}
.guides-page .guide-figure img{display:block;width:100%;height:auto;max-height:850px;object-fit:contain;border-radius:5px}
.guides-page .guide-figure>a>span{position:absolute;right:19px;bottom:19px;background:#fffffff0;color:#695378;box-shadow:0 2px 15px #3c294a12;border:1px solid #e7dcec;border-radius:7px;font-size:12px;padding:4px 10px}
.guides-page .guide-figure figcaption{font-size:14px;line-height:1.8;color:#82738e;text-align:center;margin-top:10px}
.guides-page .guide-source{font-size:14px;line-height:1.9;color:#7d6e89}.guides-page .guide-source a{text-decoration:underline;text-underline-offset:4px}
.guides-page .guide-draft-message{display:flex;gap:26px;max-width:880px;margin:45px auto;padding:30px;border:1px dashed #d6cadf;border-radius:14px}
.guides-page .guide-draft-icon{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;color:#9380a4;background:#eae3f1;border-radius:12px;font-size:26px}
.guides-page .guide-draft-message h2{font-size:24px;margin-bottom:10px}
.guides-page .guide-draft-message p{color:#80718b;font-size:16px;margin-bottom:19px}
.guides-page .guide-draft-message .guide-read{font-size:14px;padding:9px 16px;min-height:44px}
.guides-page .guide-related{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:36px;margin-top:30px;border-top:1px solid var(--guide-line)}
.guides-page .guide-related>a{display:grid;grid-template-columns:1fr auto;gap:8px;padding:24px;border:1px solid #ded5e6;border-radius:12px;background:#f3eff6}
.guides-page .guide-related>a>span{font-size:13px;color:#8a779a}
.guides-page .guide-related strong{grid-row:2;font-size:20px;line-height:1.65;font-weight:500;color:#645071}
.guides-page .guide-related b{grid-column:2;grid-row:1/3;align-self:center;font-weight:400;font-size:25px;color:#8d759e}
.guides-page .guide-related>a:hover{background:#eae1f1}
.guides-page .guide-image-dialog{width:min(1300px,calc(100% - 32px));max-height:92dvh;padding:42px 20px 20px;border:0;border-radius:15px;background:#faf9fb;overflow:auto}
.guides-page .guide-image-dialog::backdrop{background:#302637b3;backdrop-filter:blur(5px)}
.guides-page .guide-image-dialog img{display:block;width:100%;height:auto;max-height:76dvh;object-fit:contain}
.guides-page .guide-image-dialog figcaption{color:#6e5e7a;font-size:14px;margin-top:12px;text-align:center}
.guides-page .guide-image-close{position:absolute;right:10px;top:7px;width:36px;height:36px;border:0;background:#ede5f3;color:#6d527f;border-radius:50%;font-size:24px;cursor:pointer}
@media(max-width:900px){.guides-page .guide-wrap{padding-block:30px 40px}.guides-page .guide-index-heading h1{font-size:40px}.guides-page .guide-index-heading h1 span{font-size:20px}.guides-page .guide-feature-copy{padding:28px 0 28px 26px}.guides-page .guide-feature{min-height:340px}.guides-page .guide-feature h2{font-size:29px}.guides-page .guide-feature-summary{font-size:16px}.guides-page .guide-issue{margin-bottom:17px}.guides-page .guide-article-intro{padding:28px 0 28px 26px}.guides-page .guide-article-intro h1{font-size:30px}.guides-page .guide-reading-layout{grid-template-columns:190px minmax(0,1fr);gap:32px}.guides-page .guide-toc nav a{font-size:14px;padding-inline:5px}}
@media(max-width:680px){.guides-page .guide-index-heading{display:block;margin-bottom:25px}.guides-page .guide-index-heading h1{font-size:35px}.guides-page .guide-index-heading h1 span{font-size:20px;margin-top:9px}.guides-page .guide-index-heading>p{display:none}.guides-page .guide-preview-note{font-size:13px;align-items:flex-start;padding:10px 12px}.guides-page .guide-feature{grid-template-columns:1fr;border-radius:17px}.guides-page .guide-feature-copy{padding:27px 25px 0}.guides-page .guide-feature h2{font-size:29px;max-width:100%}.guides-page .guide-feature-summary{max-width:100%;margin-bottom:20px;font-size:16px}.guides-page .guide-feature-art{padding:0 5px;margin-top:-4px}.guides-page .guide-feature-art img{height:auto;max-height:275px}.guides-page .guide-read{font-size:15px;padding:11px 18px;gap:27px}.guides-page .guide-companion{display:block;padding-top:27px;margin-top:30px}.guides-page .guide-companion h2{font-size:23px}.guides-page .guide-companion .guide-read{margin-top:22px}.guides-page .guide-article-hero{grid-template-columns:1fr}.guides-page .guide-article-intro{padding:25px 25px 0}.guides-page .guide-article-intro h1{font-size:30px}.guides-page .guide-article-art img{max-height:245px}.guides-page .guide-article-art{padding:0}.guides-page .guide-byline{margin-top:18px}.guides-page .guide-reading-layout{display:block;padding-top:28px}.guides-page .guide-toc{position:static;background:#efeaf3;border-radius:10px;padding:16px 20px;margin-bottom:30px}.guides-page .guide-toc details{border:0;padding:0}.guides-page .guide-toc nav{grid-template-columns:1fr 1fr;gap:7px 13px}.guides-page .guide-toc>p:empty{display:none}.guides-page .guide-toc>a{display:none}.guides-page .guide-step-title{gap:12px}.guides-page .guide-step h2{font-size:25px}.guides-page .guide-article{font-size:17px}.guides-page .guide-draft-message{gap:15px;margin:25px 0;padding:22px 18px}.guides-page .guide-draft-icon{display:none}.guides-page .guide-draft-message h2{font-size:23px}.guides-page .guide-related{grid-template-columns:1fr;gap:14px;padding-top:26px}.guides-page .guide-related>a{padding:20px}.guides-page .guide-related strong{font-size:19px}.guides-page .guide-figure>a>span{font-size:11px;bottom:13px;right:13px}}
@media(prefers-reduced-motion:reduce){.guides-page .guide-read,.guides-page .guide-feature-art img{transition:none}.guides-page .guide-feature:has(a:hover) .guide-feature-art img,.guides-page .guide-read:hover{transform:none}}

.guides-page :is(h1,h2){text-wrap:balance}
.guides-page .guide-resource-links{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.guides-page .guide-resource-links a{display:inline-flex;gap:16px;align-items:center;font-size:14px;line-height:1.6;background:#ebe5f1;color:#624c75;border:1px solid #d8cce2;padding:10px 14px;border-radius:8px;min-height:44px;text-decoration:none}
.guides-page .guide-resource-links a:hover{background:#ded2e9;border-color:#bdabcb}
.guides-page .guide-diagram>a{padding:0;background:#f6f3f8}
.guides-page .guide-diagram img{border-radius:12px}
@media print{.header-shell,.site-footer,.guide-toc,.guide-resource-links,.guide-related,.guide-image-dialog,.back-top{display:none!important}.guides-page .guide-reading-layout{display:block}.guides-page .guide-article{max-width:none}.guides-page .guide-step{break-inside:avoid}.guides-page .guide-wrap{width:100%;padding:0}}
.guides-page .guide-labelled-block{border:1px solid #e1d8e8;background:#fcfafc;border-radius:11px;margin:18px 0;padding:20px 23px}
.guides-page .guide-labelled-block h3{font-size:20px;line-height:1.4;color:#665078;margin:0 0 9px;font-weight:600}
.guides-page .guide-labelled-block p{font-size:17px;line-height:1.95;margin:0}
@media(max-width:680px){.guides-page .guide-labelled-block{padding:18px}.guides-page .guide-labelled-block h3{font-size:19px}.guides-page .guide-labelled-block p{font-size:16px}}

.guides-page .guide-image-stage{overflow:auto;max-height:76dvh;overscroll-behavior:contain}
.guides-page .guide-image-pan-note{display:none}
@media(max-width:680px){.guides-page .guide-image-dialog{padding:42px 14px 14px;overflow:hidden}.guides-page .guide-image-stage{max-height:65dvh}.guides-page .guide-image-stage img{width:900px;min-width:900px;max-width:none;height:auto;max-height:none}.guides-page .guide-image-dialog figcaption{font-size:12px;line-height:1.6}.guides-page .guide-image-pan-note{display:block;color:#6a507d;font-size:12px;text-align:center;margin:8px 0 0}}