.color-tool{grid-template-columns:minmax(0,1.2fr) minmax(370px,.8fr);align-items:start;gap:24px;display:grid}.room-panel{position:sticky;top:94px}.room-preview{aspect-ratio:4/3;background:var(--wall);border-radius:22px;position:relative;overflow:hidden;box-shadow:0 18px 50px #1e322621}.room-wall{background:linear-gradient(105deg,#ffffff4d,transparent 55%),var(--wall);transition:background .25s;position:absolute;inset:0 0 34%}.room-wall:after{content:"";background:#f4f0e7;height:10px;position:absolute;bottom:-3px;left:0;right:0;box-shadow:0 2px 4px #00000026}.window{color:#9aa8a8;background:linear-gradient(145deg,#dce9ed,#f8fbfa);border:8px solid #f8f7f2;place-items:center;width:23%;height:45%;font-size:12px;display:grid;position:absolute;top:12%;left:9%;box-shadow:0 5px 18px #1e322826}.picture{background:#b9c5af;border:8px solid #ede7db;width:18%;height:25%;position:absolute;top:16%;right:14%}.room-floor{background-color:var(--floor);clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);height:52%;transition:background-color .25s;position:absolute;bottom:-8%;left:-8%;right:-8%}.pattern-square{background-image:linear-gradient(90deg,#36433959 1px,#0000 1px),linear-gradient(#36433959 1px,#0000 1px);background-size:80px 80px}.pattern-rectangle{background-image:linear-gradient(90deg,#36433959 1px,#0000 1px),linear-gradient(#36433959 1px,#0000 1px);background-size:100px 32px}.pattern-plank{background-image:linear-gradient(90deg,#3643394d 1px,#0000 1px),linear-gradient(#3643394d 1px,#0000 1px);background-size:145px 32px}.pattern-herringbone{background-image:repeating-linear-gradient(45deg,#0000 0 31px,#36433961 32px 34px),repeating-linear-gradient(-45deg,#0000 0 31px,#ffffff4d 32px 34px);background-size:90px 90px}.sofa{background:#e6e1d8;border-radius:17px 17px 8px 8px;width:54%;height:20%;position:absolute;bottom:20%;left:23%;box-shadow:0 12px 20px #352c2238}.sofa:before,.sofa:after{content:"";background:#eeeae3;border-radius:15px;width:45%;height:80%;position:absolute;top:-20%}.sofa:before{left:2%}.sofa:after{right:2%}.sofa span{z-index:2;background:#56765f;border-radius:5px;width:16%;height:42%;position:absolute;top:18%;left:47%}.table{background:#9a7652;border-radius:50%;width:26%;height:8%;position:absolute;bottom:7%;left:43%;box-shadow:0 15px 0 -7px #644c37}.current-combo{background:#fff;border:1px solid #d9dfd8;border-radius:16px;grid-template-columns:.85fr 1.15fr;gap:20px;margin-top:14px;padding:20px;display:grid}.current-combo small,.current-combo span{color:#748078;display:block}.current-combo strong{font-size:18px;display:block}.current-combo p{color:#526058;margin:0;font-size:14px}.color-controls{gap:16px;display:grid}.color-controls section{background:#fff;border:1px solid #d9dfd8;border-radius:20px;padding:24px}.control-title{align-items:flex-start;gap:12px;margin-bottom:18px;display:flex}.control-title>span{color:#fff;background:#1e684a;border-radius:9px;place-items:center;width:30px;height:30px;font-weight:800;display:grid}.control-title h2{margin:0;font-size:20px}.control-title p{color:#748078;margin:2px 0 0;font-size:13px}.swatches{grid-template-columns:repeat(4,1fr);gap:9px;display:grid}.swatches button,.recommend-row button,.material-options button{cursor:pointer;background:#fff;border:1px solid #dbe0dc}.swatches button{border-radius:11px;padding:8px 4px}.swatches i{border:1px solid #0000001a;border-radius:50%;width:34px;height:34px;margin:auto;display:block}.swatches span{margin-top:5px;font-size:11px;display:block}.swatches button.selected,.recommend-row button.selected,.material-options button.selected{background:#eef5f0;outline:2px solid #1e684a}.color-note{color:#5e6b63;background:#f2f5f1;border-radius:10px;margin:14px 0 0;padding:12px 14px;font-size:13px}.recommend-row{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.recommend-row button{border-radius:12px;padding:12px 8px}.recommend-row i{border-radius:6px;height:35px;display:block}.recommend-row strong,.recommend-row span{margin-top:6px;font-size:12px;display:block}.recommend-row span{color:#7a847d;margin-top:1px;font-size:10px}.color-controls details{margin-top:13px}.color-controls summary{cursor:pointer;color:#1e684a;font-size:13px;font-weight:800}.floor-swatches{margin-top:12px}.material-options{grid-template-columns:repeat(2,1fr);gap:9px;display:grid}.material-options button{text-align:left;border-radius:12px;grid-template-columns:48px 1fr;column-gap:10px;padding:11px;display:grid}.material-options strong{align-self:end}.material-options span{color:#7a847d;font-size:11px}.mini-pattern{background-color:#c4b392;grid-row:1/3;width:48px;height:48px}.mini-pattern.square{background-image:linear-gradient(90deg,#66796a 1px,#0000 1px),linear-gradient(#66796a 1px,#0000 1px);background-size:24px 24px}.mini-pattern.rectangle{background-image:linear-gradient(90deg,#66796a 1px,#0000 1px),linear-gradient(#66796a 1px,#0000 1px);background-size:32px 12px}.mini-pattern.plank{background-image:linear-gradient(90deg,#66796a 1px,#0000 1px),linear-gradient(#66796a 1px,#0000 1px);background-size:45px 12px}.shop-combo{color:#fff;background:#1e684a;border-radius:16px;padding:19px 22px;display:block}.shop-combo span,.shop-combo strong{display:block}.shop-combo span{opacity:.8;font-size:12px}.shop-combo strong{font-size:18px}.visual-disclaimer{color:#7b857e;margin:0 8px;font-size:12px}@media (width<=900px){.color-tool{grid-template-columns:1fr}.room-panel{position:static}.room-preview{aspect-ratio:16/11}.swatches{grid-template-columns:repeat(4,1fr)}}@media (width<=520px){.color-tool{width:100%}.room-preview{border-radius:16px}.current-combo{grid-template-columns:1fr;gap:8px}.color-controls section{padding:18px}.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}.swatches span{word-break:keep-all;font-size:10px}.recommend-row{grid-template-columns:1fr 1fr 1fr}.material-options{grid-template-columns:1fr}.shop-combo{text-align:center}}.pattern-rectangle.dir-horizontal{background-size:100px 32px}.pattern-rectangle.dir-vertical{background-size:32px 100px}.pattern-plank.dir-horizontal{background-size:145px 32px}.pattern-plank.dir-vertical{background-size:32px 145px}.pattern-herringbone.dir-horizontal{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80' viewBox='0 0 160 80'%3E%3Cg fill='none' stroke='%2345574b' stroke-width='2'%3E%3Cpath d='M-40 0L40 40L-40 80M0 0L80 40L0 80M40 0L120 40L40 80M80 0L160 40L80 80M120 0L200 40L120 80'/%3E%3Cpath d='M20 30L30 20M50 35L60 25M60 55L50 45M90 30L100 20M100 60L90 50M130 35L140 25M140 55L130 45' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");background-size:160px 80px}.pattern-herringbone.dir-vertical{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='160' viewBox='0 0 80 160'%3E%3Cg fill='none' stroke='%2345574b' stroke-width='2'%3E%3Cpath d='M0-40L40 40L80-40M0 0L40 80L80 0M0 40L40 120L80 40M0 80L40 160L80 80M0 120L40 200L80 120'/%3E%3Cpath d='M30 20L20 30M35 50L25 60M55 60L45 50M30 90L20 100M60 100L50 90M35 130L25 140M55 140L45 130' opacity='.7'/%3E%3C/g%3E%3C/svg%3E");background-size:80px 160px}.pattern-carpet-square{background-image:radial-gradient(#ffffff3d 1px,#0000 1px),linear-gradient(90deg,#25372d47 1px,#0000 1px),linear-gradient(#25372d47 1px,#0000 1px);background-size:5px 5px,80px 80px,80px 80px}.mini-pattern.carpet-square{background-color:#60829a;background-image:radial-gradient(#ffffff73 1px,#0000 1px),linear-gradient(90deg,#526d7f 1px,#0000 1px),linear-gradient(#526d7f 1px,#0000 1px);background-size:4px 4px,24px 24px,24px 24px}.mini-pattern.herringbone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32'%3E%3Cpath d='M-16 0L16 16L-16 32M0 0L32 16L0 32M16 0L48 16L16 32M32 0L64 16L32 32' fill='none' stroke='%23536b5a' stroke-width='2'/%3E%3C/svg%3E")}.direction-control{border-top:1px solid #e4e8e4;margin-top:16px;padding-top:15px}.direction-control>span{margin-bottom:8px;font-size:12px;font-weight:800;display:block}.direction-control>div{grid-template-columns:1fr 1fr;gap:8px;display:grid}.direction-control button{cursor:pointer;background:#fff;border:1px solid #d5dcd6;border-radius:10px;padding:10px;font-weight:700}.direction-control button.selected{color:#1e684a;background:#eaf3ed;border-color:#1e684a}.room-preview{isolation:isolate;background:#e7e5df;border:1px solid #2c37301f;box-shadow:0 24px 65px #1f2b232e,inset 0 0 60px #ffffff40}.room-ceiling{z-index:1;clip-path:polygon(5% 0,95% 0,100% 100%,0 100%);background:linear-gradient(#fff 0%,#f1eee7 78%,#dad6cc 100%);height:17%;position:absolute;top:-7%;left:6%;right:6%}.room-left-wall,.room-right-wall{z-index:1;background:color-mix(in srgb,var(--wall) 82%,#827e75);filter:brightness(.9);width:12%;position:absolute;top:5%;bottom:34%}.room-left-wall{clip-path:polygon(0 0,100% 8%,100% 100%,0 100%);left:0}.room-right-wall{clip-path:polygon(0 8%,100% 0,100% 100%,0 100%);right:0}.room-wall{z-index:2;background:linear-gradient(103deg,#ffffff8c,transparent 44%),linear-gradient(180deg,#ffffff2e,#50483b14),var(--wall);transition:background .25s;inset:5% 7% 34%;box-shadow:inset 0 -18px 25px #48423714}.room-wall:after{background:linear-gradient(#faf8f2,#ded9ce);height:11px;bottom:-5px;box-shadow:0 3px 5px #22262338}.window{background:linear-gradient(155deg,#a7cfdd 0%,#eaf3f1 48%,#f9dfb7 100%);border:7px solid #f8f6ef;border-radius:2px;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;width:27%;height:49%;display:grid;top:9%;left:8%;overflow:hidden;box-shadow:0 8px 20px #2635322e,inset 0 0 22px #ffffff8c}.window:before{content:"";background:linear-gradient(120deg,#ffffff94,#0000 35%),linear-gradient(0deg,#74968633 0 14%,#0000 14%);position:absolute;inset:0}.window i{border-bottom:3px solid #f9f8f2f2;border-right:3px solid #f9f8f2f2;position:relative}.curtain{z-index:2;filter:drop-shadow(2px 4px 3px #2a27212e);opacity:.92;background:repeating-linear-gradient(90deg,#e7e0d5 0 6px,#cfc6b8 7px 10px);width:6%;height:58%;position:absolute;top:6%}.curtain.left{clip-path:polygon(0 0,100% 0,72% 100%,18% 100%);left:5%}.curtain.right{clip-path:polygon(0 0,100% 0,82% 100%,28% 100%);left:34%}.picture{background:#d1c4ae;border:7px solid #eee7d9;width:19%;height:27%;top:13%;right:13%;box-shadow:0 8px 15px #2a28222e}.picture i{clip-path:polygon(0 15%,65% 0,100% 35%,78% 100%,12% 85%);background:linear-gradient(145deg,#557966 0 38%,#d3b477 39% 57%,#8fa497 58%);position:absolute;inset:8%}.wall-light{pointer-events:none;background:radial-gradient(#fff5d261,#0000 66%);width:30%;height:55%;position:absolute;top:2%;right:7%}.room-floor{z-index:3;clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);background-color:var(--floor);background-blend-mode:multiply;filter:saturate(.88)contrast(.98);transform-origin:bottom;height:43%;bottom:-4%;left:-7%;right:-7%;transform:perspective(560px)rotateX(2deg);box-shadow:inset 0 18px 26px #1c241f2e}.sunlight{z-index:4;clip-path:polygon(5% 0,62% 0,100% 100%,0 100%);mix-blend-mode:screen;pointer-events:none;background:linear-gradient(115deg,#fff7d957,#ffffff08);width:45%;height:33%;position:absolute;bottom:5%;left:5%}.rug{z-index:5;opacity:.92;background:radial-gradient(#d9d0c1 0 66%,#b8ad9d 68%,#0000 71%);border-radius:50%;width:46%;height:18%;position:absolute;bottom:5%;left:31%;box-shadow:0 8px 18px #26231d2b}.sofa{z-index:8;background:linear-gradient(#ded9d1,#bdb7ae);border-radius:14px 14px 8px 8px;width:55%;height:19%;bottom:20%;left:22%;box-shadow:0 19px 22px #2b261f4a,inset 0 2px #ffffffbf}.sofa:before,.sofa:after{background:linear-gradient(150deg,#f0ede7,#cbc5bb);height:98%;top:-30%;box-shadow:inset -2px -5px 8px #50483e1f,0 3px 5px #38322b21}.sofa .cushion{z-index:4;border-radius:4px 4px 8px 8px;width:15%;height:50%;position:absolute;top:-14%;transform:rotate(-4deg);box-shadow:0 4px 7px #312c262e}.sofa .cushion.one{background:#b79c78;left:17%}.sofa .cushion.two{background:#e7dfd2;left:35%;transform:rotate(3deg)}.sofa .cushion.accent{background:#52705d;right:15%;transform:rotate(6deg)}.sofa .leg{background:#564438;width:3%;height:18%;position:absolute;bottom:-13%}.sofa .leg.left{left:12%;transform:skew(-8deg)}.sofa .leg.right{right:12%;transform:skew(8deg)}.side-table{z-index:8;background:linear-gradient(#a88158,#705235);border-radius:50%;width:10%;height:4%;position:absolute;bottom:19%;left:13%;box-shadow:0 13px 0 -5px #5b4636,0 15px 12px #26211c38}.lamp{background:#665443;width:20%;height:380%;position:absolute;bottom:110%;left:38%}.lamp:before{content:"";clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);background:linear-gradient(#eee4d2,#c9bca8);width:290%;height:50%;position:absolute;top:-48%;left:-95%}.lamp i{background:#5f5043;border-radius:50%;width:260%;height:9%;position:absolute;bottom:-7%;left:-80%}.plant{z-index:9;width:8%;height:19%;position:absolute;bottom:17%;right:10%}.plant span{clip-path:polygon(8% 0,92% 0,76% 100%,24% 100%);background:linear-gradient(120deg,#b58d63,#7b5c42);width:70%;height:39%;position:absolute;bottom:0;left:18%}.plant i{transform-origin:bottom;background:linear-gradient(135deg,#54765b,#284d39);border-radius:100% 0;width:22%;height:58%;position:absolute;bottom:32%;left:42%}.plant i:first-child{transform:rotate(-58deg)}.plant i:nth-child(2){height:74%;transform:rotate(-27deg)}.plant i:nth-child(3){height:70%;transform:rotate(18deg)}.plant i:nth-child(4){transform:rotate(55deg)}.table{z-index:10;background:radial-gradient(at 45% 30%,#c3a17c,#876543 72%);border:1px solid #43312238;width:28%;height:8%;bottom:7%;left:42%;box-shadow:0 16px 0 -7px #5b4432,0 19px 17px #2a231b45}@media (width<=520px){.curtain{width:7%}.window,.picture{border-width:5px}.room-preview{box-shadow:0 14px 35px #1f2b2329}.sofa{bottom:19%}.plant{right:8%}}