html:is(.dw-studio-open, .dw-library-open) { overflow: hidden; }
.dw-studio-dialog, .dw-library-dialog { width: min(1060px, calc(100vw - 32px)); max-width: 1060px; max-height: calc(100dvh - 32px); padding: 0; }
.dw-studio-dialog[open], .dw-library-dialog[open] { display: flex; flex-direction: column; }
.dw-studio-scroll, .dw-library-scroll { padding: 20px 24px; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.dw-studio-workspace { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
.dw-studio-workspace > div { min-width: 0; }
.dw-studio-dialog .dw-dialog-heading, .dw-library-dialog .dw-dialog-heading, .dw-studio-dialog .dw-dialog-footer, .dw-library-dialog .dw-dialog-footer { flex: none; }
.dw-studio-tabs, .dw-studio-options, .dw-library-file-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.dw-studio-tabs { flex-wrap: nowrap; overflow-x: auto; padding: 2px 1px 8px; }
.dw-studio-tabs button { flex: none; }
.dw-studio-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.dw-studio-options button { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 14px; border: 1px solid var(--border, #d6dee6); border-radius: 12px; color: inherit; background: var(--panel, #fff); min-width: 0; min-height: 72px; cursor: pointer; }
.dw-studio-options button span { font-size: 12px; line-height: 1.6; color: var(--muted, #627080); }
.dw-studio-options button[aria-pressed="true"], .dw-studio-tabs button[aria-pressed="true"], .dw-library-item button[aria-pressed="true"] { border-color: #2458db; box-shadow: inset 0 0 0 1px #2458db; background: var(--dw-accent-wash, #edf4ff); color: #164abf; }
.dw-studio-preview-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.dw-studio-preview-heading label, .dw-studio-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dw-studio-dialog select { max-width: 100%; min-height: 44px; border-radius: 8px; border: 1px solid var(--border, #d6dee6); padding: 8px 12px; color: inherit; background: var(--panel, #fff); }
.dw-studio-scope { margin: 16px 0; border: 0; padding: 0; }
.dw-studio-scope legend { font-weight: 650; margin-bottom: 8px; }
.dw-studio-canvas { display: flex; justify-content: center; min-width: 0; padding: 18px; background: #e7ecef; border-radius: 14px; min-height: 120px; overflow: hidden; }
.dw-studio-canvas .dw-paper-frame { flex: none; }
.dw-studio-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 12px; font-size: 13px; }
.dw-font-specimen { display: grid; grid-template-columns: 1fr; margin: 12px 0 18px; border: 1px solid var(--border, #d6dee6); border-radius: 12px; overflow: hidden; }
.dw-font-specimen div { padding: 12px; min-width: 0; display: grid; gap: 6px; border-bottom: 1px solid var(--border, #d6dee6); }
.dw-font-specimen small { color: var(--muted, #627080); font-size: 11px; }
.dw-font-specimen span { font-size: 19px; overflow-wrap: anywhere; }
.dw-studio-entry { margin: 14px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.dw-studio-entry .dw-button { flex: 1; }
.dw-interpretation { padding-top: 16px; border-top: 1px solid var(--border, #d6dee6); }
.dw-interpretation label { display: block; padding: 10px 0; font-size: 13px; cursor: pointer; }
.dw-interpretation label span { display: block; padding-left: 24px; color: var(--muted, #627080); font-size: 12px; margin-top: 4px; }
.dw-library-save { display: flex; align-items: flex-end; gap: 12px; margin: 20px 0 12px; }
.dw-library-save label { display: grid; gap: 8px; flex: 1; font-size: 13px; min-width: 0; }
.dw-library-save input { min-height: 44px; padding: 10px 12px; border: 1px solid var(--border, #d6dee6); border-radius: 8px; color: inherit; background: var(--panel, #fff); min-width: 0; width: 100%; box-sizing: border-box; }
.dw-library-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 24px; margin-top: 24px; }
.dw-library-item { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.dw-library-item > button:first-child { display: grid; gap: 8px; flex: 1; padding: 14px; border: 1px solid var(--border, #d6dee6); border-radius: 12px; background: var(--panel, #fff); color: inherit; text-align: left; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.dw-library-item > button:first-child > span:last-child { font-size: 12px; color: var(--muted, #627080); }
.dw-library-swatches { display: flex; }
.dw-library-swatches i { width: 28px; height: 18px; border: 1px solid #80808030; }
.dw-studio-dialog :focus-visible, .dw-library-dialog :focus-visible { outline: 3px solid #4478eb; outline-offset: 3px; }
.dw-studio-dialog.is-focused .dw-studio-workspace { display: block; }
.dw-studio-dialog.is-focused .dw-studio-settings { display: none; }
.dw-studio-dialog.is-focused :is(#dwStudioTabs, #dwStudioHint, #dwStudioScopes, #dwStudioOptions, #dwStudioSpecimen, .dw-studio-preview-heading label, [data-studio-compare]) { display: none; }
.dw-studio-dialog.is-focused .dw-studio-preview-heading { margin-top: 0; justify-content: flex-end; }
@media (max-width: 700px) {
  .dw-studio-dialog, .dw-library-dialog { width: 100%; max-width: 100%; max-height: 96dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .dw-studio-scroll, .dw-library-scroll { padding: 16px; }
  .dw-studio-workspace { display: block; }
  .dw-studio-options { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dw-studio-options button { padding: 12px; }
  .dw-studio-canvas { padding: 10px; }
  .dw-font-specimen { grid-template-columns: 1fr; }
  .dw-studio-dialog .dw-dialog-footer, .dw-library-dialog .dw-dialog-footer { display: grid; grid-template-columns: auto 1fr; gap: 8px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  #dwStudioStatus, #dwLibraryStatus { grid-row: 1; grid-column: 1 / -1; font-size: 12px; }
  .dw-library-grid { grid-template-columns: 1fr; }
  .dw-library-save { flex-wrap: wrap; }
  .dw-library-save label { flex-basis: 100%; }
  .dw-studio-pager { gap: 8px; }
}
[data-theme="dark"] :is(.dw-studio-options button, .dw-library-item > button:first-child, .dw-library-save input, .dw-studio-dialog select) { background: #192431; border-color: #3c4c5c; color: #e5ecf4; }
[data-theme="dark"] :is(.dw-studio-options button, .dw-studio-tabs button, .dw-library-item button)[aria-pressed="true"] { background: #193c65; color: #d6e7ff; border-color: #73a5ff; }