.guide-page{--guide-ink:var(--foreground);--guide-muted:#b3bac6;max-width:1280px;color:var(--guide-ink);overflow-wrap:anywhere;margin:auto;padding:64px 40px 112px}.guide-page a{transition:color .16s}.guide-page a:hover{color:var(--primary)}.guide-page :is(a,button,summary):focus-visible{outline:2px solid var(--primary);outline-offset:5px}.guide-header{max-width:930px;padding:16px 0 64px}.guide-back{color:var(--guide-muted);font-size:14px}.guide-header h1{letter-spacing:-.04em;max-width:24ch;margin:28px 0 24px;font-size:60px;font-weight:600;line-height:1.08}.guide-subtitle{color:var(--guide-muted);max-width:65ch;font-size:20px;line-height:1.65}.guide-actions{flex-wrap:wrap;align-items:center;gap:28px;margin-top:28px;font-size:16px;font-weight:500;display:flex}.guide-actions .guide-primary{background:var(--primary);color:var(--primary-foreground);border-radius:99px;align-items:center;gap:22px;padding:14px 23px;display:inline-flex}.guide-layout{grid-template-columns:200px minmax(0,1fr);align-items:start;gap:68px;display:grid}.guide-sidebar{position:sticky;top:88px}.guide-sidebar details summary{cursor:pointer;padding-bottom:16px;font-size:15px;font-weight:600;list-style:none}.guide-sidebar summary::-webkit-details-marker{display:none}.guide-sidebar ol{border-left:1px solid var(--border);padding:0;list-style:none}.guide-sidebar li a{color:var(--guide-muted);padding:8px 0 8px 17px;font-size:14px;line-height:1.4;display:block}.guide-article{min-width:0;max-width:880px}.guide-section{border-top:1px solid var(--border);margin:0 0 76px;padding-top:34px;scroll-margin-top:94px}.guide-section h2{letter-spacing:-.025em;max-width:28ch;margin:0 0 28px;font-size:34px;font-weight:600;line-height:1.2}.guide-section h3{letter-spacing:-.015em;margin:0 0 12px;font-size:23px;font-weight:550;line-height:1.3}.guide-page p{color:var(--guide-muted);max-width:68ch;margin:0 0 15px;font-size:16px;line-height:1.8}.guide-page p strong{color:var(--foreground);font-weight:550}.guide-page .guide-subtitle{font-size:20px;line-height:1.65}.guide-items>div{margin-bottom:30px}.guide-prose a{color:var(--foreground);text-underline-offset:5px;text-decoration:underline}.guide-steps{gap:26px;padding:0;list-style:none;display:grid}.guide-steps li{grid-template-columns:minmax(0,1fr);gap:15px;display:grid}.guide-step-number{color:#8cc7f5;font-variant-numeric:tabular-nums;font-size:14px;line-height:30px}.guide-steps h3{font-size:21px}.guide-reference-grid,.guide-branch{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:30px 0;display:grid}.guide-page figure{min-width:0;margin:0}.guide-page figure img{background:var(--card);border-radius:12px;width:100%;height:auto;display:block}.guide-page figcaption{color:var(--guide-muted);padding-top:10px;font-size:14px;line-height:1.5}.guide-page .guide-interface{background:var(--card);border:1px solid var(--border);border-radius:18px;max-width:672px;margin:30px 0;padding:10px}.guide-page .guide-interface-small{max-width:480px}.guide-ratios{border:1px solid var(--border);border-radius:12px;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:20px;max-width:480px;padding:25px 16px;display:flex}.guide-ratios>div{color:var(--guide-muted);justify-items:center;gap:10px;font-size:14px;display:grid}.guide-ratio-shape{border:1px solid var(--primary);background:var(--accent);border-radius:4px;width:64px;max-height:96px;display:block}.guide-examples{gap:52px;display:grid}.guide-example{min-width:0}.guide-photo-pair{grid-template-columns:1fr 1fr;gap:14px;max-width:680px;margin:18px 0 22px;display:grid}.guide-photo-pair img{aspect-ratio:3/4;object-fit:cover}.guide-example:last-child .guide-photo-pair img{aspect-ratio:1;object-position:center 32%}.guide-example-body{max-width:68ch}.guide-prompt{background:var(--card);border-left:2px solid #8cc7f5;border-radius:0 12px 12px 0;margin:18px 0;padding:22px 24px}.guide-prompt [data-prompt]{color:var(--foreground);-webkit-user-select:text;user-select:text;margin-bottom:14px}.guide-prompt button{border:1px solid var(--border);font:inherit;cursor:pointer;background:var(--secondary);color:var(--foreground);border-radius:99px;padding:8px 15px;font-size:16px}.guide-copy-status{color:var(--guide-muted);min-height:0;margin-top:8px;font-size:14px;display:block}.guide-faq details{border-bottom:1px solid var(--border);padding:20px 0}.guide-faq summary{cursor:pointer;justify-content:space-between;align-items:baseline;gap:20px;list-style:none;display:flex}.guide-faq summary::-webkit-details-marker{display:none}.guide-faq h3{margin:0;font-size:20px}.guide-faq summary>span{color:var(--guide-muted);font-size:24px}.guide-faq [open] summary>span{transform:rotate(45deg)}.guide-faq .guide-prose{padding-top:18px}.guide-final .guide-prose a{background:var(--primary);color:var(--primary-foreground);border-radius:99px;padding:12px 22px;text-decoration:none;display:inline-block}@media (max-width:1023px){.guide-page{padding:40px 28px 72px}.guide-layout{grid-template-columns:1fr;gap:30px}.guide-sidebar{position:static}.guide-sidebar ol{grid-template-columns:repeat(3,1fr);display:grid}.guide-header h1{font-size:48px}.guide-header{padding-bottom:40px}.guide-article{max-width:100%}}@media (max-width:639px){.guide-page{padding:32px 22px 52px}.guide-header h1{max-width:17ch;margin-top:24px;font-size:38px}.guide-page .guide-subtitle{font-size:18px}.guide-actions{gap:20px}.guide-sidebar ol{grid-template-columns:1fr 1fr}.guide-sidebar li a{padding:8px 10px;font-size:13px}.guide-section{margin-bottom:50px;padding-top:26px}.guide-section h2{font-size:28px}.guide-section h3{font-size:21px}.guide-faq h3{font-size:18px}.guide-page p{line-height:1.75}.guide-prompt{padding:18px}.guide-reference-grid,.guide-branch{gap:8px}.guide-page figcaption{font-size:12px}.guide-examples{gap:40px}.guide-photo-pair{gap:9px}.guide-steps li{grid-template-columns:minmax(0,1fr);gap:10px}}@media (prefers-reduced-motion:reduce){.guide-page a{transition:none}}
