.button-studio {
  position: fixed; z-index: 960; pointer-events: none;
  right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  color: #273039; font: 400 13px/1.4 Selecta, Arial, sans-serif; text-align: left; letter-spacing: 0;
}
body:has(.glass-studio) .button-studio { bottom: calc(max(20px, env(safe-area-inset-bottom)) + 58px); }
body:has(.glass-studio.is-open) .button-studio { visibility: hidden; }
.button-studio :is(button, input, select, textarea) { font: inherit; }
.button-studio button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bts-trigger {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; margin-left: auto;
  height: 44px; padding: 0 16px 0 12px; color: #283039; border: 1px solid white; border-radius: 99px;
  background: #ffffffe8; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 5px 24px #24344313, 0 1px 3px #24344317;
}
.bts-gem { width: 25px; height: 15px; border-radius: 999px; background: linear-gradient(150deg, #fff, #d9e7ef70); box-shadow: inset 0 1px 2px white, inset 0 -2px 3px #879fa647, 0 2px 4px #40546d20; }
.bts-plus { color: #69757d; font-size: 20px; line-height: 1; transition: transform .2s; }
.button-studio.is-open .bts-plus { transform: rotate(45deg); }
.bts-panel {
  pointer-events: auto; display: flex; flex-direction: column; width: 320px;
  max-height: min(720px, calc(100dvh - 160px)); margin-bottom: 10px; border: 1px solid #fff;
  border-radius: 24px; overflow: hidden; background: #fafcfbf5;
  backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px);
  box-shadow: 0 20px 65px #283a4b24, 0 2px 10px #283a4b12;
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: bottom right;
  transition: opacity .2s, transform .25s, visibility .25s;
}
.button-studio.is-open .bts-panel { opacity: 1; visibility: visible; transform: none; }
.bts-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px 14px; flex: none; }
.bts-header h2 { margin: 0; font: 500 19px/1.2 Selecta, Arial, sans-serif; letter-spacing: -.025em; }
.bts-header p { margin: 4px 0 0; font-size: 12px; color: #858d95; }
.bts-close { flex: none; border: 0; width: 32px; height: 32px; padding: 0; border-radius: 50%; background: #e9edf0; color: #6a747c; font-size: 22px !important; }
.bts-preview { margin: 0 20px 12px; padding: 0 0 9px; border-radius: 16px; overflow: hidden; flex: none; background: #fff; }
.bts-sample { height: 94px; display: grid; place-items: center; }
.bts-preview[data-backdrop="color"] { background: linear-gradient(115deg, #c7e9df 0%, #ede7c7 37%, #f2c4b1 58%, #cfcceb 80%, #b4d8ed); }
.bts-preview[data-backdrop="grid"] .bts-sample { background: repeating-linear-gradient(90deg, transparent 0 14px, #647c8d 14px 16px), repeating-linear-gradient(0deg, transparent 0 14px, #c6d1d9 14px 16px); }
.bts-preview .mgb { pointer-events: auto; }
.bts-preview .mgb-label { font-family: Selecta, Arial, sans-serif; }
.bts-backdrops { display: flex; justify-content: center; gap: 4px; }
.bts-backdrops button { color: #55616b; background: #ffffff5c; border: 0; padding: 4px 11px; font-size: 10px; border-radius: 99px; }
.bts-backdrops button[aria-pressed="true"] { color: #273039; background: #fffffff0; }
.bts-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 14px; scrollbar-width: thin; scrollbar-color: #c6cfd4 transparent; }
.bts-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-block: 2px 16px; }
.bts-presets button { border: 1px solid #dce4e9; border-radius: 10px; background: transparent; padding: 7px 0; font-size: 11px; color: #74818a; }
.bts-presets button[aria-pressed="true"] { color: #263d4d; background: #e8eff3; border-color: #abc0ce; }
.bts-group { margin: 0 0 18px; padding: 14px 0 0; border: 0; border-top: 1px solid #dde3e7; min-width: 0; }
.bts-group legend { float: left; width: 100%; margin-bottom: 18px; font-size: 10px; color: #8a959e; text-transform: uppercase; letter-spacing: .12em; }
.bts-control { display: block; clear: both; margin-bottom: 14px; }
.bts-caption { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.bts-caption output { font-size: 11px; color: #81909c; font-variant-numeric: tabular-nums; }
.bts-control input { display: block; width: 100%; height: 26px; margin: 0; appearance: none; background: transparent; cursor: ew-resize; }
.bts-control input::-webkit-slider-runnable-track { height: 3px; border-radius: 99px; background: linear-gradient(to right, #758e9c var(--fill), #dfe6ea var(--fill)); }
.bts-control input::-webkit-slider-thumb { appearance: none; width: 15px; height: 15px; margin-top: -6px; border: 1px solid #c3d0d9; border-radius: 50%; background: white; box-shadow: 0 1px 3px #21394e1f; }
.bts-control input::-moz-range-track { height: 3px; border-radius: 99px; background: #dfe6ea; }
.bts-control input::-moz-range-progress { height: 3px; background: #758e9c; }
.bts-control input::-moz-range-thumb { width: 15px; height: 15px; border: 1px solid #c3d0d9; border-radius: 50%; background: white; }
.bts-select, .bts-toggle { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.bts-select select { color: #526674; border: 1px solid #d2dce3; background: #fff; border-radius: 8px; padding: 5px 8px; font-size: 12px; max-width: 55%; }
.bts-toggle input { width: 18px; height: 18px; accent-color: #637f90; }
.bts-hint { color: #84919a; font-size: 11px; margin: 0; }
.bts-footer { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 20px; border-top: 1px solid #dde3e7; background: #f3f7f9; }
.bts-footer button { min-height: 34px; border: 1px solid #d4dfe6; border-radius: 10px; color: #637683; background: #fff; font-size: 11px; }
.bts-footer .bts-copy { color: #304d60; border-color: #bacdd9; }
.bts-status { grid-column: 1 / -1; margin: 0; color: #74838e; font-size: 11px; text-align: center; }
.bts-copy-text { grid-column: 1 / -1; width: 100%; box-sizing: border-box; height: 72px; border: 1px solid #cfdbe2; border-radius: 8px; background: white; padding: 8px; color: #344f60; font: 10px/1.4 monospace !important; resize: vertical; user-select: text; -webkit-user-select: text; }
.button-studio :is(button, input, select, textarea):focus-visible { outline: 2px solid #547e9d; outline-offset: 3px; }
@media (max-width: 650px) {
  .button-studio { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  body:has(.glass-studio) .button-studio { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 50px); }
  .bts-trigger { height: 38px; font-size: 12px; }
  .bts-panel { width: min(320px, calc(100vw - 24px)); max-height: min(610px, calc(100dvh - 128px)); border-radius: 20px; }
  .bts-header { padding-block: 13px 10px; }
  .bts-sample { height: 72px; }
  .bts-preview { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { .bts-panel, .bts-plus { transition: none; } }
@media (max-height: 520px) { .bts-preview { display: none; } }
@media (prefers-reduced-transparency: reduce) { .bts-panel, .bts-trigger { background: #fbfcfd; backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* Keep the website's studio above the storyboard transport. */
.editor .button-studio { bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px)); }
.button-studio .bts-panel { transition:opacity 180ms ease-out, transform 220ms cubic-bezier(.23,1,.32,1), visibility 220ms; }
.button-studio .bts-control input { min-height:32px; touch-action:pan-y; }
.button-studio .bts-close { width:36px; height:36px; }
.button-studio .bts-backdrops button { min-height:28px; }
.button-studio .bts-presets button { min-height:34px; }
.button-studio .mgb { position:relative; border-radius:999px; }
.button-studio .mgb-btn {
  appearance:none; display:grid; place-items:center; position:relative;
  width:148px; height:56px; padding:0; border:1px solid #ffffffe6; border-radius:999px;
  background:transparent; color:#363636; font:400 19px Selecta,Arial,sans-serif;
  box-shadow:inset 0 1px 4px #ffffffaa, inset 0 -4px 4px #ffffffd9,
    inset 0 0 14px #e5e5e58c, 0 11px 28px #00000012, 0 23px 31px #0000000d;
}
.button-studio .mgb-label { position:relative; z-index:1; border-radius:inherit; letter-spacing:-.19px; }
/* The shared renderer supplies the website's rim and sheen. */
.button-studio .mgb-ring, .button-studio .mgb-shine { display:none; }
@media (prefers-reduced-motion:reduce) { .button-studio .bts-panel, .button-studio .bts-plus { transition:none; } }
@media (prefers-reduced-transparency:reduce) { .liquid-control .lg-material > .lg-frost { background:#fafbfc; } .liquid-control .lg-backdrop { display:none; } }