.tree-lab{background:#060910;color:#f5f5f7;padding:54px 32px;scroll-margin-top:70px;overflow:hidden}
.tree-layout{max-width:1190px;margin:auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:65px;align-items:center}
.tree-preview{margin:0;min-width:0}.tree-stage{position:relative;aspect-ratio:1122/1402;width:100%;max-width:560px;margin:auto;isolation:isolate}
.tree-stage img{display:block;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(transparent,#000 5%,#000 94%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 5%,#000 94%,transparent)}
.tree-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.tree-preview figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:0 24px;font-size:13px;line-height:1.6;color:#989da7}
.tree-settings{padding:24px 0;min-width:0}.tree-intro .eyebrow{color:#e6cc9b;font-size:12px;letter-spacing:2.5px}.tree-intro h2{font-size:clamp(35px,3.5vw,51px);font-weight:600;line-height:1.25;letter-spacing:-1.5px;margin:20px 0}.tree-intro h2 span{color:#d9c59e}.tree-intro>p:last-child{color:#a9adb6;font-size:17px;line-height:1.7}
.tree-controls{margin-top:37px}.tree-controls fieldset{margin:0;padding:0;border:0;min-width:0}.tree-controls legend{font-size:16px;font-weight:600;margin-bottom:16px;padding:0}.tree-level{display:flex;justify-content:space-between;align-items:center;gap:18px}.tree-level label{font-size:14px;color:#a9adb6}.tree-level output{font-size:29px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-1px}
#tree-brightness{--tree-percent:80%;display:block;appearance:none;-webkit-appearance:none;width:100%;height:44px;margin:8px 0 0;cursor:pointer;background:transparent;accent-color:#f2d49d;border:0;padding:0;touch-action:pan-y}
#tree-brightness::-webkit-slider-runnable-track{height:5px;border-radius:8px;background:linear-gradient(to right,#f2d49d var(--tree-percent),#323743 var(--tree-percent))}
#tree-brightness::-moz-range-track{height:5px;border-radius:8px;background:#323743}#tree-brightness::-moz-range-progress{height:5px;border-radius:8px;background:#f2d49d}
#tree-brightness::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-8.5px;background:#fff5df;box-shadow:0 0 20px #ffdda544;border:2px solid #fff;transition:box-shadow .15s}
#tree-brightness::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:#fff5df;box-shadow:0 0 20px #ffdda544;border:2px solid #fff}
#tree-brightness:focus-visible{outline:2px solid #e6cc9b;outline-offset:4px;border-radius:8px}.tree-range-ends{display:flex;justify-content:space-between;color:#a9adb6;font-size:13px;line-height:1.5}
.tree-controls .tree-colors{margin-top:29px}.tree-color-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tree-color-options>label{display:block;position:relative;cursor:pointer;min-width:0}.tree-color-options input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.tree-color-card{display:flex;flex-direction:column;align-items:flex-start;padding:18px;border:1px solid #303542;border-radius:16px;min-height:112px;background:#11151d;transition:border-color .2s,background .2s,box-shadow .2s}.tree-color-card strong{font-size:16px;font-weight:500;line-height:1.5;margin:10px 0 3px}.tree-color-card small{font-size:13px;line-height:1.6;color:#a9adb6}.tree-color-options input:checked+.tree-color-card{border-color:#ecd29d;background:#1f2020;box-shadow:inset 0 0 0 1px #ecd29d40}.tree-color-options input:focus-visible+.tree-color-card{outline:2px solid #fff0cd;outline-offset:4px}.tree-color-options>label:hover .tree-color-card{border-color:#9e8d6e}
.tree-swatches{display:flex;align-items:center;gap:5px;height:17px}.tree-swatches i{display:block;width:14px;height:14px;border-radius:50%}.swatch-warm{background:#ffdb9e;box-shadow:0 0 12px #ffcc7870}.swatch-white{background:#f4fbff;box-shadow:0 0 12px #c4e7ff70}.swatch-red{background:#ff4a43}.swatch-green{background:#40df80}.swatch-yellow{background:#ffdf44}.swatch-blue{background:#4590ff}.tree-swatches .swatch-rainbow{width:64px;border-radius:10px;background:linear-gradient(90deg,#ff4250,#ff963d,#ffdd45,#43e686,#39dced,#4984ff,#ba64ff)}
.tree-motion-row{min-height:48px;margin-top:16px;display:flex;align-items:center;flex-wrap:wrap;gap:10px}.tree-motion-row button{background:transparent;border:1px solid #63636b;border-radius:24px;color:#ead5b1;font-size:14px;padding:10px 18px;min-height:44px}.tree-motion-row button:focus-visible{outline:2px solid #fff0cd;outline-offset:3px}.tree-motion-row p,.tree-support-note{font-size:13px;color:#a9adb6;line-height:1.6}.tree-controls fieldset:disabled{opacity:.5}.tree-support-note{margin-top:10px}
.tree-hero-link{display:inline-flex;margin-top:22px;font-size:15px;color:#e8d3b0;text-decoration:underline;text-underline-offset:5px}
.showroom-home-entry{margin-top:10px;padding-top:22px;border-top:1px solid #ffffff25}.showroom-home-entry a{color:#ead2a6;font-size:16px;text-decoration:underline;text-underline-offset:5px}.showroom-home-entry p{font-size:14px;color:#9ea79e;line-height:1.7;margin-top:10px}
@media(max-width:1000px){.tree-lab{padding:48px 25px}.tree-layout{gap:35px}.tree-intro h2{font-size:37px}.tree-color-card{padding:15px}}
@media(max-width:760px){.tree-lab{padding:50px 22px}.tree-layout{grid-template-columns:1fr;gap:0}.tree-settings{display:contents}.tree-intro{grid-row:1;text-align:center}.tree-intro h2{font-size:36px}.tree-intro>p:last-child{font-size:16px}.tree-preview{grid-row:2;margin-top:18px}.tree-stage{max-width:440px}.tree-controls{grid-row:3;max-width:500px;width:100%;margin:28px auto 0}.tree-preview figcaption{max-width:440px;margin:auto;padding:0 8px}.tree-color-card{min-height:114px;padding:18px}.tree-motion-row{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.tree-color-card,#tree-brightness::-webkit-slider-thumb{transition:none}}
@media(forced-colors:active){.tree-color-card{border:1px solid ButtonText}.tree-color-options input:checked+.tree-color-card{outline:2px solid Highlight}.tree-motion-row button{color:ButtonText;border-color:ButtonText}#tree-brightness{appearance:auto;-webkit-appearance:auto}}