body{background:var(--bg);transition:background-color .25s}body>header,.intro{color:var(--backdrop-ink,#253d32)}header .brand{color:inherit}.intro p,.intro h1 em,.intro .eyebrow{color:var(--backdrop-muted,#52634f)}header{border-color:color-mix(in srgb,var(--backdrop-ink,#253d32) 15%,transparent)}.table{background:linear-gradient(145deg,color-mix(in srgb,var(--bg) 28%,#fffefa),color-mix(in srgb,var(--bg) 45%,#fffefa))}.header-actions{display:flex;align-items:center;gap:8px}#background-menu{position:relative;z-index:30;font-size:12px}#background-menu>summary{cursor:pointer;list-style:none;border:1px solid currentColor;border-radius:24px;padding:11px 15px;min-height:44px;display:flex;align-items:center;white-space:nowrap}#background-menu>summary::-webkit-details-marker{display:none}.background-panel{position:absolute;right:0;top:calc(100% + 12px);width:370px;max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;background:#fffef9;border:1px solid #d9dfd2;border-radius:18px;padding:20px;color:#253d32;box-shadow:0 16px 65px #18322233}.background-panel h2{font-size:18px;margin:0 0 8px}.background-panel p{font-size:12px;line-height:1.5;color:#56644e}.background-panel button,.image-pipette{min-height:44px;border:1px solid #d8dfd2;background:#edf1e8;color:#253d32;font-size:12px;padding:9px;border-radius:9px}.background-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}.background-swatches button{background:transparent;padding:5px;font-size:10px;min-width:0}.background-swatches span{display:block;background:var(--swatch);height:34px;border:1px solid #23382b20;border-radius:6px;margin-bottom:5px}.background-swatches button[aria-pressed=true]{outline:2px solid #456844;outline-offset:1px}.background-panel label{font-size:12px}.background-custom{display:flex;gap:6px;margin:8px 0 12px}.background-custom input[type=color]{width:48px;height:44px;padding:3px;border:1px solid #d8dfd2;border-radius:8px;background:white;flex-shrink:0}.background-custom input[type=text]{width:0;min-width:0;flex:1;font:16px monospace;border:1px solid #d8dfd2;border-radius:8px;padding:7px}.background-pipettes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.image-pipette{position:relative;text-align:center;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden}.image-pipette input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.image-pipette:focus-within{outline:3px solid #729b80;outline-offset:3px}#background-canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation;background:white}#background-status{min-height:18px}#background-done{float:right;background:#2a503d;color:white;padding-inline:20px}.background-panel:after{content:'';display:block;clear:both}
@media(max-width:600px){header{height:auto;min-height:96px;flex-wrap:wrap;padding:12px 16px;gap:10px}.header-actions{width:100%;justify-content:space-between}#background-menu{position:static}.background-panel{position:fixed;top:110px;left:12px;right:12px;width:auto;max-height:calc(100dvh - 124px);padding:16px}.background-swatches button{font-size:11px}.background-swatches span{height:38px}.background-custom button{font-size:11px}}
@media(prefers-reduced-motion:reduce){body{transition:none}}
/* Design Studio: material samples and color controls in one compact surface. */
#background-menu>summary{gap:8px;border-color:#9daeb777;background:linear-gradient(135deg,#ffffff99,#ffffff33);backdrop-filter:blur(18px);box-shadow:inset 0 1px #ffffff99;font-weight:600;letter-spacing:.02em}
#background-menu[open]>summary{background:#253b46;color:#fff;border-color:#253b46}
.background-panel{width:440px;background:linear-gradient(145deg,#fffffffa,#edf3f7f5);border:1px solid #fff;border-radius:24px;padding:24px;color:#243743;box-shadow:0 24px 90px #13253440,inset 0 1px #fff;backdrop-filter:blur(28px)}
.design-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.design-kicker{font-size:9px;letter-spacing:.17em;color:#6b7d89;font-weight:600}.background-panel h2{font-size:27px;letter-spacing:-.045em;margin:5px 0 0;color:#203644}.background-panel>p{color:#647681;margin:9px 0 22px}.design-live{font-size:10px;color:#487b68;background:#e1eee7;padding:7px 10px;border-radius:20px;white-space:nowrap}.design-section-title{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 12px;gap:10px}.design-section-title h3{font-size:13px;margin:0;font-weight:650}.design-section-title>span{font-size:11px;color:#74858f}
.design-finishes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.background-panel .finish-card{padding:8px 8px 10px;text-align:left;min-width:0;background:#ffffff77;border:1px solid #ccd7df;border-radius:14px;transition:background .18s,box-shadow .18s}.finish-card:first-child{grid-column:1 / -1;display:grid;grid-template-columns:70px 1fr;column-gap:12px;align-items:center}.finish-card:first-child .finish-preview{grid-row:1 / 3;height:55px;margin:0}.finish-card:first-child .finish-name{align-self:end}.finish-card:first-child small{align-self:start}.finish-preview{display:flex;align-items:center;justify-content:center;height:65px;margin-bottom:9px;background:radial-gradient(ellipse at 50% 10%,#fff,#d6e0e7);border-radius:9px;overflow:hidden}.finish-preview i{display:block;width:73%;height:42px;border:10px solid #e9cf9d;transform:perspective(160px) rotateX(40deg) rotateZ(-16deg);border-radius:8px;box-shadow:3px 7px 7px #1b304d35,inset 0 0 0 1px #ffffff80;background:#245b46}.finish-wood i{border-color:#dfbd85;background:#245b46}.finish-milk i{border-color:#f1f7f6cc;box-shadow:0 2px 0 #adc5ce,3px 8px 9px #20364633,inset 0 0 6px #fff}.finish-ice i{border-color:#bce8f5bb;box-shadow:0 2px 0 #659caf,3px 8px 9px #20364633,inset 0 0 7px #d5fbff}.finish-steel i{border-color:#4b5b68;box-shadow:0 2px 0 #1b2f3c,3px 8px 9px #20364655,inset 0 0 0 1px #90a5b0}.finish-stainless i{border-color:#c6d1d9;border-top-color:#f8fbff;border-right-color:#91a1ad;box-shadow:0 2px 0 #627785,3px 8px 9px #20364640}.finish-name{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:650;color:#263c48}.finish-card small{font-size:10px;color:#73838e;display:block;margin-top:3px}.finish-check{opacity:0;color:#2d6853}.background-panel .finish-card[aria-pressed=true]{border-color:#477b6d;background:#f8fffc;box-shadow:0 0 0 1px #477b6d}.finish-card[aria-pressed=true] .finish-check{opacity:1}.background-panel .finish-card:hover{background:#fff;box-shadow:0 3px 14px #263e4e15}.background-panel button:focus-visible{outline:3px solid #5386a8;outline-offset:3px}.background-swatches{margin:0 0 20px}.background-swatches span{border-radius:50%;width:34px;height:34px;margin:0 auto 6px;box-shadow:inset 0 1px 2px #fff8}.background-swatches button[aria-pressed=true]{outline:1px solid #618b80;border-radius:10px;background:#ffffff99}.background-panel #background-done{background:#243e4c;border-color:#243e4c;border-radius:12px}.background-panel #background-status{font-size:11px;margin-bottom:15px}.background-panel #background-support{font-size:10px}
@media(max-width:600px){.background-panel{left:10px;right:10px;width:auto;top:105px;max-height:calc(100dvh - 117px);padding:18px;border-radius:20px}.background-panel h2{font-size:24px}.design-finishes{gap:8px}.finish-preview{height:54px}.finish-card small{font-size:10px}.design-section-title{margin-top:18px}.design-kicker{font-size:8px}}
@media(prefers-reduced-motion:reduce){.finish-card{transition:none!important}}