.sp-landing{--sp-accent:#3455db;--sp-muted:#64748b;container-type:inline-size}.sp-topline{color:var(--sp-muted);justify-content:space-between;align-items:center;gap:16px;padding-top:28px;font-size:10px;display:flex}.sp-topline a{align-items:center;gap:8px;min-height:44px;display:flex}.sp-brand{letter-spacing:-.05em;align-items:center;gap:10px;margin:32px 0 24px;font-size:22px;font-weight:600;display:flex}.sp-brand small{letter-spacing:.1em;color:var(--sp-muted);margin-left:auto;font:7px monospace}.sp-hero{padding-bottom:24px}.sp-hero h1{font-family:var(--font-brand-display),sans-serif;letter-spacing:-.06em;font-size:clamp(32px,10.4cqw,118px);font-weight:500;line-height:1}.sp-landing em{font-family:var(--font-brand-serif),serif;font-weight:400}.sp-hero h1 em{color:var(--sp-accent)}.sp-hero-bottom{justify-content:space-between;align-items:flex-end;gap:24px;margin-top:30px;display:flex}.sp-hero-bottom p{color:var(--sp-muted);font-size:12px;line-height:1.9}.sp-button{color:#fff;background:#3455db;justify-content:center;align-items:center;gap:22px;min-height:48px;padding:14px 20px;font-size:12px;transition:background .18s;display:inline-flex}.sp-button:hover{background:#2943b5}.sp-scroll{letter-spacing:.14em;width:fit-content;color:var(--sp-muted);margin-top:26px;padding-block:12px;font:7px monospace;display:block}.sp-story{margin-top:30px;position:relative}.sp-stage{isolation:isolate;background:#edf1ff;height:550px;max-height:calc(100svh - 48px);position:sticky;top:24px;overflow:hidden}.sp-stage-label{letter-spacing:.08em;color:#56658c;z-index:3;justify-content:space-between;font:7px monospace;display:flex;position:absolute;top:22px;left:22px;right:22px}.sp-stage-label b{font-weight:400}.sp-photo{background:#e8e5df;width:55%;height:365px;transition:transform .5s;position:absolute;top:70px;left:4%;transform:rotate(-5deg)}.sp-photo img{object-fit:contain}.sp-photo>span{color:#fff;letter-spacing:.08em;background:#0f172ae6;padding:13px;font:6px monospace;position:absolute;bottom:0;left:0;right:0}.sp-panel-position{z-index:2;width:46%;transition:transform .5s;position:absolute;top:125px;right:4%;transform:rotate(4deg)}.sp-panel{background:#fff;min-height:275px;padding:22px;box-shadow:0 16px 35px #19393c16}.sp-panel-top{letter-spacing:-.04em;justify-content:space-between;align-items:center;gap:12px;font-size:14px;font-weight:600;display:flex}.sp-panel-top>span:last-child{color:var(--sp-muted);letter-spacing:0;font:6px monospace}.sp-panel-caption{color:var(--sp-muted);margin-top:24px;font-size:8px}.sp-panel h3{letter-spacing:-.05em;margin:15px 0 22px;font-size:clamp(22px,3.8cqw,40px);font-weight:500;line-height:1.04}.sp-panel h3 em{color:var(--sp-accent)}.sp-tags{flex-wrap:wrap;gap:6px;display:flex}.sp-tags span{color:#3455db;background:#edf1ff;padding:6px 8px;font:7px monospace}.sp-panel-foot{color:#3455db;border-top:1px solid #e2e8f0;margin-top:22px;padding-top:12px;font:7px monospace}.sp-variables{gap:8px;margin-top:16px;display:grid}.sp-variables>div{background:#edf1ff;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;display:flex}.sp-variables span{color:var(--sp-muted);width:100%;font:6px monospace}.sp-variables strong{font-size:11px;font-weight:500}.sp-variables i{margin-left:auto;font-size:10px;font-style:normal}.sp-result{font-family:var(--font-brand-serif),serif;margin-top:16px;font-size:clamp(16px,2.7cqw,26px);line-height:1.6}.sp-result mark{color:#1e293b;background:#fff3d9;padding-inline:2px}.sp-star{color:#f2c46d;font-size:65px;line-height:1;position:absolute;top:55px;right:8%}.sp-stage[data-stage="1"] .sp-panel-position,.sp-stage[data-stage="2"] .sp-panel-position{transform:rotate(0)}.sp-stage[data-stage="2"] .sp-photo{transform:rotate(-2deg)}.sp-stage-nav{z-index:4;gap:18px;display:flex;position:absolute;bottom:35px;left:22px}.sp-stage-nav a{color:#56658c;border-bottom:2px solid #0000;align-items:center;min-height:32px;font:7px monospace;display:flex}.sp-stage-nav a[aria-current]{color:#0f172a;border-color:#3455db}.sp-example-note{color:#56658c;font:6px/1.5 monospace;position:absolute;bottom:14px;left:22px;right:22px}.sp-chapters{z-index:4;pointer-events:none;position:relative}.sp-chapter{flex-direction:column;justify-content:center;width:49%;min-height:70svh;margin-left:auto;padding:340px 0 40px;scroll-margin-top:90px;display:flex}.sp-chapter>*{background:var(--background);pointer-events:auto;padding:12px 18px}.sp-kicker{letter-spacing:.1em;color:var(--sp-muted);font:8px monospace}.sp-chapter h2{font-family:var(--font-brand-display),sans-serif;letter-spacing:-.04em;color:var(--sp-accent);font-size:clamp(26px,4.5cqw,46px);font-weight:500;line-height:1.06}.sp-chapter>p:last-of-type{color:var(--sp-muted);font-size:12px;line-height:1.9}.sp-static{display:none}.sp-notes{color:#f8fafc;background:#0f172a;margin-top:30px;padding:42px 30px}.sp-notes .sp-kicker{color:#b4bfdf}.sp-notes h2,.sp-faq h2,.sp-finish h2{font-family:var(--font-brand-display),sans-serif;letter-spacing:-.05em;margin:22px 0;font-size:clamp(32px,6.6cqw,68px);font-weight:500;line-height:1.04}.sp-notes h2 em{color:#f2c46d}.sp-note-grid{border-top:1px solid #ffffff26;grid-template-columns:1fr 1fr;gap:30px;margin-top:35px;padding-top:26px;display:grid}.sp-note-grid span{color:#b4bfdf;font:8px monospace}.sp-note-grid h3{letter-spacing:-.03em;margin:14px 0;font-size:18px;font-weight:500}.sp-note-grid p{color:#c3ced9;font-size:12px;line-height:1.9}.sp-faq{grid-template-columns:.8fr 1.2fr;gap:30px;padding:65px 0;display:grid}.sp-faq h2{font-size:clamp(30px,5cqw,48px)}.sp-faq details{border-bottom:1px solid var(--border)}.sp-faq summary{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:20px 0;font-size:12px;list-style:none;display:flex}.sp-faq summary::-webkit-details-marker{display:none}.sp-faq summary span{font-size:18px}.sp-faq details[open] summary span{transform:rotate(45deg)}.sp-faq details p{color:var(--sp-muted);padding-bottom:20px;font-size:11px;line-height:1.9}.sp-finish{text-align:center;background:#edf1ff;flex-direction:column;align-items:center;padding:45px 20px 50px;display:flex}.sp-finish .sp-kicker{margin-top:20px}.sp-finish h2 em{color:var(--sp-accent)}.sp-finish>small{color:var(--sp-muted);margin-top:20px;font-size:9px}.sp-footer{padding:25px 0}@media (max-width:1023px){.sp-stage{max-height:calc(100svh - 90px);top:78px}}@container (max-width:560px){.sp-hero h1{font-size:10.5cqw}.sp-topline{font-size:8px}.sp-hero-bottom{flex-direction:column;align-items:flex-start;gap:20px}.sp-brand small{font-size:6px}.sp-stage{height:390px}.sp-stage-label{font-size:6px;left:14px;right:14px}.sp-photo{width:58%;height:230px;top:65px}.sp-panel-position{width:53%;top:100px;right:3%}.sp-panel{min-height:200px;padding:12px}.sp-panel-top{font-size:11px}.sp-panel-top>span:last-child{display:none}.sp-panel-caption{margin-top:14px;font-size:6px}.sp-panel h3{font-size:20px}.sp-tags{gap:3px}.sp-tags span{padding:4px;font-size:5px}.sp-panel-foot{margin-top:13px;padding-top:8px;font-size:5px}.sp-photo>span{padding:8px;font-size:4px}.sp-variables{gap:5px;margin-top:10px}.sp-variables>div{gap:4px;padding:7px}.sp-variables strong{font-size:8px}.sp-variables span{font-size:5px}.sp-result{font-size:14px}.sp-star{font-size:48px;top:48px}.sp-stage-nav{gap:12px;left:14px}.sp-stage-nav a{font-size:6px}.sp-example-note{font-size:5px;left:14px;right:14px}.sp-chapter{width:100%;min-height:90svh;padding:340px 0 40px}.sp-chapter h2{font-size:30px}.sp-notes{padding:30px 22px}.sp-note-grid,.sp-faq{grid-template-columns:1fr;gap:24px}.sp-faq{padding:45px 0}}@media (prefers-reduced-motion:reduce),(max-height:550px){.sp-stage{display:none}.sp-chapter{width:100%;min-height:0;padding:35px 0}.sp-static{margin-top:18px;padding:0;display:block}.sp-chapters{pointer-events:auto}.sp-panel{box-shadow:none;border:1px solid var(--border)}}.sp-panel-brand{align-items:center;gap:5px;display:flex}.sp-panel-brand img{flex-shrink:0}.sp-result mark{color:#805614}.sp-landing a:focus-visible,.sp-landing summary:focus-visible{outline-offset:4px;outline:2px solid #3455db}.sp-notes{background:#202c5d}.sp-photo>span{background:#202c5de6}@container (max-width:560px){.sp-panel-brand img{width:18px;height:18px}}.sp-static>img{width:100%;height:auto}
