.visual-gallery{background:var(--bg)}.visual-gallery:before{display:none}.visual-gallery .focus-demo{width:calc(100% - 40px);max-width:420px}.visual-gallery .focus-viewport{background:0 0;height:200px;overflow:visible}.visual-gallery .focus-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:48px;gap:4px;padding:22px}.visual-gallery .focus-card:nth-child(4),.visual-gallery .focus-card:nth-child(5){grid-column:span 1}.visual-gallery .focus-card{min-height:0;cursor:inherit}.motion-card:hover .visual-gallery .focus-card:not(:nth-child(5)),.card-open:focus-visible .visual-gallery .focus-card:not(:nth-child(5)),.visual-gallery.is-active .focus-card:not(:nth-child(5)){filter:blur(2px);opacity:.55}.motion-card:hover .visual-gallery .focus-card:nth-child(5),.card-open:focus-visible .visual-gallery .focus-card:nth-child(5),.visual-gallery.is-active .focus-card:nth-child(5){z-index:2;transform:scale(1.65)}@media (prefers-reduced-motion:reduce){.visual-gallery .focus-card{transition:none;filter:none!important}}.blueprint-visual{isolation:isolate;place-items:center;min-height:230px;display:grid;position:relative;overflow:hidden}.blueprint-visual:before{content:"";border:1px solid #dbdcf221;border:1px solid lab(88.1326% 2.97838 -10.8565/.13);border-color:oklch(96% .03 240/.36);border-radius:12px;position:absolute;inset:20px}.blueprint-visual.is-large{height:100%;min-height:100%}.blueprint-visual *{animation-duration:var(--preview-duration)}.visual-loader{background:var(--visual-b)}.loader-ring{aspect-ratio:1;background:conic-gradient(from 50deg, var(--accent), transparent 34%, transparent 68%, var(--brand));border-radius:50%;width:150px;animation:2.8s linear infinite spin;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 12px),#000 calc(100% - 11px));mask:radial-gradient(farthest-side,#0000 calc(100% - 12px),#000 calc(100% - 11px))}.visual-loader b{letter-spacing:.08em;font-size:12px;position:absolute}.visual-toggle{background:var(--visual-b)}.toggle-track{background:color-mix(in oklch, var(--visual-b), black 35%);border-radius:999px;width:180px;height:84px;padding:8px}.toggle-knob{background:var(--brand);width:68px;height:68px;animation:travel 3.4s var(--ease) infinite alternate;border-radius:50%;display:block}.visual-stack>span{background:#b4defc;background:lab(86.1283% -8.87641 -19.3614);border:1px solid #fff;border-radius:12px;width:185px;height:216px;position:absolute;transform:rotate(-11deg)translate(-24px,8px)}.visual-stack>span:nth-child(2){background:var(--accent);transform:rotate(8deg)translate(24px,8px)}.visual-stack>span:nth-child(3){color:#0b1723;color:lab(7.14007% -1.78304 -10.1929);animation:lift 3s var(--ease) infinite alternate;background:#d8e3ee;background:lab(89.5397% -2.11644 -7.10462);flex-direction:column;justify-content:end;padding:20px;display:flex}.visual-stack small{margin-top:6px}.visual-marquee{align-items:center;display:flex}.visual-marquee>span{width:max-content;font-family:var(--serif);white-space:nowrap;font-size:44px;animation:9s linear infinite marquee}.visual-sheet:before{display:none}.sheet-map{width:100%;height:100%;position:absolute;inset:0}.sheet-map-streets{fill:none;stroke:var(--line);stroke-width:10px}.sheet-map-water{fill:none;stroke:color-mix(in srgb, var(--brand-deep) 14%, var(--bg));stroke-width:38px}.sheet-map-route{fill:none;stroke:var(--brand-deep);stroke-width:2px;stroke-dasharray:3 5;stroke-linecap:round}.sheet-map-label{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:24px;padding:8px 12px;font-size:12px;font-weight:500;position:absolute;top:21%;left:47%}.sheet-card{border-top:1px solid var(--line);background:var(--surface);min-height:54%;color:var(--ink);transition:transform var(--preview-duration) var(--ease);border-radius:16px 16px 0 0;flex-direction:column;gap:7px;padding:16px 22px 22px;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(calc(100% - 14px))}.sheet-card i{background:var(--line);border-radius:4px;width:28px;height:3px;margin:0 auto 10px}.sheet-card small{color:var(--muted)}.motion-card:is(:hover,:focus-within) .sheet-card,.recommendations-grid a:is(:hover,:focus-visible) .sheet-card,.visual-sheet.is-active .sheet-card{transform:translateY(0)}.visual-tabs{background:var(--visual-b)}.tab-pill{text-align:center;background:color-mix(in oklch, var(--visual-b), black 35%);color:#fff;border-radius:11px;grid-template-columns:repeat(3,1fr);width:min(82%,310px);padding:6px;font-size:12px;display:grid;position:relative}.tab-pill i{width:calc(33.333% - 6px);animation:tabmove 4s var(--ease) infinite alternate;background:#005bb4;background:lab(38.3807% 4.98325 -54.8273);border-radius:7px;position:absolute;inset:6px auto 6px 6px}.tab-pill b{z-index:1;padding:10px 2px;position:relative}.visual-toast{background:var(--bg);padding:20px}.visual-toast:before{display:none}.visual-toast .signal-demo{width:100%;max-width:320px}.motion-card:is(:hover,:focus-within) .visual-toast .signal-toast,.recommendations-grid a:is(:hover,:focus-visible) .visual-toast .signal-toast{animation:2.4s linear infinite both signal-toast}@media (prefers-reduced-motion:reduce){.visual-toast .signal-toast{opacity:1;transform:none;animation:none!important}}.visual-timeline{background:var(--visual-b)}.visual-timeline i{background:#a6eaffb3;background:lab(88.8471% -19.4618 -19.2226/.7);width:1px;height:72%;position:absolute}.visual-timeline i:after{background:var(--accent);content:"";width:14px;height:14px;animation:timeline 3.8s var(--ease) infinite;border-radius:50%;position:absolute;top:0;left:-7px}.visual-timeline span{background:color-mix(in oklch, var(--visual-b), black 25%);border-radius:6px;padding:7px 10px;font-size:11px;position:absolute;left:calc(50% + 22px)}.visual-timeline span:first-of-type{top:43px}.visual-timeline span:nth-of-type(2){top:103px}.visual-timeline span:nth-of-type(3){top:163px}.visual-menu{background:#0a1121;background:lab(5.06322% .964694 -11.7604)}.visual-menu i{width:60px;height:8px;animation:menu-top 2.8s var(--ease) infinite alternate;border-radius:99px;position:absolute}.visual-menu i:nth-child(2){animation-name:menu-mid}.visual-menu i:nth-child(3){animation-name:menu-bottom}.visual-bookmark{background:var(--visual-b)}.bookmark-symbol{transform-origin:50%;width:72px;animation:2.4s linear infinite alternate bookmark-scale;overflow:visible}.bookmark-fill{fill:#175bc5;clip-path:inset(0 0 100%);animation:2.4s linear infinite alternate bookmark-fill}.bookmark-outline{fill:none;stroke:#175bc5;stroke-linejoin:round;stroke-width:2px}.visual-bookmark.is-active .bookmark-symbol{animation:none;transform:scale(1)}.visual-bookmark.is-active .bookmark-fill{clip-path:inset(0);animation:none}.visual-count{background:var(--visual-b);perspective:240px;font-size:62px}.count-number{color:inherit;font:inherit;transform-origin:bottom;backface-visibility:hidden}.count-old{animation:2.8s linear infinite alternate count-flip-out}.count-new{opacity:0;animation:2.8s linear infinite alternate count-flip-in}.visual-count.is-active .count-old{opacity:0;animation:none;transform:translateY(10px)rotateX(-88deg)}.visual-count.is-active .count-new{opacity:1;animation:none;transform:translateY(0)rotateX(0)}.visual-plus-close{background:radial-gradient(circle at 20% 15%,#00a3d838,#0000 34%),#100f20;background:radial-gradient(circle at 20% 15%,lab(61.9727% -23.0784 -38.8214/.22),#0000 34%),lab(4.96034% 3.74992 -11.3266)}.plus-close-stroke{background:var(--accent);transform-origin:50%;border-radius:999px;width:104px;height:12px;position:absolute}.visual-toggle.is-active .toggle-knob{background:var(--accent);animation:none;transform:translate(96px)}.visual-stack.is-active>span:nth-child(3){animation:none;transform:translateY(-25px)rotate(4deg)}.visual-tabs.is-active .tab-pill i{animation:none;transform:translate(200%)}.visual-menu.is-active i{animation:none}.visual-menu.is-active i:first-child{transform:rotate(45deg)}.visual-menu.is-active i:nth-child(2){opacity:0;transform:scaleX(.2)}.visual-menu.is-active i:nth-child(3){transform:rotate(-45deg)}.blueprint-visual{background:radial-gradient(circle at 22% 14%, #9ee8ff80, transparent 31%), linear-gradient(145deg, var(--visual-a), var(--visual-b));color:#fff}@supports (color:lab(0% 0 0)){.blueprint-visual{background:radial-gradient(circle at 22% 14%, lab(87.6865% -19.4486 -19.2174/.5), transparent 31%), linear-gradient(145deg, var(--visual-a), var(--visual-b))}}@keyframes hotspot-amber{to{box-shadow:0 0 0 38px color-mix(in oklch, var(--brand), transparent 100%)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes travel{0%{background:var(--brand);animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(0)}66.6667%{background:var(--accent);animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(102px)}to{background:var(--accent);transform:translate(96px)}}@keyframes lift{to{transform:translateY(-25px)rotate(4deg)}}@keyframes marquee{to{transform:translate(-33%)}}@keyframes tabmove{0%,20%{transform:translate(0)}55%,to{transform:translate(200%)}}@keyframes timeline{0%,17%{transform:translateY(0)}48%,64%{transform:translateY(58px)}to{opacity:0;transform:translateY(116px)}}@keyframes menu-top{0%,28%{transform:translateY(-22px)}65%,to{transform:rotate(45deg)}}@keyframes menu-mid{0%,28%{opacity:1}65%,to{opacity:0;transform:scaleX(.2)}}@keyframes menu-bottom{0%,28%{transform:translateY(22px)}65%,to{transform:rotate(-45deg)}}@keyframes bookmark-scale{0%,to{transform:scale(1)}35%{transform:scale(1.08)}}@keyframes bookmark-fill{0%{clip-path:inset(0 0 100%)}37.5%{clip-path:inset(0 0 100%);animation-timing-function:cubic-bezier(.16,1,.3,1)}to{clip-path:inset(0)}}.bookmark-symbol{animation-timing-function:ease-out}@keyframes count-flip-out{0%{opacity:1;animation-timing-function:ease-in;transform:translateY(0)rotateX(0)}42.8571%,to{opacity:0;transform:translateY(10px)rotateX(-88deg)}}@keyframes count-flip-in{0%,35.7143%{opacity:0;animation-timing-function:var(--ease);transform:translateY(-18px)rotateX(88deg)}92.8571%,to{opacity:1;transform:translateY(0)rotateX(0)}}.motion-card .visual-timeline i:after{animation-duration:var(--preview-duration);animation-play-state:paused}.motion-card:is(:hover,:focus-within) .visual-timeline i:after{animation-play-state:running}.plus-close-stroke:first-child{animation:plus-horizontal var(--preview-duration) var(--ease) both}.plus-close-stroke:last-child{animation:plus-vertical var(--preview-duration) var(--ease) both}.visual-plus-close.is-active .plus-close-stroke{animation:none}.visual-plus-close.is-active .plus-close-stroke:first-child{transform:rotate(45deg)}.visual-plus-close.is-active .plus-close-stroke:last-child{transform:rotate(-45deg)}@keyframes plus-horizontal{0%{transform:rotate(0)}70%,to{transform:rotate(45deg)}}@keyframes plus-vertical{0%{transform:rotate(90deg)}70%,to{transform:rotate(-45deg)}}.pattern-specimen{width:100%;height:100%;font:14px var(--sans);color:#e8f1ff;place-items:center;display:grid}.pattern-specimen *{animation-duration:var(--preview-duration);animation-fill-mode:both;animation-timing-function:var(--ease)}.specimen-icon{width:90px;height:90px;overflow:visible}.specimen-morph{animation-name:specimen-morph}@keyframes specimen-morph{0%{d:var(--path-from)}to{d:var(--path-to)}}.specimen-moon-mask{animation-name:moon-mask;animation-timing-function:linear}.specimen-rays{transform-origin:12px 12px;animation-name:retract-rays;animation-timing-function:linear}@keyframes moon-mask{0%{animation-timing-function:cubic-bezier(.32,.72,0,1);transform:translate(0)}83.3333%,to{transform:translate(-7px,7px)}}@keyframes retract-rays{0%{opacity:1;animation-timing-function:ease-out;transform:scale(1)rotate(0)}44.4444%,to{opacity:0;transform:scale(.6)rotate(45deg)}}.specimen-field{gap:8px;width:min(78%,260px);display:grid}.specimen-field>span{font-size:12px}.specimen-field>div{color:#e8f1ff;background:#20344f;border:1px solid #9cb0ca;border-radius:6px;padding:16px}.specimen-field small{color:#ffc6bf;font-size:12px}.specimen-focus>div{animation-name:field-ring}.specimen-focus>span{animation-name:field-label}.specimen-invalid>div{border-color:#ff9286;animation-name:field-shake}@keyframes field-ring{0%{box-shadow:0 0 #8eb9ff}to{box-shadow:0 0 0 3px #8eb9ff}}@keyframes field-label{0%{transform:translateY(0)}to{transform:translateY(-4px)}}@keyframes field-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(2px)}}.specimen-checkbox{width:74px;height:74px}.specimen-checkbox rect{fill:#fff;stroke:#175bc5;stroke-width:2px;animation-name:checkbox-fill;animation-timing-function:linear}.specimen-checkbox path{fill:none;stroke:#fff;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation-name:checkbox-draw;animation-timing-function:linear}@keyframes checkbox-fill{0%{fill:#fff;animation-timing-function:ease-out}30.7692%,to{fill:#175bc5}}@keyframes checkbox-draw{0%{stroke-dashoffset:100px}30.7692%{stroke-dashoffset:100px;animation-timing-function:ease-out}84.6154%,to{stroke-dashoffset:0}}.specimen-favorite{color:#175bc5;place-items:center;width:80px;height:80px;display:grid}.specimen-favorite svg{width:56px;height:56px;animation-name:favorite-pop;animation-timing-function:ease-out;overflow:visible}.specimen-favorite path{fill:#0000;stroke:currentColor;stroke-width:1.6px;stroke-linejoin:round;animation-name:favorite-fill;animation-timing-function:linear}.specimen-favorite circle{fill:currentColor;opacity:0;animation-name:favorite-particle;animation-timing-function:ease-out}@keyframes favorite-pop{0%,to{transform:scale(1)}35%{transform:scale(1.2)}}@keyframes favorite-fill{0%{fill:#0000;animation-timing-function:ease-out}30.9524%,to{fill:currentColor}}@keyframes favorite-particle{0%,30%{opacity:0;transform:translate(0)}31%{opacity:1}to{opacity:0;transform:translate(var(--particle-x), var(--particle-y))}}.specimen-copy{width:72px;height:72px;display:grid}.specimen-copy svg{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;width:72px;height:72px}.specimen-pages{animation-name:copy-out}.specimen-copied{animation-name:copy-in}@keyframes copy-out{0%{opacity:1;transform:translateY(0)}45%,to{opacity:0;transform:translateY(-4px)}}@keyframes copy-in{0%,38%{opacity:0;transform:translateY(4px)}85%,to{opacity:1;transform:translateY(0)}}.specimen-surface{isolation:isolate;color:#153650;background:#e8f1ff;border-radius:7px;place-items:center;min-width:168px;min-height:58px;padding:16px;display:grid;position:relative}.specimen-press{animation-name:surface-press;animation-timing-function:ease-out}@keyframes surface-press{0%,to{transform:translateY(0);box-shadow:0 3px #123c7d}50%{transform:translateY(2px);box-shadow:0 1px #123c7d}}.specimen-ripple{overflow:hidden}.specimen-ripple i{background:#175bc540;border-radius:50%;width:220px;height:220px;margin:-110px;animation-name:surface-ripple;position:absolute;top:38%;left:24%}@keyframes surface-ripple{0%{opacity:1;transform:scale(0)}66%{opacity:.5}to{opacity:0;transform:scale(1)}}.specimen-hold{min-width:190px;overflow:hidden}.specimen-hold i{z-index:-1;transform-origin:0;background:#b2cffb;animation-name:hold-fill;animation-timing-function:linear;position:absolute;inset:0}.specimen-hold-label,.specimen-hold-check{grid-area:1/1}.specimen-hold-label{animation-name:hold-label}.specimen-hold-check{animation-name:hold-check}@keyframes hold-fill{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes hold-label{0%,99%{opacity:1}to{opacity:0}}@keyframes hold-check{0%,99%{opacity:0}to{opacity:1}}.specimen-radial{place-items:center;width:104px;height:104px;display:grid}.specimen-radial svg{fill:none;stroke-width:4px;grid-area:1/1;width:104px;height:104px;transform:rotate(-90deg)}.specimen-ring-track{stroke:#7086a0}.specimen-ring-fill{stroke:#c1dcff;stroke-dasharray:100;animation-name:radial-fill;animation-timing-function:linear}@keyframes radial-fill{0%{stroke-dashoffset:100px}to{stroke-dashoffset:0}}.specimen-swipe>span{place-items:center;display:grid}.specimen-swipe>div{animation-name:swipe-reveal}@keyframes swipe-reveal{0%{transform:translate(0)}to{transform:translate(-88px)}}.specimen-drag-lane>.pickup-row{animation-name:drag-lift}@keyframes drag-lift{0%{transform:scale(1);box-shadow:0 0 #10203500}to{transform:scale(1.02);box-shadow:0 4px 8px #0002}}.specimen-drop{border:2px dashed #9cb0ca;border-radius:8px;place-items:center;width:230px;height:120px;animation-name:drop-target;display:grid;position:relative}.specimen-drop>span{animation-name:drop-label}.specimen-drop>i{color:#153650;background:#e8f1ff;border-radius:4px;padding:10px 14px;font-style:normal;animation-name:drop-item;position:absolute;top:-24px;left:12px}@keyframes drop-target{0%{border-color:#9cb0ca;box-shadow:0 0 #c1dcff}to{border-color:#c1dcff;box-shadow:0 0 0 2px #c1dcff}}@keyframes drop-label{0%{opacity:0}to{opacity:1}}@keyframes drop-item{0%{transform:translate(-20px,-8px)}to{transform:translateY(16px)}}.specimen-underline{padding-bottom:7px;font-size:18px;position:relative}.specimen-underline i{transform-origin:0;background:currentColor;height:2px;animation-name:hold-fill;position:absolute;bottom:0;left:0;right:0}.specimen-hotspot{place-items:center;width:32px;height:32px;display:grid;position:relative}.specimen-hotspot i,.specimen-hotspot span{border-radius:50%;position:absolute;inset:0}.specimen-hotspot span{color:#153650;background:#e8f1ff;place-items:center;font-size:20px;display:grid}.specimen-hotspot i{border:2px solid #e8f1ff;animation-name:hotspot-pulse}@keyframes hotspot-pulse{0%{opacity:.8;transform:scale(1)}38%,to{opacity:0;transform:scale(2.2)}}.specimen-magnetic{animation-name:magnetic-pull}.specimen-magnetic span{animation-name:magnetic-label}.specimen-cursor{color:#e8f1ff;text-underline-offset:7px;background:0 0;font-size:18px;text-decoration:underline}@keyframes magnetic-pull{0%{transform:translate(0)}to{transform:translate(8px,-6px)}}@keyframes magnetic-label{0%{transform:translate(0)}to{transform:translate(-2px,1px)}}.is-active .specimen-morph{d:var(--path-to)}.is-active .specimen-moon-mask{transform:translate(-7px,7px)}.is-active .specimen-rays{opacity:0}.is-active .specimen-focus>div{box-shadow:0 0 0 3px #8eb9ff}.is-active .specimen-focus>span{transform:translateY(-4px)}.is-active .specimen-checkbox rect{fill:#175bc5}.is-active .specimen-checkbox path{stroke-dashoffset:0}.is-active .specimen-favorite path{fill:currentColor}.is-active .specimen-favorite circle,.is-active .specimen-pages,.is-active .specimen-hold-label,.is-active .specimen-ripple i,.is-active .specimen-hotspot i{opacity:0}.is-active .specimen-copied,.is-active .specimen-hold-check{opacity:1}.is-active .specimen-ring-fill{stroke-dashoffset:0}.is-active .specimen-swipe>div{transform:translate(-88px)}.is-active .specimen-drag-lane>.pickup-row{box-shadow:0 4px 8px #0002}.is-active .specimen-drop{border-color:#c1dcff;box-shadow:0 0 0 2px #c1dcff}.is-active .specimen-drop>i{transform:translateY(16px)}.visual-drag .pattern-specimen,.visual-swipe .pattern-specimen{box-sizing:border-box;padding:24px}.visual-drag .pickup-lane,.visual-swipe .swipe-demo{width:100%;max-width:300px}.visual-drag .pickup-context{padding:8px 14px}.visual-drag .pickup-context small{display:none}.visual-player{background:var(--visual-b)}.specimen-player{--stage-bg:var(--bg);--stage-ink:var(--ink);--stage-grid:var(--line);--stage-muted:var(--muted);--stage-link:var(--brand-deep);pointer-events:none;justify-content:center;align-items:center;width:280px;height:340px;display:flex;position:absolute;transform:scale(.6)}.motion-card:hover .hero-player,.motion-card:focus-within .hero-player,.visual-player.is-active .hero-player{height:340px}.motion-card:hover .player-art,.motion-card:focus-within .player-art,.visual-player.is-active .player-art{transform:translate(45px,10px)scale(1)}.motion-card:hover .player-title,.motion-card:focus-within .player-title,.visual-player.is-active .player-title{transform:translate(-52px,183px)}.motion-card:hover .player-expand svg,.motion-card:focus-within .player-expand svg,.visual-player.is-active .player-expand svg{transform:rotate(180deg)}.motion-card:hover .player-details,.motion-card:focus-within .player-details,.visual-player.is-active .player-details{opacity:1;transition-delay:.15s;transform:none}@media (prefers-reduced-motion:reduce){.specimen-player *{transition:none!important}}
.blueprint-breadcrumb{min-width:0;color:var(--muted);align-items:center;gap:9px;margin-bottom:24px;font-size:13px;display:flex}.blueprint-breadcrumb a{color:var(--muted);font-weight:650;text-decoration:none}.blueprint-breadcrumb a:hover{color:var(--brand-deep)}.blueprint-breadcrumb>span:last-child{max-width:34ch;color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-weight:650;overflow:hidden}.blueprint-page-main{max-width:none;margin:0 auto;display:block}.blueprint-page-intro{margin-bottom:30px}.blueprint-title-row{max-width:760px}.blueprint-page-intro h1{letter-spacing:-.04em;text-wrap:balance;margin:8px 0 12px}.blueprint-title-row>div>p:not(.detail-kicker){max-width:54ch;color:var(--muted);text-wrap:pretty;margin:0;font-size:16px;line-height:1.55}.blueprint-build,.blueprint-breakdown{border-top:1px solid var(--line);margin-top:64px;padding-top:48px}.section-heading{justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:22px;display:flex}.section-heading h2{letter-spacing:-.035em;margin:0;font-size:26px}.section-heading p{max-width:64ch;color:var(--muted);margin:7px 0 0;font-size:14px;line-height:1.5}.section-heading>span{color:var(--muted);font-variant-numeric:tabular-nums;flex:none;font-size:12px;font-weight:700}.build-workspace{border:1px solid var(--line);background:var(--surface);overflow:hidden}.build-workspace .code-tabs{border-bottom:1px solid var(--line);align-items:center;gap:6px;min-height:60px;padding:8px 12px}.build-workspace .code-tab{min-height:42px}.build-code-panel{background:#02030c;background:lab(.977705% .640474 -3.29105);min-width:0}.code-toolbar{color:#a7b9d1;color:lab(74.372% -2.73556 -14.4267);border-bottom:1px solid #2e3752;border-bottom:1px solid lab(23.039% 2.43895 -18.1493);justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:0 18px;font-size:12px;display:flex}.code-toolbar>span{align-items:center;gap:9px;display:flex}.code-toolbar i{background:#1dcef8;background:lab(76.3311% -31.8474 -32.9669);border-radius:50%;width:8px;height:8px}.code-toolbar button{color:#fff;background:#0c1023;background:lab(4.95807% 2.85468 -13.4508);border:1px solid #3b4668;border:1px solid lab(29.9153% 2.9835 -21.766);border-radius:7px;padding:0 12px}.build-code-panel .code-block{color:#94e6ff;color:lab(86.5742% -21.6932 -21.5502);white-space:pre;background:#02030c;background:lab(.977705% .640474 -3.29105);border-radius:0;width:100%;height:520px;min-height:520px;margin:0;padding:22px 24px 28px;font-size:13px;line-height:1.62}.syntax-comment{color:#8d95ab;color:lab(61.5025% .673324 -13.0379);font-style:italic}.syntax-string{color:#7ddd9c;color:lab(80.8142% -40.2678 22.8165)}.syntax-tag{color:#23ccff;color:lab(76.1153% -28.8968 -39.2764)}.syntax-keyword{color:#c797fd;color:lab(70.0454% 33.2713 -44.4356)}.syntax-number{color:#f2b95a;color:lab(79.1432% 14.1568 55.5521)}.syntax-attribute{color:#65dfeb;color:lab(82.4251% -33.1614 -16.8157)}.syntax-punctuation{color:#96a6bb;color:lab(67.4271% -2.42266 -12.6356)}.phase-timeline{border-radius:12px;margin-top:22px}.blueprint-breakdown .breakdown-panel{margin-top:16px}.blueprint-breakdown .breakdown-panel h3{font-size:14px}.blueprint-breakdown .breakdown-panel p,.blueprint-breakdown .breakdown-panel li{font-size:13px;line-height:1.58}.breakdown-intent{grid-row:span 2}.breakdown-spec{gap:12px;margin:0;display:grid}.breakdown-spec div{grid-template-columns:80px 1fr;gap:12px;display:grid}.breakdown-spec dt{color:var(--muted)}.breakdown-spec dd{overflow-wrap:anywhere;margin:0}.property-chips{flex-wrap:wrap;gap:7px;display:flex}.property-chips span{background:var(--raised);color:var(--ink);padding:7px 9px;font-size:11px}.blueprint-recommendations{margin:0 auto;padding:0 clamp(20px,4vw,64px) clamp(40px,6vw,80px)}.recommendations-heading{justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px;display:flex}.recommendations-heading h2{letter-spacing:-.035em;margin:0;font-size:24px}.recommendations-heading a{color:var(--brand-deep);font-size:13px;font-weight:750;text-decoration:none}.recommendations-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.recommendations-grid>div{min-width:0;overflow:hidden}.recommendations-grid a{color:var(--ink);text-decoration:none;display:block}.recommendations-grid .blueprint-visual{min-height:190px}.recommendations-grid a>span{padding:15px 16px 17px;display:block}.recommendations-grid strong,.recommendations-grid small{display:block}.recommendations-grid strong{text-overflow:ellipsis;white-space:nowrap;font-size:15px;overflow:hidden}.recommendations-grid small{color:var(--muted);margin-top:4px;font-size:12px;font-weight:600}@media (max-width:1040px){.build-code-panel .code-block{height:470px;min-height:470px}}@media (max-width:720px){.blueprint-page-main{padding-inline:20px}.blueprint-page-intro h1{font-size:3rem}.blueprint-build,.blueprint-breakdown{margin-top:48px;padding-top:36px}.section-heading{flex-direction:column;align-items:flex-start;gap:8px}.build-workspace .code-tabs{overflow-x:auto}.build-code-panel .code-block{height:430px;min-height:430px;padding-inline:18px;font-size:12px}.blueprint-breakdown .breakdown-panel{grid-template-columns:1fr}.breakdown-intent{grid-row:auto}.recommendations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.recommendations-grid>div:last-child{grid-column:1/-1}}@media (max-width:520px){.blueprint-page-header{gap:14px;padding-inline:16px}.blueprint-page-header .wordmark{font-size:0}.blueprint-page-header .wordmark .mark{width:25px;height:25px}.blueprint-page-main{padding:24px 14px 34px}.blueprint-page-intro{margin-bottom:22px}.blueprint-breadcrumb{margin-bottom:20px}.blueprint-page-intro h1{font-size:2.55rem}.blueprint-build,.blueprint-breakdown{margin-top:42px;padding-top:30px}.build-workspace .code-tab{padding-inline:10px;font-size:12px}.build-code-panel .code-block{height:390px;min-height:390px}.phase-timeline{padding:16px}.blueprint-recommendations{padding-inline:14px}.recommendations-heading{flex-direction:column;align-items:flex-start;gap:8px}.recommendations-grid{grid-template-columns:1fr}.recommendations-grid>div:last-child{grid-column:auto}}.interactive-inspector{--studio-radius:12px;--motion-track-1:var(--brand-deep);--motion-track-2:color-mix(in oklch, var(--accent), var(--ink) 45%);--motion-track-3:color-mix(in oklch, var(--yellow), var(--ink) 45%);--motion-track-4:var(--muted);--studio-bg:var(--surface);--studio-stage:var(--bg);--studio-line:var(--line);--studio-text:var(--ink);--studio-muted:var(--muted);color:var(--studio-text);background:var(--studio-bg);border:1px solid var(--line);border-radius:var(--studio-radius);overflow:hidden}.live-preview{background:var(--studio-stage);position:relative}.stage-toolbar{z-index:1;pointer-events:none;justify-content:space-between;align-items:center;gap:12px;display:flex;position:absolute;inset:10px 16px auto}.stage-toolbar h2{color:var(--muted);margin:0;font-size:12px;font-weight:500}.stage-heading{pointer-events:auto;align-items:center;gap:8px;display:flex}.playground-close{width:44px;height:44px;color:var(--studio-muted);background:var(--studio-stage);border-radius:6px;place-items:center;text-decoration:none;display:grid}.playground-close:hover{background:var(--raised);color:var(--studio-text)}.stage-tools{pointer-events:auto;gap:4px;display:flex}.stage-tools button{min-width:32px;min-height:32px;color:var(--muted);background:var(--studio-stage);font:11px var(--sans);border:0;border-radius:5px;justify-content:center;align-items:center;padding:5px 8px;transition:background .15s;display:flex}.stage-tools button:hover{background:var(--raised)}.stage-tools svg{fill:none;stroke:currentColor;stroke-width:1.2px;width:15px;height:15px}.live-preview iframe{background:var(--studio-stage);border:0;width:100%;height:250px;display:block}.live-preview[data-preview=gallery] iframe{height:440px}.blueprint-title-row>div>p.blueprint-reference{margin-top:12px;font-size:13px}@media (max-width:600px){.live-preview[data-preview=gallery] iframe{height:380px}}.live-preview-footer{padding:0 16px 12px}.live-preview-footer p{color:var(--studio-muted);margin:0;font-size:11px;line-height:1.5}.captured-timeline{border-top:1px solid var(--studio-line);padding:12px 16px}.captured-toolbar,.captured-actions{align-items:center;gap:12px;display:flex}.capture-play{background:var(--ink);width:34px;height:34px;color:var(--surface);cursor:pointer;border:0;border-radius:50%;flex:0 0 34px;place-items:center;padding:0;transition:transform .18s,opacity .18s;display:grid}.capture-play:hover{transform:scale(1.06)}.capture-play:active{transform:scale(.94)}.capture-play svg{width:18px;height:18px}html[data-theme=dark] .capture-play{background:var(--raised);color:var(--ink);box-shadow:inset 0 0 0 2px var(--brand-deep), 0 0 0 1px var(--bg)}.capture-readout{font:11px var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--studio-muted);flex:none}.capture-readout strong{color:var(--studio-text);font-weight:400}.capture-time-value{width:var(--time-digits);text-align:right;display:inline-block}.captured-actions{flex:none;gap:6px}.captured-actions select,.capture-disclosure{min-height:32px;font:11px var(--mono);color:var(--studio-muted);cursor:pointer;background:0 0;border:0;border-radius:5px;padding:5px}.captured-actions select{color-scheme:normal}.capture-disclosure{white-space:nowrap;align-items:center;gap:4px;display:flex}.capture-disclosure:hover,.captured-actions select:hover{background:var(--raised);color:var(--ink)}.capture-disclosure svg{fill:none;stroke:currentColor;stroke-width:1.3px;width:14px;height:14px;transition:transform .2s}.capture-disclosure[aria-expanded=true]{background:var(--raised);color:var(--ink)}.capture-disclosure .capture-layers{width:16px;height:16px}.captured-seek{background:linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;flex:1 1 0;min-width:0;height:40px;display:block;position:relative}.capture-overlay-curve{pointer-events:none;position:absolute;top:5px;bottom:5px}.capture-overlay-curve svg{width:100%;height:100%;overflow:visible}.capture-overlay-curve path{fill:none;stroke:currentColor;stroke-width:1.3px;vector-effect:non-scaling-stroke}.capture-play:disabled,.capture-disclosure:disabled{opacity:.4;cursor:default;transform:none}.captured-seek input:disabled{cursor:default}.capture-cursor{left:var(--seek-progress);background:var(--ink);pointer-events:none;width:1px;position:absolute;top:4px;bottom:4px}.capture-cursor:before{content:"";background:var(--ink);border-radius:50%;width:5px;height:5px;position:absolute;top:-2px;left:-2px}.captured-seek input{appearance:none;cursor:ew-resize;background:0 0;border:0;width:100%;height:100%;margin:0;display:block;position:relative}.captured-seek input::-webkit-slider-thumb{appearance:none;background:0 0;width:1px;height:32px}.captured-seek input::-moz-range-thumb{background:0 0;border:0;width:1px;height:32px}.captured-toolbar[data-expanded=true]{margin-bottom:8px}.captured-tracks{gap:2px;display:grid}.captured-track{width:100%;min-height:42px;color:var(--studio-text);text-align:left;font:inherit;background:0 0;border:1px solid #0000;border-radius:5px;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:12px;padding:6px;transition:background .15s;display:grid}.captured-track:hover,.captured-track[aria-pressed=true]{background:var(--raised)}.captured-track-name{gap:3px;min-width:0;display:grid}.captured-track-name strong{text-transform:capitalize;align-items:center;gap:7px;font-size:11px;font-weight:500;display:flex}.captured-track-name strong i{background:var(--track-color);border-radius:1px;flex-shrink:0;width:5px;height:5px}.captured-track-name small{color:var(--studio-muted);text-overflow:ellipsis;white-space:nowrap;margin-left:12px;font-size:10px;overflow:hidden}.captured-track-rail{background:linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;height:24px;display:block;position:relative}.captured-track-bar{position:absolute;inset-block:0;overflow:visible}.captured-track-bar svg{width:100%;height:100%;padding:3px 0;overflow:visible}.captured-track-bar svg path{fill:none;stroke:var(--track-color);stroke-width:1.2px;vector-effect:non-scaling-stroke}.captured-track-rail>i{z-index:1;background:var(--ink);width:1px;position:absolute;top:-2px;bottom:-2px}.captured-details{border-top:1px solid var(--studio-line);flex-wrap:wrap;align-items:baseline;gap:20px;margin:10px 6px 0;padding-top:10px;display:flex}.captured-details>div{align-items:baseline;gap:8px;min-width:0;display:flex}.captured-details dt{color:var(--studio-muted);font-size:10px}.captured-details dd{color:var(--studio-text);font:11px var(--mono);overflow-wrap:anywhere;margin:0}.capture-empty{color:var(--studio-muted);margin:0;font-size:11px;line-height:1.5}.interactive-inspector :focus-visible{outline:2px solid var(--brand-deep);outline-offset:3px}@media (max-width:600px){.stage-toolbar{gap:8px;inset-inline:12px}.stage-tools{gap:0}.stage-tools button{padding-inline:6px}.live-preview iframe{height:220px}.live-preview-footer{padding-inline:12px}.captured-timeline{padding:10px 12px}.captured-toolbar{gap:8px}.captured-actions{gap:5px}.captured-actions select{padding-inline:4px}.capture-total{display:none}.capture-play{flex-basis:32px;width:32px;height:32px}.capture-readout{font-size:10px}.captured-track{grid-template-columns:84px minmax(0,1fr);gap:8px}.captured-details{gap:10px 16px}}@media (prefers-reduced-motion:reduce){.interactive-inspector *{transition:none!important}}.live-preview[data-preview=sheet] iframe{height:340px}.live-preview[data-preview=drag] iframe{height:400px}.blueprint-page-shell{overflow:clip}.sidebar-flight{pointer-events:none;z-index:90;position:fixed;inset:0;overflow:clip}.blueprint-page-shell .blueprint-page-main{grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1.8fr) minmax(380px,1fr);width:100%;height:100dvh;padding:0;display:grid}.blueprint-header-row{border-left:1px solid var(--line);grid-area:1/2;min-width:0;padding:0 28px}.playground-column{grid-area:1/1/span 2;min-width:0;min-height:0;padding:16px}.playground-column .interactive-inspector{flex-direction:column;height:100%;display:flex}.playground-column .live-preview{flex-direction:column;flex:1;min-height:180px;display:flex}.playground-column .live-preview>.preview-canvas{border-radius:calc(var(--studio-radius) - 1px) calc(var(--studio-radius) - 1px) 0 0;flex:1;min-height:0}.playground-column .live-preview .preview-canvas iframe{flex:none;min-height:0}.playground-column .live-preview-footer{flex:none}.playground-column .captured-timeline{flex:none;max-height:40%;overflow:auto}.blueprint-details-column{border-left:1px solid var(--line);grid-area:2/2;min-width:0;padding:0 28px 32px;overflow:auto}.blueprint-header-row .site-header{flex-wrap:wrap;gap:14px;height:auto;min-height:72px;padding:16px 0}.blueprint-header-row .site-nav{order:3;width:100%;margin:0}.blueprint-header-row .blueprint-page-intro{margin:20px 0 32px}.blueprint-header-row .blueprint-page-intro h1{font-size:2rem}.blueprint-header-row .blueprint-title-row>div>p:not(.detail-kicker){font-size:14px}.blueprint-details-column .blueprint-build,.blueprint-details-column .blueprint-breakdown{margin-top:28px;padding-top:24px}.blueprint-details-column .section-heading{gap:12px}.blueprint-details-column .section-heading h2,.blueprint-details-column .recommendations-heading h2{font-size:20px}.blueprint-details-column .breakdown-panel{grid-template-columns:1fr;gap:0}.blueprint-details-column .blueprint-recommendations{width:100%;margin:28px 0 0;padding:24px 0 0}.blueprint-details-column .recommendations-grid{grid-template-columns:1fr}.blueprint-details-column .recommendations-heading{flex-wrap:wrap;gap:12px}.blueprint-details-column .code-tabs{overflow-x:auto}.blueprint-details-column .code-tab{flex-shrink:0}.blueprint-details-column .timeline-phases{flex-wrap:wrap}@media (max-width:900px){.blueprint-page-shell .blueprint-page-main{height:auto;display:block}.blueprint-header-row{border-left:0;padding:0 20px}.playground-column{height:min(680px,75dvh);min-height:360px;padding:12px}.blueprint-details-column{border-left:0;padding:0 20px 32px;overflow:visible}}
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f9fafb;--surface:#fff;--raised:#ebeff4;--ink:#1b2026;--muted:#565e69;--line:#d0d5db;--glass-highlight:#fffc;--brand:#1874ed;--brand-deep:#0057bf;--accent:#60ceef;--yellow:#bce669;--visual-a:#1a3453;--visual-b:#0b2039;--sans:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--serif:var(--sans);--mono:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;--ease:cubic-bezier(.22, 1, .36, 1);--duration-fast:.2s;--z-header:10;--z-skip:20}@supports (color:lab(0% 0 0)){:root{--bg:lab(98.2562% -.166595 -.736153);--surface:lab(100% 0 0);--raised:lab(94.184% -.651181 -2.93596);--ink:lab(11.7967% -.97312 -5.38884);--muted:lab(39.6292% -1.42731 -7.239);--line:lab(84.8995% -.804931 -3.6648);--glass-highlight:lab(100% 0 0/.8);--brand:lab(49.4224% 10.5454 -69.3574);--brand-deep:lab(37.6832% 13.7482 -65.7621);--accent:lab(77.3756% -25.8374 -26.1186);--yellow:lab(86.4523% -28.1111 55.3007);--visual-a:lab(20.7673% -1.12812 -22.5842);--visual-b:lab(11.5135% -.436701 -19.0372)}}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0f1215;--surface:#181b1f;--raised:#242930;--ink:#eceff2;--muted:#a0a8b3;--line:#323941;--glass-highlight:#ffffff1f;--brand-deep:#70b3f7}@supports (color:lab(0% 0 0)){html[data-theme=dark]{--bg:lab(5.25238% -.423431 -2.3655);--surface:lab(9.49398% -.701971 -3.61435);--raised:lab(16.4389% -1.01513 -5.40557);--ink:lab(94.1882% -.492126 -2.20406);--muted:lab(68.6393% -1.37788 -6.55928);--line:lab(23.3909% -1.22169 -6.48813);--glass-highlight:lab(100% 0 0/.12);--brand-deep:lab(70.6084% -7.43943 -40.9122)}}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{background:var(--bg);min-width:320px;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--brand-deep);outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.5}h1,h2,h3{text-wrap:balance}p{text-wrap:pretty}pre,code{font-family:var(--mono)}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{z-index:var(--z-skip);background:var(--ink);color:var(--bg);padding:12px 16px;position:fixed;top:8px;left:8px;transform:translateY(-180%)}.skip-link:focus{transform:translateY(0)}.site-header{z-index:var(--z-header);background:var(--bg);align-items:center;gap:36px;height:76px;padding-inline:max(24px,50vw - 688px);display:flex;position:sticky;top:0}.wordmark{letter-spacing:-.03em;white-space:nowrap;align-items:center;gap:12px;font-size:16px;font-weight:650;text-decoration:none;display:inline-flex}.mark{border:1.5px solid var(--brand-deep);border-radius:3px;width:22px;height:22px;display:block;position:relative}.mark:after{border:1.5px solid var(--brand-deep);content:"";background:var(--bg);border-radius:3px;position:absolute;inset:4px -5px -5px 4px}.site-nav{gap:28px;margin-left:auto;display:flex}.site-nav a{min-height:44px;color:var(--muted);align-items:center;gap:8px;font-size:13px;text-decoration:none;display:inline-flex}.site-nav a:hover{color:var(--ink)}.theme-toggle{background:0 0;border:0;border-radius:6px;flex-shrink:0;place-items:center;width:44px;height:44px;padding:0;display:grid}.theme-toggle:hover{background:var(--raised)}main{max-width:1424px;margin-inline:auto;padding:0 24px}.intro{justify-content:space-between;align-items:flex-end;gap:32px;padding:64px 0 48px;display:flex}.intro h1{letter-spacing:-.04em;margin:0;font-size:3.25rem;font-weight:500;line-height:1.08}.intro p{color:var(--muted);margin:20px 0 0;font-size:16px;line-height:1.6}.intro .intro-note{text-align:right;margin:0 0 4px;font-size:12px;line-height:1.8}.toolbar{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:24px;padding:28px 0 20px;display:flex}.library-heading{align-items:baseline;gap:14px;display:flex}.library-heading h2{letter-spacing:-.02em;margin:0;font-size:18px;font-weight:600}.library-heading>span{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.library-count{vertical-align:bottom;min-width:2ch;display:inline-grid;overflow:hidden}.library-count>span{grid-area:1/1}.search{width:300px;display:block;position:relative}.search svg{color:var(--muted);pointer-events:none;z-index:1;position:absolute;top:13px;left:12px}.search input{border:1px solid var(--line);background:var(--surface);width:100%;height:44px;color:var(--ink);border-radius:6px;padding:0 12px 0 38px;font-size:13px}.search input::placeholder{color:var(--muted)}@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.site-header{background:color-mix(in oklch, var(--bg) 78%, transparent);-webkit-backdrop-filter:blur(18px)saturate(125%);backdrop-filter:blur(18px)saturate(125%);box-shadow:inset 0 1px 0 var(--glass-highlight)}.search input{background:linear-gradient(155deg, color-mix(in oklch, var(--surface) 80%, transparent), color-mix(in oklch, var(--raised) 42%, transparent));-webkit-backdrop-filter:blur(12px)saturate(115%);backdrop-filter:blur(12px)saturate(115%);box-shadow:inset 0 1px 0 var(--glass-highlight)}}@media (prefers-reduced-transparency:reduce){.site-header,.search input{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}}.library-controls{justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px;display:flex}.filters{isolation:isolate;flex-wrap:wrap;gap:4px;display:flex;position:relative}.filter-indicator{z-index:-1;background:var(--ink);pointer-events:none;border-radius:6px;position:absolute;top:0;left:0}.filter span{position:relative}.filters[data-indicator-ready=true] .filter[aria-pressed=true]{background:0 0}.filter,.saved-filter{min-height:44px;color:var(--muted);background:0 0;border:0;border-radius:6px;padding:0 13px;font-size:13px}.filter:hover,.saved-filter:hover{background:var(--raised);color:var(--ink)}.filter[aria-pressed=true],.saved-filter[aria-pressed=true]{background:var(--ink);color:var(--bg)}.saved-filter{flex-shrink:0}.saved-filter span{font-variant-numeric:tabular-nums;margin-left:6px}.gallery{--columns:4;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 20px;display:grid}.motion-card{min-width:0;position:relative}.masonry-gallery{align-items:start;position:relative}.masonry-gallery .motion-card .blueprint-visual{height:auto;min-height:0;aspect-ratio:var(--preview-ratio,1)}.hero-flight{z-index:100;pointer-events:none;box-sizing:border-box;background:var(--surface);overflow:hidden}.masonry-gallery .blueprint-visual{transform-origin:50%;transition:transform .5s cubic-bezier(.22,1,.36,1),filter .24s ease-out,opacity .24s ease-out}.masonry-gallery .motion-card[data-focused=true] .blueprint-visual{filter:none;transform:translateY(-4px)scale(1.045)}.masonry-gallery .motion-card[data-returning] .blueprint-visual{transition:none;transform:none}.masonry-gallery[data-focusing=true] .motion-card:not([data-focused]) .blueprint-visual{filter:blur(2px);opacity:.6}@media (prefers-reduced-motion:reduce){.masonry-gallery .blueprint-visual{transition:none}.masonry-gallery .motion-card[data-focused=true] .blueprint-visual{transform:none}.masonry-gallery[data-focusing=true] .motion-card:not([data-focused]) .blueprint-visual{filter:none;opacity:1}}.card-open{border-radius:8px;text-decoration:none;display:block}.motion-card .blueprint-visual{border-radius:8px;height:230px;min-height:230px}.card-open:hover .blueprint-visual{filter:brightness(1.08)}.card-footer{padding:15px 44px 0 0;display:block}.card-footer strong{font-size:14px;font-weight:600;line-height:1.4;display:block}.card-footer>span{flex-wrap:wrap;gap:6px 14px;margin-top:6px;display:flex}.card-footer small{color:var(--muted);font-size:12px}.card-footer small:last-child{font-family:var(--mono);font-size:11px}.save-button{width:44px;height:44px;color:var(--muted);background:0 0;border:0;border-radius:6px;place-items:center;padding:0;display:grid;position:absolute;bottom:0;right:-4px}.save-button:hover{background:var(--raised);color:var(--ink)}.save-button[aria-pressed=true]{color:var(--brand-deep)}.save-button-symbol{transform-origin:50%;overflow:visible}.save-button-fill{fill:currentColor;clip-path:inset(0 0 100%);transition:clip-path .15s cubic-bezier(.16,1,.3,1)}.save-button[aria-pressed=true] .save-button-fill{clip-path:inset(0);transition-delay:90ms}.save-button[aria-pressed=true] .save-button-symbol{animation:.24s ease-out save-button-pop}@keyframes save-button-pop{0%,to{transform:scale(1)}35%{transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.save-button[aria-pressed] .save-button-symbol,.save-button[aria-pressed] .save-button-fill{transition:none;animation:none}}.no-results{text-align:center;border-block:1px solid var(--line);padding:72px 24px}.no-results h3{margin:0;font-size:22px;font-weight:500}.no-results p,.storage-message{color:var(--muted);font-size:14px;line-height:1.6}.no-results button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:12px 16px}.mcp-section{border-top:1px solid var(--line);grid-template-columns:1fr 1fr;align-items:start;gap:64px;margin-top:88px;padding:56px 0;display:grid}.mcp-section h2{letter-spacing:-.03em;margin:0;font-size:32px;font-weight:500;line-height:1.15}.mcp-section p{max-width:48ch;color:var(--muted);font-size:15px;line-height:1.65}.mcp-section .mcp-instructions{margin-top:24px;font-size:13px}.mcp-connect{border:1px solid var(--line);background:var(--surface);border-radius:8px;min-width:0;overflow:hidden}.mcp-connect .code-toolbar{color:var(--muted);border-color:var(--line)}.mcp-connect .code-toolbar button{color:var(--ink);border-color:var(--line);background:var(--surface)}.mcp-connect pre{color:var(--ink);margin:0;padding:20px;font-size:12px;line-height:1.7;overflow-x:auto}.copy-control{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.copy-error{max-width:32ch;color:inherit;font-size:12px}.site-footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;gap:24px;padding:24px 0 32px;font-size:12px;display:flex}.blueprint-visual{color:#fff;background:var(--visual-b)}.preview-canvas.blueprint-visual,.preview-canvas{background:var(--bg);position:relative;overflow:hidden}.preview-canvas-layer{z-index:1;background-color:var(--bg);background-image:radial-gradient(var(--line) .8px, transparent .8px);background-size:20px 20px;position:fixed;overflow:hidden}.preview-canvas-layer[data-gallery=true]{pointer-events:none}.preview-canvas.blueprint-visual{box-shadow:inset 0 0 0 1px var(--line)}.preview-canvas-layer:after{content:"";border:1px solid var(--line);border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .18s ease-out;position:absolute;inset:0}.preview-canvas-layer[data-gallery=true]:after{opacity:1}@media (prefers-reduced-motion:reduce){.preview-canvas-layer:after{transition:none}}.preview-canvas-layer[data-focused=true]{z-index:2}.preview-canvas-layer.hero-flight{z-index:100;pointer-events:none}.preview-canvas-layer iframe{transform-origin:50%;background:0 0;border:0;max-width:none;max-height:none;display:block;position:absolute;top:50%;left:50%}.preview-canvas-layer[data-gallery=true] iframe{pointer-events:none}.preview-canvas.blueprint-visual:before,.blueprint-visual:before{display:none}.visual-stack{background:#15323d;background:lab(18.9589% -8.43677 -10.4236)}.visual-marquee{background:#25281a;background:lab(15.5629% -3.96734 8.57498)}.visual-marquee>span{color:#d1dfab;color:lab(86.771% -11.2437 23.8234)}.visual-sheet{background:var(--bg)}.visual-bookmark{background:#262c47;background:lab(18.3261% 4.09748 -18.0124)}.visual-stack>span{color:#15202d;color:lab(11.7208% -1.33529 -10.5855)}.visual-menu i{background:#fff}.motion-card .blueprint-visual *,.recommendations-grid .blueprint-visual *{animation-duration:var(--preview-duration);animation-iteration-count:1;animation-play-state:paused;animation-fill-mode:both}.motion-card:is(:hover,:focus-within) .blueprint-visual *,.recommendations-grid a:is(:hover,:focus-visible) .blueprint-visual *{animation-play-state:running}.motion-card:is(:hover,:focus-within) .loader-ring,.motion-card:is(:hover,:focus-within) .visual-marquee>span{animation-iteration-count:infinite}.blueprint-page-shell{min-height:100vh}.blueprint-page-main{width:min(1248px,100%);padding:32px 24px 56px}.blueprint-page-intro h1{max-width:24ch;font-size:2.5rem;font-weight:500;line-height:1.12}.detail-kicker{color:var(--muted);text-transform:none;letter-spacing:0;margin:0;font-size:13px;font-weight:400}.section-heading h2,.recommendations-heading h2{letter-spacing:-.02em;font-size:24px;font-weight:500}.code-tabs{display:flex;overflow-x:auto}.code-tab{min-height:44px;color:var(--muted);background:0 0;border:0;border-radius:5px;flex:none;padding:0 14px;font-size:13px}.code-tab[aria-selected=true]{color:var(--ink);background:var(--raised)}.code-toolbar button{min-height:38px;font-size:12px;font-weight:500}.code-block{font-family:var(--mono);overflow:auto}.build-workspace{border-radius:8px}.build-code-panel,.build-code-panel .code-block{background:#11161d;background:lab(7.18302% -.842527 -5.31597)}.phase-timeline{background:0 0;padding:0}.breakdown-panel{grid-template-columns:1fr 1fr;gap:24px 48px;display:grid}.blueprint-breakdown .breakdown-panel section{border-top:1px solid var(--line);background:0 0;padding:20px 0}.breakdown-panel h3{margin:0 0 12px;font-weight:600}.breakdown-panel p,.breakdown-panel li{max-width:65ch;color:var(--muted);line-height:1.65}.breakdown-panel ul{padding-left:18px}.breakdown-panel li+li{margin-top:8px}.breakdown-spec dt{text-transform:none;font-size:12px;font-weight:400}.breakdown-spec dd{font-size:13px}.property-chips span{font-family:var(--mono);border-radius:4px;font-weight:400}.blueprint-recommendations{width:min(1248px,100%);padding-inline:24px}.recommendations-grid>div{background:0 0;border:0;border-radius:0}.recommendations-grid .blueprint-visual{border-radius:8px}.recommendations-grid a>span{padding-inline:0}@media (max-width:1100px){.gallery{--columns:3;grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:800px){.gallery{--columns:2;grid-template-columns:repeat(2,minmax(0,1fr))}.intro{padding-top:44px}.intro h1{font-size:2.75rem}.intro-note{display:none}.mcp-section{grid-template-columns:1fr;gap:24px}.library-controls{align-items:flex-start}.filters{gap:0}.filter{padding-inline:10px}}@media (max-width:540px){.site-header{gap:12px;height:64px;padding-inline:20px}.site-nav{display:none}.theme-toggle{margin-left:auto}main{padding-inline:20px}.intro{padding:36px 0}.intro h1{font-size:2.25rem}.intro p{font-size:14px}.toolbar{flex-direction:column;align-items:stretch;gap:16px;padding-top:22px}.search{width:100%}.library-controls{flex-wrap:wrap;gap:8px}.gallery{--columns:1;grid-template-columns:1fr;gap:28px}.motion-card .blueprint-visual{height:250px}.mcp-section{margin-top:56px;padding:36px 0}.mcp-section h2{font-size:28px}.site-footer{flex-direction:column;gap:8px}.blueprint-page-main{padding:24px 20px 40px}.blueprint-page-intro h1{font-size:2rem}.blueprint-recommendations{padding-inline:20px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}html{scroll-behavior:auto}}.implementation-note{max-width:75ch;color:var(--muted);margin:0 0 20px;font-size:14px;line-height:1.6}.implementation-note strong{color:var(--ink);font-weight:600}.motion-card .visual-stack>span{width:142px;height:166px}.visual-count{background:var(--bg)}
