.plan-example{view-timeline-name:--plan-assembly;view-timeline-axis:block;min-width:0}.plan-example-stage{isolation:isolate;aspect-ratio:1.4;background:radial-gradient(ellipse at 45% 60%,var(--c-accent-wash),transparent 72%);border:1px solid var(--c-line);border-radius:12px;padding:7% 6% 11%;position:relative;overflow:clip}.plan-example-browser{z-index:2;background:var(--c-canvas);border:1px solid var(--c-line-strong);border-radius:7px;position:relative;overflow:clip;box-shadow:0 22px 32px -24px #00000080;container-type:inline-size}.plan-example-chrome{border-bottom:1px solid var(--c-line);align-items:center;gap:4px;height:22px;padding:0 9px;display:flex}.plan-example-chrome>i{background:var(--c-line-strong);border-radius:50%;width:4px;height:4px}.plan-example-chrome>span{color:var(--c-muted);margin:auto;font-size:7px}.wire-site{color:var(--c-fg);padding:0 6%}.wire-nav{border-bottom:1px solid var(--c-line);justify-content:space-between;align-items:center;gap:8px;padding:5% 0;display:flex}.wire-nav>b{letter-spacing:-.03em;white-space:nowrap;font-size:3cqw}.wire-nav>div{gap:2cqw;display:flex}.wire-nav>div>span{color:var(--c-muted);font-size:1.65cqw}.wire-hero{grid-template-columns:1.1fr 1fr;gap:7%;padding:9% 0;display:grid}.wire-copy>small,.wire-section>small,.wire-scroll-section>small{color:var(--c-muted);font-size:2cqw;display:block}.wire-copy>strong{letter-spacing:-.045em;margin:7% 0 10%;font-size:7.1cqw;font-weight:500;line-height:1.08;display:block}.wire-copy>i,.wire-columns i,.wire-scroll-section>i,.wire-page-stack>i{background:var(--c-line);border-radius:2px;width:100%;height:3px;margin-top:4%;display:block}.wire-copy>i+i{width:70%}.wire-button{background:var(--c-accent);color:var(--c-on-accent,#111);border-radius:3px;justify-content:space-between;align-items:center;gap:8px;max-width:90%;margin-top:13%;padding:8% 10%;font-size:2.2cqw;display:flex}.wire-art{background:var(--c-accent-wash);border:1px solid var(--c-line);border-radius:45% 45% 3px 3px;position:relative;overflow:clip}.wire-art>span{border:1px solid var(--c-accent);opacity:.6;border-radius:50% 50% 0 0;position:absolute;inset:20% 15% -20%;transform:rotate(-28deg)}.wire-art>span:nth-child(2){inset:35% -25% -20% 35%;transform:rotate(30deg)}.wire-art>span:nth-child(3){background:var(--c-accent);opacity:.25;inset:60% -20% -15%;transform:rotate(-12deg)}.wire-art>span:nth-child(4){aspect-ratio:1;background:var(--c-accent);border:0;border-radius:50%;width:12%;inset:14% 30% auto auto}.wire-contact{border-top:1px solid var(--c-line);color:var(--c-muted);justify-content:space-between;padding:5% 0;font-size:2cqw;display:flex}.wire-section{border-top:1px solid var(--c-line);padding:5% 0}.wire-columns{grid-template-columns:repeat(3,1fr);gap:7%;margin-top:4%;display:grid}.wire-thumbnail{aspect-ratio:2.2;background:var(--c-surface-2);border:1px solid var(--c-line);border-radius:2px;display:block}.wire-columns i{height:2px}.wire-columns i:last-child{width:65%}.wire-scroll-section{border-top:1px solid var(--c-line);padding:4% 0 8%}.wire-scroll-section>i{width:80%;height:2px}.wire-scroll-section>i:last-child{width:55%}.plan-example-small-site .plan-example-browser,.plan-example-full-site .plan-example-browser{width:87%;margin-top:2%;transform:rotate(-3deg)}.wire-page-stack{z-index:3;border:1px solid var(--c-line-strong);background:var(--c-canvas);border-radius:5px;width:33%;padding:3%;position:absolute;bottom:15%;right:5%;transform:rotate(5deg);box-shadow:0 16px 24px -17px #000000a6}.wire-mini-nav{color:var(--c-muted);border-bottom:1px solid var(--c-line);justify-content:space-between;padding-bottom:8%;font-size:7px;display:flex}.wire-mini-art{aspect-ratio:1.7;background:var(--c-accent-wash);border:1px solid var(--c-line);border-radius:25% 0;margin:10% 0}.wire-page-stack>b{font-size:9px;font-weight:500;line-height:1.2;display:block}.wire-page-stack>i{height:2px;margin-top:7%}.wire-page-stack>i:last-child{width:60%}.wire-structure-label{color:var(--c-muted);font-size:10px;position:absolute;bottom:3.5%;left:6%}.wire-scroll-guide{color:var(--c-muted);flex-direction:column;align-items:center;gap:7px;font-size:7px;display:flex;position:absolute;top:25%;right:2%}.wire-scroll-guide>i{background:var(--c-line-strong);width:1px;height:24px}.plan-example-one-page .plan-example-browser{width:94%}.plan-example-one-page .wire-hero{padding:7% 0}.plan-example-one-page .wire-copy>strong{font-size:6cqw}.plan-example-full-site .wire-art{border-radius:2px}.plan-example-full-site .wire-art>span{border-radius:0;transform:rotate(-15deg)}.plan-example figcaption>p{color:var(--c-muted);margin-top:10px;font-size:12px;line-height:1.55}.plan-example figcaption>small{color:var(--c-muted);margin-top:4px;font-size:10px;display:block}.plan-example-compact figcaption>p{display:none}@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){.plan-example-browser{animation:linear both plan-build;animation-timeline:--plan-assembly;animation-range:entry cover 40%}.wire-page-stack{animation:linear both plan-branch;animation-timeline:--plan-assembly;animation-range:entry 15% cover 45%}@keyframes plan-build{0%{translate:0 24px;scale:.96}to{translate:0;scale:1}}@keyframes plan-branch{0%{translate:-25px 24px;rotate:-7deg}to{translate:0;rotate:0deg}}}}.plan-image-layer,.plan-wireframe-layer{pointer-events:none;transition:opacity .22s;position:absolute;inset:0}.plan-image-layer{z-index:4;overflow:clip}.plan-image-layer>img{object-fit:cover;object-position:top;width:100%;height:100%;display:block}.plan-wireframe-layer{padding:inherit;opacity:0}.plan-example-stage[data-view=wireframe] .plan-image-layer{opacity:0}.plan-example-stage[data-view=wireframe] .plan-wireframe-layer{opacity:1}.plan-view-switch{border:1px solid var(--c-line);background:var(--c-canvas);border-radius:999px;margin-top:10px;padding:3px;display:flex}.plan-view-switch>button{min-height:40px;color:var(--c-muted);cursor:pointer;border-radius:999px;flex:1;font-size:12px;transition:background .16s,color .16s}.plan-view-switch>button[aria-pressed=true]{background:var(--c-surface-2);color:var(--c-fg)}.plan-view-switch>button:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){.plan-image-layer,.plan-wireframe-layer,.plan-view-switch>button{transition:none}}
