.workspace{--panel-width:clamp(284px,23vw,340px);--panel-space:calc(var(--panel-width) + 48px);background:radial-gradient(ellipse at 35% 48%,#3b3d3f,#2b2d30 48%,#1c1e21)}.workspace[data-weather=rain]{background:radial-gradient(ellipse at 35% 48%,#3c4b55,#28323c 55%,#19212c)}.workspace[data-weather=snow]{background:radial-gradient(ellipse at 35% 48%,#58656e,#35434f 55%,#202b38)}.sidebar{position:absolute;z-index:5;top:24px;right:24px;width:var(--panel-width);max-height:calc(100% - 48px);overflow-y:auto;overscroll-behavior:contain;padding:24px;border:1px solid #ffffff47;border-radius:26px;color:#edf5ed;background:linear-gradient(145deg,#ffffff24,#edf9f00e);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);box-shadow:0 18px 64px #07100d40,inset 0 1px 0 #ffffff40,inset 1px 0 0 #ffffff12;scrollbar-width:thin;scrollbar-color:#c2d3c647 transparent;transform:translate3d(0,0,0);transition:transform .32s ease,opacity .25s ease}.sidebar h2{font-size:18px;font-weight:500;letter-spacing:-.35px;line-height:1.4;margin:0 0 19px}.material-list{display:flex;flex-direction:column;gap:9px}.material{display:flex;align-items:center;gap:13px;width:100%;min-height:62px;padding:9px 11px 9px 9px;border:1px solid #ffffff1a;border-radius:15px;text-align:left;background:#ffffff0a;transition:background .16s,border-color .16s}.material:hover{background:#ffffff18;border-color:#ffffff50}.material.active{background:#cfe6b51b;border-color:#d5ebbb77;box-shadow:inset 0 1px 0 #ffffff18}.material-copy strong{font-size:13px;line-height:1.35;font-weight:500;color:#eaf1e8}.swatch{width:43px;height:43px;flex:none;border-radius:10px;position:relative;overflow:hidden;background-color:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff26}.swatch:after{content:'';position:absolute;left:28px;top:-10px;height:80px;width:2px;background:#fff9eac9;transform:rotate(30deg)}.swatch-red{--swatch:#ba6650}.swatch-blue{--swatch:#5088a4}.swatch-green{--swatch:#5d8973}.swatch-gravel{--swatch:#b6a17c}.select-circle{display:grid;place-items:center;flex:none;margin-left:auto;width:18px;height:18px;border:1px solid #ffffff38;border-radius:50%;font-size:11px;color:transparent}.material.active .select-circle{color:#f5ffef;background:#829e69;border-color:#a3c18b}.display-options{border-top:1px solid #ffffff1a;margin-top:20px;padding-top:17px}.display-options>div{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:32px;font-size:12px;color:#c5d0c8}.switch{width:35px;height:21px;padding:3px;border-radius:20px;display:flex;justify-content:flex-end;align-items:center;background:#7e9a68}.switch i{width:15px;height:15px;border-radius:50%;background:#f4fbed;box-shadow:0 1px 2px #0003}.switch[aria-checked=false]{justify-content:flex-start;background:#ffffff26}.weather-settings{margin-top:18px}.weather-settings h3{font-size:12px;font-weight:500;color:#c5d0c8;margin:0 0 11px}.weather-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.weather-options button{min-height:65px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;padding:10px 2px;border-radius:13px;border:1px solid #ffffff1c;background:#ffffff08;color:#b8c9c3;font-size:11px;line-height:1.2}.weather-options button:hover{background:#ffffff18}.weather-options button.active{background:#f5f9e322;border-color:#e4eed077;color:#f1f5df}.weather-options [data-weather=rain].active{background:#a9d9ff21;border-color:#b3dfff88;color:#d9efff}.weather-options [data-weather=snow].active{background:#dcecff24;border-color:#dbeeff88;color:#eff7ff}.panel-toggle{position:absolute;right:calc(var(--panel-width) + 36px);top:33px;z-index:6;width:42px;height:48px;display:grid;place-items:center;border:1px solid #ffffff32;border-radius:14px;background:#d5e5df14;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#e0ede1;box-shadow:0 5px 20px #0002;transition:right .32s ease,border-radius .32s}.panel-toggle svg{transition:transform .32s}.panel-collapsed{--panel-space:0px}.panel-collapsed .sidebar{transform:translate3d(calc(100% + 30px),0,0);opacity:0;pointer-events:none}.panel-collapsed .panel-toggle{right:0;border-radius:15px 0 0 15px;background:#ecf7ee25}.panel-collapsed .panel-toggle svg{transform:rotate(180deg)}
@media(min-width:2000px){.workspace{--panel-width:350px}.sidebar{right:32px;top:32px;padding:28px}.panel-toggle{top:42px;right:calc(var(--panel-width) + 44px)}.sidebar h2{font-size:20px}.material-copy strong{font-size:14px}.material{min-height:67px}.swatch{width:47px;height:47px}}
@media(max-width:700px){.workspace{--panel-width:min(320px,calc(100vw - 76px));--panel-space:0px}.sidebar{top:16px;right:14px;width:var(--panel-width);max-height:calc(100% - 32px - env(safe-area-inset-bottom));padding:21px;border-radius:24px;backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);background:linear-gradient(145deg,#b7c8bf40,#20352c66)}.sidebar h2{font-size:17px;margin-bottom:16px}.material{min-height:58px;padding:8px;gap:11px}.material-copy strong{font-size:12px}.swatch{width:40px;height:40px}.material-list{gap:7px}.display-options{margin-top:17px;padding-top:14px}.weather-settings{margin-top:15px}.weather-options button{min-height:62px}.panel-toggle{right:calc(var(--panel-width) + 22px);top:24px;width:39px;height:47px}.panel-collapsed .panel-toggle{right:0}.weather-label{font-size:11px}}
@media(max-height:600px){.sidebar{top:12px;max-height:calc(100% - 24px);padding:18px;border-radius:22px}.sidebar h2{font-size:16px;margin-bottom:13px}.material{min-height:51px;padding:7px;gap:10px}.swatch{width:35px;height:35px}.material-list{gap:6px}.display-options{margin-top:14px;padding-top:10px}.weather-settings{margin-top:12px}.weather-options button{min-height:56px}.panel-toggle{top:20px}}
@media(max-height:400px) and (min-width:701px){.workspace{--panel-width:285px}.sidebar .material-list{display:grid;grid-template-columns:1fr 1fr}.material-copy strong{font-size:11px}.swatch{width:27px;height:32px}.select-circle{display:none}.material{gap:7px}}
@supports not (backdrop-filter:blur(10px)){.sidebar{background:#35433beb}.panel-toggle{background:#526156ef}}
@media(max-width:700px){.workspace:not(.panel-collapsed) .stage-heading{opacity:0;pointer-events:none}.workspace:not(.panel-collapsed) .site-view{pointer-events:none}}

/* Stable contrast even when bright snow passes behind the panel. */
.sidebar{background:linear-gradient(145deg,#2b3c49f0,#1e2c38eb);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#c8deec63;color:#f0f5f5;box-shadow:0 16px 48px #07101740,inset 0 1px 0 #d9ecf945}
.sidebar h2,.material-copy strong{color:#f1f6f4}.material{background:#ffffff09;border-color:#d5e5ee24}.material.active{background:#9aba892b;border-color:#bdd2a680}.display-options>div,.weather-settings h3{color:#d6e2e7}.weather-options button{background:#13273355;border-color:#b9d0df40;color:#dbe9f1;font-size:12px;font-weight:500}.weather-label{font-size:12px}.weather-options button.active{background:#dce8d4;color:#263a2b;border-color:#f0f7e8}.weather-options [data-weather=rain].active{background:#d0e5f4;color:#233d50;border-color:#e2f4ff}.weather-options [data-weather=snow].active{background:#e8f1f7;color:#233747;border-color:#fff}.panel-toggle,.panel-collapsed .panel-toggle{background:#30434fef;backdrop-filter:none;-webkit-backdrop-filter:none;color:#edf6fb}