.px-experience{padding:88px 24px 96px;background:var(--site-bg,#f4f5f7);color:var(--site-text,#202329);scroll-margin-top:100px}
.px-experience__inner{max-width:1240px;margin:auto}
.px-demo .px-demo__hint{transform:translateX(-50%)!important}
.px-experience__explain{max-width:880px;margin-top:36px;border-top:1px solid #cbd0d8}.px-experience__explain details{border-bottom:1px solid #cbd0d8;padding:0 2px}.px-experience__explain summary{cursor:pointer;font-size:16px;font-weight:600;padding:18px 24px 18px 0;line-height:1.45}.px-experience__explain summary:focus-visible{outline:2px solid #8b4dff;outline-offset:3px}.px-experience__explain p{font-size:15px;line-height:1.75;margin:0 0 20px;max-width:780px;color:var(--site-muted,#67717d)}[data-theme=dark] .px-experience__explain,[data-theme=dark] .px-experience__explain details{border-color:#424955}[data-theme=dark] .px-experience__explain p{color:#b3bdca}
.px-experience__intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin:0 0 32px}
.px-experience__intro h2{font-size:clamp(32px,4.5vw,58px);line-height:1.07;letter-spacing:-.035em;font-weight:600;margin:0;max-width:640px}
.px-experience__intro p{max-width:380px;font-size:16px;line-height:1.65;margin:0;color:var(--site-muted,#67717d)}
.px-experience__footer{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:20px;font-size:13px;line-height:1.65;color:var(--site-muted,#67717d)}
.px-experience__footer p{margin:0;max-width:730px}.px-experience__footer a{color:var(--site-link,#6d36d9);font-size:15px;font-weight:600;white-space:nowrap;text-underline-offset:5px}
.px-demo{--px-accent:#6d36d9;--px-ink:#202329;--px-muted:#626c79;--px-surface:#fff;--px-paper:#f4f5f7;--px-line:#dfe3e8;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--px-ink);background:var(--px-surface);border:1px solid var(--px-line);border-radius:16px;overflow:hidden;isolation:isolate;position:relative;max-width:100%;text-align:left}
.px-demo *{box-sizing:border-box}.px-demo [hidden]{display:none!important}.px-demo svg{fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}.px-demo button,.px-demo input{font:inherit}.px-demo button{cursor:pointer;min-height:40px;color:inherit;background:none;border:0;box-shadow:none;transition:background-color .18s,color .18s;transform:none!important;text-decoration:none!important;margin:0}.px-demo button::before,.px-demo button::after{display:none!important}.px-demo button:focus-visible,.px-demo input:focus-visible,.px-demo__viewport:focus-visible{outline:3px solid #8b4dff;outline-offset:-3px}.px-demo button:disabled{opacity:.38;cursor:not-allowed}.px-demo ::selection{background:#d9c7fb;color:#2a154b}
.px-demo__bar{display:flex;align-items:center;gap:24px;height:60px;padding:0 20px;background:var(--px-surface);border-bottom:1px solid var(--px-line)}
.px-demo__identity{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:-.025em;white-space:nowrap}.px-demo__identity svg{width:25px;height:24px;stroke:none}.px-demo__identity b{border:1px solid currentColor;font-size:10px;padding:2px;margin-left:4px}.px-demo__filename{margin-left:auto;font-size:12px;color:var(--px-muted)}
.px-demo .px-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:10px;border-radius:8px;flex:none}.px-icon svg{width:20px;height:20px}
.px-demo__workspace{height:640px;position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr;background:#e9edf0;overflow:hidden}
.px-demo__viewport{position:absolute;inset:0;outline:0;touch-action:pan-y;overflow:hidden;background:#e9edf0}.px-demo__viewport canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}.px-demo__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:50px;background:#e9edf0;opacity:1;transition:opacity .3s;pointer-events:none}.px-demo[data-state=ready] .px-demo__poster{opacity:0}
.px-demo__loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:#f4f5f7e8;z-index:7;padding:28px;text-align:center}.px-demo__loading strong{font-size:15px;line-height:1.5;max-width:420px;font-weight:500}.px-demo__loading button{background:#202329;color:white;border-radius:8px;padding:10px 18px}.px-demo__squares{position:relative;width:44px;height:43px}.px-demo__squares i{display:block;position:absolute;width:30px;height:30px;background:#ff653f;left:0;top:0;animation:px-squares 1.1s ease-in-out infinite alternate}.px-demo__squares i+ i{left:14px;top:13px;background:#8b4dff;animation-delay:-1.1s}.px-demo[data-state=error] .px-demo__squares{display:none}@keyframes px-squares{to{transform:translate(5px,4px);opacity:.65}}
.px-demo__modes{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:4px;background:#fffffff5;border-radius:10px;box-shadow:0 8px 24px #20232912;z-index:3;white-space:nowrap}.px-demo__modes button{font-size:13px;font-weight:600;padding:9px 17px;min-height:38px;border-radius:7px}.px-demo__modes button[aria-pressed=true]{background:#202329;color:white}
.px-demo__modes,.px-demo__tools,.px-demo__selection{color:#202329}
.px-demo__mode-note{position:absolute;left:22px;top:24px;display:flex;flex-direction:column;gap:6px;font-size:11px;color:#505968;pointer-events:none;z-index:2;max-width:200px}.px-demo__mode-note span:first-child{display:none;font-weight:600;font-size:13px;color:#26303a}.px-demo__mode-note span:last-child{background:#ffffffdc;border-radius:4px;padding:3px 6px;margin-left:-6px;font-size:10px;width:max-content}.px-demo__compass{position:absolute;bottom:24px;left:24px;pointer-events:none}.px-demo__compass svg{width:48px;height:48px;stroke:#53677d;stroke-width:1.3}.px-demo__compass text{stroke:none;fill:#53677d;font-size:10px}.px-demo .px-demo__hint{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);color:#202329;background:#ffffffe8;padding:7px 13px;border-radius:6px;font-size:12px;pointer-events:auto;white-space:nowrap;z-index:4}.px-demo__selection{position:absolute;right:18px;bottom:106px;display:flex;align-items:center;padding:0 5px 0 14px;background:#fff;border-radius:8px;box-shadow:0 8px 26px #20232916;font-size:13px}
.px-demo__tools{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:stretch;gap:4px;padding:7px;background:#fffffff5;border-radius:12px;box-shadow:0 12px 30px #20232922;z-index:4;max-width:calc(100% - 32px)}
.px-demo .px-tool{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;min-width:64px;min-height:58px;padding:8px 11px;border-radius:8px;font-size:10px;font-weight:500;line-height:1}.px-tool svg{width:22px;height:22px}.px-demo .px-tool[aria-pressed=true],.px-demo .px-tool[aria-expanded=true]{background:#f0e9ff;color:#6330ce}.px-demo__tool-divider{width:1px;background:#e1e4ea;margin:7px 2px}.px-demo__bottom{min-height:48px;padding:12px 20px;display:flex;align-items:center;gap:20px;justify-content:space-between;background:var(--px-surface);border-top:1px solid var(--px-line)}.px-demo__bottom p{font-size:12px;line-height:1.5;color:var(--px-muted);margin:0;max-width:70ch}.px-demo__depth-state{font-size:11px;font-weight:600;color:var(--px-accent);white-space:nowrap}
.px-panel{position:absolute;top:86px;left:18px;width:260px;max-height:calc(100% - 186px);z-index:5;border-radius:12px;background:#fff;box-shadow:0 16px 40px #19202924;overflow:hidden;color:#202329;display:flex;flex-direction:column}.px-panel header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 12px 4px 18px}.px-panel h3{font-size:16px;line-height:1.3;font-weight:600;margin:0;letter-spacing:-.02em;color:#202329}.px-panel__actions{display:flex;gap:14px;padding:0 18px 9px}.px-panel__actions button{color:#6330ce;font-size:11px;min-height:32px;padding:0}.px-panel__layers{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c1b1df #f4f5f7;padding:0 8px 12px}.px-demo .px-layer{display:flex;align-items:center;gap:10px;width:100%;padding:10px;border-radius:7px;min-height:43px;text-align:left;font-size:12px;font-weight:500}.px-layer__swatch{width:10px;height:10px;border-radius:3px;flex:none;background:var(--layer-color)}.px-layer__name{flex:1}.px-layer__switch{width:26px;height:16px;border-radius:10px;background:#d8dce2;position:relative;flex:none}.px-layer__switch::after{content:"";position:absolute;top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:white;transition:transform .16s}.px-layer[aria-pressed=true] .px-layer__switch{background:#6d36d9}.px-layer[aria-pressed=true] .px-layer__switch::after{transform:translateX(10px)}.px-layer[aria-pressed=false]{color:#78818e}.px-layer[aria-pressed=false] .px-layer__swatch{opacity:.4}
.px-panel--small{left:50%;top:auto;bottom:112px;transform:translateX(-50%);width:310px;padding-bottom:18px;max-height:calc(100% - 198px)}.px-panel--small header{padding-bottom:14px}.px-range-label{display:flex;align-items:center;justify-content:space-between;padding:0 20px 14px;font-size:12px;color:#626c79}.px-range-label output{font-variant-numeric:tabular-nums;font-size:15px;font-weight:600;color:#202329}.px-demo input[type=range]{appearance:none;display:block;width:calc(100% - 40px);height:20px;margin:0 20px;background:transparent;cursor:pointer;accent-color:#6d36d9}.px-demo input[type=range]::-webkit-slider-runnable-track{height:4px;background:#d9dfe6;border-radius:3px}.px-demo input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;background:#6d36d9;border:3px solid white;border-radius:50%;margin-top:-8px;box-shadow:0 1px 4px #20232944}.px-demo input[type=range]::-moz-range-track{height:4px;background:#d9dfe6}.px-demo input[type=range]::-moz-range-thumb{width:16px;height:16px;background:#6d36d9;border:2px solid white;border-radius:50%}.px-section-axes{display:flex;margin:0 18px 16px;border-bottom:1px solid #e1e4ea;gap:12px}.px-section-axes button{font-size:12px;padding:0 2px 8px;min-height:32px;border-radius:0;border-bottom:2px solid transparent}.px-section-axes button[aria-pressed=true]{color:#6330ce;border-color:#6330ce}.px-demo .px-panel__reset{font-size:12px;color:#6330ce;align-self:flex-start;margin:6px 20px 0;min-height:30px;padding:0}
.px-demo__nojs{padding:20px}.px-demo:fullscreen,.px-demo.is-expanded{width:100%;height:100%;max-width:none;border-radius:0;border:0;display:flex;flex-direction:column}.px-demo:fullscreen .px-demo__workspace,.px-demo.is-expanded .px-demo__workspace{height:auto;flex:1;min-height:0}.px-demo.is-expanded{position:fixed;inset:0;z-index:100000}.px-demo:not([data-state=ready]) .px-demo__hint,.px-demo[data-state=idle] .px-demo__tools,.px-demo[data-state=loading] .px-demo__tools,.px-demo[data-state=error] .px-demo__tools{visibility:hidden}
[data-theme=dark] .px-experience{background:#171a20;color:#f3f5f8}[data-theme=dark] .px-experience__intro p,[data-theme=dark] .px-experience__footer{color:#b3bdca}[data-theme=dark] .px-experience__footer a{color:#bc98ff}[data-theme=dark] .px-demo{--px-surface:#22262e;--px-ink:#f3f5f8;--px-muted:#b3bdca;--px-line:#3b424c;--px-accent:#bc98ff}
@media(hover:hover) and (pointer:fine){.px-demo .px-icon:hover,.px-demo .px-tool:hover,.px-demo .px-layer:hover{background:#ece9f4;color:#6330ce}.px-demo__modes button:not([aria-pressed=true]):hover{background:#f0e9ff}.px-panel__actions button:hover,.px-panel__reset:hover{text-decoration:underline!important;text-underline-offset:4px}}
@media(min-width:1500px){.px-demo__workspace{height:700px}}
@media(max-width:1000px){.px-demo__workspace{height:580px}.px-demo__mode-note{top:83px;left:20px}.px-experience__intro{align-items:flex-start}.px-experience__intro h2{max-width:500px}.px-experience__intro p{max-width:290px}.px-panel{top:135px;max-height:calc(100% - 234px)}.px-panel--small{top:auto;max-height:calc(100% - 214px)}}
@media(max-width:700px){.px-experience{padding:56px 16px 64px}.px-experience__intro{display:block;margin-bottom:24px}.px-experience__intro h2{font-size:36px;line-height:1.09;margin-bottom:16px;max-width:440px}.px-experience__intro p{font-size:15px;max-width:470px}.px-demo{border-radius:12px}.px-demo__bar{height:52px;padding:0 12px;gap:10px}.px-demo__identity{font-size:11px;gap:7px}.px-demo__identity svg{width:21px;height:21px}.px-demo__identity b{font-size:9px}.px-demo__filename{display:none}.px-demo__bar>.px-icon{margin-left:auto}.px-demo__workspace{height:520px}.px-demo__modes{top:12px;gap:2px;padding:3px;max-width:calc(100% - 20px)}.px-demo__modes button{padding:9px 14px;font-size:12px}.px-demo__mode-note{top:72px;left:16px;max-width:150px}.px-demo__mode-note span:first-child{font-size:12px}.px-demo__mode-note span:last-child{font-size:9px}.px-demo__tools{bottom:14px;padding:5px;gap:1px;width:calc(100% - 20px);max-width:400px;justify-content:space-between;border-radius:10px}.px-demo .px-tool{min-width:0;min-height:52px;padding:6px;gap:5px;flex:1;font-size:9px}.px-tool svg{width:20px;height:20px}.px-demo__tool-divider{margin:7px 1px}.px-demo__compass{bottom:86px;left:12px}.px-demo__compass svg{width:36px;height:36px}.px-demo .px-demo__hint{bottom:91px;font-size:11px}.px-demo__selection{right:10px;bottom:88px;font-size:11px}.px-demo__bottom{padding:11px 12px;gap:8px;align-items:flex-start}.px-demo__bottom p{font-size:11px}.px-demo__depth-state{font-size:10px}.px-panel{top:auto;bottom:82px;left:10px;width:calc(100% - 20px);max-height:240px;border-radius:10px}.px-panel header{padding:7px 7px 0 14px}.px-panel h3{font-size:15px}.px-panel__layers{display:grid;grid-template-columns:1fr 1fr;padding:0 5px 8px}.px-demo .px-layer{padding:9px 7px;gap:7px;font-size:11px}.px-layer__switch{width:24px;height:15px}.px-layer__switch::after{height:9px;width:9px}.px-layer[aria-pressed=true] .px-layer__switch::after{transform:translateX(9px)}.px-panel__actions{padding:0 14px 5px}.px-panel--small{left:50%;width:calc(100% - 24px);max-width:350px}.px-panel--small header{padding-bottom:8px}.px-experience__footer{display:block;font-size:12px}.px-experience__footer a{display:inline-block;margin-top:12px}.px-demo__poster{padding:16px}}
@media(max-width:370px){.px-experience{padding-left:12px;padding-right:12px}.px-demo__modes button{padding-inline:10px}.px-demo .px-tool{font-size:8px;padding-inline:4px}.px-panel__layers{grid-template-columns:1fr}.px-demo__depth-state{display:none}}
@media(max-height:550px) and (min-width:701px){.px-demo:fullscreen .px-demo__bar{height:44px}.px-demo:fullscreen .px-demo__bottom{display:none}.px-demo:fullscreen .px-demo__mode-note{top:75px}.px-demo:fullscreen .px-demo__tools{bottom:12px}.px-demo:fullscreen .px-panel{top:70px;max-height:calc(100% - 168px)}.px-demo:fullscreen .px-panel--small{top:auto;bottom:92px}}
@media(prefers-reduced-motion:reduce){.px-demo *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.px-plan-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden}.px-demo .px-plan-overlay circle{fill:#fff;stroke:#6d36d9;stroke-width:2}.px-demo .px-plan-overlay path{fill:none;stroke:#6d36d9;stroke-width:2}.px-demo .px-plan-overlay>[data-plan-line]{stroke-dasharray:6 4;stroke-width:2.5;filter:drop-shadow(0 1px 1px #fff)}
.px-plan-result{position:absolute;right:18px;top:86px;max-width:calc(100% - 36px);min-width:230px;padding:10px 14px 14px;border-radius:10px;background:#fff;color:#202329;box-shadow:0 8px 24px #20232918;z-index:3;pointer-events:auto}.px-plan-result__title{display:flex;align-items:center;justify-content:space-between;gap:18px}.px-plan-result__title strong{font-size:13px;font-weight:600}.px-plan-result output{display:flex;gap:16px;font-size:17px;line-height:1.55;font-weight:600;font-variant-numeric:tabular-nums}.px-plan-result output span{display:flex;gap:5px;white-space:nowrap}.px-plan-result output b{color:#6d36d9;font-size:12px;font-weight:500;align-self:center}.px-plan-result__meta{display:block;font-size:11px;line-height:1.5;color:#626c79;margin-top:5px}
.px-plan-level{position:absolute;left:22px;top:66px;font-size:11px;color:#4b4260;background:#fffffff2;padding:5px 8px;border-radius:5px;z-index:2;pointer-events:none;font-variant-numeric:tabular-nums}
.px-demo .px-plan-auto{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 18px 16px;padding:8px 0;min-height:40px;text-align:left;font-size:13px}.px-plan-auto[aria-pressed=true] .px-layer__switch{background:#6d36d9}.px-plan-auto[aria-pressed=true] .px-layer__switch::after{transform:translateX(10px)}
.px-demo [data-plan-tool][aria-pressed=true],.px-demo[data-mode=plan][data-has-cut=true] [data-action=section]{background:#f0e9ff;color:#6330ce}.px-demo[data-mode=plan] .px-demo__tools{gap:4px}.px-demo[data-mode=plan] [data-plan-tool=pan]{order:0}.px-demo[data-mode=plan] [data-plan-tool=point]{order:1}.px-demo[data-mode=plan] [data-plan-tool=measure]{order:2}.px-demo[data-mode=plan] [data-action=layers]{order:3}.px-demo[data-mode=plan] [data-action=section]{order:4}.px-demo[data-mode=plan] [data-action=fit-plan]{order:5}.px-demo[data-mode=plan] .px-demo__selection{display:none}.px-demo[data-mode=plan] .px-demo__viewport canvas{cursor:grab}.px-demo[data-mode=plan][data-plan-tool=point] .px-demo__viewport canvas,.px-demo[data-mode=plan][data-plan-tool=measure] .px-demo__viewport canvas{cursor:crosshair}.px-demo input[type=range]:disabled{opacity:.42;cursor:default}
@media(max-width:1000px){.px-plan-level{top:112px;left:16px}.px-plan-result{top:145px}}
@media(max-width:700px){.px-plan-result{left:10px;right:10px;top:128px;min-width:0;max-width:none;padding:6px 12px 10px}.px-plan-result output{font-size:15px;gap:13px}.px-plan-result__title strong{font-size:12px}.px-plan-level{top:101px;left:12px;font-size:10px}.px-demo[data-mode=plan] .px-demo__tools{gap:1px}.px-demo .px-plan-auto{font-size:12px;margin-bottom:8px}.px-plan-auto[aria-pressed=true] .px-layer__switch::after{transform:translateX(9px)}}

.px-demo .px-plan-overlay [data-plan-pattern] path{stroke-width:1;stroke:#7c54bd}.px-demo .px-plan-overlay [data-plan-hatch] path{stroke-width:1;stroke:#6536a5;stroke-linejoin:round}
.px-demo .px-plan-overlay [data-plan-pattern] rect{stroke:none}

/* Readable tools at mobile scale; preserve the full AR and plan toolsets. */
.px-demo .px-tool {font-size:12px;min-height:60px;}
.px-demo .px-demo__modes button {min-height:44px;}
.px-demo .px-layer {min-height:44px;font-size:12px;}
.px-demo .px-icon {width:44px;height:44px;}
.px-demo .px-demo__bottom p {font-size:13px;line-height:1.55;}
@media(max-width:700px) {
 .px-demo .px-demo__tools {padding:5px 3px;gap:0;width:calc(100% - 20px);max-width:400px;}
 .px-demo .px-tool {padding:7px 3px;min-height:58px;font-size:12px;gap:6px;flex:1;}
 .px-demo .px-demo__compass {bottom:94px;}
 .px-demo .px-demo__hint {bottom:99px;font-size:12px;}
 .px-demo .px-demo__selection {bottom:96px;}
 .px-demo .px-demo__panel {bottom:90px;}
 .px-demo .px-demo__mode-note {top:79px;}
 .px-demo .px-demo__mode-note span:last-child {font-size:11px;}
 .px-demo .px-demo__bottom p {font-size:12px;}
 .px-demo .px-demo__depth-state {font-size:11px;}
 .px-demo .px-plan-level {top:108px;}
 .px-demo .px-plan-result {top:137px;}
}
@media(max-width:370px) {
 .px-demo .px-demo__tools {width:calc(100% - 12px);padding-inline:2px;}
 .px-demo .px-tool {font-size:11px;padding-inline:1px;}
}