[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;color:#20352d;background:#f6f7f3;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;color:inherit;border:1px solid #c6d0c7;background:#fff;padding:10px 14px;border-radius:6px}button:hover{background:#e7eee7}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #1695b2;outline-offset:2px}a{color:inherit}header{height:83px;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid #dce2da;background:#fff}.brand{font-size:24px;letter-spacing:4px;text-decoration:none;font-weight:650}.brand span{display:block;font-size:9px;letter-spacing:1.4px;font-weight:400}nav{display:flex;gap:26px}nav a{text-decoration:none;font-size:13px}nav a[aria-current]{border-bottom:2px solid #245b42;padding-bottom:6px}.badge{font-size:11px;border:1px solid #c6d0c7;border-radius:30px;padding:6px 12px;color:#586958}main{display:grid;grid-template-columns:minmax(0,1fr) 360px;max-width:1800px;margin:auto}.visual{position:sticky;top:0;height:calc(100dvh - 83px);min-height:580px;background:#e9ede8}#stage{height:calc(100% - 110px);position:relative;overflow:hidden}canvas{display:block}.caption{pointer-events:none;position:absolute;top:30px;left:32px}.caption p,.eyebrow{font-size:10px;letter-spacing:2.5px;margin:0;color:#65776a}.caption h1{font-size:62px;letter-spacing:-3px;line-height:1.1;font-weight:450;margin:8px 0}.caption span{font-size:12px;color:#5d6e61}.views{position:absolute;top:25px;right:20px;display:flex;flex-wrap:wrap;gap:5px;max-width:55%;justify-content:flex-end}.views button{font-size:11px;padding:8px 11px;background:#ffffffd9;backdrop-filter:blur(10px)}.hint{position:absolute;bottom:12px;left:24px;font-size:10px;color:#607369}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#edf1ecef;z-index:5;font-size:15px}#loading[hidden]{display:none}.movement{height:110px;padding:15px 25px;background:#f6f8f3;border-top:1px solid #d6ded3}.movement>div:first-child{display:flex;justify-content:space-between;font-size:12px}.movement span{color:#6e7c72}.movement b{color:#20352d}.slider{display:flex;align-items:center;gap:14px;margin-top:10px}.slider input{flex:1;width:100%;accent-color:#285a41}.slider button{font-size:11px;padding:6px 12px}.movement small{font-size:10px}aside{padding:32px 27px;background:#fff;border-left:1px solid #dce2da}h2{font-size:29px;line-height:1.2;font-weight:500;letter-spacing:-1px;margin:10px 0 14px}.intro{font-size:13px;color:#617064;margin-bottom:26px}label{display:block;font-size:12px;font-weight:550;margin:14px 0 6px}select{display:block;background:#fff;border:1px solid #c7d1c7;border-radius:5px;padding:12px 10px;width:100%;color:#23382c;font-size:13px}.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:22px 0 12px}.facts b{display:block;font-size:19px;font-weight:500}.facts span{font-size:10px;color:#6d7e70}.colors{display:grid;grid-template-columns:1fr 1fr;gap:12px}small{display:block;font-size:10px;color:#6e7b71;margin-top:8px}.toggles{margin:25px 0}.toggles label{font-weight:400;display:flex;gap:8px;align-items:center}.toggles input{accent-color:#285a41}.feature{border-block:1px solid #dce3d9;padding:23px 0;margin:20px 0}.feature>span{font-size:9px;letter-spacing:1.8px;color:#6a7a6c}.feature h3{font-size:22px;font-weight:500;margin:10px 0}.feature p{font-size:12px;color:#607264;margin:0}summary{font-size:12px;cursor:pointer}details p,details a{font-size:11px;color:#697769}dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 6px;font-size:11px}dd{text-align:right;margin:0}dt{color:#6a7b6d}.actions{display:grid;gap:9px;margin-top:25px}.actions button{font-size:12px;padding:13px}.primary{background:#264c39;color:#fff;border-color:#264c39}.primary:hover{background:#346a4e}footer{font-size:10px;padding:18px 32px;color:#6a7b6b;border-top:1px solid #dce3d9}@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 320px}.views{top:auto;bottom:36px;left:20px;right:auto;max-width:95%;justify-content:flex-start}.caption h1{font-size:44px}.caption{left:24px}}@media(max-width:720px){header{height:auto;min-height:74px;padding:14px 18px;flex-wrap:wrap;gap:13px}.brand{font-size:20px}nav{gap:16px}.badge{display:none}main{display:flex;flex-direction:column}.visual{position:relative;height:70dvh;min-height:500px}.caption{top:20px;left:20px}.caption h1{font-size:38px}.caption p{font-size:8px}.caption span{font-size:10px}.views button{padding:8px}.hint{font-size:9px}aside{padding:27px 22px;border-left:0}.facts b{font-size:24px}.feature p{font-size:13px}.movement{padding:13px 18px}.movement>div:first-child{font-size:10px}footer{padding:16px 22px}}

#stage{height:calc(100% - 75px)}.movement{height:75px}.caption{max-width:55%}.caption span{display:block}.views{max-width:35%}@media(max-width:1000px){.views{max-width:95%}}

.swatches{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin:14px 0}.swatch{padding:0;border:1px solid #c3ccc2;border-radius:50%;height:28px;width:28px;position:relative}.swatch[aria-pressed="true"]{outline:2px solid #244c3a;outline-offset:3px}.swatch:hover{transform:scale(1.1);background:var(--swatch)!important}.fabric-title{display:flex;align-items:center;justify-content:space-between}.fabric-title span{font-size:10px;color:#68786b;margin-top:10px}input[type="color"]{height:43px;width:100%;border:1px solid #c6d0c7;border-radius:5px;padding:4px;background:white}input[type="range"]{width:100%;accent-color:#2e5a41}.caption.compact h1{font-size:24px;letter-spacing:-1px;margin:4px 0}.caption.compact p,.caption.compact span{display:none}.lighting{border-top:0}.views button[aria-pressed="true"]{background:#264c39;color:#fff}.hint.night{color:#c7d3cc}#stage.night .caption{color:#e7eee7}#stage.night .caption span,#stage.night .caption p{color:#bac9bd}.movement{display:flex;flex-direction:column;justify-content:center}.swatch:focus-visible{outline:3px solid #1695b2;outline-offset:3px}@media(min-width:1001px){.views{top:auto;bottom:42px;left:24px;right:auto;max-width:90%;justify-content:flex-start}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
#stage{height:calc(100% - 125px)}.movement{height:125px;padding:12px 25px}.movement label{margin:0 0 5px}.movement small{line-height:1.35}.views button:disabled{opacity:.4;cursor:default}@media(max-width:720px){.visual{min-height:540px}.movement{padding:12px 18px}}

/* V38: only the open umbrella is offered. */
#stage{height:100%}