:root[data-preview-mode="studio"] {
  --studio-surface: #1b1d21;
  --studio-surface-raised: #24272d;
  --studio-field: #15171b;
  --studio-border: #363b43;
  --studio-copy: #edf0f5;
  --studio-muted: #969fab;
  --studio-accent: #b4c9e7;
  --studio-panel-width: 334px;
}
.studio-workspace { position: relative; display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
.studio-workspace > .preview-stage { flex: 1 1 auto; min-width: 0; width: auto; }
.studio-panel { position: relative; z-index: 6; display: flex; flex: 0 0 var(--studio-panel-width); flex-direction: column; width: var(--studio-panel-width); min-height: 0; border-right: 1px solid var(--studio-border); background: linear-gradient(160deg, #26292f 0, #1b1d21 190px, #191b1f 100%); color: var(--studio-copy); box-shadow: 7px 0 24px #0000001f, inset 1px 0 0 #ffffff05; color-scheme: dark; }
.studio-panel button, .studio-panel input, .studio-panel select, .studio-panel textarea { font: inherit; }
.studio-panel button { touch-action: manipulation; }
.studio-panel :is(button, input, select, textarea, summary):focus-visible { outline: 2px solid #a4c4ee; outline-offset: 3px; }
.studio-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 25px 22px 16px; }
.studio-kicker { display: block; color: #9ba9bd; font-size: 8px; font-weight: 650; letter-spacing: 1.6px; line-height: 1.4; text-transform: uppercase; }
.studio-panel h1 { margin: 7px 0 0; color: #f5f6f9; font-size: 18px; font-weight: 650; letter-spacing: -.7px; line-height: 1.3; }
.studio-panel h1 > span { color: #b2cbed; }
.studio-close { display: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--studio-border); border-radius: 7px; background: #ffffff05; color: #c7d0dc; }
.studio-context { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0 22px 14px; color: #b9c1ce; font-size: 9px; line-height: 1.4; }
.studio-context-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #9db8db; box-shadow: 0 0 8px #9db8db40; }
#studio-variant-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#studio-draft-state { flex: 0 0 auto; margin-left: auto; padding: 3px 5px; border: 1px solid #454b56; border-radius: 4px; color: #aeb9c9; font-size: 8px; }
#studio-draft-state.is-customized { border-color: #6f83a1; color: #d0def2; background: #788eae16; }
.studio-history { display: flex; align-items: center; gap: 5px; min-height: 39px; padding: 0 20px; border-top: 1px solid #ffffff07; border-bottom: 1px solid var(--studio-border); background: #00000012; }
#studio-save-status { flex: 1 1 auto; color: #86919f; font-size: 8px; line-height: 1.4; }
.studio-history button { width: 25px; height: 26px; padding: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #c4cfdd; font-size: 21px; line-height: 1; }
.studio-history button:hover:not(:disabled) { border-color: var(--studio-border); background: #ffffff08; }
.studio-history button:disabled { cursor: default; opacity: .3; }
.studio-tabs { display: flex; flex: 0 0 auto; gap: 3px; padding: 10px 12px 0; border-bottom: 1px solid var(--studio-border); }
.studio-tab { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 7px; min-width: 0; min-height: 59px; padding: 9px 0 13px; border: 0; border-radius: 7px 7px 0 0; background: transparent; color: #919cab; font-size: 8px !important; font-weight: 550 !important; transition: color 160ms ease, background 160ms ease; }
.studio-tab svg { width: 17px; height: 17px; stroke-width: 1.5; }
.studio-tab:hover { color: #e0e7f1; background: #ffffff04; }
.studio-tab[aria-selected="true"] { color: #d9e6f7; background: linear-gradient(180deg, #8ca6cc12, #8ca6cc02); }
.studio-tab[aria-selected="true"]::after { position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: #a4bddf; content: ""; box-shadow: 0 0 9px #a4bddf30; }
.studio-scroll { flex: 1 1 auto; min-height: 0; padding: 20px 21px 24px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #505966 transparent; scrollbar-width: thin; }
.studio-scope { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.studio-scope label { flex: 0 0 auto; color: #929dab; font-size: 9px; }
.studio-scope select { flex: 1 1 auto; min-width: 0; padding: 8px 22px 8px 9px; border: 1px solid #3d434e; border-radius: 6px; background: #272b32; color: #c8d1de; font-size: 9px; }
.studio-scope-note { margin: -10px 0 20px; padding: 9px; border: 1px solid #6b7f9b55; border-radius: 6px; background: #9db8db08; color: #b9cbea; font-size: 9px; line-height: 1.6; }
.studio-section-heading { margin-bottom: 20px; }
.studio-section-heading h2 { margin: 6px 0 10px; color: #f0f2f7; font-size: 19px; font-weight: 550; letter-spacing: -.55px; line-height: 1.3; }
.studio-section-heading p, .studio-help { margin: 0; color: #909cab; font-size: 10px; font-weight: 400; line-height: 1.75; }
.studio-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 24px; }
.studio-preset { position: relative; display: flex; flex-direction: column; gap: 5px; min-height: 98px; min-width: 0; padding: 13px 11px 10px; overflow: hidden; border: 1px solid #373e48; border-radius: 9px; background: radial-gradient(ellipse at 100% 0, #ffffff08, transparent 75%), linear-gradient(150deg, #252931, #1c1f25); color: #e6ecf5; text-align: left; box-shadow: inset 0 1px 0 #ffffff05, 0 3px 8px #0000000d; transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
.studio-preset:hover { transform: translateY(-2px); border-color: #75859b; box-shadow: inset 0 1px 0 #ffffff0b, 0 7px 16px #00000026; }
.studio-preset[aria-pressed="true"] { border-color: #a1b4ce; background: radial-gradient(ellipse at 100% 0, #b2cbed15, transparent 75%), linear-gradient(150deg, #2d3541, #222830); box-shadow: inset 0 1px 0 #ffffff10, 0 0 0 1px #a1b4ce12; }
.studio-preset[aria-pressed="true"]::after { position: absolute; top: 9px; right: 9px; display: flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; background: #c5d4e8; color: #242b35; content: "✓"; font-size: 8px; font-weight: 700; }
.studio-preset-sample { width: fit-content; margin: 1px 0 7px; color: #eaf1f8; font-size: 24px; font-weight: 550; letter-spacing: -1.1px; line-height: 1.1; }
.studio-preset[data-preset="original"] { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 4px; grid-column: 1 / -1; min-height: 64px; padding-top: 12px; padding-bottom: 12px; }
.studio-preset[data-preset="original"] > :first-child { grid-row: 1 / 3; margin: 0; }
.studio-preset-name { color: #d4dce8; font-size: 9px; font-weight: 600; letter-spacing: .1px; }
.studio-preset-description { color: #8f9cab; font-size: 8px; line-height: 1.4; }
.studio-heading-preview, .studio-button-preview { margin: 0 0 18px; padding: 13px 14px 16px; border: 1px solid #3b4450; border-radius: 9px; background: radial-gradient(ellipse at 100% 0, #a7bddb0b, transparent 80%), linear-gradient(145deg, #171c23, #202731); box-shadow: inset 0 1px 0 #ffffff04; }
.studio-sample-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; color: #8f9cad; font-size: 7px; line-height: 1.5; }
.studio-sample-caption > :first-child { flex: 0 0 auto; letter-spacing: 1px; text-transform: uppercase; }
.studio-sample-caption > :last-child { min-width: 0; color: #aebdd0; text-align: right; }
.studio-heading-example { margin: 0; color: #edf0f5; font-size: 27px; font-weight: 600; letter-spacing: -.9px; line-height: 1.12; }
.studio-heading-example > span { display: block; width: fit-content; max-width: 100%; }
.studio-layout-fieldset { margin-bottom: 15px; }
.studio-cta-sample { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 41px; padding: 11px 15px; border: 1px solid #c6d8e7; border-radius: 999px; background: #bcd5e2; color: #10202c; font-size: 10px; font-weight: 650; box-shadow: inset 0 1px 0 #ffffff42, 0 4px 12px #0000001c; }
.studio-cta-sample > span { font-size: 16px; font-weight: 400; line-height: 1; }
.studio-preset-button-sample { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: calc(100% - 10px); min-height: 24px; margin: 0 0 7px; padding: 5px 10px; border: 1px solid #c6d8e7; border-radius: 999px; background: #bcd5e2; color: #10202c; font-size: 8px; font-weight: 650; line-height: 1.3; box-shadow: inset 0 1px 0 #ffffff30, 0 2px 5px #00000015; }
.studio-button-presets .studio-preset { min-height: 93px; }
.studio-button-presets .studio-preset[data-preset="original"] { grid-template-columns: 70px minmax(0, 1fr); min-height: 64px; }
.studio-button-presets .studio-preset[data-preset="original"] .studio-preset-button-sample { max-width: 100%; }
.studio-fieldset { margin: 0 0 22px; padding: 0; border: 0; }
.studio-fieldset legend, .studio-label { display: block; width: 100%; margin: 0 0 9px; color: #c8d1de; font-size: 10px; font-weight: 550; }
.studio-segment { display: flex; gap: 3px; padding: 3px; border: 1px solid #3b424d; border-radius: 7px; background: #14171c; }
.studio-segment button { flex: 1 1 0; min-height: 31px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #8f9cab; font-size: 9px; }
.studio-segment button:hover { color: #e3ebf7; }
.studio-segment button[aria-pressed="true"] { border-color: #526179; background: linear-gradient(180deg, #3b4554, #2d3541); color: #dce8f9; box-shadow: inset 0 1px 0 #ffffff0d; }
.studio-fieldset .studio-help { margin-top: 8px; font-size: 9px; }
.studio-colour-row { margin-bottom: 20px; }
.studio-colour-row > label { display: block; margin-bottom: 8px; color: #c8d1de; font-size: 10px; font-weight: 550; }
.studio-colour-row > div { display: flex; align-items: center; gap: 8px; }
.studio-colour-row input[type="color"] { flex: 0 0 36px; width: 36px; height: 36px; padding: 4px; border: 1px solid #49515e; border-radius: 7px; background: #1a1e24; cursor: pointer; }
.studio-colour-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.studio-colour-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.studio-colour-row input[type="text"] { flex: 1 1 auto; min-width: 0; height: 36px; padding: 8px 10px; border: 1px solid #3b424d; border-radius: 6px; background: var(--studio-field); color: #c8d5e8; font-family: ui-monospace, monospace; font-size: 11px; }
.studio-colour-row button { flex: 0 0 30px; width: 30px; height: 32px; padding: 0; border: 1px solid #3b424d; border-radius: 6px; background: #252a32; color: #b7c5d8; font-size: 17px; }
.studio-details { margin-top: 24px; padding-top: 17px; border-top: 1px solid #343a44; }
.studio-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; color: #c8d1de; font-size: 10px; cursor: pointer; list-style: none; }
.studio-details > summary::-webkit-details-marker { display: none; }
.studio-details > summary::after { color: #a9b9cf; content: "+"; font-size: 17px; }
.studio-details[open] > summary::after { content: "−"; }
.studio-details > summary span { margin-left: auto; color: #718096; font-size: 8px; }
.studio-select { display: block; width: 100%; min-width: 0; margin: 0 0 22px; padding: 11px 28px 11px 11px; border: 1px solid #3b424d; border-radius: 6px; background: var(--studio-field); color: #c8d5e8; font-size: 10px !important; line-height: 1.5; text-overflow: ellipsis; }
.studio-module { margin: 0 0 22px; padding: 0 0 22px; border-bottom: 1px solid var(--studio-border); }
.studio-module .studio-select { min-height: 44px; margin-bottom: 10px; }
.studio-module .studio-module-view { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin-top: 12px; text-align: left; }
.studio-content-parts { display: flex; flex-direction: column; gap: 14px; margin-bottom: 17px; }
.studio-content-part { display: flex; flex-direction: column; gap: 8px; }
.studio-content-part label { color: #aab7c8; font-size: 9px; line-height: 1.4; }
.studio-content-part textarea, .studio-code { display: block; width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #3b424d; border-radius: 6px; background: #13161a; color: #d3deee; font-size: 11px !important; line-height: 1.6; resize: vertical; }
.studio-content-part textarea { min-height: 66px; max-height: 230px; }
.studio-code { min-height: 235px; max-height: 480px; margin-bottom: 16px; font-family: "Cascadia Code", Consolas, ui-monospace, monospace !important; font-size: 10px !important; tab-size: 2; }
.studio-button-row { display: flex; gap: 8px; margin-bottom: 14px; }
.studio-button { flex: 1 1 auto; min-height: 35px; padding: 8px 10px; border: 1px solid #424c5a; border-radius: 6px; background: #252c36; color: #bbc9db; font-size: 9px !important; font-weight: 550 !important; }
.studio-button:hover { border-color: #7e93af; background: #303a48; }
.studio-button-primary { border-color: #6e84a1; background: linear-gradient(180deg, #9eb3cf, #8fa7c6); color: #172231; box-shadow: inset 0 1px 0 #ffffff38; }
.studio-button-primary:hover { background: linear-gradient(180deg, #b7c8df, #9ab1d0); }
.studio-button:disabled { cursor: default; opacity: .4; }
.studio-type-specimen { margin-top: 28px; padding: 25px 18px; border: 1px solid #373e48; border-radius: 9px; background: radial-gradient(ellipse at 100% 0, #a4bddf0c, transparent 80%), #1b1f26; }
.studio-type-specimen > span { color: #7d91ad; font-size: 37px; font-weight: 400; letter-spacing: -2px; line-height: 1; }
.studio-type-specimen p { margin: 16px 0; color: #d9e4f3; font-size: 24px; font-weight: 550; letter-spacing: -.7px; line-height: 1.25; }
.studio-type-specimen small { display: block; color: #8292a8; font-size: 9px; line-height: 1.7; }
.studio-notice { margin-top: 18px; padding: 11px 12px; border: 1px solid #53677f; border-radius: 7px; background: #738eaf12; color: #b9cde8; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.studio-notice[data-tone="error"] { border-color: #936b68; background: #936b6810; color: #e3b7b2; }
.studio-panel-footer { flex: 0 0 auto; padding: 14px 21px 15px; border-top: 1px solid var(--studio-border); background: linear-gradient(180deg, #252930, #1c2026); box-shadow: 0 -7px 20px #0000000d; }
.studio-draft-tools { margin: 0 0 13px; }
.studio-draft-tools > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; color: var(--studio-muted); font-size: 9px; cursor: pointer; list-style: none; }
.studio-draft-tools > summary::-webkit-details-marker { display: none; }
.studio-draft-tools > summary::after { content: "+"; color: var(--studio-accent); font-size: 15px; line-height: 1; }
.studio-draft-tools[open] > summary::after { content: "−"; }
.studio-project-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--studio-border); }
.studio-project-actions button { padding: 3px 0; border: 0; background: transparent; color: #9faec3; font-size: 9px; }
.studio-project-actions button:hover { color: #e0eafa; }
.studio-send-request { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 44px; padding: 12px 15px; border: 1px solid var(--studio-accent); border-radius: 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--studio-accent), white 24%), var(--studio-accent)); color: var(--studio-field); font-size: 11px !important; font-weight: 650 !important; box-shadow: inset 0 1px 0 #ffffff70, 0 4px 12px #00000026; transition: filter 160ms ease, box-shadow 160ms ease; }
.studio-send-request:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 #ffffff8c, 0 6px 16px #00000030; }
.studio-send-request:disabled { cursor: progress; opacity: .65; }
.studio-send-request svg { width: 16px; height: 16px; }
.studio-reset { display: block; width: 100%; margin: 11px 0 0; padding: 3px 0; border: 0; background: transparent; color: #8392a7; font-size: 8px !important; text-align: center; }
.studio-reset:hover { color: #c4d2e5; }
.studio-panel-toggle { position: absolute; z-index: 8; top: 12px; left: 12px; display: none; align-items: center; gap: 7px; min-height: 35px; padding: 8px 12px; border: 1px solid #6a768a; border-radius: 8px; background: #252b35ed; color: #dce7f6; box-shadow: 0 4px 16px #00000026, inset 0 1px 0 #ffffff0d; font-size: 10px; backdrop-filter: blur(16px); }
.studio-panel-toggle svg { width: 15px; height: 15px; }
.studio-preview-unavailable { padding: 14px; color: #b9cde8; font-size: 10px; line-height: 1.6; }
.studio-request-dialog { width: min(620px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--studio-border); border-radius: 20px; background: linear-gradient(155deg, color-mix(in srgb, var(--studio-surface-raised), white 4%), var(--studio-surface) 45%, var(--studio-field)); color: var(--studio-copy); box-shadow: 0 32px 100px #00000070, inset 0 1px 0 #ffffff0b; color-scheme: dark; scrollbar-width: thin; scrollbar-color: var(--studio-border) transparent; }
.studio-request-dialog::backdrop { background: #06080db5; backdrop-filter: blur(8px); }
.studio-request-dialog button, .studio-request-dialog input, .studio-request-dialog textarea { font: inherit; }
.studio-request-dialog :is(button, input, textarea):focus-visible { outline: 2px solid var(--studio-accent); outline-offset: 4px; }
.studio-request-dialog form { padding: 30px; }
.studio-request-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; }
.studio-request-heading .studio-kicker { color: var(--studio-accent); font-size: 9px; }
.studio-request-heading h2 { margin: 10px 0 0; color: var(--studio-copy); font-size: clamp(22px, 3.8vw, 28px); font-weight: 550; letter-spacing: -.8px; line-height: 1.18; }
.studio-request-close { display: inline-flex; flex: 0 0 36px; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--studio-border); border-radius: 50%; background: #ffffff04; color: var(--studio-muted); }
.studio-request-close:hover { border-color: var(--studio-accent); color: var(--studio-copy); background: #ffffff08; }
.studio-request-close svg { width: 16px; height: 16px; }
.studio-request-recipient { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin: 22px 0 12px; color: var(--studio-muted); font-size: 11px; line-height: 1.5; }
.studio-request-recipient strong { color: var(--studio-accent); font-size: 12px; font-weight: 550; overflow-wrap: anywhere; }
.studio-request-description { margin: 0 0 23px; color: var(--studio-muted); font-size: 12px; line-height: 1.75; }
.studio-request-summary { margin: 0 0 25px; padding: 18px 20px; border: 1px solid var(--studio-border); border-radius: 12px; background: linear-gradient(140deg, #ffffff04, transparent), var(--studio-field); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.studio-request-summary:empty { display: none; }
.studio-request-summary > :first-child { margin-top: 0; }
.studio-request-summary > :last-child { margin-bottom: 0; }
.studio-request-summary h3 { margin: 0 0 13px; color: var(--studio-copy); font-size: 15px; font-weight: 550; letter-spacing: -.25px; }
.studio-request-summary dl { display: grid; grid-template-columns: minmax(92px, .7fr) minmax(0, 1.3fr); gap: 9px 18px; margin: 0; }
.studio-request-summary dt { color: var(--studio-muted); }
.studio-request-summary dd { margin: 0; color: var(--studio-copy); }
.studio-request-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 10px; color: var(--studio-copy); font-size: 12px; font-weight: 550; }
.studio-request-label > span { color: var(--studio-muted); font-size: 10px; font-weight: 400; }
.studio-request-contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 23px; }
.studio-request-contact-fields > div { min-width: 0; }
.studio-request-dialog :is(input, textarea) { display: block; width: 100%; min-width: 0; padding: 13px 15px; border: 1px solid var(--studio-border); border-radius: 10px; background: var(--studio-field); color: var(--studio-copy); font-size: 12px; line-height: 1.65; }
.studio-request-dialog input { min-height: 47px; }
.studio-request-dialog textarea { resize: vertical; }
.studio-request-dialog :is(input, textarea)::placeholder { color: var(--studio-muted); opacity: .8; }
.studio-request-honeypot { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.studio-request-note { min-height: 104px; max-height: 230px; }
.studio-request-actions { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; margin-top: 24px; }
.studio-request-actions > button { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 46px; padding: 12px 15px; border: 1px solid var(--studio-border); border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 1.4; transition: border-color 160ms ease, background 160ms ease; }
.studio-request-actions svg { flex: 0 0 15px; width: 15px; height: 15px; }
.studio-request-actions > .studio-request-cancel { justify-content: center; background: var(--studio-surface-raised); color: var(--studio-copy); }
.studio-request-cancel:hover { border-color: var(--studio-accent); background: color-mix(in srgb, var(--studio-surface-raised), white 5%); }
.studio-request-actions > .studio-request-submit { border-color: var(--studio-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--studio-accent), white 24%), var(--studio-accent)); color: var(--studio-field); box-shadow: inset 0 1px 0 #ffffff60; }
.studio-request-actions > .studio-request-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--studio-accent), white 18%); }
.studio-request-actions > button:disabled { opacity: .55; cursor: default; }
.studio-request-actions > .studio-request-submit:disabled { cursor: progress; }
.studio-request-status { min-height: 18px; margin: 14px 0 0; color: var(--studio-accent); font-size: 11px; line-height: 1.6; }
.studio-request-status[data-tone="error"] { color: #e3b7b2; }
@media (min-width: 541px) and (max-height: 820px) {
  .studio-request-dialog form { padding: 24px; }
  .studio-request-heading h2 { font-size: 24px; }
  .studio-request-recipient { margin-top: 16px; }
  .studio-request-description { margin-bottom: 18px; }
  .studio-request-summary { margin-bottom: 18px; padding: 14px 18px; }
  .studio-request-summary dl { gap: 6px 18px; }
  .studio-request-note { min-height: 76px; height: 76px; }
  .studio-request-contact-fields { margin-bottom: 18px; }
  .studio-request-actions { margin-top: 18px; }
  .studio-request-status { margin-top: 10px; }
}
@media (min-width: 1650px) { :root[data-preview-mode="studio"] { --studio-panel-width: 358px; } .studio-scroll { padding-right: 24px; padding-left: 24px; } }
@media (max-width: 1100px) and (min-width: 960px) { :root[data-preview-mode="studio"] { --studio-panel-width: 310px; } .studio-panel-heading { padding-right: 18px; padding-left: 18px; } .studio-scroll { padding-right: 17px; padding-left: 17px; } .studio-panel-footer { padding-right: 17px; padding-left: 17px; } }
@media (max-width: 959px) {
  .studio-panel { position: absolute; z-index: 12; top: 0; bottom: 0; left: 0; width: min(358px, calc(100% - 22px)); transform: translateX(-105%); visibility: hidden; transition: transform 220ms ease, visibility 220ms; box-shadow: 18px 0 65px #00000059; }
  .studio-panel.is-open { transform: translateX(0); visibility: visible; }
  .studio-panel-toggle { display: inline-flex; }
  .studio-close { display: inline-flex; }
  .studio-panel-heading { padding-top: 20px; padding-bottom: 13px; }
  .studio-panel h1 { font-size: 17px; }
}
@media (max-height: 700px) { .studio-panel-heading { padding-top: 16px; padding-bottom: 11px; } .studio-context { margin-bottom: 10px; } .studio-tabs { padding-top: 5px; } .studio-tab { min-height: 53px; } .studio-panel-footer { padding-top: 10px; padding-bottom: 10px; } }
@media (max-width: 540px) { .studio-request-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; } .studio-request-dialog form { padding: 23px 20px; } .studio-request-heading { gap: 14px; } .studio-request-heading h2 { letter-spacing: -.6px; } .studio-request-summary { padding: 16px; } .studio-request-summary dl { grid-template-columns: 1fr; gap: 4px; } .studio-request-summary dd + dt { margin-top: 9px; } .studio-request-contact-fields { grid-template-columns: 1fr; gap: 18px; } .studio-request-dialog :is(input, textarea) { font-size: 16px; } .studio-request-actions { grid-template-columns: 1fr; gap: 10px; } .studio-request-actions > button { min-height: 48px; font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .studio-panel, .studio-preset, .studio-tab, .studio-send-request, .studio-request-actions > button { transition: none; } .studio-preset:hover { transform: none; } }