/* Clear Choices: inline selectors keep options and the committed clock visible. */
/* Keep one document scroller; prevent an iOS overscroll gap below the fixed action. */
html { --studio-purchase-height: calc(61px + max(12px, env(safe-area-inset-bottom, 0px))); scroll-padding-block: 16px calc(var(--studio-purchase-height) + 16px); overscroll-behavior-y: none; }
body[data-simple-studio="true"] { --simple-ink: #111; --simple-muted: #565957; height: auto; min-height: 100svh; overflow-x: clip; overflow-y: visible; background: #d4d5d5; }
body[data-simple-studio="true"] .app-shell { height: auto; min-height: 100svh; padding: 0 22px calc(var(--studio-purchase-height) + 16px); max-width: 1440px; margin: auto; }
body[data-simple-studio="true"] .topbar { position: relative; inset: auto; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; height: 76px; padding: 0; margin: 0; z-index: 10; }
body[data-simple-studio="true"] .brand-home { display: contents; }
body[data-simple-studio="true"] .brand-mark { grid-column: 1; grid-row: 1; width: 30px; height: 30px; }
body[data-simple-studio="true"] .brand-wordmark { grid-column: 2; grid-row: 1; justify-self: center; width: 132px; height: auto; }
body[data-simple-studio="true"] .topbar .buy-action { grid-column: 3; grid-row: 1; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent; color: #111; box-shadow: none; border-radius: 50%; }
body[data-simple-studio="true"] .topbar .buy-action svg { width: 26px; height: 26px; }
body[data-simple-studio="true"] .configurator,
body[data-simple-studio="true"] .preview-column,
body[data-simple-studio="true"] .studio-workbench { display: block; height: auto; min-height: 0; margin: 0; padding: 0; }
body[data-simple-studio="true"] .preview-column { max-width: 560px; margin: auto; }
body[data-simple-studio="true"] .studio-intro { text-align: center; margin: 2px 0 12px; }
body[data-simple-studio="true"] .studio-intro h1 { font: 700 clamp(23px,6.4vw,30px)/1.18 ui-sans-serif,system-ui,sans-serif; letter-spacing: -.5px; margin: 0; }
body[data-simple-studio="true"] .studio-intro p { color: var(--simple-muted); font: 400 17px/1.4 ui-sans-serif,system-ui,sans-serif; margin: 7px 0 0; }
body[data-simple-studio="true"] .product-figure,
body[data-simple-studio="true"][data-preview-compact="true"] .product-figure { position: relative; inset: auto; width: min(74%,380px); max-width: none; margin: 0 auto; padding: 0; transform: none; transition: none; }
body[data-simple-studio="true"] .product-figure::before { content: none !important; }
body[data-simple-studio="true"] .preview-tilt-scene { width: 100%; margin: 0; }
body[data-simple-studio="true"] .product-caption { display: none; }
body[data-simple-studio="true"] .studio-utilities { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 12px; min-height: 44px; color: var(--simple-muted); font-size: 12px; }
body[data-simple-studio="true"] #undo-design { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 5px; border: 0; color: var(--simple-ink); background: transparent; border-radius: 6px; font: 500 14px/1.2 inherit; cursor: pointer; }
body[data-simple-studio="true"] #undo-design svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; fill: none; }
body[data-simple-studio="true"] #undo-design:disabled { color: var(--simple-muted); opacity: .55; cursor: default; }
body[data-simple-studio="true"] #design-save-status { text-align: right; }
body[data-simple-studio="true"] .simple-radial-controls { position: static; display: block; width: auto; height: auto; inset: auto; pointer-events: auto; z-index: auto; }
body[data-simple-studio="true"] #studio-selector-home { position: relative; z-index: 0; isolation: isolate; }
body[data-simple-studio="true"] .simple-radial-control { position: relative; inset: auto !important; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0; transform: none; isolation: auto; border-top: 1px solid #aaaead; z-index: auto; }
body[data-simple-studio="true"] .radial-primary-slot,
body[data-simple-studio="true"] .radial-primary-button,
body[data-simple-studio="true"] .radial-stack-layer,
body[data-simple-studio="true"] .radial-hover-bridge,
body[data-simple-studio="true"] #radial-upload { display: none !important; }
body[data-simple-studio="true"] .radial-category-label { position: relative; inset: auto; width: 100%; min-height: 60px; display: grid; grid-template-columns: minmax(0,1fr) auto 16px; grid-template-rows: auto auto; gap: 4px 12px; align-content: center; align-items: center; padding: 9px 4px; text-align: left; color: var(--simple-ink); border: 0; border-radius: 0; background: transparent; cursor: pointer; font: 650 16px/1.25 ui-sans-serif,system-ui,sans-serif; }
body[data-simple-studio="true"] .radial-category-label > :first-child { grid-column: 1; grid-row: 1; }
body[data-simple-studio="true"] .radial-category-label .layout-current { grid-column: 2; grid-row: 1; max-width: 150px; margin: 0; font-size: 14px; font-weight: 400; color: var(--simple-ink); text-align: right; white-space: normal; overflow: visible; text-overflow: clip; }
body[data-simple-studio="true"] .selector-help { grid-column: 1 / 3; grid-row: 2; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--simple-muted); }
body[data-simple-studio="true"] .selector-chevron { grid-column: 3; grid-row: 1; width: 16px; height: 16px; }
body[data-simple-studio="true"] .radial-category-label[aria-expanded="true"] .selector-chevron { transform: rotate(180deg); }
body[data-simple-studio="true"] .radial-category-label::before,
body[data-simple-studio="true"] .radial-category-label::after,
body[data-simple-studio="true"] .radial-category-label > :first-child::after { content: none; }
body[data-simple-studio="true"] .simple-radial-controls :is(.radial-option-tray,.dial-editor) { position: static !important; inset: auto !important; display: block; width: 100% !important; max-width: none !important; max-height: none !important; height: auto; min-height: 0; margin: 0; padding: 3px 4px 18px; overflow: visible; transform: none; border: 0; border-radius: 0; box-shadow: none; background: transparent; backdrop-filter: none; pointer-events: auto; }
body[data-simple-studio="true"] .simple-radial-controls :is(.radial-option-tray,.dial-editor):not([hidden]) { display: block !important; }
body[data-simple-studio="true"] .simple-radial-controls [hidden],
body[data-simple-studio="true"] .simple-radial-controls :is(.radial-option-tray,.dial-editor)[hidden] { display: none !important; }
body[data-simple-studio="true"] .simple-radial-controls :is(.radial-tray-heading,.dial-editor-heading,.dial-editor-done) { display: none; }
body[data-simple-studio="true"] .radial-artwork-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 14px 10px; margin: 0; padding: 0; border: 0; }
body[data-simple-studio="true"] .radial-option { display: grid; justify-items: center; gap: 7px; min-width: 0; padding: 0; min-height: 44px; cursor: pointer; }
body[data-simple-studio="true"] .radial-option-visual { width: clamp(44px,12vw,60px); height: clamp(44px,12vw,60px); border: 0; background: #fff; box-shadow: 0 2px 6px #0002; }
body[data-simple-studio="true"] .radial-none-visual { background: #fff; }
body[data-simple-studio="true"] .radial-option-label { font-size: 12px; line-height: 1.3; font-weight: 500; }
body[data-simple-studio="true"] .radial-option input:checked + .radial-option-visual,
body[data-simple-studio="true"] .layout-preset-choice input:checked + .layout-preset-visual,
body[data-simple-studio="true"] .appearance-combination-choice input:checked + .choice-visual { outline: 2px solid #111; outline-offset: 3px; }
body[data-simple-studio="true"] .radial-option input:checked ~ .radial-option-label { font-weight: 750; }
body[data-simple-studio="true"] .selector-upload { display: grid; justify-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: #111; font: 500 12px/1.3 ui-sans-serif,system-ui,sans-serif; cursor: pointer; }
body[data-simple-studio="true"] .selector-upload > span:first-child { display: grid; place-items: center; width: clamp(44px,12vw,60px); height: clamp(44px,12vw,60px); background: #fff; border-radius: 50%; box-shadow: 0 2px 6px #0002; }
body[data-simple-studio="true"] .selector-upload svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 1.6; fill: none; }
body[data-simple-studio="true"] .layout-preset-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px 10px; margin: 0; }
body[data-simple-studio="true"] .layout-preset-visual { width: 58px; height: 58px; }
body[data-simple-studio="true"] .layout-preset-copy,
body[data-simple-studio="true"] .layout-preset-copy strong { font-size: 12px; line-height: 1.3; min-height: 0; }
body[data-simple-studio="true"] .layout-preset-copy span { display: none; }
body[data-simple-studio="true"] .appearance-combination-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 12px; }
body[data-simple-studio="true"] .appearance-combination-choice { gap: 7px; }
body[data-simple-studio="true"] .appearance-combination-choice .choice-visual { width: 64px; height: 64px; }
body[data-simple-studio="true"] .appearance-combination-choice .choice-copy { font-size: 13px; }
body[data-simple-studio="true"] .appearance-combination-group > legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-simple-studio="true"] .appearance-auto-control { margin-top: 18px; padding: 12px 0; min-height: 44px; font-size: 13px; }
body[data-simple-studio="true"] .appearance-auto-control input { width: 20px; height: 20px; }
body[data-simple-studio="true"] .radial-contrast-footer { margin: 0; padding: 12px 0 0; }
body[data-simple-studio="true"] .contrast-control { width: 100%; margin: 0; }
body[data-simple-studio="true"] .contrast-control :is(label,output) { font-size: 15px; }
body[data-simple-studio="true"] .contrast-control p { font-size: 12px; }
body[data-simple-studio="true"] .contrast-step-thumbnail { width: 48px; height: 48px; }
body[data-simple-studio="true"] .upload-review-details { margin-top: 16px; padding: 12px 0 0; border-top: 1px solid #aaaead; }
body[data-simple-studio="true"] .upload-review-details .upload-rights { display: flex; align-items: center; min-height: 44px; font-size: 13px; }
body[data-simple-studio="true"] .upload-review-details input { width: 22px; height: 22px; flex: none; }
body[data-simple-studio="true"] .upload-quality { font-size: 12px; line-height: 1.45; color: #565957; }
body[data-simple-studio="true"] .studio-purchase { position: fixed; inset: auto 0 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 12px 22px max(12px,env(safe-area-inset-bottom,0px)); border-top: 1px solid #aaaead; background: #eceeee; }
body[data-simple-studio="true"] .studio-purchase > div { display: grid; gap: 4px; font-size: 12px; }
body[data-simple-studio="true"] .studio-purchase strong { font-size: 14px; }
body[data-simple-studio="true"] .studio-purchase span { color: #565957; font-size: 11px; }
body[data-simple-studio="true"] #review-clock-action { flex: 1; max-width: 230px; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 28px; background: #e20b1b; color: #fff; font: 650 14px/1.2 ui-sans-serif,system-ui,sans-serif; cursor: pointer; }
body[data-simple-studio="true"] #review-clock-action:hover { background: #c90a19; }
body[data-simple-studio="true"] .bottom-actions { position: static; inset: auto; width: auto; max-width: 560px; transform: none; display: flex; justify-content: center; margin: 0 auto; padding: 0; gap: 0; z-index: auto; }
body[data-simple-studio="true"] .bottom-actions .export-toolbar { display: flex; justify-content: center; width: auto; border: 0; background: transparent; box-shadow: none; overflow: visible; border-radius: 0; gap: 16px; }
body[data-simple-studio="true"] .bottom-actions .export-toolbar > button { min-width: 0; min-height: 44px; padding: 8px 0; gap: 6px; border: 0; border-radius: 6px; background: transparent; box-shadow: none; color: #565957; font-size: 12px; }
body[data-simple-studio="true"] .export-toolbar .download-disc { width: 18px; height: 18px; min-width: 18px; min-height: 18px; border: 0; background: transparent; box-shadow: none; }
body[data-simple-studio="true"] .export-toolbar svg { width: 18px; height: 18px; }
body[data-simple-studio="true"] .export-toolbar > button > span:last-child { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap; }
body[data-simple-studio="true"] .bottom-actions .export-toolbar > button { flex: 0 0 auto; width: auto; font-weight: 500; }
body[data-simple-studio="true"] .radial-support { height: 0; margin: 0; }
body[data-simple-studio="true"] #status { position: fixed; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
body[data-simple-studio="true"] #status[data-toast="true"]:not(:empty) { inset: auto 16px calc(var(--studio-purchase-height) + 12px); width: fit-content; max-width: min(480px,calc(100vw - 32px)); height: auto; margin: auto; padding: 10px 14px; clip-path: none; border-radius: 10px; background: #f7f7f5; color: #111; box-shadow: 0 4px 20px #0003; z-index: 200; font-size: 13px; }
body[data-simple-studio="true"] .studio-options-dock { display: none !important; }
body[data-simple-studio="true"] .render-popover { position: fixed; inset: auto 16px 24px auto; max-width: calc(100vw - 32px); max-height: calc(100dvh - 48px); overflow: auto; z-index: 250; }
body[data-simple-studio="true"] :is(button,input):focus-visible,
body[data-simple-studio="true"] label:has(input:focus-visible) { outline: 3px solid #235fce; outline-offset: 4px; }
/* Selected previews remain visible even when a choice group is collapsed. */
body[data-simple-studio="true"] .radial-category-label { grid-template-columns: 40px minmax(0,1fr) 16px; gap: 3px 12px; min-height: 66px; }
body[data-simple-studio="true"] .radial-category-label > :first-child { grid-column: 2; grid-row: 1; }
body[data-simple-studio="true"] .radial-category-label .layout-current { grid-column: 2; grid-row: 2; max-width: none; text-align: left; color: var(--simple-muted); font-size: 13px; }
body[data-simple-studio="true"] .selector-help { display: none; }
body[data-simple-studio="true"] .selector-chevron { grid-column: 3; grid-row: 1 / 3; }
body[data-simple-studio="true"] .selector-summary-thumbnail { grid-column: 1; grid-row: 1 / 3; display: block; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 1px 4px #0002; background: #fff; }
body[data-simple-studio="true"] .frame-choice-group { border: 0; margin: 0; padding: 0; min-width: 0; }
body[data-simple-studio="true"] .frame-choice-group legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body[data-simple-studio="true"] .frame-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; padding: 8px 0; }
body[data-simple-studio="true"] .frame-choice-grid .circle-choice { display: grid; justify-items: center; gap: 8px; min-width: 0; min-height: 44px; cursor: pointer; }
body[data-simple-studio="true"] .frame-choice-grid .choice-visual { width: 64px; height: 64px; }
body[data-simple-studio="true"] .frame-choice-grid .choice-copy { font-size: 13px; }
body[data-simple-studio="true"] .frame-choice-grid input:checked + .choice-visual { outline: 2px solid var(--simple-ink); outline-offset: 3px; }
body[data-simple-studio="true"] .hands-resolution { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--simple-muted); }
body[data-simple-studio="true"] .appearance-more { margin-top: 8px; }
body[data-simple-studio="true"] .appearance-more summary { min-height: 44px; align-content: center; cursor: pointer; font-size: 13px; font-weight: 600; }
body[data-simple-studio="true"] #appearance-custom-summary { color: var(--simple-muted); font-weight: 400; }
body[data-simple-studio="true"] .hands-color-label { display: block; margin: 6px 0; font-size: 13px; font-weight: 600; }
body[data-simple-studio="true"] #hands-color { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #aaaead; border-radius: 8px; color: var(--simple-ink); background: #f7f7f5; font: inherit; font-size: 14px; }
body[data-simple-studio="true"] #hands-color-help { font-size: 12px; line-height: 1.45; color: var(--simple-muted); }
body[data-simple-studio="true"] .appearance-more .contrast-step-grid { display: none; }
body[data-simple-studio="true"] .appearance-more .contrast-help { display: block; font-size: 12px; line-height: 1.45; }
body[data-simple-studio="true"] .studio-utilities { gap: 8px; }
body[data-simple-studio="true"] #preview-angle-toggle { flex: none; min-height: 44px; padding: 8px 4px; color: var(--simple-muted); border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: 12px; cursor: pointer; }
body[data-simple-studio="true"] #preview-angle-toggle[aria-pressed="true"] { color: var(--simple-ink); text-decoration: underline; text-underline-offset: 4px; }
body[data-simple-studio="true"] #preview-angle-toggle[hidden] { display: none; }
body[data-simple-studio="true"] :is(select,summary):focus-visible { outline: 3px solid #235fce; outline-offset: 4px; }
@media (min-width: 980px), (min-width: 760px) and (max-height: 500px) {
 body[data-simple-studio="true"] .app-shell { display: flex; flex-direction: column; padding: 0 48px 12px; }
 body[data-simple-studio="true"] .configurator { flex: 1; }
 body[data-simple-studio="true"] .topbar { height: 80px; flex: none; }
 body[data-simple-studio="true"] .brand-mark { width: 36px; height: 36px; }
 body[data-simple-studio="true"] .brand-wordmark { width: 156px; }
 body[data-simple-studio="true"] .preview-column { max-width: none; }
 body[data-simple-studio="true"] .studio-intro { text-align: left; margin: 8px 0 16px; }
 body[data-simple-studio="true"] .studio-intro h1 { font-size: 36px; }
 body[data-simple-studio="true"] .studio-workbench { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,410px); grid-template-rows: auto; gap: 0 60px; align-items: start; }
 body[data-simple-studio="true"] .product-figure,
 body[data-simple-studio="true"][data-preview-compact="true"] .product-figure { grid-column: 1; grid-row: 1; width: min(100%,680px,calc(100svh - 160px)); position: sticky; top: 28px; align-self: start; }
 body[data-simple-studio="true"] .studio-selector-column { grid-column: 2; grid-row: 1; }
 body[data-simple-studio="true"] .studio-utilities { margin: 0 0 8px; }
 body[data-simple-studio="true"] .studio-purchase { position: relative; margin: 8px 0 0; padding: 8px 0 0; background: transparent; }
 body[data-simple-studio="true"] .bottom-actions { max-width: none; justify-content: flex-end; }
 body[data-simple-studio="true"] .bottom-actions .export-toolbar { width: 410px; }
}
@media (min-width: 980px) and (max-height: 760px) {
 body[data-simple-studio="true"] .topbar { height: 64px; }
 body[data-simple-studio="true"] .studio-intro { margin: 4px 0 12px; }
 body[data-simple-studio="true"] .studio-intro h1 { font-size: 28px; }
 body[data-simple-studio="true"] .studio-intro p { font-size: 15px; margin-top: 4px; }
 body[data-simple-studio="true"] .product-figure,
 body[data-simple-studio="true"][data-preview-compact="true"] .product-figure { width: min(100%,680px,calc(100svh - 128px)); }
}
@media (min-width: 760px) and (max-height: 500px) {
 body[data-simple-studio="true"] .app-shell { padding: 0 24px 24px; }
 body[data-simple-studio="true"] .topbar { height: 56px; }
 body[data-simple-studio="true"] .studio-intro { margin: 8px 0 14px; }
 body[data-simple-studio="true"] .studio-intro h1 { font-size: 24px; }
 body[data-simple-studio="true"] .studio-intro p { font-size: 14px; margin-top: 3px; }
 body[data-simple-studio="true"] .studio-workbench { grid-template-columns: minmax(0,1fr) 340px; gap: 24px; }
 body[data-simple-studio="true"] .product-figure,
 body[data-simple-studio="true"][data-preview-compact="true"] .product-figure { width: min(100%,calc(100dvh - 150px)); top: 16px; }
}
@media (max-width: 359px) {
 body[data-simple-studio="true"] .app-shell { padding-inline: 16px; }
 body[data-simple-studio="true"] .studio-intro h1 { font-size: 22px; }
 body[data-simple-studio="true"] .studio-purchase { padding-inline: 16px; gap: 8px; }
 body[data-simple-studio="true"] #review-clock-action { font-size: 12px; padding-inline: 12px; }
 body[data-simple-studio="true"] .radial-category-label { column-gap: 8px; font-size: 15px; }
 body[data-simple-studio="true"] .radial-category-label .layout-current { max-width: 128px; font-size: 12px; }
}
@media (max-width: 599px) and (max-height: 650px) {
 body[data-simple-studio="true"] .product-figure,
 body[data-simple-studio="true"][data-preview-compact="true"] .product-figure { width: min(74%,max(160px,calc(100svh - 392px))); }
}
@media (prefers-reduced-motion: reduce) { body[data-simple-studio="true"] .selector-chevron { transition: none; } }
@media (forced-colors: active) {
 body[data-simple-studio="true"] :is(.radial-option-visual,.choice-visual,.layout-preset-visual,.selector-upload > span:first-child) { border: 1px solid ButtonText; }
 body[data-simple-studio="true"] #review-clock-action { border: 1px solid ButtonText; }
}

/* Keep iOS document scrolling and fixed-position compositing out of the purchase
   layout. The dynamic viewport contains two rows; only the studio row scrolls.
   Feedback floats above the bar; its height only includes controls and safe area. */
html[data-studio-mobile-frame="true"] { height: 100%; overflow: hidden; }
html[data-studio-mobile-frame="true"] body[data-simple-studio="true"] {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  height: 100svh; height: 100dvh; min-height: 0; overflow: hidden;
}
html[data-studio-mobile-frame="true"] body[data-simple-studio="true"] > .app-shell {
  grid-row: 1; height: 100%; min-height: 0; width: 100%;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain;
  padding-bottom: 16px; scroll-padding-block: 16px;
}
html[data-studio-mobile-frame="true"] body[data-simple-studio="true"] > .studio-purchase {
  grid-row: 2; position: relative; inset: auto; min-width: 0;
}