.experience-page{background:#fff;color:#26221f}.experience-page header{position:sticky;top:0;z-index:20;background:#ffffffed;backdrop-filter:blur(15px)}.experience-page .header-in{gap:20px}.lab-nav{display:flex;gap:24px;font-size:12px;margin-inline-start:auto}.lab-nav a{color:#766454;text-decoration:none}.lab-nav a:hover{color:#9a623c}.lab-languages{display:flex;border:1px solid #e0d0c2;border-radius:5px;overflow:hidden}.lab-languages button{border:0;border-radius:0;background:#fff;color:#806b59;padding:10px;cursor:pointer;font-size:10px}.lab-languages button[aria-pressed=true]{background:#26221f;color:#fff}.lab-intro{display:grid;grid-template-columns:1fr 320px;align-items:end;gap:55px;padding:65px var(--pad) 38px;background:radial-gradient(ellipse at 80% 0,#fff1f6,transparent 65%)}.lab-intro h1{font:500 clamp(36px,4.5vw,65px)/1.12 var(--disp);letter-spacing:-.035em;margin:17px 0}.lab-intro>div>p:last-child{font-size:14px;color:#877364;line-height:1.8;max-width:60ch}.lab-guide{display:flex;align-items:center;gap:16px}.lab-guide>span{width:65px;height:88px;position:relative;flex-shrink:0;overflow:hidden;border-radius:6px;background:#f7efeb}.lab-guide img{position:absolute;width:162px;height:324px;max-width:none;left:-47px;top:-8px}.lab-guide p{font-size:12px!important}.lab-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 var(--pad) 30px}.lab-tabs button{border:1px solid #decebf;border-radius:7px;background:#faf6f1;text-align:start;padding:18px;cursor:pointer;color:#75543c}.lab-tabs span{display:block;font:10px var(--mono);margin-bottom:12px;color:#a48872}.lab-tabs strong{font:500 21px var(--disp)}.lab-tabs button[aria-selected=true]{background:#242220 url(leather-grain.svg);color:#fff5e9;border-color:#242220;box-shadow:0 8px 18px -14px #24180f}.lab-tabs button:focus-visible,.lab-languages button:focus-visible{outline:2px solid #966540;outline-offset:4px}.lab-workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:35px;align-items:start;margin:0 var(--pad)}.lab-controls{border:1px solid #e4d6ca;border-radius:8px;padding:24px;background:#fff}.lab-controls h2{font:500 25px var(--disp);margin-bottom:26px;color:#563c28}.lab-field{display:grid;gap:9px;margin-bottom:20px;color:#7d6553;font:12px var(--body);min-width:0}.lab-field select,.lab-field input[type=text],.lab-field input[type=number]{width:100%;min-width:0;min-height:42px;padding:10px;border:1px solid #d8c9bd;border-radius:5px;background:#fff;color:#443326;font:12px var(--body)}.lab-field input[type=range]{width:100%;accent-color:#a27351;padding:0;cursor:pointer}.lab-field input[type=color]{width:100%;height:36px;padding:3px;border:1px solid #d8c9bd;border-radius:5px;background:white;cursor:pointer}.lab-field output{font:10px var(--mono);color:#a1836b}.lab-field input:disabled{opacity:.35;cursor:not-allowed}.lab-check{display:flex;align-items:center;gap:10px;font:12px/1.6 var(--body);color:#79614d;margin:15px 0;cursor:pointer}.lab-check input{accent-color:#9b6c49;width:17px;height:17px;flex-shrink:0}.lab-check:has(:disabled){opacity:.5}.lab-controls .btn{font-size:11px;padding:12px 13px;min-height:42px}.lab-fine{font:11px/1.8 var(--body);color:#8d7866;margin:15px 0}.lab-text-button{border:0;border-top:1px solid #e6d8cc;width:100%;background:none;color:#946b4c;font:11px var(--body);text-decoration:underline;text-underline-offset:4px;padding:18px 0 0;margin-top:15px;cursor:pointer}.lab-preview{min-width:0}.lab-canvas{height:540px;position:relative;border:1px solid #e2d6cc;border-radius:8px;overflow:hidden;background:#f5efea}.lab-canvas canvas{width:100%;height:100%;display:block;cursor:grab}.lab-canvas canvas:active{cursor:grabbing}.lab-loading,.lab-error{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:20px;padding:35px;text-align:center;font:13px/1.8 var(--body);color:#87684f}.lab-loading{pointer-events:none}.lab-view-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:18px}.lab-view-footer p{font-size:11px;line-height:1.7;color:#93775f;max-width:50ch}.lab-view-footer .btn{font-size:10px;flex-shrink:0}.lab-end{padding:55px var(--pad);text-align:center;margin-top:40px;border-top:1px solid #e9ded5}.lab-end>p:first-child{font:30px var(--disp);margin-bottom:22px}.lab-buttons{display:flex;gap:10px;flex-wrap:wrap}.lab-download{display:inline-block;font:12px var(--body);color:#93613e;margin-top:18px;text-underline-offset:4px}.motion-stage{min-height:520px;border:1px solid #e1d3c7;border-radius:8px;position:relative;overflow:hidden;display:grid;place-items:center;padding:60px 30px}.motion-corner{position:absolute;top:25px;left:25px;font:9px var(--mono);color:#97765b;letter-spacing:.13em}.motion-line{position:absolute;bottom:32px;left:32px;right:32px;height:1px;background:#9e735344}.motion-stage #motion-text{font-family:Arial,sans-serif;font-weight:700;line-height:1.4;text-align:center;max-width:100%;overflow-wrap:anywhere}.motion-stage #motion-text>span{display:inline-block;max-width:100%}.web-comparison{position:relative;overflow:hidden;height:510px;border:1px solid #d5c6ba;border-radius:7px;direction:ltr}.compare-head{display:flex;justify-content:space-between;font:10px var(--mono);text-transform:uppercase;color:#94765d;padding:15px 5px}.demo-page{position:absolute;inset:0;padding:30px;overflow:hidden}.demo-nav{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:10px;border-bottom:1px solid #0002;padding-bottom:15px}.demo-nav strong{font-size:15px}.demo-nav span{font:8px var(--mono)}.demo-content{display:grid;grid-template-columns:1.3fr 1fr;gap:25px;align-items:center;min-height:330px}.demo-copy small{font:8px var(--mono);letter-spacing:.12em}.demo-copy h3{font-size:33px;line-height:1.15;margin:17px 0}.demo-copy p{font:11px/1.8 Arial;max-width:29ch}.demo-cta{display:inline-block;font:10px Arial;padding:12px 18px;margin-top:22px}.demo-art{position:relative;height:230px;border-radius:100px 100px 5px 5px;background:var(--demo-accent,#bbb);overflow:hidden}.demo-art i{position:absolute;bottom:30px;left:25%;width:50%;height:150px;background:var(--demo-paper,#ddd);border-radius:40% 40% 20% 20%;box-shadow:12px 15px 15px #0002}.demo-art b{position:absolute;bottom:30px;left:10%;width:55%;height:45px;border-radius:50%;background:#fff8}.demo-art em{position:absolute;top:26px;right:23px;width:32px;height:32px;border:1px solid #fff9;border-radius:50%}.demo-before{background:#eee;color:#222;font-family:Arial}.demo-before .demo-copy h3{font:700 25px Arial;color:#514c9b}.demo-before .demo-copy p{font:13px/1.35 Arial}.demo-before .demo-cta{background:#6864a1;color:white}.demo-before .demo-art{border-radius:0;background:#c7c7d3}.after-clip{position:absolute;inset:0}.demo-after{background:var(--demo-paper);color:var(--demo-ink);font-family:var(--demo-font)}.demo-after .demo-copy h3{font-family:var(--demo-font);font-weight:400;letter-spacing:-.03em}.demo-after .demo-cta{background:var(--demo-ink);color:var(--demo-paper);border-radius:4px}.demo-after[data-layout=center] .demo-content{grid-template-columns:1fr;text-align:center;position:relative;min-height:365px}.demo-after[data-layout=center] .demo-copy{position:relative;z-index:2;max-width:80%;margin:auto;background:var(--demo-paper);padding:20px}.demo-after[data-layout=center] .demo-copy p{margin:auto}.demo-after[data-layout=center] .demo-art{position:absolute;inset:15px 0;height:330px;border-radius:4px;opacity:.35}.demo-after[data-layout=editorial] .demo-content{grid-template-columns:.75fr 1.4fr}.demo-after[data-layout=editorial] .demo-art{order:-1;height:310px;border-radius:0}.demo-after[data-layout=editorial] .demo-copy h3{font-size:27px}.compare-line{position:absolute;top:0;bottom:0;width:2px;background:#b3835e;pointer-events:none}.compare-line:after{content:'↔';position:absolute;top:48%;left:-15px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#9c6a44;border:1px solid #b3835e;box-shadow:0 3px 8px #0002}.lab-extra{border:0;padding:0;margin-top:24px}.lab-extra legend{font:19px var(--disp);color:#714d34}.estimate-result{padding:36px;background:linear-gradient(130deg,#faf5f0,#fff);border:1px solid #e1cbb9;border-radius:8px}.estimate-total{font:58px/1.2 var(--disp);color:#755135;margin:20px 0 30px}.estimate-total small{display:block;font:12px var(--body);margin-bottom:8px}.estimate-result ul{list-style:none;margin:0;padding:0}.estimate-result li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:1px solid #e6d8cd;font:12px/1.7 var(--body);color:#816953}.estimate-result li b{white-space:nowrap;color:#4e392a;font-weight:500}.estimate-recurring{margin-top:30px;padding-top:20px;border-top:1px solid #ceb299}.estimate-recurring p{display:flex;justify-content:space-between;gap:20px;font:12px/1.7 var(--body);color:#876d56;margin:10px 0}.estimate-recurring strong{white-space:nowrap;color:#69482f}.lab-preview>#estimate-export{margin-top:20px;font-size:12px}.experience-page footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;padding:25px var(--pad);font-size:11px}.experience-page [hidden]{display:none!important}
@media(min-width:1050px) and (min-height:800px){.lab-preview{position:sticky;top:105px}}
@media(max-width:1000px){.lab-intro{grid-template-columns:1fr;gap:25px;padding-top:40px}.lab-guide{max-width:450px}.lab-tabs{gap:7px}.lab-tabs button{padding:14px 10px}.lab-tabs strong{font-size:17px}.lab-workspace{grid-template-columns:260px minmax(0,1fr);gap:20px}.demo-page{padding:20px}.demo-content{gap:15px}.demo-copy h3{font-size:26px}.lab-canvas{height:450px}.lab-view-footer{flex-wrap:wrap}.lab-nav{gap:15px}}
@media(max-width:760px){.experience-page .header-in{flex-wrap:wrap;gap:12px;padding-block:15px}.lab-nav{order:3;width:100%;justify-content:space-between;font-size:11px}.lab-languages{margin-inline-start:auto}.lab-intro{padding-inline:18px}.lab-tabs{margin-inline:18px;grid-template-columns:repeat(3,minmax(0,1fr))}.lab-tabs button:last-child{grid-column:2/4}.lab-tabs strong{font-size:17px}.lab-tabs span{margin-bottom:6px}.lab-workspace{grid-template-columns:1fr;margin-inline:18px}.lab-controls{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}.lab-controls h2,.lab-controls>.lab-fine,.lab-controls>.lab-extra,.lab-controls>.lab-buttons,.lab-controls>.lab-text-button,.lab-controls>.lab-download{grid-column:1/-1}.lab-field{margin-bottom:3px;font-size:11px}.lab-field select{font-size:11px}.lab-check{font-size:11px}.lab-controls>#lab-palette{grid-column:1/-1}.lab-fine{margin-block:5px}.lab-canvas{height:400px}.lab-view-footer p{margin-bottom:0}.motion-stage{min-height:350px;padding:45px 20px}.web-comparison{height:440px}.demo-page{padding:17px}.demo-content{min-height:310px;gap:12px;grid-template-columns:1.1fr .8fr}.demo-copy h3{font-size:24px}.demo-copy p{font-size:10px}.demo-nav span{display:none}.demo-art{height:200px}.demo-after[data-layout=editorial] .demo-copy h3{font-size:20px}.demo-after[data-layout=editorial] .demo-art{height:230px}.demo-before .demo-copy h3{font-size:22px}.demo-before .demo-copy p{font-size:11px}.demo-cta{font-size:9px;padding:10px}.estimate-result{padding:25px}.estimate-total{font-size:48px}.estimate-result li,.estimate-recurring p{font-size:11px}.lab-end{padding:40px 20px}.lab-end>p:first-child{font-size:25px}.lab-controls .lab-field:has([name=text]){grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.motion-stage{container-type:inline-size}