:root{--guide-sticky-top:96px}html[data-theme=light] .guide-nav-link{background:var(--btn-secondary-bg);border-color:var(--line);color:var(--ink)}html[data-theme=light] .guide-nav-link:hover{border-color:color-mix(in srgb, var(--studio-pink) 35%, var(--line));background:color-mix(in srgb, var(--studio-pink) 6%, var(--btn-secondary-bg))}html[data-theme=light] .guide-nav-link-icon{color:var(--studio-pink)}html[data-theme=light] .guide-figure:has(.guide-view-full) .guide-zoom-hint{border-color:var(--line);background:#ffffffeb}.page-shell.guide-article-page{position:relative;overflow:visible}.guide-article-frame{width:100%;margin:0;position:relative;overflow:visible}.guides-group-title{color:var(--ink);letter-spacing:.01em;scroll-margin-top:var(--guide-sticky-top);margin:0 0 12px;font-size:18px;font-weight:750}.guides-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.guides-card{--guides-card-face:var(--surface-2);border:1px solid color-mix(in srgb, var(--studio-purple) 22%, transparent);background:var(--guides-card-face);box-shadow:0 2px 0 0 color-mix(in srgb, var(--ink) 28%, transparent);color:inherit;transition:border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);border-radius:10px;flex-direction:column;padding:20px 22px;text-decoration:none;display:flex;position:relative;overflow:hidden}.guides-card:before,.guides-card:after{content:"";z-index:0;aspect-ratio:1.73205;pointer-events:none;clip-path:polygon(100% 0,100% 100%,0 100%);background:color-mix(in srgb, #000 20%, var(--guides-card-face));width:auto;height:100%;position:absolute;top:0;right:0}.guides-card:before{aspect-ratio:1.19175;transform-origin:0 100%;top:-50%;right:2%;transform:scale(1.2)}html[data-theme=light] .guides-card{--guides-card-face:var(--panel);box-shadow:0 2px #1c152038}html[data-theme=light] .guides-card:before,html[data-theme=light] .guides-card:after{background:color-mix(in srgb, #000 1%, var(--guides-card-face))}.guides-card-copy,.guides-card-meta{z-index:2;position:relative}.guides-card-copy{flex-direction:column;gap:6px;display:flex}@media (hover:hover){.guides-card:hover{border-color:color-mix(in srgb, var(--studio-cyan) 45%, transparent);--guides-card-face:var(--surface-2);background:var(--guides-card-face);transform:translateY(-2px)}}.guides-card:focus-visible{outline:2px solid var(--studio-cyan);outline-offset:2px}.guides-card-title{-webkit-line-clamp:1;color:var(--ink);-webkit-box-orient:vertical;font-size:19px;font-weight:750;line-height:1.35;display:-webkit-box;overflow:hidden}.guides-card-desc{-webkit-line-clamp:3;color:var(--muted);-webkit-box-orient:vertical;font-size:14px;line-height:1.55;display:-webkit-box;overflow:hidden}.guides-card-meta{color:var(--muted);flex-shrink:0;justify-content:flex-start;align-items:center;gap:16px;margin-top:12px;font-size:14px;line-height:1;display:flex}.guides-card-updated{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.guides-card-views{font-variant-numeric:tabular-nums;flex-shrink:0;align-items:center;gap:4px;display:inline-flex}.guides-card-meta-icon{width:1.5em;height:1.5em;color:var(--muted)}.guide-breadcrumb{color:var(--muted);text-align:left;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:6px;margin:0;font-size:13px;display:flex}.guide-article-nav{text-align:left;justify-items:start;gap:12px;max-width:none;margin:0 0 22px;display:grid}.guide-toc-scope{position:relative}.guide-toc-rail{display:none}@media (min-width:1280px){.guide-toc-rail{z-index:5;pointer-events:none;width:200px;margin:0;display:block;position:absolute;top:0;bottom:0;left:calc(100% + 24px)}.guide-toc-rail .guide-toc{top:var(--guide-sticky-top);max-height:calc(100vh - var(--guide-sticky-top) - 16px);pointer-events:auto;position:sticky;overflow:auto}}.guide-toc{border:1px solid color-mix(in srgb, var(--studio-border,var(--border)) 55%, transparent);background:color-mix(in srgb, var(--surface-1) 88%, transparent);box-shadow:none;border-radius:8px;margin:0;overflow:hidden}html[data-theme=light] .guide-toc{border-color:color-mix(in srgb, var(--studio-border,var(--border)) 70%, transparent);box-shadow:none;background:#ffffffeb}.guide-toc-label{color:var(--muted);letter-spacing:.04em;margin:0;padding:8px 10px;font-size:11px;font-weight:650}html:lang(en) .guide-toc-label{letter-spacing:.06em;text-transform:uppercase}.guide-toc-list{gap:0;margin:0;padding:0 6px 8px;list-style:none;display:grid}.guide-toc-item a{color:var(--muted);border-left:2px solid #0000;padding:4px 6px;font-size:11px;line-height:1.35;text-decoration:none;display:block}.guide-toc-item--level-3 a{padding-left:14px;font-size:10.5px}.guide-toc-item a:hover,.guide-toc-item a.is-active{border-left-color:var(--guide-mark,var(--studio-cyan));color:var(--ink)}.guide-nav-link{border:1px solid color-mix(in srgb, var(--studio-purple) 28%, transparent);background:color-mix(in srgb, var(--surface-2) 88%, transparent);width:fit-content;color:var(--ink);transition:border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out), color var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);border-radius:999px;align-items:center;gap:8px;padding:8px 14px 8px 10px;font-size:14px;font-weight:650;line-height:1.2;text-decoration:none;display:inline-flex}.guide-nav-link-icon{width:16px;height:16px;color:var(--studio-cyan);transition:transform var(--duration) var(--ease-out);flex-shrink:0}.guide-nav-link--footer{padding-left:12px}@media (hover:hover){.guide-nav-link:hover{border-color:color-mix(in srgb, var(--studio-cyan) 50%, transparent);background:color-mix(in srgb, var(--studio-cyan) 8%, var(--surface-2));color:var(--ink)}.guide-nav-link:hover .guide-nav-link-icon{transform:translate(-2px)}}.guide-nav-link:focus-visible{outline:2px solid var(--studio-cyan);outline-offset:2px}.guide-nav-link:active{transform:translateY(1px)}.guide-breadcrumb a{color:var(--muted);font-weight:600;text-decoration:none}.guide-breadcrumb-current{color:color-mix(in srgb, var(--ink) 72%, var(--muted));font-weight:600}.guide-breadcrumb-sep{opacity:.55;align-items:center;display:inline-flex}.guide-breadcrumb-icon{width:12px;height:12px}@media (hover:hover){.guide-breadcrumb a:hover{color:var(--studio-cyan)}}.guide-header{--guides-card-face:var(--surface-2);border-bottom:1px solid color-mix(in srgb, var(--studio-border,var(--border)) 75%, transparent);background:var(--guides-card-face);max-width:none;margin:0;padding:22px 24px 18px;position:relative;overflow:hidden}.guide-header:before,.guide-header:after{content:"";z-index:0;aspect-ratio:1.73205;pointer-events:none;clip-path:polygon(100% 0,100% 100%,0 100%);background:color-mix(in srgb, #000 20%, var(--guides-card-face));width:auto;height:100%;position:absolute;top:0;right:0}.guide-header:before{aspect-ratio:1.19175;transform-origin:0 100%;top:-50%;right:2%;transform:scale(1.2)}html[data-theme=light] .guide-header{--guides-card-face:var(--panel)}html[data-theme=light] .guide-header:before,html[data-theme=light] .guide-header:after{background:color-mix(in srgb, #000 1%, var(--guides-card-face))}.guide-header>*{z-index:2;position:relative}.guide-kicker{color:var(--guide-mark,var(--studio-cyan));letter-spacing:.04em;margin:0 0 6px;font-size:12px;font-weight:700}html:lang(en) .guide-kicker{text-transform:uppercase}.guide-meta{color:var(--muted);margin:4px 0 0;font-size:12px}.guide-meta-author{color:var(--ink);font-weight:600}.guide-meta-sep{margin:0 4px}.guide-meta-updated{white-space:nowrap}.guide-figure{border:1px solid color-mix(in srgb, var(--studio-purple) 22%, transparent);background:var(--surface-2);border-radius:10px;width:fit-content;max-width:100%;margin:18px 0 22px;padding:0;position:relative;overflow:hidden}.guide-figure:has(.guide-view-full) .guide-zoom-hint{background:color-mix(in srgb, var(--panel) 82%, transparent);border:1px solid color-mix(in srgb, var(--studio-purple) 24%, transparent);color:var(--ink);pointer-events:none;opacity:.88;border-radius:6px;align-items:center;gap:5px;padding:5px 8px;font-size:11px;font-weight:650;line-height:1;display:inline-flex;position:absolute;top:10px;right:10px}.guide-zoom-hint-icon{width:14px;height:14px;color:var(--studio-cyan);flex-shrink:0}.guide-figure-compact,.guide-figure-medium{margin-left:0;margin-right:0}.guide-figure-compact{max-width:min(280px,100%)}.guide-figure-medium{max-width:min(440px,100%)}.guide-figure img{object-fit:contain;width:auto;max-width:100%;height:auto;max-height:min(70vh,720px);display:block}.guide-view-full{cursor:zoom-in}.guide-view-full:focus-visible{outline:2px solid var(--studio-cyan);outline-offset:-3px}.guide-figure figcaption{box-sizing:border-box;width:0;min-width:100%;color:var(--muted);border-top:1px solid color-mix(in srgb, var(--studio-purple) 16%, transparent);padding:10px 12px 12px;font-size:13px;line-height:1.45}.guide-related{border-top:1px solid color-mix(in srgb, var(--studio-purple) 22%, transparent);max-width:none;margin:40px 0 0;padding-top:8px}.guide-next-nav{border-top:1px solid color-mix(in srgb, var(--studio-purple) 22%, transparent);grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:none;margin:36px 0 0;padding-top:18px;display:grid}.guide-step-link{border:1px solid color-mix(in srgb, var(--studio-purple) 22%, transparent);background:var(--surface-2);min-width:0;color:inherit;border-radius:3px 9px;align-items:center;gap:10px;padding:13px 14px;text-decoration:none;display:flex}.guide-step-link--next{text-align:right;justify-content:flex-end}.guide-step-copy{gap:4px;min-width:0;display:grid}.guide-step-label{color:var(--studio-cyan);letter-spacing:.04em;font-size:11px;font-weight:750}html:lang(en) .guide-step-label{letter-spacing:.08em;text-transform:uppercase}.guide-step-title{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:650;line-height:1.35;overflow:hidden}.guide-step-icon{width:16px;height:16px;color:var(--studio-cyan);flex:none}@media (hover:hover){.guide-step-link:hover{border-color:color-mix(in srgb, var(--studio-cyan) 45%, transparent);background:color-mix(in srgb, var(--studio-cyan) 7%, var(--surface-2))}}.guide-back{max-width:none;margin:28px 0 0}@media (max-width:720px){.guides-card{padding:12px 14px}.guide-header{padding:16px 16px 14px}.guide-next-nav{grid-template-columns:1fr}.guide-step-link--next{text-align:left;justify-content:flex-start}}