.colors-glass-experience {
  --cg-accent: #c7d545;
  --cg-bg: #f3f0e9;
  --cg-panel: #fbfaf7;
  --cg-ink: #16211f;
  --cg-muted: #59645f;
  --cg-line: rgba(22, 33, 31, 0.18);
  --cg-frame-color: #f4f3ee;
  --cg-frame-width: clamp(11px, 1.25vw, 20px);
  position: fixed;
  z-index: 1100;
  inset: 0;
  visibility: hidden;
  overflow: hidden;
  background: var(--cg-bg);
  color: var(--cg-ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  transition: opacity 360ms ease, transform 520ms cubic-bezier(.2, .8, .25, 1), visibility 0s linear 520ms;
}

.colors-glass-experience.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

html.colors-glass-open,
html.colors-glass-open body {
  overflow: hidden;
}

.cg-dialog {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  outline: none;
}

.cg-header {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(500px, 1.5fr) auto;
  align-items: center;
  gap: 34px;
  min-height: 104px;
  padding: 19px max(28px, calc((100vw - 1460px) / 2));
  border-bottom: 1px solid var(--cg-line);
  background: color-mix(in srgb, var(--cg-panel) 94%, transparent);
}

.cg-eyebrow,
.cg-section-number {
  margin: 0;
  color: #687044;
  font: 10px var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

.cg-header h2 {
  margin: 5px 0 0;
  color: var(--cg-ink);
  font: 700 clamp(28px, 2.6vw, 42px)/1 var(--display);
  letter-spacing: -.055em;
}

.cg-header h2 em {
  font-family: Georgia, serif;
  font-weight: 400;
}

.cg-tabs {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.cg-tabs button,
.cg-close {
  border: 1px solid var(--cg-line);
  border-radius: 0;
  background: transparent;
  color: var(--cg-ink);
  padding: 11px 13px;
  font: 600 11px var(--sans);
  cursor: pointer;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.cg-tabs button:hover,
.cg-tabs button:focus-visible,
.cg-tabs button.is-current {
  border-color: var(--cg-accent);
  background: var(--cg-accent);
  color: #16211f;
  outline: none;
}

.cg-close {
  justify-self: end;
  min-width: 92px;
}

.cg-close:hover,
.cg-close:focus-visible {
  border-color: currentColor;
  outline: none;
}

.cg-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(340px, 390px) minmax(0, 1fr);
}

.cg-controls {
  position: relative;
  z-index: 2;
  min-height: 0;
  overflow: auto;
  padding: clamp(30px, 5vh, 54px) 30px 38px max(28px, calc((100vw - 1460px) / 2));
  border-right: 1px solid var(--cg-line);
  background: var(--cg-panel);
  scrollbar-width: thin;
}

.cg-panel {
  animation: cgPanelIn 420ms cubic-bezier(.2, .8, .25, 1) both;
}

.cg-panel[hidden] {
  display: none;
}

@keyframes cgPanelIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.cg-panel h3 {
  max-width: 330px;
  margin: 17px 0 0;
  color: var(--cg-ink);
  font: 700 clamp(30px, 3vw, 48px)/1.02 var(--display);
  letter-spacing: -.055em;
}

.cg-intro {
  max-width: 335px;
  margin: 18px 0 28px;
  color: var(--cg-muted);
  font: 14px/1.55 var(--sans);
}

.cg-glass-options,
.cg-profile-options {
  display: grid;
  gap: 8px;
}

.cg-glass-options button,
.cg-profile-options button {
  width: 100%;
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--cg-line);
  border-radius: 0;
  background: transparent;
  color: var(--cg-ink);
  padding: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.cg-glass-options button:hover,
.cg-glass-options button:focus-visible,
.cg-glass-options button.is-selected,
.cg-profile-options button:hover,
.cg-profile-options button:focus-visible,
.cg-profile-options button.is-selected {
  border-color: var(--cg-accent);
  background: color-mix(in srgb, var(--cg-accent) 17%, transparent);
  outline: none;
}

.cg-glass-options img {
  width: 58px;
  height: 50px;
  display: block;
  object-fit: cover;
}

.cg-glass-options span,
.cg-profile-options span {
  display: grid;
  gap: 4px;
}

.cg-glass-options b,
.cg-profile-options b {
  font: 600 13px var(--sans);
}

.cg-glass-options small,
.cg-profile-options small {
  color: var(--cg-muted);
  font: 11px/1.35 var(--sans);
}

.cg-swatches {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 10px;
}

.cg-swatches-large {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cg-swatches button,
.cg-grid-options button {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--cg-ink);
  padding: 0;
  font: 11px/1.25 var(--sans);
  text-align: left;
  cursor: pointer;
}

.cg-swatches i {
  position: relative;
  width: 100%;
  aspect-ratio: 1.55;
  display: block;
  margin-bottom: 7px;
  border: 1px solid var(--cg-line);
  background: var(--swatch);
}

.cg-swatches button.is-selected i:after,
.cg-swatches button:hover i:after,
.cg-swatches button:focus-visible i:after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid var(--cg-accent);
}

.cg-swatches button:focus-visible,
.cg-grid-options button:focus-visible {
  outline: none;
}

.swatch-white { --swatch: #f7f7f4; }
.swatch-adobe { --swatch: #b8b3a7; }
.swatch-tan { --swatch: #c9c1a5; }
.swatch-designer-black { --swatch: #111211; }
.swatch-architectural-black { --swatch: #0b0305; }
.swatch-architectural-bronze { --swatch: #373536; }
.swatch-architectural-silver { --swatch: #9fa2a6; }
.swatch-classic-gray { --swatch: #afb3ac; }
.swatch-espresso { --swatch: #413d3a; }
.swatch-taupe { --swatch: #706650; }
.swatch-red-pepper { --swatch: #880018; }
.swatch-rose-wood { --swatch: #5b3931; }
.swatch-desert-tan { --swatch: #9fa296; }
.swatch-sandstone { --swatch: #d5c9b5; }
.swatch-divine-wine { --swatch: #6e3224; }
.swatch-forest-green { --swatch: #006552; }

.cg-grid-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.cg-grid-style-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.cg-grid-style-options p {
  grid-column: 1 / -1;
  margin: 0 0 3px;
  color: var(--cg-muted);
  font: 10px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cg-grid-style-options button {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--cg-line);
  border-radius: 0;
  padding: 9px 7px;
  background: transparent;
  color: var(--cg-ink);
  font: 600 10px var(--sans);
  text-align: left;
  cursor: pointer;
}

.cg-grid-style-options button.is-selected,
.cg-grid-style-options button:hover,
.cg-grid-style-options button:focus-visible {
  border-color: var(--cg-accent);
  outline: none;
}

.cg-grid-style-options button.is-selected { background: color-mix(in srgb, var(--cg-accent) 16%, transparent); }

.cg-grid-bar {
  position: relative;
  width: 30px;
  height: 42px;
  display: block;
  background: #eef0ee;
  box-shadow: inset 0 0 0 1px rgba(113, 122, 119, .2);
}

.cg-grid-bar::before {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 50%;
  transform: translateX(-50%);
}

.cg-grid-bar-flat::before {
  width: 2px;
  background: #fff;
  box-shadow: 1px 0 rgba(100, 108, 105, .22);
}

.cg-grid-bar-sculpted::before {
  width: 9px;
  background: linear-gradient(90deg, #fff 0 20%, #e8e9e7 20% 38%, #aeb2b0 38% 54%, #d9dcda 54% 72%, #fff 72% 100%);
  box-shadow: -1px 0 rgba(255,255,255,.9), 1px 0 rgba(91,99,96,.28);
}

.cg-grid-bar-sculpted-one-inch::before {
  width: 14px;
  background: linear-gradient(90deg, #fff 0 19%, #eceeec 19% 34%, #d4d7d5 34% 43%, #a5aaa7 43% 56%, #d7dad8 56% 68%, #f0f1ef 68% 83%, #fff 83% 100%);
  box-shadow: -1px 0 rgba(255,255,255,.9), 1px 0 rgba(82,90,87,.3);
}

.grid-sample {
  position: relative;
  width: 100%;
  aspect-ratio: 1.35;
  display: block;
  margin-bottom: 8px;
  overflow: hidden;
  border: 7px solid #e8e9e5;
  background: linear-gradient(145deg, #dce8e8, #f8faf8);
  box-shadow: inset 0 0 0 1px #adb4b1;
}

.grid-sample:before,
.grid-sample:after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.grid-colonial {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), #f5f5f1 calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) 25%),
    repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), #f5f5f1 calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) 25%),
    linear-gradient(145deg, #dce8e8, #f8faf8);
}

.grid-perimeter {
  background-image:
    linear-gradient(90deg, transparent calc(12% - 1px), #f5f5f1 calc(12% - 1px) calc(12% + 1px), transparent calc(12% + 1px) calc(88% - 1px), #f5f5f1 calc(88% - 1px) calc(88% + 1px), transparent calc(88% + 1px)),
    linear-gradient(0deg, transparent calc(16% - 1px), #f5f5f1 calc(16% - 1px) calc(16% + 1px), transparent calc(16% + 1px) calc(84% - 1px), #f5f5f1 calc(84% - 1px) calc(84% + 1px), transparent calc(84% + 1px)),
    linear-gradient(145deg, #dce8e8, #f8faf8);
}

.grid-queen-anne {
  background-image:
    linear-gradient(90deg, transparent calc(12% - 1px), #f5f5f1 calc(12% - 1px) calc(12% + 1px), transparent calc(12% + 1px) calc(38% - 1px), #f5f5f1 calc(38% - 1px) calc(38% + 1px), transparent calc(38% + 1px) calc(62% - 1px), #f5f5f1 calc(62% - 1px) calc(62% + 1px), transparent calc(62% + 1px) calc(88% - 1px), #f5f5f1 calc(88% - 1px) calc(88% + 1px), transparent calc(88% + 1px)),
    linear-gradient(0deg, transparent calc(16% - 1px), #f5f5f1 calc(16% - 1px) calc(16% + 1px), transparent calc(16% + 1px) calc(84% - 1px), #f5f5f1 calc(84% - 1px) calc(84% + 1px), transparent calc(84% + 1px)),
    linear-gradient(145deg, #dce8e8, #f8faf8);
}

.cg-grid-options button.is-selected .grid-sample,
.cg-grid-options button:hover .grid-sample,
.cg-grid-options button:focus-visible .grid-sample {
  outline: 2px solid var(--cg-accent);
  outline-offset: 3px;
}

.cg-profile-options button {
  grid-template-columns: 1fr;
  padding: 9px;
}

.cg-profile-options img {
  width: 100%;
  aspect-ratio: 2.22;
  display: block;
  object-fit: cover;
  object-position: center;
}

.cg-finish-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.cg-finish-options p {
  grid-column: 1 / -1;
  margin: 0 0 3px;
  color: var(--cg-muted);
  font: 10px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cg-finish-options button {
  min-width: 0;
  border: 1px solid var(--cg-line);
  border-radius: 0;
  background: transparent;
  color: var(--cg-ink);
  padding: 9px 7px 10px;
  font: 600 10px var(--sans);
  cursor: pointer;
  text-align: center;
  transition: border-color 240ms ease, background-color 240ms ease, color 240ms ease;
}

.cg-finish-options button span {
  display: block;
  margin-top: 7px;
  line-height: 1.15;
}

.cg-finish-options button small {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  font-style: italic;
  font-weight: 400;
}

.cg-frame-corner {
  position: relative;
  width: min(100%, 70px);
  height: 48px;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  color: #f0f1ef;
  filter: drop-shadow(0 2px 2px rgba(12, 19, 17, .18));
}

.cg-frame-corner::before,
.cg-frame-corner::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  background: currentColor;
  box-sizing: border-box;
}

.cg-frame-corner::before {
  left: 4px;
  height: 11px;
  border-top: 2px solid rgba(255, 255, 255, .95);
  border-bottom: 2px solid rgba(112, 123, 120, .34);
}

.cg-frame-corner::after {
  width: 11px;
  bottom: 3px;
  border-left: 2px solid rgba(112, 123, 120, .34);
  border-right: 2px solid rgba(255, 255, 255, .86);
}

.cg-finish-options [data-cg-finish="flush-fin"] .cg-frame-corner::before {
  height: 18px;
  box-shadow: inset 0 -4px rgba(148, 158, 157, .28), inset 0 -7px rgba(255, 255, 255, .5);
}

.cg-finish-options [data-cg-finish="flush-fin"] .cg-frame-corner::after {
  width: 18px;
  box-shadow: inset 4px 0 rgba(148, 158, 157, .28), inset 7px 0 rgba(255, 255, 255, .5);
}

.cg-finish-options [data-cg-finish="brickmould"] .cg-frame-corner::before {
  height: 22px;
  box-shadow: inset 0 -3px rgba(116, 126, 124, .28), inset 0 -6px rgba(255, 255, 255, .52), inset 0 -10px rgba(128, 138, 136, .26), inset 0 -13px rgba(255, 255, 255, .46);
}

.cg-finish-options [data-cg-finish="brickmould"] .cg-frame-corner::after {
  width: 22px;
  box-shadow: inset 3px 0 rgba(116, 126, 124, .28), inset 6px 0 rgba(255, 255, 255, .52), inset 10px 0 rgba(128, 138, 136, .26), inset 13px 0 rgba(255, 255, 255, .46);
}

.cg-finish-options button.is-selected,
.cg-finish-options button:hover,
.cg-finish-options button:focus-visible {
  border-color: var(--cg-accent);
  background: var(--cg-accent);
  color: #16211f;
  outline: none;
}

.cg-preview {
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  margin: 0;
  overflow: hidden;
  padding: 18px 24px 12px;
  background: #d8d4cb;
}

.cg-visual {
  position: relative;
  width: min(100%, calc((100dvh - 210px) * 1.5));
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #bdb8ae;
  box-shadow: 0 22px 54px rgba(21, 28, 25, .2);
}

.cg-view-switch {
  position: absolute;
  z-index: 8;
  top: 14px;
  left: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  transform: translateX(-50%);
  background: rgba(18, 27, 24, .82);
  box-shadow: 0 8px 24px rgba(11, 18, 16, .18);
  backdrop-filter: blur(12px);
}

.cg-view-switch button {
  min-width: 78px;
  border: 0;
  border-radius: 0;
  padding: 8px 12px;
  background: transparent;
  color: rgba(255, 255, 255, .7);
  font: 600 10px var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}

.cg-view-switch button.is-selected {
  background: var(--cg-accent);
  color: #16211f;
}

.cg-room {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: opacity 420ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.cg-room-outside {
  opacity: 0;
}

.colors-glass-experience[data-view="outside"] .cg-room-inside { opacity: 0; }
.colors-glass-experience[data-view="outside"] .cg-room-outside { opacity: 1; }

.cg-pane {
  position: absolute;
  left: 32.16%;
  top: 17.48%;
  width: 44.01%;
  height: 44.73%;
  overflow: hidden;
  background: transparent;
  container-type: size;
  transition: left 600ms cubic-bezier(.22, 1, .36, 1), top 600ms cubic-bezier(.22, 1, .36, 1), width 600ms cubic-bezier(.22, 1, .36, 1), height 600ms cubic-bezier(.22, 1, .36, 1);
}

.cg-pane > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: .76;
  filter: saturate(.8) contrast(.96);
  mix-blend-mode: multiply;
  transform: scale(1.015);
  transition: opacity 260ms ease;
}

.colors-glass-experience[data-view="outside"] .cg-pane {
  left: 27.5%;
  top: 21.7%;
  width: 49%;
  height: 44.3%;
}

.colors-glass-experience[data-view="outside"] .cg-pane > img {
  opacity: .7;
  mix-blend-mode: screen;
}

.cg-pane > img.is-changing { opacity: 0 !important; }

.colors-glass-experience[data-glass="regular-glass"] .cg-pane > img,
.colors-glass-experience:not([data-glass]) .cg-pane > img {
  opacity: 0;
}

.cg-frame-overlay {
  position: absolute;
  left: 30.2%;
  top: 14.7%;
  width: 47.9%;
  height: 50.3%;
  border: var(--cg-frame-width) solid var(--cg-frame-color);
  box-sizing: border-box;
  opacity: .82;
  mix-blend-mode: multiply;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cg-frame-color), #52605d 26%), 0 0 0 1px color-mix(in srgb, var(--cg-frame-color), white 36%);
  transition: left 600ms cubic-bezier(.22, 1, .36, 1), top 600ms cubic-bezier(.22, 1, .36, 1), width 600ms cubic-bezier(.22, 1, .36, 1), height 600ms cubic-bezier(.22, 1, .36, 1), border-color 420ms ease, border-width 420ms ease, box-shadow 420ms ease;
}

.colors-glass-experience[data-view="outside"] .cg-frame-overlay {
  left: 23.4%;
  top: 15.5%;
  width: 57.5%;
  height: 58.9%;
}

.cg-frame-overlay::before,
.cg-frame-overlay::after {
  content: '';
  position: absolute;
  pointer-events: none;
  transition: inset 420ms ease, border-width 420ms ease, box-shadow 420ms ease;
}

.cg-frame-overlay::before {
  inset: calc(var(--cg-frame-width) * -.58);
  border: 2px solid color-mix(in srgb, var(--cg-frame-color), white 46%);
}

.cg-frame-overlay::after {
  inset: 3px;
  border: 1px solid color-mix(in srgb, var(--cg-frame-color), #52605d 34%);
}

.colors-glass-experience[data-finish="block"] { --cg-frame-width: clamp(10px, 1.05vw, 17px); }
.colors-glass-experience[data-finish="flush-fin"] { --cg-frame-width: clamp(15px, 1.48vw, 24px); }
.colors-glass-experience[data-finish="brickmould"] { --cg-frame-width: clamp(19px, 1.85vw, 30px); }
.colors-glass-experience[data-finish="flush-fin"] .cg-frame-overlay {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cg-frame-color), #66716f 24%), inset 0 0 0 7px color-mix(in srgb, var(--cg-frame-color), white 28%), 0 0 0 2px color-mix(in srgb, var(--cg-frame-color), white 42%);
}

.colors-glass-experience[data-finish="flush-fin"] .cg-frame-overlay::before { inset: calc(var(--cg-frame-width) * -.46); }

.colors-glass-experience[data-finish="brickmould"] .cg-frame-overlay {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cg-frame-color), #56625f 30%), inset 0 0 0 6px color-mix(in srgb, var(--cg-frame-color), white 34%), inset 0 0 0 10px color-mix(in srgb, var(--cg-frame-color), #65716e 24%), inset 0 0 0 13px color-mix(in srgb, var(--cg-frame-color), white 22%), 0 0 0 2px color-mix(in srgb, var(--cg-frame-color), white 42%);
}

.colors-glass-experience[data-finish="brickmould"] .cg-frame-overlay::before {
  inset: calc(var(--cg-frame-width) * -.38);
  border-width: 3px;
}
.colors-glass-experience[data-color="white"] { --cg-frame-color: #f4f3ee; }
.colors-glass-experience[data-color="adobe"] { --cg-frame-color: #b8b3a7; }
.colors-glass-experience[data-color="tan"] { --cg-frame-color: #c9c1a5; }
.colors-glass-experience[data-color="designer-black"] { --cg-frame-color: #111211; }
.colors-glass-experience[data-color="architectural-black"] { --cg-frame-color: #0b0305; }
.colors-glass-experience[data-color="architectural-bronze"] { --cg-frame-color: #373536; }
.colors-glass-experience[data-color="architectural-silver"] { --cg-frame-color: #9fa2a6; }
.colors-glass-experience[data-color="classic-gray"] { --cg-frame-color: #afb3ac; }
.colors-glass-experience[data-color="espresso"] { --cg-frame-color: #413d3a; }
.colors-glass-experience[data-color="taupe"] { --cg-frame-color: #706650; }
.colors-glass-experience[data-color="red-pepper"] { --cg-frame-color: #880018; }
.colors-glass-experience[data-color="rose-wood"] { --cg-frame-color: #5b3931; }
.colors-glass-experience[data-color="desert-tan"] { --cg-frame-color: #9fa296; }
.colors-glass-experience[data-color="sandstone"] { --cg-frame-color: #d5c9b5; }
.colors-glass-experience[data-color="divine-wine"] { --cg-frame-color: #6e3224; }
.colors-glass-experience[data-color="forest-green"] { --cg-frame-color: #006552; }

.cg-grid-overlay {
  --cg-grid-line: rgba(246,246,241,.96);
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25));
  transition: opacity 320ms ease;
}

.colors-glass-experience[data-grid-style="sculpted"] .cg-grid-overlay {
  --cg-grid-line: rgba(137,143,140,.96);
  filter: drop-shadow(-2px 0 rgba(255,255,255,.9)) drop-shadow(2px 0 rgba(72,80,77,.32)) drop-shadow(0 -2px rgba(255,255,255,.9)) drop-shadow(0 2px rgba(72,80,77,.32));
}

.colors-glass-experience[data-grid-style="sculpted-one-inch"] .cg-grid-overlay {
  --cg-grid-line: rgba(126,133,130,.96);
  filter:
    drop-shadow(-1px 0 #fff) drop-shadow(1px 0 #fff)
    drop-shadow(-1px 0 #fff) drop-shadow(1px 0 #fff)
    drop-shadow(-1px 0 #fff) drop-shadow(1px 0 #fff)
    drop-shadow(-1px 0 rgba(190,196,193,.9)) drop-shadow(1px 0 rgba(190,196,193,.9))
    drop-shadow(0 -1px #fff) drop-shadow(0 1px #fff)
    drop-shadow(0 -1px #fff) drop-shadow(0 1px #fff)
    drop-shadow(0 -1px #fff) drop-shadow(0 1px #fff)
    drop-shadow(0 -1px rgba(190,196,193,.9)) drop-shadow(0 1px rgba(190,196,193,.9));
}

.colors-glass-experience:not([data-grid="none"]) .cg-grid-overlay { opacity: 1; }
.colors-glass-experience[data-grid="colonial"] .cg-grid-overlay {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), var(--cg-grid-line) calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) 25%),
    repeating-linear-gradient(0deg, transparent 0 calc(25% - 1px), var(--cg-grid-line) calc(25% - 1px) calc(25% + 1px), transparent calc(25% + 1px) 25%);
}

.colors-glass-experience[data-grid="perimeter"] .cg-grid-overlay {
  background-image:
    linear-gradient(90deg, transparent calc(16cqh - 1px), var(--cg-grid-line) calc(16cqh - 1px) calc(16cqh + 1px), transparent calc(16cqh + 1px) calc(100% - 16cqh - 1px), var(--cg-grid-line) calc(100% - 16cqh - 1px) calc(100% - 16cqh + 1px), transparent calc(100% - 16cqh + 1px)),
    linear-gradient(0deg, transparent calc(16% - 1px), var(--cg-grid-line) calc(16% - 1px) calc(16% + 1px), transparent calc(16% + 1px) calc(84% - 1px), var(--cg-grid-line) calc(84% - 1px) calc(84% + 1px), transparent calc(84% + 1px));
}

.colors-glass-experience[data-grid="queen-anne"] .cg-grid-overlay {
  background-image:
    linear-gradient(90deg, transparent calc(16cqh - 1px), var(--cg-grid-line) calc(16cqh - 1px) calc(16cqh + 1px), transparent calc(16cqh + 1px) calc(38% - 1px), var(--cg-grid-line) calc(38% - 1px) calc(38% + 1px), transparent calc(38% + 1px) calc(62% - 1px), var(--cg-grid-line) calc(62% - 1px) calc(62% + 1px), transparent calc(62% + 1px) calc(100% - 16cqh - 1px), var(--cg-grid-line) calc(100% - 16cqh - 1px) calc(100% - 16cqh + 1px), transparent calc(100% - 16cqh + 1px)),
    linear-gradient(0deg, transparent calc(16% - 1px), var(--cg-grid-line) calc(16% - 1px) calc(16% + 1px), transparent calc(16% + 1px) calc(84% - 1px), var(--cg-grid-line) calc(84% - 1px) calc(84% + 1px), transparent calc(84% + 1px));
}

.cg-preview-label {
  position: absolute;
  left: 4%;
  bottom: 4%;
  display: grid;
  gap: 3px;
  min-width: 180px;
  padding: 12px 15px;
  background: rgba(14, 27, 23, .86);
  color: #f3f5f2;
  backdrop-filter: blur(12px);
}

.cg-preview-label span {
  color: #c2cbc5;
  font: 9px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cg-preview-label strong {
  font: 600 14px var(--sans);
}

.cg-preview figcaption {
  width: min(100%, calc((100dvh - 210px) * 1.5));
  color: #4e5954;
  font: 10px/1.4 var(--mono);
}

.cg-footer {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) auto;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  padding: 12px max(28px, calc((100vw - 1460px) / 2));
  border-top: 1px solid var(--cg-line);
  background: var(--cg-panel);
}

.cg-footer p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.cg-footer p span {
  color: var(--cg-muted);
  font: 9px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cg-footer p b {
  overflow: hidden;
  font: 600 11px var(--sans);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cg-footer .button {
  min-width: 190px;
  border-color: var(--cg-ink);
  background: var(--cg-ink);
  color: #fff;
}

html[data-theme="dark"] .colors-glass-experience {
  --cg-bg: #101512;
  --cg-panel: #171f1b;
  --cg-ink: #edf2ee;
  --cg-muted: #adb9b2;
  --cg-line: rgba(237, 242, 238, .18);
}

html[data-theme="dark"] .cg-preview { background: #09100d; }
html[data-theme="dark"] .cg-header,
html[data-theme="dark"] .cg-footer { background: #111815; }
html[data-theme="dark"] .cg-tabs button.is-current,
html[data-theme="dark"] .cg-tabs button:hover,
html[data-theme="dark"] .cg-tabs button:focus-visible,
html[data-theme="dark"] .cg-finish-options button.is-selected,
html[data-theme="dark"] .cg-finish-options button:hover,
html[data-theme="dark"] .cg-finish-options button:focus-visible { color: #16211f; }
html[data-theme="dark"] .grid-sample { border-color: #87918c; }
html[data-theme="dark"] .cg-preview figcaption { color: #a8b4ad; }

@media (max-width: 1050px) {
  .cg-header { grid-template-columns: auto 1fr auto; gap: 18px; }
  .cg-tabs { justify-content: flex-start; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .cg-tabs::-webkit-scrollbar { display: none; }
  .cg-tabs button { white-space: nowrap; }
  .cg-body { grid-template-columns: 330px minmax(0, 1fr); }
  .cg-controls { padding-left: 24px; padding-right: 24px; }
  .cg-footer { gap: 12px; }
}

@media (max-width: 780px) {
  .colors-glass-experience { overflow: auto; }
  .cg-dialog { height: auto; min-height: 100dvh; display: block; }
  .cg-header { position: sticky; top: 0; grid-template-columns: 1fr auto; min-height: 0; padding: 13px 20px 10px; background: color-mix(in srgb, var(--cg-panel) 94%, transparent); backdrop-filter: blur(14px); }
  .cg-header h2 { font-size: 29px; }
  .cg-header .cg-eyebrow { display: none; }
  .cg-close { grid-column: 2; grid-row: 1; }
  .cg-tabs { grid-column: 1 / -1; grid-row: 2; margin-top: 3px; }
  .cg-tabs button { padding: 9px 10px; font-size: 10px; }
  .cg-body { display: flex; flex-direction: column; min-height: 0; }
  .cg-preview { order: -1; display: block; padding: 12px 12px 9px; }
  .cg-visual { width: 100%; }
  .cg-preview figcaption { width: 100%; margin-top: 8px; font-size: 8px; }
  .cg-preview-label { left: 3%; bottom: 3%; min-width: 148px; padding: 9px 11px; }
  .cg-preview-label strong { font-size: 12px; }
  .cg-controls { overflow: visible; padding: 34px 20px 45px; border: 0; }
  .cg-panel h3 { max-width: 360px; font-size: 38px; }
  .cg-intro { max-width: 420px; }
  .cg-glass-options { grid-template-columns: 1fr 1fr; }
  .cg-glass-options button { grid-template-columns: 46px 1fr; gap: 8px; }
  .cg-glass-options img { width: 46px; height: 45px; }
  .cg-glass-options small { display: none; }
  .cg-swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cg-swatches-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-profile-options img { aspect-ratio: 2.22; }
  .cg-footer { grid-template-columns: 1fr 1fr; min-height: 0; padding: 20px; }
  .cg-footer .button { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .colors-glass-experience,
  .cg-panel,
  .cg-pane > img,
  .cg-frame-overlay,
  .cg-grid-overlay { transition: none; animation: none; }
}