/* Spatial product studies. Shared choreography, six independent forms. */
[data-expressive]{--x-paper:#e8efd3;--x-other:#b9beee;--x-ink:#19201b;--x-line:#19201b35;--x-accent:#d0f198}
[data-expressive=review]{--x-paper:#d9e5f3;--x-other:#e9c3aa;--x-accent:#adc8f2}
[data-expressive=folders]{--x-paper:#e8edd8;--x-other:#b6d6be;--x-accent:#ccdf9e}
[data-expressive=cube]{--x-paper:#d0eae4;--x-other:#a6b9e4;--x-accent:#a9e7db}
[data-expressive=icons]{--x-paper:#e6def1;--x-other:#efc3a4;--x-accent:#cfb3ef}
[data-expressive=nodes]{--x-paper:#e2e7ca;--x-other:#a9cbd4;--x-accent:#c4eb8e}
.x-wide{box-sizing:border-box;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;width:100vw;position:relative;isolation:isolate}
.x-manifesto{background:var(--x-paper);color:var(--x-ink);padding:55px max(6vw,calc((100vw - 1200px)/2)) 75px;overflow:clip}
.x-manifesto:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--x-angle,120deg),transparent 10%,var(--x-other) 43%,#ffffffe8 50%,var(--x-other) 58%,transparent 90%);opacity:var(--x-metal,.3);transform:translateX(var(--x-glint,-30%));pointer-events:none}
.x-chapter{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;border-top:1px solid currentColor;padding-top:18px;font:10px/1.6 Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase}
.x-chapter>span:last-child{text-align:right;max-width:42%}
[data-expressive] .x-fill{font-family:Arial,Helvetica,sans-serif;font-size:clamp(58px,8.8vw,146px);font-weight:700;letter-spacing:-.075em;line-height:.98;margin:65px 0 38px;white-space:pre-line;color:var(--x-ink);max-width:1180px;overflow-wrap:normal}
.x-enabled .x-fill{color:transparent;-webkit-text-stroke:1px var(--x-ink);background:linear-gradient(var(--x-fill-angle,100deg),var(--x-ink) var(--x-fill,48%),transparent calc(var(--x-fill,48%) + 1%));background-clip:text;-webkit-background-clip:text}
.x-manifesto-bottom{display:flex;justify-content:space-between;align-items:end;gap:32px}
.x-manifesto-bottom p{font:17px/1.8 Arial,Helvetica,sans-serif;max-width:465px;margin:0;color:var(--x-ink)}
.x-orbit{display:grid;place-items:center;width:106px;height:106px;flex-shrink:0;border:1px solid var(--x-ink);border-radius:50%;font:60px Arial;transform:rotate(var(--x-orbit,0deg))}
.x-lab{padding:50px max(6vw,calc((100vw - 1200px)/2)) 100px;background:#111616;color:#eef1e6;color-scheme:dark;overflow:clip}
.x-lab .x-chapter{color:#9caaa6}
.x-lab-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:75px;align-items:end;padding:48px 0 40px}
[data-expressive] .x-lab-heading h2{font:500 clamp(36px,4.4vw,68px)/1.02 Arial,Helvetica,sans-serif;letter-spacing:-.055em;margin:0;color:#eef1e6}
.x-lab-heading p{font:15px/1.8 Arial,Helvetica,sans-serif;color:#b2bdb9;max-width:460px;margin:0}
.x-lab-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:38px;align-items:center}
.x-stage{margin:0;min-width:0;border:1px solid #a3b0a237;background:radial-gradient(ellipse at 50% 40%,#303a3855,transparent 70%),linear-gradient(125deg,#1a2223,#111615);position:relative}
.x-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#fff05 48%,transparent 65%);opacity:.35}
.x-stage-top{display:flex;justify-content:space-between;gap:10px;padding:18px 20px 0;font:9px/1.5 Consolas,monospace;letter-spacing:1px;color:var(--x-accent)}
.x-canvas{display:block;width:100%;height:clamp(360px,42vw,570px);max-width:100%;touch-action:pan-y;cursor:grab}
.x-canvas:active{cursor:grabbing}
.x-canvas:focus-visible{outline:2px solid var(--x-accent);outline-offset:-4px}
.x-stage figcaption{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #a3b0a237;margin:0;padding:15px 20px;font:11px/1.6 Arial,Helvetica,sans-serif;color:#b2bdb9}
.x-stage figcaption>span:last-child{font-size:23px;color:var(--x-accent)}
.x-console{min-width:0;font:14px/1.5 Arial,Helvetica,sans-serif}
.x-small{display:block;font:10px Consolas,monospace;letter-spacing:1.5px;color:var(--x-accent);margin-bottom:34px}
.x-control label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;color:#eef1e6}.x-control output{font:12px Consolas,monospace;color:var(--x-accent)}
.x-control input{width:100%;height:44px;padding:0;margin:8px 0 0;accent-color:var(--x-accent);cursor:ew-resize}
.x-range-ends{display:flex;justify-content:space-between;gap:15px;font:9px Consolas,monospace;letter-spacing:.7px;color:#a6b2ab}
.x-material{margin:28px 0 20px;padding:0;border:0;display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.x-material legend{margin:0 0 12px;font-size:13px}
.x-console button{appearance:none;background:transparent;color:#edf2e7;border:1px solid #77867d80;border-radius:0;padding:12px 16px;min-height:44px;cursor:pointer;font:12px/1.4 Arial,Helvetica,sans-serif;transition:background .15s}
.x-console button:hover{background:#d2e4ca16}.x-console button[aria-pressed=true]{background:var(--x-accent);color:#131a15;border-color:var(--x-accent)}
.x-console button:focus-visible,.x-control input:focus-visible{outline:2px solid var(--x-accent);outline-offset:5px}
.x-secondary{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.x-secondary #x-reset{border:0;padding-left:0;color:var(--x-accent);text-decoration:underline;text-underline-offset:5px}
.x-parts{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid #a3b0a237;margin-top:28px;padding-top:12px}.x-parts>span{display:flex;align-items:center;gap:20px;padding:9px 0}.x-parts b{font:11px Consolas,monospace;color:var(--x-accent)}
.x-note{font:11px/1.75 Arial,Helvetica,sans-serif!important;color:#a6b2ab!important;margin:20px 0 0;max-width:400px}
.x-lab .x-console{display:none}.x-enabled .x-console{display:block}
.x-ribbon{overflow:clip;background:var(--x-accent);color:#19201b;padding:25px 0;transform:skewY(-2deg);margin-top:-20px;margin-bottom:70px}
.x-ribbon>div{display:flex;align-items:center;gap:40px;width:max-content;white-space:nowrap;transform:translateX(var(--x-band,-80px))}
.x-ribbon span{font:500 clamp(20px,3.4vw,48px)/1.3 Arial,Helvetica,sans-serif;letter-spacing:-.03em}.x-ribbon b{font-size:42px;font-weight:400}
[data-expressive=review] .x-ribbon,[data-expressive=icons] .x-ribbon{transform:skewY(2deg)}
[data-expressive] .chapter-ribbon{display:none}
[data-expressive] .product-trailer{padding-top:55px;padding-bottom:75px}
[data-expressive] .product-hero{perspective:1500px}
[data-expressive] .product-scene .art{transform:translateY(var(--scene-shift)) rotate(var(--scene-turn)) rotateY(var(--x-screen,0deg));box-shadow:0 35px 70px #0007}
[data-expressive] .feature-grid article{transition:translate .8s,rotate .8s;translate:0 var(--x-enter,0px);rotate:var(--x-lean,0deg)}
[data-expressive] .feature-grid article.is-visible{--x-enter:0px;--x-lean:0deg}
.x-enabled .x-lab-heading h2,.x-enabled .x-lab-heading p{opacity:1;transform:translateY(var(--x-title-y,0px))}
@media(min-width:1001px){[data-expressive] .feature-grid article:nth-child(2){margin-top:35px}[data-expressive] .feature-grid article:nth-child(3){margin-top:70px}}
@media(max-width:1100px){.x-lab-grid{grid-template-columns:1fr}.x-console{display:grid!important;grid-template-columns:1fr 1fr;gap:0 36px}.x-small{grid-column:1/-1;margin-bottom:22px}.x-control{grid-column:1}.x-material{grid-column:2;grid-row:2;margin:0}.x-secondary{grid-column:1;margin-top:24px}.x-parts{grid-column:2;grid-row:3;margin-top:24px}.x-note{grid-column:1/-1;max-width:650px}.x-lab:not(.x-enabled .x-lab) .x-console{display:none!important}.x-canvas{height:510px}.x-lab-heading{gap:30px}}
@media(max-width:700px){.x-manifesto{padding:35px 6vw 52px}.x-chapter{font-size:9px;letter-spacing:.5px;gap:15px}[data-expressive] .x-fill{font-size:clamp(46px,10.7vw,74px);letter-spacing:-.066em;margin:50px 0 35px;line-height:1.04}.x-manifesto-bottom{align-items:start;gap:23px}.x-orbit{width:54px;height:54px;font-size:33px}.x-manifesto-bottom p{font-size:14px;line-height:1.75}.x-lab{padding:35px 6vw 65px}.x-lab-heading{display:block;padding:35px 0 27px}.x-lab-heading p{margin-top:22px;font-size:14px}[data-expressive] .x-lab-heading h2{font-size:39px}.x-lab-grid{gap:30px}.x-console{display:block!important}.x-control{margin-bottom:25px}.x-material{margin:0 0 20px}.x-canvas{height:390px}.x-stage-top{padding:15px 12px 0;font-size:8px;letter-spacing:.3px}.x-stage figcaption{padding:12px;font-size:10px}.x-live-label{text-align:right;max-width:50%}.x-secondary{margin-top:0}.x-parts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.x-parts>span{display:block;font-size:11px}.x-parts b{display:block;margin-bottom:8px}.x-ribbon{margin-bottom:40px;padding:20px 0}.x-ribbon>div{gap:25px}.x-ribbon b{font-size:28px}[data-expressive] .feature-grid article{margin-top:0}}
@media(max-width:370px){.x-canvas{height:330px}.x-manifesto-bottom{display:block}.x-orbit{margin-bottom:25px}[data-expressive] .x-fill{font-size:43px}}
@media(prefers-reduced-motion:reduce){.x-enabled .x-fill{color:var(--x-ink);background:none;-webkit-text-stroke:0}.x-manifesto:before{transform:none!important;opacity:.2!important}.x-orbit,.x-ribbon,.x-ribbon>div,[data-expressive] .product-scene .art{transform:none!important}.x-enabled .x-lab-heading h2,.x-enabled .x-lab-heading p{transform:none!important}[data-expressive] .feature-grid article{translate:none!important;rotate:none!important;transition:none!important}}