.bm3d-app {
  --bm3d-accent: #9b3c8f;
  --bm3d-accent-ink: #fff;
  --bm3d-viewer-bg: #f2eff1;
  --bm3d-viewer-ink: #171416;
  --bm3d-dock-bg: #fff;
  --bm3d-dock-ink: #171416;
  --bm3d-effective-viewer-bg: var(--bm3d-viewer-bg);
  --bm3d-effective-viewer-ink: var(--bm3d-viewer-ink);
  --bm3d-effective-dock-bg: var(--bm3d-dock-bg);
  --bm3d-effective-dock-ink: var(--bm3d-dock-ink);
  --bm3d-border: color-mix(in srgb, var(--bm3d-effective-dock-ink) 12%, transparent);
  --bm3d-muted: color-mix(in srgb, var(--bm3d-effective-dock-ink) 62%, transparent);
  position: relative;
  isolation: isolate;
  width: 100%;
  height: var(--bm3d-height, 820px);
  min-height: 560px;
  overflow: hidden;
  color: var(--bm3d-effective-viewer-ink);
  background-color: var(--bm3d-effective-viewer-bg);
  background-image: radial-gradient(circle at 54% 38%, color-mix(in srgb, var(--bm3d-effective-viewer-bg) 66%, #fff) 0 16%, var(--bm3d-effective-viewer-bg) 64%, color-mix(in srgb, var(--bm3d-effective-viewer-bg) 84%, #171416) 100%);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}
.bm3d-app[data-bm3d-theme="light"] { color-scheme: light; }
.bm3d-app[data-bm3d-theme="dark"] { --bm3d-effective-viewer-bg: color-mix(in srgb, var(--bm3d-viewer-bg) 34%, #111 66%); --bm3d-effective-viewer-ink: #f8f6f7; --bm3d-effective-dock-bg: color-mix(in srgb, var(--bm3d-dock-bg) 28%, #191619 72%); --bm3d-effective-dock-ink: #f8f6f7; color-scheme: dark; }
.bm3d-app *, .bm3d-app *::before, .bm3d-app *::after { box-sizing: border-box; }
.bm3d-app button { margin: 0; font: inherit; color: inherit; }
.bm3d-app [hidden] { display: none !important; }
.bm3d-app:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; }

.bm3d-canvas-wrap { position: absolute; inset: 0 0 102px; }
.bm3d-canvas-wrap canvas { display: block; width: 100%; height: 100%; outline: 0; cursor: grab; touch-action: none; }
.bm3d-app.is-dragging .bm3d-canvas-wrap canvas { cursor: grabbing; }
.bm3d-app[data-navigation="pan"] .bm3d-canvas-wrap canvas { cursor: grab; }
.bm3d-app[data-navigation="pan"].is-dragging .bm3d-canvas-wrap canvas { cursor: grabbing; }
.bm3d-canvas-wrap canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--bm3d-accent); }

.bm3d-dock-shell {
  position: absolute;
  z-index: 8;
  right: clamp(12px, 2vw, 24px);
  bottom: max(14px, env(safe-area-inset-bottom));
  left: clamp(12px, 2vw, 24px);
  pointer-events: none;
}
.bm3d-dock {
  width: max-content;
  max-width: 100%;
  min-height: 70px;
  display: flex;
  align-items: stretch;
  margin: 0 auto;
  overflow: hidden;
  color: var(--bm3d-effective-dock-ink);
  border: 1px solid color-mix(in srgb, var(--bm3d-effective-dock-ink) 13%, transparent);
  border-radius: 22px;
  background: var(--bm3d-effective-dock-bg);
  background: color-mix(in srgb, var(--bm3d-effective-dock-bg) 91%, transparent);
  box-shadow: 0 18px 48px rgba(27, 20, 24, .18), inset 0 1px rgba(255, 255, 255, .38);
  backdrop-filter: blur(22px) saturate(1.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.22);
  pointer-events: auto;
}
.bm3d-dock-logo {
  flex: 0 0 auto;
  width: 82px;
  min-height: 70px;
  display: grid;
  place-items: center;
  padding: 11px 10px;
  border-right: 1px solid var(--bm3d-border);
}
.bm3d-dock-logo img { display: block; max-width: 62px; max-height: 38px; width: auto; height: auto; object-fit: contain; }
.bm3d-dock-scroll { display: flex; align-items: center; gap: 3px; min-width: 0; overflow-x: auto; padding: 7px; overscroll-behavior-x: contain; scrollbar-width: none; }
.bm3d-dock-scroll::-webkit-scrollbar { display: none; }
.bm3d-dock-button {
  flex: 0 0 auto;
  min-width: 74px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--bm3d-effective-dock-ink);
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.bm3d-dock-button:hover { color: var(--bm3d-accent); background: color-mix(in srgb, var(--bm3d-accent) 10%, transparent); }
.bm3d-dock-button:active { transform: scale(.97); }
.bm3d-dock-button[aria-pressed="true"], .bm3d-dock-button[aria-expanded="true"] { color: var(--bm3d-accent-ink); background: var(--bm3d-accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--bm3d-accent) 32%, transparent); }
.bm3d-dock-button:disabled { opacity: .34; cursor: not-allowed; transform: none; box-shadow: none; }
.bm3d-dock-button svg { flex: 0 0 auto; width: 20px; height: 20px; }
.bm3d-dock-copy { min-width: 0; display: grid; gap: 2px; text-align: left; }
.bm3d-dock-copy b { font-size: 10px; font-weight: 720; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; }
.bm3d-dock-copy small { max-width: 86px; overflow: hidden; color: var(--bm3d-muted); font-size: 8px; font-weight: 600; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.bm3d-dock-button[aria-pressed="true"] .bm3d-dock-copy small, .bm3d-dock-button[aria-expanded="true"] .bm3d-dock-copy small { color: color-mix(in srgb, var(--bm3d-accent-ink) 74%, transparent); }
.bm3d-dock-divider { flex: 0 0 1px; width: 1px; height: 34px; margin: 0 4px; background: var(--bm3d-border); }

.bm3d-panel {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 11px);
  max-height: min(58vh, 480px);
  overflow: auto;
  padding: 12px;
  color: var(--bm3d-effective-dock-ink);
  border: 1px solid var(--bm3d-border);
  border-radius: 20px;
  background: var(--bm3d-effective-dock-bg);
  background: color-mix(in srgb, var(--bm3d-effective-dock-bg) 94%, transparent);
  box-shadow: 0 20px 56px rgba(27, 20, 24, .2), inset 0 1px rgba(255, 255, 255, .34);
  backdrop-filter: blur(24px) saturate(1.18);
  -webkit-backdrop-filter: blur(24px) saturate(1.18);
  animation: bm3d-panel-in .18s ease both;
  pointer-events: auto;
}
.bm3d-panel > header { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 3px 9px 7px; }
.bm3d-panel > header strong { font-size: 11px; font-weight: 760; letter-spacing: -.01em; }
.bm3d-panel > header button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bm3d-effective-dock-ink) 8%, transparent); cursor: pointer; }
.bm3d-panel > header button:hover { color: var(--bm3d-accent); background: color-mix(in srgb, var(--bm3d-accent) 12%, transparent); }
.bm3d-panel > header svg { width: 16px; height: 16px; }
.bm3d-module-panel { left: 0; width: min(650px, calc(100% - 30px)); }
.bm3d-thickness-panel { left: min(130px, 12vw); width: 330px; }
.bm3d-materials-panel { left: min(230px, 22vw); width: min(720px, calc(100% - 230px)); }
.bm3d-quality-panel { right: 76px; width: 370px; }
.bm3d-module-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bm3d-module-grid button, .bm3d-material-grid button, .bm3d-choice-grid button, .bm3d-quality-options button {
  border: 1px solid transparent;
  border-radius: 14px;
  background: color-mix(in srgb, var(--bm3d-effective-dock-ink) 5%, transparent);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease;
}
.bm3d-module-grid button:hover, .bm3d-material-grid button:hover, .bm3d-choice-grid button:hover, .bm3d-quality-options button:hover { color: var(--bm3d-accent); border-color: color-mix(in srgb, var(--bm3d-accent) 32%, transparent); transform: translateY(-1px); }
.bm3d-module-grid button[aria-pressed="true"], .bm3d-material-grid button[aria-pressed="true"], .bm3d-choice-grid button[aria-pressed="true"], .bm3d-quality-options button[aria-pressed="true"] { color: var(--bm3d-accent-ink); border-color: var(--bm3d-accent); background: var(--bm3d-accent); }
.bm3d-module-grid button { min-width: 0; display: grid; gap: 7px; padding: 7px; text-align: left; }
.bm3d-module-grid button > span:last-child { overflow: hidden; padding: 0 3px 3px; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.bm3d-module-thumb { height: 74px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--bm3d-effective-dock-bg) 84%, #fff), color-mix(in srgb, var(--bm3d-effective-dock-bg) 84%, #171416)); }
.bm3d-module-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bm3d-module-thumb i { color: var(--bm3d-accent); font-size: 17px; font-style: normal; font-weight: 850; letter-spacing: -.08em; }
.bm3d-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.bm3d-choice-grid button { min-height: 68px; display: grid; place-content: center; gap: 1px; text-align: center; }
.bm3d-choice-grid strong { font-size: 21px; line-height: 1; }
.bm3d-choice-grid small { font-size: 8px; font-weight: 700; text-transform: uppercase; }
.bm3d-choice-grid button:disabled { opacity: .3; cursor: not-allowed; transform: none; }
.bm3d-material-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bm3d-material-grid button { min-width: 0; min-height: 58px; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 9px; padding: 8px; text-align: left; }
.bm3d-material-grid button > span:last-child { overflow: hidden; font-size: 9px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.bm3d-material-swatch { width: 40px; height: 40px; display: block; overflow: hidden; border: 1px solid var(--bm3d-border); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.bm3d-material-swatch img { width: 100%; height: 100%; display: block; object-fit: cover; }
.bm3d-quality-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.bm3d-quality-options button { min-width: 0; min-height: 72px; display: grid; align-content: center; gap: 4px; padding: 10px; text-align: left; }
.bm3d-quality-options b { font-size: 10px; }
.bm3d-quality-options small { color: var(--bm3d-muted); font-size: 8px; line-height: 1.3; }
.bm3d-quality-options button[aria-pressed="true"] small { color: color-mix(in srgb, var(--bm3d-accent-ink) 74%, transparent); }

.bm3d-status, .bm3d-popup {
  position: absolute;
  z-index: 6;
  color: var(--bm3d-effective-dock-ink);
  border: 1px solid var(--bm3d-border);
  background: var(--bm3d-effective-dock-bg);
  background: color-mix(in srgb, var(--bm3d-effective-dock-bg) 94%, transparent);
  box-shadow: 0 18px 48px rgba(27, 20, 24, .16);
  backdrop-filter: blur(22px) saturate(1.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.16);
}
.bm3d-status { top: 46%; left: 50%; max-width: min(390px, calc(100% - 40px)); transform: translate(-50%, -50%); padding: 14px 18px; border-radius: 14px; font-size: 11px; font-weight: 650; line-height: 1.45; text-align: center; }
.bm3d-status[data-type="error"] { color: #8b2146; border-color: rgba(158, 43, 80, .28); background: #fff4f7; }
.bm3d-popup { top: 22px; right: 22px; width: min(330px, calc(100% - 44px)); max-height: calc(100% - 146px); overflow: auto; padding: 27px 25px; border-radius: 20px; animation: bm3d-popup-in .2s ease both; }
.bm3d-popup > span { color: var(--bm3d-accent); font-size: 8px; font-weight: 850; letter-spacing: .16em; }
.bm3d-popup h2 { margin: 8px 30px 0 0; font-size: 25px; line-height: 1.05; letter-spacing: -.035em; }
.bm3d-popup h2:empty, .bm3d-popup-copy:empty, .bm3d-popup img[hidden] { display: none; }
.bm3d-popup-copy { margin-top: 18px; color: var(--bm3d-muted); font-size: 12px; line-height: 1.65; }
.bm3d-popup-copy p { margin: 0 0 .85em; }
.bm3d-popup-copy p:last-child { margin-bottom: 0; }
.bm3d-popup img { display: block; width: 100%; height: auto; max-height: 260px; margin-top: 19px; border-radius: 11px; object-fit: cover; }
.bm3d-popup-rule { width: 42px; height: 3px; margin-top: 18px; background: var(--bm3d-accent); }
.bm3d-popup-close { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--bm3d-accent) 10%, transparent); color: var(--bm3d-accent); font-size: 22px; line-height: 1; cursor: pointer; }
.bm3d-popup-close:hover { color: var(--bm3d-accent-ink); background: var(--bm3d-accent); }
.bm3d-hint { position: absolute; z-index: 3; right: 18px; bottom: 102px; left: 18px; overflow: hidden; color: color-mix(in srgb, var(--bm3d-effective-viewer-ink) 52%, transparent); font-size: 7px; font-weight: 750; letter-spacing: .11em; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.bm3d-app noscript { position: absolute; inset: 0; display: grid; place-content: center; padding: 30px; text-align: center; }

.bm3d-app button:focus-visible { outline: 3px solid var(--bm3d-accent); outline-offset: 2px; }
.bm3d-dock-button[aria-pressed="true"]:focus-visible, .bm3d-dock-button[aria-expanded="true"]:focus-visible { outline-color: var(--bm3d-accent-ink); }
@keyframes bm3d-panel-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bm3d-popup-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-color-scheme: dark) {
  .bm3d-app[data-bm3d-theme="auto"] { --bm3d-effective-viewer-bg: color-mix(in srgb, var(--bm3d-viewer-bg) 34%, #111 66%); --bm3d-effective-viewer-ink: #f8f6f7; --bm3d-effective-dock-bg: color-mix(in srgb, var(--bm3d-dock-bg) 28%, #191619 72%); --bm3d-effective-dock-ink: #f8f6f7; color-scheme: dark; }
}
@media (max-width: 1040px) {
  .bm3d-dock-button { min-width: 66px; padding-inline: 9px; }
  .bm3d-dock-copy small { display: none; }
  .bm3d-materials-panel { left: 120px; width: min(720px, calc(100% - 120px)); }
}
@media (max-width: 760px) {
  .bm3d-app { min-height: 620px; height: min(var(--bm3d-height, 820px), 100svh); }
  .bm3d-canvas-wrap { bottom: 92px; }
  .bm3d-dock-shell { right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; }
  .bm3d-dock { width: 100%; min-height: 68px; border-radius: 20px; }
  .bm3d-dock-logo { width: 64px; min-height: 68px; padding: 10px 8px; }
  .bm3d-dock-logo img { max-width: 48px; max-height: 32px; }
  .bm3d-dock-scroll { padding: 6px; }
  .bm3d-dock-button { min-width: 62px; height: 54px; flex-direction: column; gap: 4px; padding: 6px 8px; }
  .bm3d-dock-button svg { width: 19px; height: 19px; }
  .bm3d-dock-copy { text-align: center; }
  .bm3d-dock-copy b { font-size: 8px; }
  .bm3d-dock-divider { height: 30px; margin-inline: 2px; }
  .bm3d-panel { right: 0; bottom: calc(100% + 8px); left: 0; width: auto; max-height: min(54vh, 420px); border-radius: 18px; }
  .bm3d-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm3d-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm3d-popup { top: auto; right: 12px; bottom: 92px; left: 12px; width: auto; max-height: 48%; padding: 22px; }
  .bm3d-popup h2 { font-size: 21px; }
  .bm3d-hint { bottom: 84px; font-size: 6px; }
}
@media (max-width: 460px) {
  .bm3d-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bm3d-quality-options { grid-template-columns: 1fr; }
  .bm3d-quality-options button { min-height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .bm3d-app *, .bm3d-app *::before, .bm3d-app *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}