/* Studio's tools have their own environment; merchant palettes remain store-owned. */
:root {
 --paper:#1b2220;
 --ink:#e9ede5;
 --muted:#acb7af;
 --line:#e8eee41c;
 --studio-accent:var(--a-action-lime);
 --studio-rim:#e8eee433;
 --studio-surface:#2b3531;
 --studio-raised:none;
 --studio-inset:none;
 --studio-panel:0 8px 24px #0b101326;
 color-scheme:dark;
 background:#1b2220;
}
.studio-workspace {
 --studio-header-height:72px;
 --studio-tools-width:320px;
 --a-action-disabled:#26302c;
 --a-action-disabled-ink:#87938b;
 --a-action-focus:#d6ee89;
 min-height:100dvh;
 color:var(--ink);
 background:#1b2220;
}
.studio-workspace :is(button,a,summary,input,select,textarea):focus-visible {
 outline:2px solid var(--studio-accent);outline-offset:4px;
}
.studio-topbar {
 position:sticky;top:0;z-index:50;min-height:var(--studio-header-height);padding:13px 28px;border-bottom:1px solid var(--line);
 background:#202825;
 box-shadow:none;
}
.studio-home {font-size:20px;letter-spacing:-.015em;gap:13px;color:#f4f4ec}
.studio-home img {width:32px;height:32px;filter:none}
.studio-home .studio-wordmark {display:block;width:196px;height:auto;flex:none}
.studio-home .studio-name {position:relative;top:2px;color:var(--studio-accent);font:400 26px/1 'Limelight',Georgia,serif;letter-spacing:0}
@media(max-width:700px) {
 .studio-home .studio-wordmark {width:164px}
 .studio-home .studio-name {font-size:22px;top:1px}
}
.topbar-actions {gap:10px;font-size:12px}
.studio-preview-button {display:inline-flex;align-items:center;justify-content:center;gap:8px}
.studio-preview-button .ui-icon {width:16px;height:16px}
#save-state {margin-right:9px;color:var(--muted)}
.studio-editor {padding-top:30px;padding-bottom:40px}

/* Allodia's shared action component owns the workspace CTAs and utility actions. */
.studio-workspace .allodia-action {white-space:normal}
.topbar-actions .allodia-action {white-space:nowrap}
.studio-menu>summary.allodia-action {padding:10px 16px;font-size:var(--a-action-size-compact)}
.topbar-actions .ui-icon {width:18px;height:18px}
.studio-menu[open]>summary {background:#f5f3eb26;border-color:var(--studio-accent)}
.studio-workspace .inline-link {color:var(--studio-accent);text-underline-offset:5px;padding:5px 2px}

.design-controls {
 display:grid;grid-template-columns:auto minmax(0,1fr) auto;
 width:100%;max-width:none;margin:0 0 24px;padding:0 0 24px;
 gap:24px;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;
}
.look-label {display:block;white-space:nowrap;font:500 11px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#d4ddd1;max-width:none}
.look-choices {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-width:0}
.look-choice {
 min-height:52px;min-width:0;justify-content:flex-start;gap:12px;padding:12px 14px;
 border:1px solid #d6d9cd;border-radius:var(--a-action-radius);background:var(--a-action-paper);color:var(--a-action-forest);
 box-shadow:none;font:500 16px/1.3 var(--sans);letter-spacing:0;transition:background .16s,border-color .16s;
}
.look-choice:hover {background:#fffdf7;border-color:#fffdf7}
.look-choice[aria-pressed=true] {background:var(--studio-accent);border-color:var(--studio-accent);color:#193025;box-shadow:none}
.look-choice[aria-pressed=true]:hover {background:#ddf2a6;border-color:#ddf2a6}
.look-swatch {width:28px;height:14px;flex:none;border:1px solid #7a8977;border-radius:0;box-shadow:none}
.look-choice[aria-pressed=true] .look-swatch {border-color:#516a43}
.studio-workspace .fine-toggle {font-size:13px;white-space:nowrap;margin:0}

/* A quiet frame separates the store from the workspace. */
.store-mount {padding:0;border:1px solid #e8eee433;border-radius:0;background:#141a18;box-shadow:none}
.store-mount>.design-store {border-radius:0;overflow:hidden;color-scheme:light}
.studio-conversion {align-items:flex-end;gap:20px;padding:24px 0 0}
.quote-invitation {display:grid;gap:12px}
.quote-invitation>p {font:400 20px/1.4 var(--serif);color:#eef0e5}
.quote-invitation>p span {display:block;margin-top:4px;font:13px/1.5 var(--sans);color:var(--muted)}
.studio-conversion #email-design {order:-1}
.studio-conversion .allodia-action {font-size:14px}

/* Floating tools belong to the workspace, including their form controls. */
.tool-sheet,.menu-popover,.studio-dialog,.import-panel {
 background:#232c29;color:var(--ink);border:1px solid var(--studio-rim);border-radius:var(--a-action-radius);box-shadow:var(--studio-panel);
}
.tool-sheet {width:380px;padding:28px;right:24px;top:148px;max-height:calc(100dvh - 172px);scrollbar-color:#65736b #232c29}
.sheet-heading {gap:16px;margin-bottom:24px}
.sheet-heading h2 {font:500 23px/1.3 var(--sans);letter-spacing:-.025em;color:#f1f3e7;margin:0}
.sheet-heading small {color:var(--muted);font-size:10px;letter-spacing:.1em}
.sheet-heading .allodia-action {font-size:13px}
.tool-sheet section {margin-top:26px}
.tool-sheet h3 {font-size:12px;letter-spacing:.03em;margin-bottom:14px;color:#dfe5d9}
.studio-palettes {gap:12px}
.studio-palettes button,.font-choices button,.composition-choices button {
 border:1px solid var(--line);border-radius:var(--a-action-radius);background:var(--studio-surface);color:var(--ink);box-shadow:var(--studio-raised);padding:10px;
}
.studio-palettes button {font-size:11px;line-height:1.45;background:#35443c;border-color:#829589;color:#f7f8f0}
.studio-palettes .swatch {border-radius:0;overflow:hidden;border:1px solid #a8b5a5;margin-bottom:9px;box-shadow:none}
.font-choices {gap:12px}
.font-choices button {padding:14px 12px;min-height:84px}
.font-choices button {min-width:0;text-align:left;overflow:hidden}
.font-choices .pack-heading {display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.pack-body {color:#c0cac2}
.composition-choices {gap:14px}
.composition-choices button {padding:14px 10px;font-size:12px}
.studio-workspace :is(.studio-palettes,.font-choices,.composition-choices) button:hover {border-color:#8c9c88;background:#323d38}
.studio-workspace :is(.studio-palettes,.font-choices,.composition-choices) button[aria-pressed=true] {background:#323f33;border-color:#93a968;color:#edf5d5;box-shadow:var(--studio-inset)}
.studio-workspace .studio-palettes button:hover {background:#43564a;border-color:#afc6b5}
.studio-workspace .studio-palettes button[aria-pressed=true] {background:var(--studio-accent);border-color:var(--studio-accent);color:#193025}
.studio-workspace .studio-palettes button[aria-pressed=true]:hover {background:#ddf2a6;border-color:#ddf2a6}
.studio-palettes button[aria-pressed=true] .swatch {border-color:#516a43}
.fit-choice {gap:14px;margin-top:22px;font-size:12px}
.studio-workspace :is(.fit-choice select,.studio-dialog input,.import-panel input) {background:#1b2420;color:var(--ink);border:1px solid #52605f;border-radius:var(--a-action-radius);box-shadow:var(--studio-inset);min-height:44px;padding:12px;outline-offset:3px;color-scheme:dark}
.studio-workspace :is(.studio-dialog input,.import-panel input)::placeholder {color:#aab7af;opacity:1}
.sheet-utilities {gap:12px;border-color:var(--line);padding-top:20px;margin-top:24px}
.sheet-utilities .allodia-action {justify-content:flex-start;text-align:left;font-size:13px}
.media-limits,.control-note {color:var(--muted);line-height:1.6}
.media-row {border-color:#ffffff18;padding-block:16px;gap:14px}
.media-row img {border-radius:0;box-shadow:0 0 0 1px #ffffff26}
.media-row strong {font-size:12px;line-height:1.4}
.media-row button {color:var(--studio-accent);padding:8px 5px;font-size:11px;text-decoration:underline;text-underline-offset:3px}
.media-row button:disabled {color:var(--muted);opacity:.45;text-decoration:none}
.form-error {color:#ffb6a7}
.menu-popover {top:56px;padding:16px;width:286px;border-radius:var(--a-action-radius)}
.menu-popover :is(button,a) {color:#e9eee3;border-radius:var(--a-action-radius);font-size:13px;line-height:1.4}
.menu-popover :is(button,a):hover {background:#253b2f;color:var(--studio-accent);box-shadow:var(--studio-inset)}
.menu-label {color:var(--muted)}
.import-panel {padding:20px;margin:0 0 24px}
.import-panel form {gap:12px}
.import-panel input {margin:0}
.studio-dialog {padding:38px;color:var(--ink)}
.studio-dialog::backdrop,.studio-workspace #quote-dialog::backdrop {background:#070d11ba;backdrop-filter:blur(12px)}
.studio-dialog :is(.eyebrow,label) {color:#d8e6c4}
.studio-dialog .dialog-close {padding:0;top:16px;right:16px}
.studio-dialog h2 {font-size:38px;margin-top:24px;color:#f4f5e9}
.studio-workspace .studio-dialog .allodia-action--secondary {color:var(--ink)}
#studio-tooltip {color:#f3f6e8;background:#18241fec;border:1px solid #748469;border-radius:var(--a-action-radius);box-shadow:0 5px 18px #0008}
.studio-status {background:#d6ee89;color:#1c3023;border:1px solid #efffc3;border-radius:var(--a-action-radius);box-shadow:0 8px 30px #0009}
.immersive-toolbar {background:#232c29;color:var(--muted);border-bottom:1px solid #52605c;box-shadow:0 3px 12px #0004}
.studio-workspace .immersive-close {min-height:36px;padding:8px 14px;font-size:12px}

/* Media stays translucent, with restrained controls. */
.studio-workspace .design-store .media-dock {background:rgb(24 31 27 / .88);border-color:#a9b8b044;border-radius:var(--a-action-radius);box-shadow:0 4px 14px #08101540}
.studio-workspace .media-dock :is(.film-toggle,.add-thumb) {background:#ffffff08;box-shadow:none;border-color:#adbdab66}
.studio-workspace .media-dock :is(.film-toggle,.add-thumb):hover:not(:disabled) {background:#465a48b3;border-color:#d6ee89;color:#eff8d8}
.studio-workspace .media-dock .film-toggle[aria-pressed=true] {box-shadow:var(--studio-inset);color:var(--studio-accent);border-color:#b6cf7e}

/* Quote styles are local to Studio; the marketing site's shared sheet is unchanged. */
.studio-workspace #quote-dialog {
 --q-surface:var(--studio-surface);--q-tray:#293235;--q-rim:#53615e;
 --q-raised:var(--studio-raised);--q-raised-control:var(--studio-raised);--q-inset:var(--studio-inset);--q-pressed:var(--studio-inset);
 background:#232c29;color:var(--ink);border:1px solid #66736e;border-radius:var(--a-action-radius);box-shadow:var(--studio-panel);scrollbar-color:#65736b #232c29;
}
.studio-workspace #quote-dialog :is(#quote-title,.q-field,.q-inline-link,.q-answer-list strong,.q-calendar-days strong,#q-schedule-panel strong) {color:var(--ink)}
.studio-workspace #quote-dialog :is(.q-progress-label,.q-intro,.q-shop-entry span,.q-entry-note,.q-path>span:not(.q-path-icon),.q-field>span,.q-channel-help,.q-channel-hint,.q-detection,.q-link,.q-back,.q-reassurance,.q-save-row,.q-body-copy,.q-upload-section p,.q-access p,.q-timezone,.q-launch-kit>span>span,.q-field-note,.q-answer-summary,.q-answer-list>button,.q-saved-row,.q-call-value,#q-sample-note,.q-schedule-alternatives,#q-schedule-panel,.q-studio-recap>p:nth-of-type(n+3)) {color:var(--muted)}
.studio-workspace #quote-dialog :is(.q-path,.q-choice,.q-channel,.q-mood,.q-next-card,.q-sample-calendar,.q-calendar-toolbar button:not(.allodia-action),.q-day-slots button:not(.allodia-action),.q-upload-section>summary,.q-access>summary) {background:var(--studio-surface);color:var(--ink);border-color:#52615c;border-radius:var(--a-action-radius);box-shadow:var(--studio-raised)}
.studio-workspace #quote-dialog :is(.q-path,.q-choice,.q-channel,.q-mood,.q-calendar-days button,.q-upload-section>summary,.q-access>summary):is(:hover,[aria-pressed=true]) {background:#2b3c30;color:#e8f4d0;border-color:#afc781;box-shadow:var(--studio-inset)}
.studio-workspace #quote-dialog :is(.q-studio-recap,.q-preview-note,.q-drop,.q-calendar,#q-schedule-panel) {background:#222c2d;color:var(--muted);border-color:#56665e;border-radius:var(--a-action-radius);box-shadow:var(--studio-inset)}
.studio-workspace #quote-dialog .q-studio-recap>strong {color:var(--ink)}
.studio-workspace #quote-dialog :is(input:not([type=checkbox],[type=file]),select,textarea) {background:#1b2420;color:var(--ink);border-color:#65736a;box-shadow:var(--studio-inset);color-scheme:dark}
.studio-workspace #quote-dialog :is(input,textarea)::placeholder {color:#aebbb0}
.studio-workspace #quote-dialog :is(.allodia-action,.button) {border-radius:var(--a-action-radius);background:var(--studio-accent);color:#1c2e21;border-color:#d6e9a2;box-shadow:var(--studio-raised)}
.studio-workspace #quote-dialog :is(.allodia-action,.button):hover:not(:disabled) {background:#e0f0b3;color:#182a1d;box-shadow:var(--studio-raised)}
.studio-workspace #quote-dialog :is(.allodia-action--secondary,.allodia-action--icon) {background:var(--studio-surface);color:var(--ink);border-color:#617269;box-shadow:var(--studio-raised)}
.studio-workspace #quote-dialog .allodia-action--quiet {background:none;color:var(--studio-accent);border-color:transparent;box-shadow:none}
.studio-workspace #quote-dialog :is(.allodia-action,.button):disabled {background:#263033;color:#8c9890;border-color:#3c4742;box-shadow:var(--studio-inset)}
.studio-workspace #quote-dialog .q-progress {background:#192222;box-shadow:var(--studio-inset)}
.studio-workspace #quote-dialog .q-progress>span {background:var(--studio-accent)}
.studio-workspace #quote-dialog :is(.q-context>span,.q-saved-chip) {background:#2e402c;color:#d6ee89;border-color:#607649}
.studio-workspace #quote-dialog .q-check {background:#202c25;border-color:#7f946c}
.studio-workspace #quote-dialog [aria-pressed=true]>.q-check {background:var(--studio-accent);color:#1b2a20;border-color:var(--studio-accent)}
.studio-workspace #quote-dialog .q-path-icon {color:var(--studio-accent)}
.studio-workspace #quote-dialog .q-channel-mark img {filter:brightness(0) invert(1)}
.studio-workspace #quote-dialog .q-calendar-days button {color:var(--ink)}
.studio-workspace #quote-dialog input[type=checkbox] {accent-color:var(--studio-accent)}
.studio-workspace #quote-dialog .q-error {background:#492e2a;color:#ffd4c6;border-color:#aa7568}
.studio-workspace #quote-dialog .q-navigation {border-color:var(--line)}

@media(max-width:1199px) and (min-width:701px) {
 .design-controls {grid-template-columns:1fr auto;gap:16px}
 .look-choices {grid-column:1/-1;grid-row:2}
 .fine-toggle {grid-column:2;grid-row:1}
}
@media(max-width:700px) {
 .studio-topbar {position:relative;padding:16px;gap:16px;flex-wrap:wrap}
 .studio-home {font-size:17px;gap:8px;white-space:nowrap}
 .studio-home img {width:25px;height:25px}
 .topbar-actions {gap:8px;margin-left:auto}
 .topbar-actions .allodia-action {font-size:12px;padding-inline:12px}
 .topbar-actions #undo>.ui-icon {display:none}
 .studio-editor {padding:24px 16px 30px}
 .design-controls {grid-template-columns:1fr auto;gap:16px;margin-bottom:20px;padding:0 0 20px}
 .look-label {grid-column:1;grid-row:1;font-size:10px}
 .look-choices {grid-template-columns:1fr 1fr;grid-column:1/-1;grid-row:2;gap:8px}
 .look-choice {min-height:48px;font-size:14px;gap:9px;padding:10px 12px;justify-content:flex-start}
 .look-swatch {width:22px;height:12px}
 .studio-workspace .fine-toggle {grid-column:2;grid-row:1;width:auto;font-size:12px;padding:10px 12px}
 .studio-conversion {padding:22px 0 0;gap:12px}
 .studio-conversion {display:grid;grid-template-columns:1fr;justify-items:stretch}
 .studio-conversion #email-design {order:0}
 .studio-conversion .allodia-action {flex:none;width:100%;font-size:14px;padding:14px}
 .tool-sheet {top:auto;left:0;right:0;bottom:0;width:100%;max-height:72dvh;padding:24px 20px 30px;border-radius:0;box-shadow:0 -8px 24px #0004}
 .studio-palettes {grid-template-columns:repeat(3,minmax(0,1fr))}
 .font-choices {grid-template-columns:repeat(2,minmax(0,1fr))}
 .font-choices button {min-height:78px}
 .menu-popover {width:min(286px,calc(100vw - 32px));right:0}
 .import-panel {padding:16px}
 .import-panel form {gap:14px;flex-wrap:wrap}
 .import-panel input {flex-basis:100%}
 .studio-dialog {padding:32px 24px}
}
@media(prefers-reduced-motion:reduce) {.studio-workspace * {transition:none!important}}

/* Give the working store the available canvas. */
.studio-workspace .studio-editor {max-width:none;padding:28px}
@media(min-width:701px) {
 .studio-workspace .design-store:not(.customer-view) .design-stage {height:max(var(--content-height,440px),min(1100px,var(--workspace-height,54vh)))}
 .studio-workspace .design-store[data-layout=split] .design-stage {min-height:max(var(--content-height,440px),var(--workspace-height,54vh))}
}
@media(max-width:700px) {.studio-workspace .studio-editor {padding-inline:16px}}

/* Desktop tools are part of the workspace, with a separate column for the store. */
.studio-canvas {min-width:0}
@media(min-width:1200px) {
 .studio-topbar {height:var(--studio-header-height)}
 .studio-workspace .studio-editor {display:block;padding-right:calc(var(--studio-tools-width) + 28px);min-height:calc(100dvh - var(--studio-header-height))}
 .studio-workspace .fine-toggle,#fine-tune [data-close-sheet] {display:none}
 .design-controls {grid-template-columns:auto minmax(0,1fr)}
 #fine-tune {position:fixed;top:var(--studio-header-height);bottom:0;right:0;left:auto;width:var(--studio-tools-width);height:calc(100dvh - var(--studio-header-height));max-height:none;padding:28px 22px;z-index:20;border:0;border-left:1px solid var(--studio-rim);border-radius:0;box-shadow:none;overscroll-behavior:contain}
 #fine-tune .sheet-heading {margin-bottom:28px}
 #fine-tune section {margin-top:24px}
 #fine-tune h3 {margin-bottom:12px}
 #fine-tune .studio-palettes,#fine-tune .font-choices {gap:8px}
 #fine-tune .font-choices button {padding:12px 10px;min-height:76px}
 #fine-tune .fit-choice {gap:10px;margin-top:18px}
 #fine-tune .sheet-utilities {gap:10px;margin-top:24px;padding-top:22px}
 #media-sheet {top:var(--studio-header-height);bottom:0;right:0;width:var(--studio-tools-width);height:calc(100dvh - var(--studio-header-height));max-height:none;padding:28px 22px;border-width:0 0 0 1px;border-radius:0;box-shadow:none}
 .studio-workspace .studio-conversion {flex-wrap:wrap}
}
@media(min-width:1200px) and (max-width:1500px) {
 .design-controls {grid-template-columns:1fr;gap:14px}
 .look-label {display:block}
}

/* Empty media occupies the same panes as the uploaded photographs and videos. */
.studio-workspace .design-store .media-empty {position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;opacity:1;color:var(--m-ink);background:color-mix(in srgb,var(--m-paper) 96%,var(--m-ink));outline:1px dashed transparent;outline-offset:-10px;text-align:center;transition:background .15s,outline-color .15s}
.studio-workspace .design-store .video-empty {background:color-mix(in srgb,var(--m-paper) 91%,var(--m-accent))}
.studio-workspace .design-store .media-empty:is(:hover,:focus-within),.studio-workspace .design-stage.dragging .media-empty {outline-color:color-mix(in srgb,var(--m-ink) 50%,transparent);background:color-mix(in srgb,var(--m-paper) 88%,var(--m-accent))}
.studio-workspace .media-empty .media-invitation {position:absolute;left:0;right:0;top:var(--invitation-center,50%);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;text-decoration:none;pointer-events:none}
.studio-workspace .media-invitation>.ui-icon {width:27px;height:27px;opacity:.6}
.studio-workspace .media-invitation>strong {max-width:none;font:400 clamp(22px,2.5cqw,34px)/1.2 var(--m-serif);letter-spacing:-.025em}
.studio-workspace .media-invitation>span:not(.ui-icon) {font:400 12px/1.5 var(--sans);max-width:28ch;opacity:.75}
.studio-workspace .design-store:not(.customer-view)[data-has-photo=false][data-look=atelier] .design-title {color:var(--m-ink)}
.studio-workspace .design-store:not(.customer-view)[data-has-video=false][data-look=ccv] .design-story {pointer-events:none}
.studio-workspace .design-store:not(.customer-view)[data-has-video=false][data-look=ccv] .design-story :is([data-edit],button) {pointer-events:auto}
.studio-workspace .design-store .media-dock {padding-top:36px}
.media-dock>.dock-name {position:absolute;top:11px;left:13px;font:500 12px/1.2 var(--sans);color:#d6ee89;letter-spacing:.01em}
.design-store .media-thumbs .empty-thumb {width:44px;height:44px;flex:none;display:grid;place-items:center;padding:10px;border:1px dashed #fffdf63d;border-radius:3px;background:#ffffff03;color:#d6ee89}
.design-store .media-thumbs .empty-thumb:first-child {border-color:#b2c97c;background:#d6ee890a}
.design-store .media-thumbs .empty-thumb .ui-icon {width:19px;height:19px}
.design-store .media-thumbs .empty-thumb.ghost-slot .ui-icon {opacity:0}
.design-store .media-thumbs .empty-thumb:is(:hover,:focus-visible) {border-style:dashed;border-color:#d6ee89;background:#d6ee8914}
.design-store .media-thumbs .empty-thumb:is(:hover,:focus-visible) .ui-icon {opacity:1}
.studio-workspace .media-dock button:disabled {opacity:.35;box-shadow:none}
.studio-workspace .design-store .media-browse {pointer-events:auto;text-decoration:none}
.studio-workspace .design-store .media-browse:not(.allodia-action--inverse):focus-visible {outline-color:var(--a-action-forest)}
.design-store .media-dock[data-packing=measure] :is(.dock-hint,.thumb-tools) {display:none}
.example-context {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;font-size:13px;color:var(--studio-accent)}
@media(max-width:700px) {
 .studio-workspace .media-invitation>strong {font-size:25px}
 .studio-workspace .media-invitation>span:not(.ui-icon) {font-size:11px}
}

/* Studio hierarchy: workspace actions, one design rail, and the live canvas. */
.studio-topbar {justify-content:flex-start;gap:28px}
.studio-home {flex:none;white-space:nowrap;font-size:18px}
.workspace-actions {display:flex;align-items:center;gap:8px;min-width:0}
.workspace-actions .allodia-action,.studio-exit {white-space:nowrap;font-size:13px;padding:10px 14px}
.workspace-actions .ui-icon,.studio-exit .ui-icon {width:16px;height:16px}
.studio-exit {margin-left:auto}
.studio-recovery {display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:11px;color:var(--muted);margin-bottom:20px;min-height:20px}
.studio-recovery #save-state {margin:0}
.studio-recovery #toggle-import {margin-left:auto;font-size:12px;white-space:nowrap}
.tour-invitation {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;margin-bottom:20px;background:#26312b;border-left:2px solid var(--studio-accent);font-size:12px}
.tour-invitation p {display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tour-invitation #dismiss-tour {font-size:11px;color:var(--muted);white-space:nowrap}
#fine-tune .sheet-heading {margin-bottom:24px}
#fine-tune .sheet-heading h2 {font-size:18px}
#fine-tune #look-section {display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:0 0 26px;padding:0 0 26px}
#fine-tune .look-label {font-size:12px;letter-spacing:0;text-transform:none;margin:0;white-space:nowrap}
#fine-tune .look-choices {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#fine-tune .look-choice {font-size:13px;gap:8px;padding:12px 9px;min-height:48px}
#fine-tune .look-swatch {width:20px;height:12px}
#view-example {align-self:flex-start;font-size:11px;text-align:left;line-height:1.5}
.fine-heading {font:500 17px/1.3 var(--sans);color:#f1f3e7}
#fine-options>section:first-of-type {margin-top:20px}
.media-feedback {padding:12px 16px;margin-top:12px;border:1px solid var(--line);background:#26312b;font-size:12px;line-height:1.6}
.media-feedback ul:empty {display:none}
.media-feedback ul {padding-left:18px;margin-bottom:0}
.design-store .media-dock .dock-hint {flex:1 0 100%;margin:0;font:9px/1.5 var(--sans);color:#dbe3d3;max-width:100%}
.design-store .media-dock .thumb-tools {display:flex;flex:1 0 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;border-top:1px solid #ffffff30;padding-top:9px}
.design-store .media-dock .thumb-tools>span {flex-basis:100%;font-size:10px}
.thumb-tools button {background:#263c30;border:1px solid #9caf945c;color:#f5f6eb;font:10px var(--sans);padding:8px;min-height:32px;border-radius:2px}
.thumb-tools button:disabled {opacity:.4}
.design-store:not(.customer-view)[data-sample=false] .thumb-select {cursor:grab;touch-action:none}
.design-store:not(.customer-view)[data-sample=false] .thumb-select:active {cursor:grabbing}
.media-thumbs.is-sorting .media-thumb {transition:transform 160ms ease-out;will-change:transform}
.media-thumbs.is-sorting .media-thumb.is-dragged {opacity:.16;pointer-events:none}
.media-thumbs.is-sorting .thumb-remove {visibility:hidden}
.sorting-media,.sorting-media * {cursor:grabbing!important;user-select:none!important}
.media-drag-preview {position:fixed;left:0;top:0;z-index:1000;display:grid;place-items:center;pointer-events:none;padding:3px;border:1px solid #dce5da;border-radius:3px;background:#26342d;color:#f5f6eb;box-shadow:0 10px 24px #0006,0 2px 6px #0005;will-change:transform}
.media-drag-preview :is(img,canvas) {display:block;width:100%;height:100%;min-height:0;object-fit:cover;border-radius:1px}
.media-drag-preview.outside-drop-zone {opacity:.6}
@media(prefers-reduced-motion:reduce) {.media-thumbs.is-sorting .media-thumb {transition:none}}
.studio-tour-veil {position:fixed;inset:0;z-index:130;pointer-events:none}
.studio-tour-veil svg {display:block;width:100%;height:100%;overflow:hidden}
.studio-tour-veil path {fill:rgb(7 15 11 / .76);pointer-events:fill}
.studio-tour {position:fixed;z-index:140;width:min(var(--tour-width,420px),calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:20px;background:#f3f0e7;color:#193d32;border:1px solid #d6ee89;border-radius:2px;box-shadow:0 10px 28px #0004;--a-action-disabled:#e2e6df;--a-action-disabled-ink:#677268}
.tour-top {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;font:12px var(--sans)}
.studio-workspace .studio-tour .inline-link {color:#355246;font-size:12px}
.studio-tour h2 {font:500 20px/1.2 var(--sans);letter-spacing:-.025em;margin-bottom:8px}
.studio-tour>p {font:14px/1.5 var(--sans);color:#3e5146}
.tour-navigation {display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.studio-tour .allodia-action--secondary {--action-fill:#e2e6dc;--action-hover:#d3ddcd;--action-pressed:#c6d2bf;--action-border:transparent;--action-ink:#193d32}
.studio-tour .allodia-action {font-size:12px;min-height:40px}
.studio-tour .allodia-action:focus-visible {outline-color:#193d32}
.tour-target {outline:2px solid var(--studio-accent)!important;outline-offset:6px!important;scroll-margin:100px 12px 24px}
@media(min-width:1200px) {
 .studio-workspace {--studio-tools-width:340px}
 #fine-tune {padding:26px 24px}
}
@media(max-width:1199px) {
 .studio-topbar {flex-wrap:wrap;gap:12px 20px;padding:14px 20px}
 .workspace-actions {order:3;flex-basis:100%}
 .studio-exit {margin-left:auto}
 .tool-sheet {top:auto;bottom:0;right:0;left:auto;width:min(380px,100vw);max-height:82dvh;border-radius:0}
 .touring .tool-sheet {bottom:calc(var(--tour-height,300px) + 24px);max-height:calc(100dvh - var(--tour-height,300px) - 44px);z-index:110}
 .touring .tour-target {scroll-margin:12px}
}
@media(max-width:700px) {
 .studio-topbar {padding:12px 16px;gap:12px}
 .studio-home {font-size:15px;gap:7px}
 .studio-exit {font-size:12px;padding:9px 10px;min-height:40px;gap:6px}
 .studio-exit .ui-icon {width:14px}
 .workspace-actions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
 .workspace-actions .allodia-action {font-size:12px;padding:9px 7px;min-height:40px;gap:6px}
 .workspace-actions .ui-icon {display:none}
 .studio-workspace .workspace-actions .fine-toggle {display:flex;grid-column:auto;grid-row:auto;width:auto;margin:0;font-size:12px;padding:9px 7px}
 .studio-recovery {gap:6px 12px;font-size:10px;margin-bottom:16px}
 .tour-invitation {padding:10px 12px;font-size:11px}
 .tool-sheet {width:100%;padding:20px;max-height:82dvh}
 .studio-tour {padding:16px}
 .studio-tour h2 {font-size:18px;margin-bottom:8px}
 .studio-tour>p {font-size:13px;line-height:1.5}
 .tour-top {margin-bottom:10px}
 .tour-navigation {margin-top:14px}
}

@media(max-width:1199px) {body.touring {padding-bottom:calc(var(--tour-height,300px) + 36px)}}
@container store (max-width:420px) {.design-shopping {flex-wrap:wrap}.design-shopping>p {white-space:nowrap}}

@media(max-width:1199px) {
 .tool-sheet {max-height:calc(100dvh - var(--studio-toolbar-height,164px) - 12px)}
 #fine-tune .sheet-heading {position:sticky;top:-28px;z-index:2;padding:20px 0 14px;background:#232c29}
}
@media(max-width:700px) {#fine-tune .sheet-heading {top:-20px;padding-top:12px}}

.touring #fine-tune .tour-target {scroll-margin-top:84px}

/* Connected Studio workbench: controls, appearance choices, and import/canvas. */
.studio-workspace {--studio-tools-width:clamp(352px,24vw,436px);--studio-header-height:76px;--studio-edge:32px;background:#19221f}
.studio-topbar {height:76px;min-height:76px;padding:16px var(--studio-edge);gap:24px;position:relative;flex-wrap:nowrap;background:#222b27}
.studio-home {font-size:20px;gap:12px}
.studio-topbar .studio-conversion {display:flex;align-items:center;flex-wrap:nowrap;gap:12px;padding:0;margin-left:auto}
.studio-topbar .studio-conversion .allodia-action {font-size:14px;min-height:44px;padding:11px 18px;width:auto;flex:none}
.studio-topbar .studio-conversion #email-design {order:0}
.studio-workspace .allodia-action {display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:20px}
.studio-workspace .allodia-action>.ui-icon {display:block;flex:0 0 18px;width:18px;height:18px;align-self:center}
.studio-workspace .studio-editor {display:grid;grid-template-columns:minmax(0,1fr) var(--studio-tools-width);gap:24px 32px;width:100%;max-width:none;margin:0;padding:0 var(--studio-edge) 16px;min-height:0;align-items:start}
.studio-ribbon {grid-column:1/-1;display:flex;align-items:center;gap:24px;margin-inline:calc(-1 * var(--studio-edge));padding:10px var(--studio-edge);background:#222f28;border:0;border-bottom:1px solid #52665a;border-radius:0;box-shadow:none}
.workspace-actions {display:flex;align-items:flex-end;flex-wrap:wrap;gap:24px;flex:1;min-width:0;order:0}
.control-group {display:flex;min-width:0}
.control-group-actions {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.view-controls {padding-left:24px;border-left:1px solid #8295894d}
.workspace-actions .allodia-action {min-height:40px;padding:9px 14px;font-size:13px;white-space:nowrap;background:#2b3b31;border:1px solid transparent;border-radius:2px;margin:0}
.workspace-actions .allodia-action:hover:not(:disabled) {background:#405b49;border-color:transparent}
.workspace-actions .allodia-action:disabled {background:#24342b;color:#91a496;border-color:transparent}
.workspace-actions .studio-exit {margin-left:auto;align-self:flex-end;background:none}
#undo {gap:9px}
#undo .action-label {display:block;line-height:20px}
#undo>.ui-icon {width:18px;height:18px;transform:translateY(-1px)}
.studio-recovery {margin:0;min-height:0;align-self:flex-end;padding-bottom:12px;font:11px/1.4 var(--sans);color:#b8c8bc}
.studio-recovery:has(#save-state[hidden]) {display:none}
#start-tour {position:relative}
#start-tour .tour-invitation {display:none}
.studio-canvas {min-width:0}
#look-section {display:grid;grid-template-columns:1fr;gap:12px;padding:0;margin:0 0 24px;border:0;background:none}
#look-section .look-label {margin:0;font:500 14px/1.3 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;color:#dfe9df}
#look-section .look-choices {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:min(100%,640px);grid-column:auto;grid-row:auto}
#look-section .look-choice {position:relative;display:flex;align-items:center;justify-content:flex-start;min-width:0;height:48px;min-height:48px;gap:10px;padding:6px 34px 6px 16px;background:#2c3c32;color:#edf2e8;border:1px solid transparent;border-radius:0;box-shadow:none;text-align:left;transition:background .16s,border-color .16s}
#look-section .look-choice:hover {background:#364a3d;border-color:#a0b59f}
#look-section .look-choice[aria-pressed=true] {background:#2c3c32;border-color:var(--studio-accent);color:#edf2e8;box-shadow:inset 0 0 0 1px var(--studio-accent)}
.look-title {font:500 15px/1.3 var(--sans);letter-spacing:.01em;min-width:0}
.studio-preview {min-width:0}
#import-panel {padding:15px 18px 18px;margin:0;background:#2a3931;border:1px solid #72867a;border-bottom:0;border-radius:0;box-shadow:none}
#import-panel #import-help {font:400 13px/1.4 var(--sans);color:#cad7ce;margin:0 0 10px}
#import-form {display:flex;align-items:stretch;gap:0;flex-wrap:nowrap}
.url-field {display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:#192b23;border:1px solid #91a69a;padding:0 14px}
.url-field>.ui-icon {flex:none;width:18px;height:18px;color:#bacebe}
.studio-workspace #shop-link {width:100%;min-width:0;min-height:46px;padding:11px 0;font:400 15px/1.4 var(--sans);border:0;background:none;border-radius:0;box-shadow:none;outline:none;color:#eef3e9}
.url-field:focus-within {position:relative;z-index:1;outline:2px solid var(--studio-accent);outline-offset:-2px}
#import-panel #import-submit {min-height:48px;padding:10px 20px;margin:0 0 0 -1px;border:1px solid #b2c6b8;border-radius:0;font-size:14px;background:#c6d6cc;color:#163527;flex:none;white-space:nowrap}
#import-panel #import-submit:hover {background:#e0eae2}
#cancel-import {flex:none;font-size:12px;padding-inline:14px}
#import-status,#import-error {margin:12px 0 0}
.studio-workspace #import-error {color:#ffb9ab}
.store-mount {position:relative;min-height:0;padding:0;border:1px solid #72867a;background:none;box-shadow:none}
.store-mount>.design-store {position:relative;width:100%;left:auto;top:auto;border:0;box-shadow:none;transform:none}
.example-context {padding:14px 18px;margin:0;background:#304234;border-inline:1px solid #72867a;border-top:1px solid #718577}
#fine-tune {display:flex;flex-direction:column;position:static;inset:auto;z-index:auto;width:auto;height:auto;max-height:none;margin:0;padding:0 0 0 28px;overflow:visible;background:none;border:0;border-left:1px solid #69837166;border-radius:0;box-shadow:none}
#fine-tune .sheet-heading {position:static;margin:0 0 28px;padding:0;background:none}
#fine-tune .sheet-heading h2 {font:500 22px/1.3 var(--sans);letter-spacing:-.025em}
#fine-tune :is(h2,h3) {display:flex;align-items:center;gap:10px}
#fine-tune :is(h2,h3)>.ui-icon,#fine-tune .type-symbol {flex:none;width:20px;height:20px;color:#bdcdbf}
#fine-tune .type-symbol {font:500 17px/20px Georgia,serif}
#fine-tune h3 {font:500 14px/1.3 var(--sans);color:#e0e7db;letter-spacing:0;margin:0 0 12px}
#fine-options>section,#fine-options>section:first-of-type {margin:0 0 24px}
#fine-tune .studio-palettes {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#fine-tune .studio-palettes button {display:flex;align-items:center;gap:8px;height:48px;min-height:48px;padding:8px 32px 8px 10px;font:400 14px/1.3 var(--sans);text-align:left;color:#e7ebe2;background:transparent;border:1px solid transparent;border-radius:2px;box-shadow:none}
#fine-tune .studio-palettes .swatch {flex:none;width:38px;height:20px;min-height:20px;margin:0;border:1px solid #b3c2b5;border-radius:0}
#fine-tune .font-choices {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#fine-tune .font-choices button {display:flex;align-items:center;height:48px;min-height:48px;padding:9px 32px 9px 12px;text-align:left;background:#2c3c32;color:#edf2e8;border:1px solid transparent;border-radius:2px;box-shadow:none}
#fine-tune .pack-heading {font-size:22px;line-height:1.2;letter-spacing:.02em;white-space:nowrap;overflow:visible;text-overflow:clip}
#fine-tune .composition-choices,.fit-choices {display:grid;grid-template-columns:1fr 1fr;gap:8px}
#fine-tune :is(.composition-choices,.fit-choices) button {display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:48px;padding:10px 40px 10px 12px;font:400 14px/1.3 var(--sans);color:#edf2e8;background:#2c3c32;border:1px solid #657c6b;border-radius:2px;box-shadow:none}
.fit-choices .ui-icon {width:20px;height:20px;flex:none}
#fine-tune :is(.studio-palettes,.font-choices,.composition-choices,.fit-choices) button:hover {background:#3c5143;border-color:#a0b59f}
#fine-tune :is(.studio-palettes,.font-choices,.composition-choices,.fit-choices) button[aria-pressed=true] {background:#2c3c32;border-color:var(--studio-accent);color:#edf2e8;box-shadow:inset 0 0 0 1px var(--studio-accent)}
#fine-tune :is(.studio-palettes,.font-choices,.composition-choices,.fit-choices) button[aria-pressed=true]:hover {background:#364a3d}
#fine-tune .example-section {margin:0;padding:24px 0 0;border-top:1px solid #82958966}
#fine-tune .example-section h3 {margin-bottom:14px}
.example-choices {display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.example-choices button {display:flex;align-items:center;justify-content:flex-start;gap:9px;min-height:44px;padding:10px 12px;background:#304337;color:#e9f0e4;border:1px solid transparent;border-radius:2px;font:500 13px/1.3 var(--sans);text-align:left}
.example-choices button:hover {background:#435b46;border-color:#c2d6ba}
.example-choices button[aria-pressed=true] {background:#304337;color:#edf2e8;border-color:var(--studio-accent);box-shadow:inset 0 0 0 1px var(--studio-accent)}
.studio-workspace .media-empty .media-invitation {gap:8px;padding:12px;left:50%;right:auto;width:max-content;max-width:calc(100% - 20px);transform:translate(-50%,-50%);text-align:center}
.studio-workspace .media-invitation>strong {font:500 24px/1.3 var(--sans);letter-spacing:-.025em}
.studio-workspace .media-invitation>span:not(.ui-icon) {font:400 14px/1.4 var(--sans)}
.studio-workspace .media-invitation>.ui-icon {width:26px;height:26px;margin-bottom:4px}
.studio-workspace .design-store .media-browse {min-height:40px;font-size:13px;padding:9px 14px;margin-top:5px}
.studio-workspace .design-store:not(.customer-view) {--inset:28px;--dock-inset:20px}
.studio-workspace .design-store:not(.customer-view) .design-store-header {min-height:96px;padding-block:20px}
.studio-workspace .design-store:not(.customer-view) .design-stage {height:max(480px,var(--content-height,480px),var(--inspector-stage-height,0px));min-height:0}
.studio-workspace .design-store:not(.customer-view)[data-layout=split] .design-stage {min-height:max(var(--content-height,440px),var(--inspector-stage-height,0px));height:auto}
/* The empty store teaches the pair without scattering content over blank media. */
.studio-workspace .design-store[data-empty=true]:not(.customer-view) {--pair:64%}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-stage {display:grid;grid-template-columns:1fr;grid-template-rows:var(--empty-media-height,380px) auto;height:auto;min-height:0}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-pair {position:relative;inset:auto;grid-column:1;grid-row:1;width:100%;height:100%;display:grid;grid-template-columns:var(--pair) 1fr;grid-template-rows:1fr}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-pair figure::after {display:none}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-video-pane {border-left:1px solid color-mix(in srgb,var(--m-ink) 16%,transparent)}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-story {position:relative;display:grid;grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 32px;inset:auto;width:100%;max-width:none;padding:24px 28px;background:var(--m-paper);color:var(--m-ink);backdrop-filter:none;border-top:1px solid color-mix(in srgb,var(--m-ink) 14%,transparent)}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) :is(.design-title,.design-purchase) {position:static;inset:auto;width:auto;max-width:none;margin:0;padding:0;background:none;color:inherit;border-radius:0}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-title h3 {font-size:clamp(26px,2.5cqw,36px);line-height:1.15;max-width:none}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-eyebrow {margin-bottom:8px;font-size:9px}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-purchase>p {grid-column:1;grid-row:2;font-size:14px;max-width:none;line-height:1.4}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-shopping {grid-column:2;grid-row:1/3;display:flex;justify-content:space-between;flex-wrap:wrap;min-width:230px;margin:0;gap:24px}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-shopping>p {font-size:24px}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .purchase-button {width:auto;min-height:40px;padding:10px 16px;font-size:12px}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .media-dock {left:auto;right:calc(100% - var(--pair) + 20px);top:calc(var(--empty-media-height,380px) - var(--dock-height,160px) - 20px);bottom:auto;max-width:calc(var(--pair) - 40px);margin:0;transform:none;box-shadow:none}
.studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-purchase {display:contents}
@media(min-width:701px) {
 .studio-workspace .design-store[data-empty=true][data-layout=split]:not(.customer-view) .design-stage {grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:minmax(var(--empty-media-height,380px),auto)}
 .studio-workspace .design-store[data-empty=true][data-layout=split]:not(.customer-view) .design-story {grid-column:2;grid-row:1;display:block;border-top:0;border-left:1px solid color-mix(in srgb,var(--m-ink) 14%,transparent);align-self:stretch;align-content:center}
 .studio-workspace .design-store[data-empty=true][data-layout=split]:not(.customer-view) .design-purchase {display:block;margin-top:20px}
 .studio-workspace .design-store[data-empty=true][data-layout=split]:not(.customer-view) .design-shopping {min-width:0;margin-top:20px;gap:16px}
 .studio-workspace .design-store[data-empty=true][data-layout=split]:not(.customer-view) .media-dock {right:calc(38.462% + 20px);max-width:calc(61.538% - 40px)}
 .studio-workspace .design-store[data-empty=true][data-layout=split]:not(.customer-view) .media-invitation>strong {font-size:20px}
}
.saved-design-dialog {max-width:680px;max-height:85dvh;overflow:auto}
.saved-design-dialog h2 {font:500 26px/1.2 var(--sans);margin-top:0;padding-right:40px}
.saved-design-list {display:grid;margin:22px 0;border-top:1px solid var(--line)}
.saved-design-row {display:flex;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.saved-design-row>div {flex:1;min-width:0}
.saved-design-row strong {font:500 16px/1.4 var(--sans);overflow-wrap:anywhere}
.saved-design-row p {margin:4px 0;font-size:12px}
.saved-design-row span {font-size:11px;color:var(--muted)}
.saved-design-row .allodia-action {flex:none;min-height:38px;font-size:12px;padding:8px 12px}
/* Natural-width edit fields grow with their text; the pencil follows the final word. */
.design-store:not(.customer-view)[data-sample=false] .editable {width:fit-content;min-width:1ch;max-width:100%;padding-right:0;justify-self:start;overflow-wrap:anywhere}
.design-store:not(.customer-view)[data-sample=false] .editable::after {position:static;display:inline-block;vertical-align:middle;margin-left:8px;margin-right:2px;flex:none;pointer-events:none}
.design-store:not(.customer-view)[data-sample=false] .editable:focus::after {display:inline-block}
.design-store:not(.customer-view) :is(.design-title,.brand-text) {min-width:0}
.design-store:not(.customer-view)[data-sample=false] #design-description {max-width:min(100%,58ch)}
.logo-tools {position:relative;flex:none;align-self:center}
.design-store:not(.customer-view)[data-sample=false] .logo-drop:has(img[hidden]) #design-monogram {visibility:hidden}
.design-store:not(.customer-view)[data-sample=false] .logo-drop:has(img[hidden]) .image-veil {display:flex;inset:0;padding:0;background:color-mix(in srgb,var(--m-ink) 12%,transparent);color:var(--m-ink)}
.design-store:not(.customer-view)[data-sample=false] .logo-drop:has(img[hidden]) .image-veil .ui-icon {width:20px;height:20px}
.design-store:not(.customer-view)[data-sample=false] .logo-drop:has(img[hidden]):is(:hover,:focus-visible) .image-veil {background:color-mix(in srgb,var(--m-ink) 22%,transparent)}
.context-remove {display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:4px;background:var(--m-paper);color:var(--m-ink);border:1px solid color-mix(in srgb,var(--m-ink) 40%,transparent);border-radius:2px}
.context-remove>.ui-icon {width:14px;height:14px}
.logo-tools>.context-remove {position:absolute;right:-7px;top:-7px}
.header-context {display:grid;justify-items:end;align-content:center;gap:12px;flex:none}
.design-store .header-context .store-nav {padding:0;align-self:center}
.header-tools {display:flex;align-items:center;gap:8px}
.header-tools #add-header {display:inline-flex;align-items:center;gap:7px;padding:5px 0;background:none;border:0;color:var(--m-ink);font:400 12px/1.3 var(--sans);opacity:.8}
.header-tools #add-header>.ui-icon {width:16px;height:16px;flex:none}
.header-tools #add-header:hover {opacity:1;text-decoration:underline;text-underline-offset:4px}
.design-store:is(.customer-view,[data-sample=true]) :is(.header-tools,.context-remove) {display:none}
.design-store .ghost-slot {display:block;pointer-events:none}
@media(min-width:1200px) {.studio-workspace .workspace-actions .fine-toggle,#fine-tune [data-close-sheet] {display:none}}
@media(min-width:1200px) and (max-width:1700px) {
 .studio-workspace {--studio-tools-width:352px}
 #fine-tune {padding-left:22px}
 .workspace-actions {gap:18px}
 .view-controls {padding-left:18px}
 #look-section .look-choice {gap:8px;padding:6px 30px 6px 14px}
 #fine-tune .studio-palettes button {gap:7px;font-size:13px;padding:8px 28px 8px 8px}
 #fine-tune .studio-palettes .swatch {width:32px;height:20px;min-height:20px}
 #fine-tune .pack-heading {font-size:20px}
 #fine-tune .font-choices button {padding-left:10px;padding-right:28px}
}
@media(max-width:1199px) {
 .studio-workspace .studio-editor {display:block;width:100%;max-width:none;padding:0 var(--studio-edge) 24px}
 .studio-ribbon {margin-bottom:24px;gap:12px;padding:10px var(--studio-edge);flex-wrap:wrap}
 .workspace-actions {flex:1 1 100%;min-width:0;max-width:100%;flex-wrap:wrap;gap:20px}
 .workspace-actions .studio-exit {margin-left:0}
 .studio-workspace .workspace-actions .fine-toggle {display:inline-flex;min-height:42px;font-size:13px;padding:10px 14px;margin:0;width:auto;border:1px solid transparent;background:#31443a}
 .studio-recovery {display:none}
 #look-section .look-choice {gap:8px;padding:6px 30px 6px 14px}
 #fine-tune {position:fixed;inset:auto 0 0 auto;z-index:60;width:420px;max-height:calc(100dvh - 70px);overflow:auto;padding:24px;background:#222e27;border:1px solid #718577;box-shadow:0 -8px 40px #0005}
 #fine-tune .sheet-heading {position:sticky;top:-24px;padding:12px 0;background:#222e27;z-index:2}
 .touring #fine-tune {bottom:calc(var(--tour-height,280px) + 24px);max-height:calc(100dvh - var(--tour-height,280px) - 44px);z-index:110}
}
@media(max-width:800px) {
 .studio-workspace {--studio-edge:16px}
 .studio-topbar {height:auto;min-height:0;display:flex;flex-wrap:wrap;padding:16px var(--studio-edge);gap:14px}
 .studio-topbar .studio-conversion {display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin:0}
 .studio-topbar .studio-conversion .allodia-action {font-size:12px;line-height:1.4;min-height:48px;padding:10px;gap:6px;width:100%}
 .studio-topbar .studio-conversion .ui-icon {display:none}
}
@media(max-width:700px) {
 .studio-home {font-size:18px}
 .studio-workspace .studio-editor {width:100%;padding:0 var(--studio-edge) 24px}
 .studio-ribbon {padding:12px var(--studio-edge);margin-bottom:24px}
 .workspace-actions {display:flex;flex-direction:column;align-items:stretch;width:100%;gap:16px}
 .control-group-actions {display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .history-controls #start-over {grid-column:1/-1}
 .control-group {display:block}
 .view-controls {padding:16px 0 0;border-left:0;border-top:1px solid #8295894d}
 .workspace-actions .allodia-action,.studio-workspace .workspace-actions .fine-toggle {font-size:12px;padding:8px;min-height:40px;white-space:normal;gap:7px}
 .workspace-actions .studio-exit {align-self:stretch;width:100%;margin:0}
 .studio-workspace .workspace-actions .ui-icon {display:block;width:16px;height:16px}
 #look-section {display:grid;gap:12px;margin-bottom:24px}
 #look-section .look-choices {grid-template-columns:1fr 1fr;gap:8px}
 #look-section .look-choice {height:48px;min-height:48px;padding:6px 32px 6px 14px;gap:8px}
 #import-panel {padding:14px 12px 12px}
 #import-panel #import-help {font-size:12px;margin-bottom:12px}
 #import-form {flex-wrap:wrap;gap:8px}
 .url-field {flex-basis:100%;padding-inline:10px}
 .studio-workspace #shop-link {min-height:44px;font-size:13px}
 #import-panel #import-submit {flex:1;min-height:42px;margin:0;font-size:13px}
 #fine-tune {width:100%;padding:20px;max-height:calc(100dvh - 36px)}
 #fine-tune .sheet-heading {top:-20px;padding-top:12px}
 .studio-workspace .media-invitation>strong {font-size:18px}
 .studio-workspace .media-invitation>span:not(.ui-icon) {font-size:12px}
 .studio-workspace .design-store .media-browse {font-size:12px;padding:8px 10px;min-height:38px}
 .studio-workspace .design-store[data-empty=true]:not(.customer-view) {--pair:50%}
 .studio-workspace .design-store[data-empty=true]:not(.customer-view) .media-dock {left:12px;right:auto;max-width:calc(100% - 24px);top:calc(var(--empty-media-height,500px) - var(--dock-height,160px) - 16px)}
 .studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-story {display:block;padding:22px}
 .studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-purchase {display:block;margin-top:16px}
 .studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-title h3 {font-size:28px}
 .studio-workspace .design-store[data-empty=true]:not(.customer-view) .design-shopping {flex-wrap:wrap;min-width:0;margin-top:16px}
 .studio-workspace .media-empty .media-invitation {padding:8px;gap:7px}
 .design-store:not(.customer-view) .design-store-header {display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 .header-context {display:flex;justify-content:space-between;gap:12px;min-width:0;width:100%}
 .header-tools {order:-1}
 .header-tools #add-header {font-size:11px}
 .design-store:not(.customer-view) .store-nav {margin-left:auto}
 .saved-design-row {gap:10px}
 .saved-design-row .allodia-action {padding:8px;font-size:11px}
}
@media(max-width:380px) {
 #look-section .look-choice {padding:6px 30px 6px 12px;gap:6px}
 #fine-tune .pack-heading {font-size:20px}
}

/* Paired Media uses comfortable targets; guidance belongs to the drop zones. */
.studio-workspace .design-store .media-dock {--media-target:56px;padding:40px 16px 14px;gap:18px;background:rgb(24 31 27 / .94)}
.studio-workspace .media-dock>.dock-name {top:13px;left:17px;font-size:14px}
.studio-workspace .design-store .media-dock>div>span {font-size:13px;line-height:18px}
.studio-workspace .media-dock .media-thumb,
.studio-workspace .design-store .media-thumbs :is(.thumb-select,.empty-thumb),
.studio-workspace .media-dock :is(.film-toggle,.add-thumb) {width:var(--media-target);height:var(--media-target)}
.studio-workspace .media-dock :is(.film-toggle,.add-thumb,.empty-thumb)>.ui-icon {width:24px;height:24px}
.studio-workspace .media-dock #full-screen {display:flex;align-items:center;justify-content:center;gap:9px;width:auto;min-width:var(--media-target);padding:12px 14px;border-radius:2px}
.dock-action-label {font:500 13px/1.3 var(--sans)}
.studio-workspace .design-store .media-dock .dock-hint {font-size:11px}
.studio-workspace .design-store .media-thumbs .thumb-remove {width:28px;height:28px;right:-7px;top:-7px}
.studio-workspace .design-store .media-thumbs .thumb-remove .ui-icon {width:14px;height:14px}
.studio-workspace .design-store .media-dock>div[data-separator=vertical]::before {top:27px;left:-10px}
.studio-workspace .media-invitation .drop-formats {display:block;margin-top:8px;font:400 13px/1.6 var(--sans);color:inherit;opacity:.75;max-width:24ch}
@media(max-width:700px) {
 .studio-workspace .design-store .media-dock {--media-target:48px;padding:38px 12px 12px;gap:12px}
 .studio-workspace .media-dock>.dock-name {left:13px;font-size:14px}
 .studio-workspace .design-store .media-dock>div>span {font-size:12px}
 .studio-workspace .design-store .media-dock>div[data-separator=vertical]::before {left:-8px}
 .studio-workspace .media-invitation .drop-formats {font-size:11px;line-height:1.5;max-width:18ch}
 .studio-workspace .media-dock #full-screen {padding-inline:10px;gap:6px}
 .dock-action-label {font-size:12px}
}
@media(max-width:380px) {
 .studio-workspace .design-store .media-thumbs {gap:6px;padding-inline:3px}
 .studio-workspace .design-store .media-thumbs .thumb-remove {right:-3px}
}

/* One selection language across Studio; action buttons use quiet surfaces. */
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button {
 position:relative;background:#2c3c32;color:#edf2e8;border:1px solid transparent;box-shadow:none;padding-right:32px;
}
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button::after {
 content:'';position:absolute;top:8px;right:8px;width:24px;height:24px;border:0;border-radius:50%;
 background:#192b23 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-8' fill='none' stroke='%23d6ee89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 opacity:0;pointer-events:none;
}
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button:hover {
 background:#394d40;border-color:transparent;
}
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button[aria-pressed=true] {
 background:#304237;border-color:var(--studio-accent);color:#edf2e8;box-shadow:none;
}
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button[aria-pressed=true]::after {opacity:1}
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button:focus-visible,
.studio-workspace :is(.workspace-actions,.studio-conversion) .allodia-action:focus-visible {outline:2px solid #f3f0e8;outline-offset:3px}
.studio-topbar .studio-conversion #email-design {background:#304237;border-color:transparent;box-shadow:none}
.studio-topbar .studio-conversion #email-design:hover {background:#405b49}
.studio-workspace .tool-sheet .allodia-action {background:#304237;border-color:transparent;box-shadow:none}
.studio-workspace .tool-sheet .allodia-action:hover {background:#405b49}
.studio-workspace .design-store .media-browse {background:color-mix(in srgb,var(--m-ink) 10%,var(--m-paper));border-color:transparent;box-shadow:none}
.studio-workspace .design-store .media-browse:hover {background:color-mix(in srgb,var(--m-ink) 18%,var(--m-paper));border-color:transparent}
#fine-tune [data-font=modern] .pack-heading {font-size:20px}
#fine-tune [data-font=expressive] .pack-heading {font-size:20px}
#fine-tune [data-font=understated] .pack-heading {font-size:23px}
@media(min-width:1200px) {#fine-tune .example-section {margin-top:auto}}
@media(min-width:1200px) and (max-width:1700px), (max-width:380px) {
 #fine-tune [data-font=modern] .pack-heading,#fine-tune [data-font=expressive] .pack-heading {font-size:18px}
 #fine-tune [data-font=understated] .pack-heading {font-size:20px}
 #fine-tune :is(.fit-choices,.composition-choices) button {font-size:12px;gap:6px;padding-left:8px}
 #fine-tune .fit-choices .ui-icon {width:16px;height:16px}
}
@media(max-width:380px) {
 #fine-tune {padding-inline:16px}
 #fine-tune .studio-palettes button {flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;height:80px;padding-left:10px}
 #fine-tune .palette-name {line-height:1.3}
}

/* Studio design samples — the preview tokens are shared with the actual store. */
.studio-workspace {--studio-tools-width:clamp(392px,25vw,472px)}
#look-section .look-choices {width:100%;gap:12px}
#look-section .look-choice {display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;height:auto;min-height:0;padding:10px;gap:9px}
.store-sample {display:grid;grid-template-columns:1fr;grid-template-rows:36px 1fr;gap:8px;width:100%;height:100px;padding:12px;background:var(--m-paper);color:var(--m-ink);overflow:hidden;text-align:left}
.sample-pair {display:grid;grid-template-columns:var(--sample-pair,64%) 1fr;gap:3px;min-width:0;min-height:0}
.sample-pair i {background:color-mix(in srgb,var(--m-paper) 86%,var(--m-ink))}
.sample-pair i+ i {background:color-mix(in srgb,var(--m-paper) 80%,var(--m-ink))}
.sample-copy {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr;gap:8px;align-items:center;min-width:0}
.sample-title {font:var(--design-heading-weight) 26px/1.05 var(--m-serif);letter-spacing:var(--design-heading-tracking)}
.sample-title:empty {display:none}
.sample-line {width:68%;height:4px;background:currentColor;opacity:.35}
.sample-title:not(:empty)+.sample-line {display:none}
.sample-buy {display:inline-block;justify-self:end;align-self:end;background:var(--m-button);color:var(--m-button-ink);font:500 11px/1.2 var(--design-body);padding:6px 8px;border-radius:var(--m-button-radius);white-space:nowrap}
.look-details {font:400 12px/1.4 var(--sans);color:#c1cec5;text-align:left}
#fine-tune .sheet-heading {margin-bottom:20px}
#fine-options>section,#fine-options>section:first-of-type {margin-bottom:20px}
#fine-tune h3 {margin-bottom:10px}
#fine-tune .studio-palettes button {display:block;height:88px;min-height:88px;padding:7px}
.palette-sample {display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:8px;width:100%;height:100%;padding:9px 28px 9px 10px;background:var(--m-paper);color:var(--m-ink)}
#fine-tune .palette-name {font:500 13px/1.2 var(--sans);letter-spacing:0}
.palette-sample .sample-buy {align-self:flex-start;padding:4px 8px;font-size:11px}
#fine-tune .font-choices button {flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;height:auto;min-height:86px;padding:12px 40px 12px 12px}
#fine-tune .pack-heading {font-size:25px;line-height:1.1;letter-spacing:.02em}
#fine-tune [data-font=modern] .pack-heading,#fine-tune [data-font=expressive] .pack-heading {font-size:23px}
#fine-tune [data-font=understated] .pack-heading {font-size:26px}
.pack-description {font:400 12px/1.4 var(--design-body);color:#c0cec4;text-align:left}
#fine-tune .composition-choices {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#fine-tune .composition-choices button {display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:7px;min-height:0;font-size:12px}
.composition-name {text-align:left;line-height:1.3}
.composition-choices .store-sample {height:64px;padding:7px;gap:5px;grid-template-rows:30px 1fr}
.composition-choices .sample-buy {font-size:0;width:20px;height:11px;padding:0}
.composition-choices .sample-copy {gap:3px}
.store-sample[data-arrangement=split] {grid-template-columns:62% 1fr;grid-template-rows:1fr}
.store-sample[data-arrangement=split] .sample-copy {display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px}
.store-sample[data-arrangement=split] .sample-buy {align-self:flex-start}
.store-sample[data-arrangement=overlay] {position:relative;display:block}
.store-sample[data-arrangement=overlay] .sample-pair {position:absolute;inset:7px}
.store-sample[data-arrangement=overlay] .sample-copy {position:absolute;inset:auto 7px 7px;padding:5px;background:#17241ee6;color:#f7f5ed}
/* Checkmarks express selection. An outline appears only for keyboard focus. */
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button,
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button:hover {border-color:transparent;box-shadow:none}
.studio-workspace :is(#look-choices,#palettes,#font-choices,.composition-choices,.fit-choices,#example-choices)>button[aria-pressed=true] {background:#3b5041;border-color:transparent;box-shadow:none}
#fine-tune .example-section {padding-top:18px}

/* Stable compositions in empty, populated and full-screen views. */
.studio-workspace #design-store .design-stage {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;position:relative;height:auto;min-height:0;background:var(--m-paper);color:var(--m-ink)}
.studio-workspace #design-store .design-media-zone {position:relative;grid-column:1;grid-row:1;min-width:0;min-height:400px;height:480px}
.studio-workspace #design-store .design-pair {position:absolute;inset:0;display:grid;grid-template-columns:var(--pair) 1fr;grid-template-rows:1fr;width:100%;height:100%}
.studio-workspace #design-store .design-pair figure {position:relative;min-width:0;min-height:0;height:100%;overflow:hidden}
.studio-workspace #design-store .design-pair figure::after {display:none}
.studio-workspace #design-store .design-pair .design-video-pane {border-left:1px solid color-mix(in srgb,var(--m-ink) 12%,transparent)}
.studio-workspace #design-store .design-story {position:relative;display:grid;grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto;align-content:center;align-items:center;gap:12px 32px;inset:auto;width:100%;max-width:none;padding:24px 28px;background:var(--m-paper);color:var(--m-ink);border:0;border-top:1px solid color-mix(in srgb,var(--m-ink) 12%,transparent);border-radius:0;backdrop-filter:none;pointer-events:auto}
.studio-workspace #design-store :is(.design-title,.design-purchase) {position:static;inset:auto;width:auto;max-width:none;margin:0;padding:0;background:none;color:inherit;border:0;border-radius:0;backdrop-filter:none}
.studio-workspace #design-store .design-title {grid-column:1;grid-row:1}
.studio-workspace #design-store .design-title h3 {font-size:clamp(28px,3cqw,46px);line-height:1.15;max-width:none}
.studio-workspace #design-store .design-eyebrow {font-size:10px;margin:0 0 10px}
.studio-workspace #design-store .design-purchase {display:contents}
.studio-workspace #design-store #design-description {grid-column:1;grid-row:2;font-size:16px;line-height:1.5;max-width:58ch}
.studio-workspace #design-store #design-facts {display:none}
.studio-workspace #design-store .design-shopping {grid-column:2;grid-row:1/3;display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:20px;margin:0;min-width:0}
.studio-workspace #design-store .design-shopping>p {font-size:26px;margin:0}
.studio-workspace #design-store .purchase-button {width:auto;font-size:13px;min-height:44px;padding:12px 18px;gap:18px}
.studio-workspace #design-store .media-dock {left:auto;right:calc(100% - var(--pair) + 20px);top:auto;bottom:calc(var(--overlay-story-height,0px) + 20px);max-width:calc(var(--pair) - 40px);margin:0;transform:none;z-index:5;padding:16px 16px 16px 60px;gap:16px;background:#202c26f2;box-shadow:0 4px 14px #0002}
.studio-workspace #design-store .media-dock>.dock-name {position:absolute;inset:14px auto 14px 0;width:43px;padding:0 12px;border-left:1px solid #c8d6c044;writing-mode:vertical-rl;transform:rotate(180deg);font:500 14px/18px var(--sans);letter-spacing:.04em;text-align:center;color:var(--studio-accent)}
.studio-workspace #design-store[data-layout=split] .design-stage {grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);grid-template-rows:auto}
.studio-workspace #design-store[data-layout=split] .design-story {grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;border:0;border-left:1px solid color-mix(in srgb,var(--m-ink) 12%,transparent);padding:28px}
.studio-workspace #design-store[data-layout=split] .design-title h3 {font-size:clamp(27px,3cqw,44px)}
.studio-workspace #design-store[data-layout=split] .design-shopping {gap:20px}
.studio-workspace #design-store[data-layout=overlay] .design-stage {display:block}
.studio-workspace #design-store[data-layout=overlay] .design-story {position:absolute;inset:auto 0 0;z-index:3;background:linear-gradient(180deg,#14201eed,#14201ef5);color:#f8f6ef;border:0}
.studio-workspace #design-store .editable:empty::before {opacity:1;color:color-mix(in srgb,currentColor 78%,transparent)}
.studio-workspace #design-store .editable:empty:focus::before {color:#a6aaa5}
.studio-workspace #design-store .media-invitation>.ui-icon {box-sizing:content-box;width:23px;height:23px;padding:14px;border:1.5px solid currentColor;border-radius:50%;opacity:.8;margin-bottom:8px}
.studio-workspace #design-store .media-browse {background:color-mix(in srgb,var(--m-ink) 22%,var(--m-paper));color:var(--m-ink);border-color:transparent;font-weight:600;pointer-events:auto}
.studio-workspace #design-store .media-browse:hover {background:color-mix(in srgb,var(--m-ink) 32%,var(--m-paper))}
.studio-workspace #design-store .media-browse:focus-visible {outline:2px solid var(--m-ink);outline-offset:3px}
/* A single remaining media item fills the customer preview; the editor retains both invitations. */
.studio-workspace #design-store.customer-view:is([data-has-photo=false],[data-has-video=false]) .design-pair {grid-template-columns:1fr}
.studio-workspace #design-store.customer-view[data-has-photo=false] .media-dock {right:20px;max-width:calc(100% - 40px)}
@media(max-width:1700px) and (min-width:1200px) {
 .studio-workspace {--studio-tools-width:392px}
 .studio-workspace .studio-editor {column-gap:24px}
 #fine-tune {padding-left:20px}
 .sample-title {font-size:22px}
 .store-sample {height:92px;padding:9px;grid-template-rows:30px 1fr;gap:6px}
 #look-section .sample-buy {display:none}
 #fine-tune .pack-heading {font-size:23px}
 #fine-tune [data-font=modern] .pack-heading,#fine-tune [data-font=expressive] .pack-heading {font-size:21px}
}
@media(max-width:700px) {
 #look-section .look-choices {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #look-section .look-choice {padding:7px;gap:7px}
 #look-section .store-sample {height:94px;padding:9px;grid-template-rows:32px 1fr}
 #look-section .sample-title {font-size:23px}
 #look-section .sample-buy {display:none}
 .look-details {font-size:10px}
 #fine-tune .studio-palettes button {height:88px;min-height:88px;padding:7px}
 #fine-tune .pack-heading,#fine-tune [data-font=understated] .pack-heading {font-size:24px}
 #fine-tune [data-font=modern] .pack-heading,#fine-tune [data-font=expressive] .pack-heading {font-size:21px}
 #fine-tune .font-choices button {min-height:96px;padding:12px 26px 12px 10px}
 #fine-tune .composition-choices {gap:6px}
 #fine-tune .composition-choices button {font-size:11px;padding:6px}
 .studio-workspace #design-store .design-stage,
 .studio-workspace #design-store[data-layout=split] .design-stage {display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto}
 .studio-workspace #design-store .design-pair {grid-template-columns:1fr 1fr}
 .studio-workspace #design-store .design-story,
 .studio-workspace #design-store[data-layout=split] .design-story {grid-column:1;grid-row:2;display:flex;flex-direction:column;align-items:flex-start;gap:16px;border:0;padding:22px}
 .studio-workspace #design-store .design-title h3 {font-size:28px}
 .studio-workspace #design-store #design-description {font-size:14px}
 .studio-workspace #design-store .design-shopping {gap:14px}
 .studio-workspace #design-store .media-dock {right:16px;left:auto;top:auto;bottom:calc(var(--overlay-story-height,0px) + 16px);max-width:calc(100% - 32px);padding:48px 12px 12px;gap:12px}
 .studio-workspace #design-store .media-dock>.dock-name {inset:0 12px auto;width:auto;height:36px;padding:11px 0 9px;border:0;border-bottom:1px solid #c8d6c044;writing-mode:horizontal-tb;transform:none;text-align:left;font-size:13px;line-height:16px}
 .studio-workspace #design-store[data-layout=overlay] .design-stage {display:block}
 .studio-workspace #design-store[data-layout=overlay] .design-story {position:absolute;inset:auto 0 0;background:#14201ef2;color:#f8f6ef}
 .studio-workspace #design-store .media-invitation>.ui-icon {width:21px;height:21px;padding:11px}
 .studio-workspace #design-store .media-invitation>strong {font-size:17px}
 .studio-workspace #design-store .media-invitation .drop-formats {font-size:10px}
}
/* Compact samples keep the complete inspector in view on a wide desktop. */
.studio-workspace #look-choices>button {padding:10px}

#fine-tune .sheet-heading {margin-bottom:12px}
#fine-options>section,#fine-options>section:first-of-type {margin-bottom:12px}
#fine-tune .studio-palettes button {height:68px;min-height:68px;padding:5px}
.palette-sample {padding:6px 30px 6px 8px;gap:5px}
.palette-sample .sample-buy {padding:3px 7px;font-size:10px}
#fine-tune .font-choices button {min-height:74px;gap:5px;padding-block:9px}
#fine-tune .composition-choices .store-sample {height:50px;grid-template-rows:22px 1fr;padding:6px}
/* Sample cards keep selection in the caption, outside the merchant preview. */
.studio-workspace :is(#look-choices,.composition-choices)>button {
 display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:auto minmax(24px,1fr);column-gap:8px;
}
.studio-workspace :is(#look-choices,.composition-choices)>button>.store-sample {grid-column:1/-1;grid-row:1}
.studio-workspace :is(.look-details,.composition-name) {grid-column:1;grid-row:2;align-self:center;min-width:0}
.studio-workspace :is(#look-choices,.composition-choices)>button::after {
 position:static;grid-column:2;grid-row:2;align-self:center;justify-self:end;
}
#fine-tune .example-section {padding-top:14px}
#fine-tune .example-section h3 {margin-bottom:10px}
#fine-tune #example-choices>button {position:relative;min-width:0;min-height:64px;padding:8px 40px 8px 8px;gap:9px;border-color:transparent;box-shadow:none;transition:background-color 160ms}
#fine-tune #example-choices>button:hover {background:#405648;border-color:transparent}
.example-thumbnail {display:block;width:44px;height:44px;flex:none;object-fit:cover;border-radius:2px;background:#536056}
.example-copy {display:grid;gap:4px;min-width:0}
.example-copy strong {font:550 13px/1.2 var(--sans);color:#f1f4ec}
.example-copy>span {font:400 11px/1.25 var(--sans);color:#becbbf}
@media(max-width:380px) {
 #fine-tune #example-choices>button {gap:7px;padding-right:36px}
 .example-thumbnail {width:32px;height:32px}
 .example-copy strong {font-size:12px}
}
@media(max-width:700px) {
 .studio-workspace #look-choices>button {padding:7px}
 #fine-tune .studio-palettes button {height:80px;min-height:80px}
 #fine-tune .font-choices button {min-height:88px}
}
.studio-workspace #design-store .design-media-zone[data-dock-wide=true] .media-dock {right:16px;max-width:calc(100% - 32px);padding:48px 12px 12px}
.studio-workspace #design-store .design-media-zone[data-dock-wide=true] .dock-name {inset:0 12px auto;width:auto;height:36px;padding:11px 0 9px;border:0;border-bottom:1px solid #c8d6c044;writing-mode:horizontal-tb;transform:none;text-align:left;font-size:13px;line-height:16px}
@media(min-width:1200px) {.studio-workspace .studio-editor {padding-bottom:16px}}
.sample-buy {font-family:var(--sans)}
#look-choices [data-look-choice=atelier] .sample-title {text-transform:uppercase}
#fine-tune .composition-choices .store-sample[data-arrangement=split] {grid-template-rows:1fr}
.studio-workspace #design-store .purchase-button {background:var(--m-button);color:var(--m-button-ink);border-radius:var(--m-button-radius)}
.studio-workspace #design-store #design-facts:not(:empty) {display:flex;flex-wrap:wrap;gap:12px 24px;grid-column:1;grid-row:3;margin:0;font:12px/1.5 var(--sans);letter-spacing:0;text-transform:none;opacity:.85}
.studio-workspace #design-store #design-facts div {padding:0;border:0}
.studio-workspace #design-store .design-shopping {grid-row:1/4}
.example-context {color:#e3ebdf}
.studio-workspace #design-store .media-dock #full-screen {border-color:transparent;background:#35483d}
.studio-workspace #design-store .media-dock #full-screen:hover {background:#49614f}
@media(max-width:380px) {
 #fine-tune .pack-heading {font-size:21px}
 #fine-tune [data-font=modern] .pack-heading {font-size:18px}
 #fine-tune [data-font=expressive] .pack-heading {font-size:16px}
 #fine-tune [data-font=understated] .pack-heading {font-size:18px}
 #fine-tune .pack-description {font-size:11px}
}
@media(max-width:380px) {
 .studio-workspace #design-store .media-dock #full-screen {padding-inline:7px;gap:4px}
 .studio-workspace #design-store .media-dock #full-screen .ui-icon {width:20px;height:20px}
 .studio-workspace #design-store .media-dock #full-screen .dock-action-label {font-size:11px}
 .studio-workspace #design-store .dock-action-buttons {gap:6px}
}