:root {
  color-scheme: light;
  --neutral-dark: rgb(8.411583% 8.052599% 7.550015%);
  --neutral-light: #fff;
  --surface: var(--neutral-light);
  --ink: var(--neutral-dark);
  --ink-muted: color-mix(in srgb, var(--ink) 66%, transparent);
  --ink-quiet-text: var(--ink-muted);
  --ink-subtle: color-mix(in srgb, var(--ink) 50%, transparent);
  --surface-subtle: color-mix(in srgb, var(--ink) 3%, var(--surface));
  --line: color-mix(in srgb, var(--ink) 10%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 25%, transparent);
  --interaction-hover: color-mix(in srgb, var(--ink) 5%, transparent);
  --interaction-pressed: color-mix(in srgb, var(--ink) 15%, transparent);
  --focus-color: var(--ink);
  --focus-width: 2px;
  --focus-offset: 2px;

  /* Figma utility colors retain the same roots in both color modes. */
  --state-live-ink: rgb(7.032468% 64.640927% 22.394726%);
  --state-edit-ink: rgb(22.844088% 40.835372% 94.809192%);
  --state-attention-ink: rgb(90.807164% 15.312454% 20.345436%);
  --state-disabled-ink: rgb(55.979568% 51.512760% 45.370910%);
  /* Text roles improve contrast; signal/glow roots preserve Figma colors. */
  --state-live-ink-base: var(--ink-muted);
  --state-live-text: color-mix(in srgb, var(--state-live-ink) 75%, black);
  --state-edit-text: color-mix(in srgb, var(--state-edit-ink) 90%, black);
  --state-attention-text: color-mix(in srgb, var(--state-attention-ink) 75%, black);
  --state-disabled-text: color-mix(in srgb, var(--state-disabled-ink) 75%, black);
  --state-live-surface: color-mix(in srgb, var(--state-live-ink) 5%, transparent);
  --state-edit-surface: color-mix(in srgb, var(--state-edit-ink) 5%, transparent);
  --interaction-edit-hover: color-mix(in srgb, var(--state-edit-ink) 2%, transparent);
  --state-attention-surface: color-mix(in srgb, var(--state-attention-ink) 5%, transparent);
  --state-disabled-surface: color-mix(in srgb, var(--state-disabled-ink) 5%, transparent);
  --state-live-glow: color-mix(in srgb, var(--state-live-ink) 50%, transparent);
  --state-edit-glow: color-mix(in srgb, var(--state-edit-ink) 50%, transparent);
  --state-attention-glow: color-mix(in srgb, var(--state-attention-ink) 50%, transparent);
  --state-disabled-glow: color-mix(in srgb, var(--state-disabled-ink) 50%, transparent);

  --font-ui: ui-rounded, system-ui, sans-serif;
  --font-content-family: system-ui, sans-serif;
  --font-overview-family: system-ui, sans-serif;
  --font-domain-family: system-ui, sans-serif;
  --font-optical-sizing: auto;
  --font-tracking: 0em;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-strong: 600;
  --font-optical-size: 18;
  --font-body-size: .875rem;
  --font-body-line: 1.428571;
  --font-meta-size: .75rem;
  --font-meta-line: 1.333333;
  --font-title-size: 1rem;
  --font-title-line: 1.5;
  --font-row-size: .875rem;
  --font-row-line: 1.285714;
  --font-status-size: .875rem;
  --font-status-line: 1.285714;
  --font-summary-size: 1rem;
  --font-summary-line: 1.25;
  --font-domain-size: 3rem;
  --font-domain-line: 1.2;
  /* Keep semantic weight in font-weight; role axes tune family-specific shape. */
  --font-body-axes: normal;
  --font-content-axes: 'wdth' 104;
  --font-title-axes: 'wdth' 105, 'GRAD' 450;
  --font-row-axes: 'wdth' 103, 'GRAD' 425;
  --font-status-axes: 'GRAD' 450;
  --font-summary-axes: var(--font-status-axes);
  --font-domain-axes: 'wdth' 115, 'GRAD' 475, 'opsz' 28;

  --gap-text: .25rem;
  --gap-inline: .5rem;
  --gap-stack: .75rem;
  --gap-group: 1rem;
  --gap-section: 1.5rem;
  --gap-region: 2rem;
  --inset-control-inline: .75rem;
  --inset-control-block: .375rem;
  --inset-row-inline: 1rem;
  --inset-row-block: .75rem;
  --inset-container: 1rem;
  --inset-canvas: 1.5rem;
  --radius-tight: .25rem;
  --radius-default: .5rem;
  --radius-loose: .75rem;
  --radius-round: 9999px;
  --stroke-width: 1px;
  --control-size: 2.25rem;
  --control-small-size: 2rem;
  --target-size: 2.75rem;
  --icon-size: 1rem;
  --measure-reading: 40rem;
  --measure-content: 60rem;
  --shadow-near: 0 1px 4px color-mix(in srgb, var(--neutral-dark) 10%, transparent);
  --shadow-floating: 0 8px 24px -4px color-mix(in srgb, var(--neutral-dark) 15%, transparent);

  --motion-feedback: 100ms;
  --motion-change: 160ms;
  --motion-reveal: 300ms;
  --motion-press: 150ms;
  --motion-title-press: 50ms;
  --motion-easing: cubic-bezier(.2, 0, 0, 1);
  --motion-reveal-easing: ease-out;
  --motion-title-easing: cubic-bezier(.175, .885, .32, 1.275);
}

[data-theme='dark'] {
  color-scheme: dark;
  --surface: var(--neutral-dark);
  --ink: var(--neutral-light);
  --state-live-text: var(--state-live-ink);
  --state-edit-text: color-mix(in srgb, var(--state-edit-ink) 80%, white);
  --state-attention-text: color-mix(in srgb, var(--state-attention-ink) 80%, white);
  --state-disabled-text: var(--state-disabled-ink);
}

[data-theme='light'] {
  color-scheme: light;
  --surface: var(--neutral-light);
  --ink: var(--neutral-dark);
  --state-live-text: color-mix(in srgb, var(--state-live-ink) 75%, black);
  --state-edit-text: color-mix(in srgb, var(--state-edit-ink) 90%, black);
  --state-attention-text: color-mix(in srgb, var(--state-attention-ink) 75%, black);
  --state-disabled-text: color-mix(in srgb, var(--state-disabled-ink) 75%, black);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --surface: var(--neutral-dark);
    --ink: var(--neutral-light);
    --state-live-text: var(--state-live-ink);
    --state-edit-text: color-mix(in srgb, var(--state-edit-ink) 80%, white);
    --state-attention-text: color-mix(in srgb, var(--state-attention-ink) 80%, white);
    --state-disabled-text: var(--state-disabled-ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-feedback: 0ms;
    --motion-change: 0ms;
    --motion-reveal: 0ms;
    --motion-press: 0ms;
    --motion-title-press: 0ms;
  }
}

[data-motion='reduced'] {
  --motion-feedback: 0ms;
  --motion-change: 0ms;
  --motion-reveal: 0ms;
  --motion-press: 0ms;
  --motion-title-press: 0ms;
}

* { box-sizing: border-box; }
body { margin: 0; min-inline-size: 280px; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; }
button, input, select { accent-color: var(--ink); }
:focus-visible { outline: var(--focus-width, 2px) solid var(--focus-color); outline-offset: var(--focus-offset, 2px); }
y-workbench { display: block; min-block-size: 100dvh; }

body { color: var(--ink); background: var(--surface); font-family: var(--font-ui); font-size: var(--font-body-size); line-height: var(--font-body-line); letter-spacing: var(--font-tracking); font-variation-settings: var(--font-body-axes); font-optical-sizing: var(--font-optical-sizing); font-synthesis: none; }

/* Native action and navigation controls share presentation, not behavior. */
.rk-button {
  --rk-button-background: transparent;
  --rk-button-border: var(--line-strong);
  --rk-button-ink: var(--ink);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-inline);
  min-inline-size: var(--target-size);
  min-block-size: var(--target-size);
  max-inline-size: 100%;
  padding-block: var(--inset-control-block);
  padding-inline: var(--inset-control-inline);
  border: var(--stroke-width) solid var(--rk-button-border);
  border-radius: var(--radius-default);
  background: var(--rk-button-background);
  color: var(--rk-button-ink);
  font-family: var(--font-ui);
  font-size: var(--font-body-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--font-body-line);
  letter-spacing: var(--font-tracking);
  font-variation-settings: var(--font-body-axes);
  font-optical-sizing: var(--font-optical-sizing);
  font-synthesis: none;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  vertical-align: middle;
  appearance: none;
  cursor: pointer;
  transition: background-color var(--motion-feedback) var(--motion-easing),
    border-color var(--motion-feedback) var(--motion-easing),
    color var(--motion-feedback) var(--motion-easing);
}

.rk-button__label { min-inline-size: 0; overflow-wrap: anywhere; }
.rk-button > rk-icon { display: inline-flex; flex: none; color: inherit; }
.rk-button[data-icon-only] { padding-inline: var(--inset-control-block); }
.rk-button[data-variant='quiet'] { --rk-button-border: transparent; }
.rk-button[data-variant='filled'] {
  --rk-button-background: var(--ink);
  --rk-button-border: var(--ink);
  --rk-button-ink: var(--surface);
}

.rk-button:not(:disabled):not([aria-disabled='true']):is(:hover, [data-interaction='hover']) {
  --rk-button-background: var(--interaction-hover);
}
.rk-button[data-variant='filled']:not(:disabled):not([aria-disabled='true']):is(:hover, [data-interaction='hover']) {
  --rk-button-background: color-mix(in srgb, var(--ink) 90%, var(--surface));
  --rk-button-border: var(--rk-button-background);
}
.rk-button:not(:disabled):not([aria-disabled='true']):is(:active, [data-interaction='pressed']) {
  --rk-button-background: var(--interaction-pressed);
}
.rk-button[data-variant='filled']:not(:disabled):not([aria-disabled='true']):is(:active, [data-interaction='pressed']) {
  --rk-button-background: color-mix(in srgb, var(--ink) 80%, var(--surface));
  --rk-button-border: var(--rk-button-background);
}
.rk-button:not(:disabled):not([aria-disabled='true']):is(:focus-visible, [data-interaction='focus']) {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset);
}
.rk-button:is(:disabled, [aria-disabled='true']) {
  --rk-button-background: transparent;
  --rk-button-border: var(--line);
  --rk-button-ink: var(--ink-subtle);
  cursor: default;
}
.rk-button[data-variant='quiet']:is(:disabled, [aria-disabled='true']) { --rk-button-border: transparent; }
.rk-button[data-variant='filled']:is(:disabled, [aria-disabled='true']) {
  --rk-button-background: var(--surface-subtle);
  --rk-button-border: var(--surface-subtle);
}

@media (prefers-reduced-motion: reduce) { .rk-button { transition: none; } }
[data-motion='reduced'] .rk-button { transition: none; }

@media (forced-colors: active) {
  .rk-button { background: Canvas; color: ButtonText; border-color: ButtonText; }
  .rk-button[data-variant='quiet'] { border-color: transparent; }
  .rk-button[data-variant='filled'] { background: ButtonText; color: Canvas; border-color: ButtonText; }
  .rk-button:not(:disabled):not([aria-disabled='true']):is(:hover, :active, [data-interaction='hover'], [data-interaction='pressed']) {
    background: Highlight;
    border-color: Highlight;
    color: HighlightText;
  }
  .rk-button:not(:disabled):not([aria-disabled='true']):is(:focus-visible, [data-interaction='focus']) { outline-color: Highlight; }
  .rk-button:is(:disabled, [aria-disabled='true']) {
    background: Canvas;
    color: GrayText;
    border-color: GrayText;
  }
}

/* Shared shell only. Specialist styles arrive with their tool entry. */
:root { --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body-size: .875rem; --font-tracking: -.01em; }
body { min-inline-size: 320px; }
y-toolbox, y-offline-panel { display: block; }
y-toolbox [hidden] { display: none !important; }
button, select, summary, input { touch-action: manipulation; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px; background: var(--surface); }
.skip-link:focus { top: 8px; }
[data-focus-intent='pointer'] :is(button,a,select,summary):focus:not(:focus-visible) { outline: none; }
[data-focus-intent='keyboard'] :is(button,a,select,summary,input):focus { outline: var(--focus-width) solid var(--focus-color); outline-offset: 3px; }
.site-header { min-block-size: 80px; display: flex; align-items: center; gap: 18px; padding: 12px clamp(20px,4vw,64px); border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.brand { inline-size: 70px; block-size: 41px; color: var(--ink); display: flex; flex: none; }
.brand svg { inline-size: 100%; block-size: 100%; }
.header-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
select { min-block-size: 44px; max-inline-size: 100%; padding: 8px 30px 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-default); color: var(--ink); background: var(--surface); }
main { position: relative; max-inline-size: 1600px; margin: auto; padding: 32px clamp(20px,4vw,64px) 12px; }
h1 { margin: 0 0 6px; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; }
.tool-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-nav a { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font: inherit; font-size: .875rem; border: 1px solid transparent; border-radius: 7px; min-block-size: 44px; padding: 8px 14px; }
.tool-nav a[aria-current='page'] { border-color: var(--line); background: var(--surface-subtle); font-weight: 600; }
.tool-nav a:hover { background: var(--interaction-hover); }
.collection-description { margin: 12px 0 28px; color: var(--ink-muted); }
.tool-collection { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; max-inline-size: 1100px; }
.tool-card { display: block; min-block-size: 140px; padding: 24px; color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tool-card:hover { background: var(--surface-subtle); border-color: var(--line-strong); }
.tool-card h2 { margin: 0 0 14px; font-size: 1.1rem; font-weight: 600; }
.tool-card p { color: var(--ink-muted); margin: 0; line-height: 1.6; font-size: .875rem; }
.collection-privacy { max-inline-size: 70ch; color: var(--ink-muted); font-size: .8125rem; line-height: 1.7; margin-block: 26px; }
.shell-session { max-inline-size: 1600px; margin: auto; padding: 16px clamp(20px,4vw,64px) 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.shell-session > p { color: var(--ink-muted); margin: 0; font-size: .75rem; }
.shell-session y-offline-panel { flex-basis: 100%; }
.shell-loading { min-block-size: 240px; }
.shell-loading a { display: inline-block; margin: 20px; }
@media (max-width: 1050px) { y-toolbox .site-header { block-size: auto; } }
@media (max-width: 720px) { .tool-collection { grid-template-columns: repeat(2,minmax(0,1fr)); }.site-header { gap: 10px; }.tool-nav { gap: 1px; }.tool-nav a { padding-inline: 10px; font-size: .8125rem; }.tool-card { padding: 18px; }.header-actions select { max-inline-size: 120px; } }
@media (max-width: 420px) { .tool-collection { grid-template-columns: minmax(0,1fr); }.tool-card { min-block-size: 110px; } }
@media (prefers-reduced-motion: reduce) { y-toolbox * { scroll-behavior: auto !important; } }

/* !y consumer of Tijgerbrood's neutral foundation. No CMS/editor styles. */
:root { --font-ui: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body-size: .875rem; --font-tracking: -.01em; --stage: var(--surface-subtle); }
body { min-inline-size: 320px; }
button, select, summary, input { touch-action: manipulation; }
button svg, a svg { flex: none; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 12px; background: var(--surface); }
.skip-link:focus { top: 8px; }
[data-focus-intent='pointer'] :is(button, a, select, summary):focus:not(:focus-visible) { outline: none; }
[data-focus-intent='keyboard'] :is(button, a, select, summary, input):focus { outline: var(--focus-width) solid var(--focus-color); outline-offset: 3px; }
.site-header { block-size: 80px; display: flex; align-items: center; gap: 18px; padding-inline: clamp(20px,4vw,64px); border-block-end: 1px solid var(--line); }
.brand { inline-size: 70px; block-size: 41px; color: var(--ink); display: flex; }
.brand svg { inline-size: 100%; block-size: 100%; }
.app-identity { display: flex; gap: 16px; align-items: baseline; font-size: .875rem; }
.brand-label { color: var(--ink-muted); }
.app-identity strong { font-weight: 600; border-inline-start: 1px solid var(--line-strong); padding-inline-start: 16px; }
.header-actions { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
select { min-block-size: 44px; max-inline-size: 100%; padding: 8px 30px 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-default); color: var(--ink); background: var(--surface); }
.theme-select select { border-color: transparent; font-size: .8125rem; }
main { position: relative; max-inline-size: 1600px; margin: auto; padding: 32px clamp(20px,4vw,64px) 12px; }
.workspace-title { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-block-end: 26px; }
h1 { margin: 0 0 6px; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 600; line-height: 1.2; letter-spacing: -.04em; }
.workspace-title p { color: var(--ink-muted); margin: 0; font-size: .875rem; }
.session-note { color: var(--ink-muted); font-size: .75rem; text-align: right; }
.workbench-grid { display: grid; grid-template-columns: minmax(180px,224px) minmax(0,1fr) minmax(248px,280px); align-items: start; gap: 16px; }
.files-panel,.preview-panel,.settings-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-inline-size: 0; overflow: clip; }
.files-panel { min-block-size: 540px; display: flex; flex-direction: column; }
.panel-heading { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 12px 16px; min-block-size: 66px; border-block-end: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: .875rem; font-weight: 600; }
.panel-heading > .rk-button { margin-inline-end: -10px; }
.count { display: inline-flex; justify-content: center; padding: 1px 6px; min-inline-size: 22px; color: var(--ink-muted); background: var(--surface-subtle); border-radius: 4px; margin-inline-start: 4px; font-size: .75rem; font-variant-numeric: tabular-nums; }
.eyebrow { font-size: .6875rem; color: var(--ink-muted); letter-spacing: .025em; }
.file-list { list-style: none; padding: 6px; margin: 0; overflow-y: auto; max-block-size: 520px; }
.file-row { display: flex; position: relative; align-items: center; border-radius: 7px; min-inline-size: 0; margin: 2px 0; }
.file-row[data-selected='true'] { background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--line); }
.file-select { display: flex; align-items: center; gap: 10px; background: none; border: none; border-radius: 7px; text-align: start; padding: 12px 46px 12px 10px; min-inline-size: 0; inline-size: 100%; cursor: pointer; }
.file-select:hover { background: var(--interaction-hover); }
.file-thumb { display: grid; place-items: center; flex: 0 0 34px; inline-size: 34px; block-size: 40px; border-radius: 4px; overflow: hidden; background: var(--line); color: var(--ink-muted); }
.file-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.file-copy { display: grid; gap: 4px; min-inline-size: 0; }
.file-name { font-size: .75rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-status { color: var(--ink-muted); font-size: .6875rem; display: flex; align-items: center; gap: 5px; }
.file-size { font-size: .625rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.file-size strong { font-weight: 500; color: var(--ink); }
.status-dot { inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--line-strong); flex: none; }
[data-state='done'] .status-dot { background: var(--state-live-text); }
[data-state='failed'] .status-dot { background: var(--state-attention-text); }
[data-state='running'] .status-dot { background: var(--state-edit-text); }
.row-remove { position: absolute; inset-inline-end: 0; min-inline-size: 44px; min-block-size: 44px; padding: 0 !important; opacity: .55; }
.row-remove:hover,.row-remove:focus-visible { opacity: 1; }
.row-remove svg { inline-size: 14px; }
.files-empty { padding: 36px 18px; color: var(--ink-muted); font-size: .75rem; }
.files-empty p { margin: 12px 0 8px; }
.files-empty span { font-size: .6875rem; line-height: 1.6; }
.files-empty > svg { inline-size: 22px; block-size: 22px; opacity: .5; }
.file-footer { padding: 18px; border-block-start: 1px solid var(--line); margin-block-start: auto; }
.file-footer p { margin: 0; font-size: .625rem; color: var(--ink-muted); }
.text-button { border: none; background: none; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px 0; min-block-size: 36px; font-size: .75rem; border-radius: 3px; }
.text-button:hover { color: var(--ink); }
.preview-panel { min-block-size: 540px; display: flex; flex-direction: column; }
.empty-panel { align-items: center; justify-content: center; padding: 40px 22px; text-align: center; background: var(--surface-subtle); }
.empty-symbol { display: grid; place-items: center; inline-size: 68px; block-size: 68px; border: 1px solid var(--line-strong); border-radius: 18px; transform: rotate(-5deg); margin: 0 0 26px; }
.empty-symbol svg { inline-size: 30px; block-size: 30px; }
.empty-panel h2 { margin: 0; font-size: clamp(1.1rem,1.8vw,1.4rem); font-weight: 500; letter-spacing: -.035em; }
.empty-panel p { color: var(--ink-muted); font-size: .8125rem; line-height: 1.7; margin-block: 12px 24px; }
.empty-panel .text-button { margin-block-start: 7px; }
.empty-formats { font-size: .625rem; color: var(--ink-muted); margin-block-start: 28px; }
.preview-head { min-block-size: 66px; display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 14px 18px; }
.preview-title { min-inline-size: 0; }
.preview-title h2 { margin: 0 0 4px; font-size: .8125rem; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.preview-title > span { color: var(--ink-muted); font-size: .6875rem; font-variant-numeric: tabular-nums; }
.segmented { display: flex; padding: 3px; gap: 2px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 7px; }
.segmented button { flex: 1; border: 1px solid transparent; background: none; padding: 7px 10px; font-size: .8125rem; color: var(--ink-muted); border-radius: 4px; cursor: pointer; min-block-size: 36px; white-space: nowrap; }
.segmented button[aria-pressed='true'] { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px var(--line); }
.segmented button:disabled { opacity: .4; cursor: default; }
.preview-switch { flex: none; }
.preview-switch button { font-size: .6875rem; min-block-size: 30px; padding: 4px 8px; }
.image-stage { min-block-size: 300px; block-size: clamp(300px,42vw,440px); background-color: var(--surface-subtle); background-image: repeating-conic-gradient(var(--line) 0% 25%,transparent 0% 50%); background-size: 16px 16px; border-block: 1px solid var(--line); display: grid; place-items: center; position: relative; overflow: hidden; padding: 18px; }
.preview-image { inline-size: 100%; block-size: 100%; min-block-size: 0; max-block-size: 100%; object-fit: contain; }
.unavailable { display: grid; place-items: center; color: var(--ink-muted); }
.work-status { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); max-inline-size: calc(100% - 24px); display: flex; align-items: center; gap: 10px; padding: 4px 12px; font-size: .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-near); }
.spinner { inline-size: 12px; block-size: 12px; border: 1.5px solid var(--line-strong); border-top-color: var(--ink); border-radius: 50%; animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.result-summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 20px; }
.result-size { display: grid; grid-template-columns: auto auto; gap: 3px 12px; align-items: baseline; }
.result-size .eyebrow { grid-column: 1 / -1; }
.result-size strong { font-size: 1.6rem; font-weight: 550; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.size-change { color: var(--ink-muted); font-size: .75rem; }
.size-change[data-improved='true'] { color: var(--state-live-text); }
.result-actions { display: grid; justify-items: end; gap: 7px; }
.result-actions > span { font-size: .625rem; color: var(--ink-muted); }
.preview-foot { border-block-start: 1px solid var(--line); padding: 12px 18px; font-size: .625rem; color: var(--ink-muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-block-start: auto; }
.settings-panel .panel-heading { padding-inline: 20px; }
.setting-group { padding: 20px 20px 0; }
.field-label { display: block; font-size: .75rem; font-weight: 500; margin-block-end: 10px; }
.field-help { font-size: .6875rem; color: var(--ink-muted); line-height: 1.6; margin: 9px 0 0; }
.setting-group select { inline-size: 100%; font-size: .75rem; }
.range-label { display: flex; justify-content: space-between; gap: 12px; }
.range-label output { font-size: .75rem; font-variant-numeric: tabular-nums; }
input[type='range'] { inline-size: 100%; block-size: 28px; margin: 0; cursor: pointer; }
.range-ends { display: flex; justify-content: space-between; color: var(--ink-muted); font-size: .625rem; margin-block-start: 2px; }
.setting-note { margin: 18px 20px 0; padding: 10px 12px; background: var(--surface-subtle); border-radius: 6px; color: var(--ink-muted); font-size: .6875rem; line-height: 1.6; }
.advanced { margin: 20px 20px 0; border-block-start: 1px solid var(--line); border-block-end: 1px solid var(--line); }
summary { cursor: pointer; min-block-size: 44px; padding-block: 14px; font-size: .75rem; color: var(--ink-muted); }
.advanced .setting-group { padding: 0 0 18px; }
.setting-facts { padding: 20px; display: grid; gap: 10px; font-size: .6875rem; }
.setting-facts div { display: flex; justify-content: space-between; gap: 8px; }
.setting-facts span { color: var(--ink-muted); }
.setting-facts strong { font-weight: 450; }
.run-actions { padding: 4px 20px 16px; display: flex; flex-direction: column; }
.convert-button { inline-size: 100%; gap: 10px; }
.local-note { display: flex; align-items: center; justify-content: center; font-size: .625rem; color: var(--ink-muted); gap: 5px; margin: 12px 0 0; }
.local-note svg { inline-size: 12px; block-size: 12px; }
.operation { border-block-start: 1px solid var(--line); padding-inline: 20px; }
.operation p { font-size: .6875rem; color: var(--ink-muted); }
.operation pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, monospace; font-size: .625rem; line-height: 1.6; border: 1px solid var(--line); background: var(--surface-subtle); padding: 10px; border-radius: 6px; }
.operation > .rk-button { font-size: .75rem; margin-block-end: 14px; }
.notice { border: 1px solid var(--line-strong); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 8px 4px 16px; border-radius: 8px; font-size: .75rem; margin-block-end: 16px; background: var(--surface-subtle); }
.job-message { display: flex; gap: 12px; align-items: start; padding: 18px; font-size: .75rem; background: var(--surface-subtle); border-block-end: 1px solid var(--line); }
.job-message svg { flex: none; }
.job-message p { margin: 4px 0 0; color: var(--ink-muted); line-height: 1.6; overflow-wrap: anywhere; }
.job-message button { margin-inline-start: auto; flex: none; }
.error-message { color: var(--state-attention-text); }
.snapshot-note { margin: 0; padding: 0 18px 16px; color: var(--ink-muted); font-size: .6875rem; }
.app-footer { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-muted); font-size: .625rem; padding: 22px 0; }
.drop-overlay { position: fixed; inset: 100px 32px 32px; pointer-events: none; display: flex; gap: 12px; justify-content: center; align-items: center; font-size: 1.2rem; background: color-mix(in srgb,var(--surface) 95%,transparent); border: 2px dashed var(--ink-muted); border-radius: 16px; z-index: 50; }
dialog { color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: 24px; max-inline-size: min(560px,calc(100vw - 32px)); max-block-size: calc(100dvh - 48px); overflow-y: auto; box-shadow: var(--shadow-floating); }
dialog::backdrop { background: rgb(0 0 0 / .35); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; }
dialog h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
dialog h3 { margin: 20px 0 6px; font-size: .875rem; }
dialog p { font-size: .8125rem; color: var(--ink-muted); line-height: 1.6; }
dialog form { margin-block-start: 24px; text-align: end; }
.no-js { max-inline-size: 600px; margin-block-start: 60px; }
@media (max-width: 1100px) {
  main { padding-inline: 20px; }
  .workbench-grid { grid-template-columns: 188px minmax(0,1fr) 250px; gap: 12px; }
  .file-thumb { display: none; }
  .result-size strong { font-size: 1.25rem; }
  .result-size { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
  .workbench-grid { grid-template-columns: minmax(0,1fr) 264px; }
  .files-panel { grid-column: 1/-1; min-block-size: 0; }
  .files-panel .panel-heading { min-block-size: 52px; padding-block: 4px; }
  .file-list { display: flex; overflow-x: auto; padding: 5px; max-block-size: none; }
  .file-row { flex: 0 0 200px; }
  .file-thumb { display: grid; }
  .file-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 12px; }
  .files-empty { padding: 12px 18px; display: flex; align-items: center; gap: 12px; }
  .files-empty p { margin: 0; }
  .files-empty span { display: none; }
  .preview-panel { min-block-size: 500px; }
}
@media (max-width: 620px) {
  .site-header { block-size: 68px; padding-inline: 18px; gap: 12px; }
  .brand { inline-size: 61px; block-size: 36px; }
  .app-identity { gap: 10px; font-size: .75rem; }
  .app-identity strong { padding-inline-start: 10px; }
  .header-actions { gap: 0; }
  .theme-select select { max-inline-size: 98px; font-size: .75rem; padding-inline-start: 6px; }
  main { padding: 24px 16px 8px; }
  .workspace-title { display: block; margin-block-end: 20px; }
  .session-note { display: block; text-align: left; margin-block-start: 12px; }
  .workbench-grid { display: flex; flex-direction: column; gap: 14px; }
  .files-panel,.preview-panel,.settings-panel { inline-size: 100%; }
  .preview-panel { min-block-size: 0; }
  .empty-panel { min-block-size: 350px; }
  .image-stage { block-size: 300px; min-block-size: 220px; padding: 12px; }
  .preview-head { padding-inline: 12px; }
  .result-summary { padding: 16px; }
  .result-size { grid-template-columns: auto auto; }
  .settings-panel { max-inline-size: none; }
  .setting-group { padding-block-start: 18px; }
  .convert-button { min-block-size: 48px; }
  .segmented button { min-block-size: 44px; }
  .text-button { min-block-size: 44px; }
  .app-footer { flex-wrap: wrap; }
  .row-remove { min-inline-size: 44px; }
  .file-select { padding-inline-end: 46px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .file-row[data-selected='true'], .segmented button[aria-pressed='true'] { border: 1px solid Highlight; } .status-dot { background: CanvasText; } .image-stage { background-image: none; } }

/* Pass 2: independent image inspection and explicit workspace preferences. */
.workbench-grid { grid-template-columns: minmax(180px,var(--files-width,224px)) minmax(260px,1fr) minmax(256px,var(--settings-width,288px)); }
.settings-panel .panel-heading > .text-button { min-block-size: 40px; padding: 6px 0; }
.preset-bar { display: flex; gap: 4px; align-items: center; padding: 12px 16px 0; }
.preset-bar select { inline-size: 100%; min-inline-size: 0; font-size: .75rem; }
.preset-bar .rk-button { padding-inline: 10px; flex: none; font-size: .75rem; }
.format-picker button { padding-inline: 6px; font-size: .75rem; }
.preview-head { flex-wrap: wrap; }
.preview-title { flex: 1 1 150px; }
.preview-switch { margin-inline-start: auto; }
y-image-view { display: block; min-inline-size: 0; }
.preview-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 14px; border-block-start: 1px solid var(--line); font-size: .6875rem; color: var(--ink-muted); }
.preview-tools label { display: flex; align-items: center; gap: 6px; flex: none; }
.preview-tools select { border-color: transparent; background: transparent; padding-block: 4px; padding-inline-start: 6px; font-size: .75rem; min-block-size: 38px; }
.preview-tools > span { text-align: end; }
.inspector-stage { display: flex; align-items: flex-start; justify-content: flex-start; overflow: auto; padding: 0; overscroll-behavior: contain; }
.inspector-stage[data-zoom]:not([data-zoom='fit']) { cursor: grab; }
.inspector-stage[data-zoom]:not([data-zoom='fit']):active { cursor: grabbing; }
.image-sheet { position: relative; flex: none; margin: auto; }
.image-sheet .preview-image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.compare-original { position: absolute; inset: 0; z-index: 1; background-color: var(--surface-subtle); background-image: repeating-conic-gradient(var(--line) 0% 25%,transparent 0% 50%); background-size: 16px 16px; }
.compare-divider { position: absolute; top: 0; bottom: 0; width: 2px; background: white; box-shadow: 0 0 0 1px rgb(0 0 0 / .4); z-index: 2; }
.image-label { position: absolute; top: 10px; padding: 5px 8px; border-radius: 4px; font-size: .625rem; background: rgb(0 0 0 / .65); color: white; z-index: 3; pointer-events: none; }
.original-label { left: 10px; }.result-label { right: 10px; }
.compare-control { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-block-end: 1px solid var(--line); font-size: .6875rem; }
.compare-control input { flex: 1; min-inline-size: 0; }
.compare-control output { min-inline-size: 36px; text-align: end; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.execution-status { display: flex; gap: 10px; align-items: center; padding: 0 16px; font-size: .75rem; background: var(--surface-subtle); border-block-end: 1px solid var(--line); }
.execution-status .text-button { margin-inline-start: auto; }
.settings-detail { margin-inline: 20px; border-block: 1px solid var(--line); margin-block-end: -1px; }
.settings-detail > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-block-size: 48px; padding-block: 10px; cursor: pointer; font-size: .75rem; }
.settings-detail > summary > span:first-child::before { content: '▸'; display: inline-block; margin-inline-end: 7px; color: var(--ink-muted); }
.settings-detail[open] > summary > span:first-child::before { content: '▾'; }
.settings-detail > summary > span:last-child { color: var(--ink-muted); font-size: .6875rem; text-align: end; }
.detail-content { padding-block: 2px 16px; }
.detail-content > select { inline-size: 100%; font-size: .75rem; margin-block-start: 8px; }
.number-field { display: grid; gap: 6px; font-size: .75rem; min-inline-size: 0; margin-block-start: 14px; }
.number-field input { min-inline-size: 0; inline-size: 100%; min-block-size: 44px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: var(--surface); font: inherit; font-variant-numeric: tabular-nums; }
.number-field input:user-invalid { border-color: var(--state-attention-text); }
.number-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkbox-field { display: flex; align-items: center; gap: 8px; font-size: .75rem; min-block-size: 44px; cursor: pointer; }
.checkbox-field input { inline-size: 16px; block-size: 16px; accent-color: var(--ink); }
.dimension-preview { font-size: .6875rem; font-variant-numeric: tabular-nums; margin: 10px 0 0; overflow-wrap: anywhere; }
.color-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 12px; font-size: .75rem; }
.color-field input { inline-size: 48px; min-block-size: 44px; padding: 3px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; }
.color-field span { font-family: ui-monospace,monospace; font-size: .6875rem; }
.settings-error,.preview-error { color: var(--state-attention-text); font-size: .75rem; padding: 8px 20px; margin: 0; }
.snapshot-note { padding: 12px 18px; border-block-start: 1px solid var(--line); }
.snapshot-note p { margin: 0; line-height: 1.6; }
.snapshot-note .text-button { min-block-size: 32px; padding-block-end: 0; }
.batch-summary { display: flex; justify-content: space-between; gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-block-start: 16px; font-size: .8125rem; }
.batch-summary strong { font-weight: 550; }.batch-summary p { margin: 6px 0 0; color: var(--ink-muted); font-size: .75rem; }
.batch-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: none; }
.batch-actions > span { font-size: .6875rem; color: var(--ink-muted); }
.dialog-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-block-start: 18px; }
.preset-current { background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 6px; padding: 10px; font-size: .75rem; line-height: 1.6; }
.preset-list { list-style: none; margin: 24px 0 0; padding: 0; max-height: 280px; overflow: auto; }
.preset-list li { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding-block: 12px; border-block-start: 1px solid var(--line); }
.preset-list li > div:first-child { display: grid; gap: 5px; max-inline-size: 100%; }
.preset-list strong { font-size: .8125rem; font-weight: 550; overflow-wrap: anywhere; }
.preset-list span { font-size: .6875rem; color: var(--ink-muted); overflow-wrap: anywhere; }
.preset-list li > div:last-child { display: flex; gap: 14px; }
#layout .range-label { margin-block-start: 18px; }
#layout > input[type='range'] { inline-size: 100%; min-block-size: 36px; }
@media (min-width: 1051px) {
  .workbench-grid[data-layout='settings-left'] { grid-template-columns: minmax(256px,var(--settings-width)) minmax(260px,1fr) minmax(180px,var(--files-width)); }
  .workbench-grid[data-layout='settings-left'] .files-panel { grid-column: 3; grid-row: 1; }
  .workbench-grid[data-layout='settings-left'] .preview-panel { grid-column: 2; grid-row: 1; }
  .workbench-grid[data-layout='settings-left'] .settings-panel { grid-column: 1; grid-row: 1; }
  .workbench-grid[data-layout='image-first'] { grid-template-columns: minmax(0,1fr) minmax(256px,var(--settings-width)); }
  .workbench-grid[data-layout='image-first'] .files-panel { grid-column: 1 / -1; min-block-size: 0; }
  .workbench-grid[data-layout='image-first'] .file-list { display: flex; overflow-x: auto; max-height: 130px; }
  .workbench-grid[data-layout='image-first'] .file-row { flex: 0 0 230px; }
  .workbench-grid[data-layout='image-first'] .file-footer { padding: 0 16px; display: flex; align-items: center; justify-content: space-between; }
  .workbench-grid[data-layout='image-first'] .files-empty { padding: 12px 18px; }
  .workbench-grid[data-layout='image-first'] .files-empty span,.workbench-grid[data-layout='image-first'] .files-empty > svg { display: none; }
}
@media (min-width: 851px) and (max-width: 1050px) {
  .workbench-grid { grid-template-columns: minmax(180px,190px) minmax(220px,1fr) 256px; }
}
@media (max-width: 850px) {
  .workbench-grid { grid-template-columns: minmax(0,1fr) 264px; }
  .batch-summary,.batch-actions { flex-wrap: wrap; }
  .preview-head { align-items: start; }
  .preview-switch { margin-inline-start: 0; }
}
@media (max-width: 620px) {
  .layout-button { font-size: .6875rem; padding-inline: 7px; }
  .app-identity .brand-label { display: none; }
  .app-identity strong { border: none; padding: 0; }
  .inspector-stage { padding: 0; }
  .preview-tools { flex-wrap: wrap; padding-block: 4px; }
  .preview-tools > span { text-align: start; font-size: .625rem; }
  .preview-switch { inline-size: 100%; }
  .preview-switch button { min-block-size: 44px; }
  .batch-summary { padding: 16px; }
  .batch-actions { inline-size: 100%; }
  .compare-control { padding-inline: 12px; gap: 8px; }
  .preset-list .text-button { min-block-size: 44px; }
}
/* Text enlargement must reflow controls, never hide them behind clipped panels. */
.skip-link { top: 0; transform: translateY(calc(-100% - 12px)); }
.skip-link:focus { top: 8px; transform: none; }
.brand { flex: none; }
.segmented { flex-wrap: wrap; }
.result-size strong { white-space: nowrap; }
@media (max-width: 620px) {
  .site-header { block-size: auto; min-block-size: 68px; padding-block: 10px; flex-wrap: wrap; }
  .header-actions { max-inline-size: 100%; flex-wrap: wrap; }
  .theme-select select { max-inline-size: none; }
  .preview-switch { flex-wrap: wrap; }
  .file-row { flex-basis: min(100%,260px); }
  .file-footer { flex-wrap: wrap; }
  .result-size { grid-template-columns: 1fr; }
}
/* Keep the skip link focusable but fully clipped until focus, including full-page captures. */
.skip-link { top: 8px; transform: none; }
.skip-link:not(:focus) { inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Small shared toolbox shell. All tools keep the selected neutral foundation. */
y-toolbox,y-workbench,y-json-tool,y-zip-tool,y-recipe-panel { display: block; }
.tool-slot[hidden] { display: none !important; }
.tool-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.tool-nav button { font: inherit; font-size: .875rem; background: transparent; border: 1px solid transparent; border-radius: 7px; min-block-size: 44px; padding: 8px 14px; cursor: pointer; }
.tool-nav button[aria-current='page'] { border-color: var(--line); background: var(--surface-subtle); font-weight: 600; }
.tool-nav button:hover { background: var(--interaction-hover); }
.utility-grid { display: grid; gap: 18px; align-items: start; }
.json-grid { grid-template-columns: minmax(0,1fr) 284px; }
.zip-grid { grid-template-columns: minmax(0,1fr) 284px; }
.utility-panel { border: 1px solid var(--line); border-radius: 12px; min-inline-size: 0; overflow: clip; background: var(--surface); }
.utility-panel .panel-heading { gap: 14px; flex-wrap: wrap; }
.utility-panel h2 { overflow-wrap: anywhere; }
.utility-settings { grid-column: 2; grid-row: 1 / span 2; }
.json-result { grid-column: 1; }
.utility-panel textarea { display: block; inline-size: 100%; min-block-size: 250px; max-block-size: 800px; resize: vertical; color: var(--ink); background: var(--surface-subtle); border: 0; border-radius: 0; padding: 20px; font: .8125rem/1.75 ui-monospace, 'SFMono-Regular', Consolas, monospace; tab-size: 2; white-space: pre; overflow: auto; }
.utility-panel textarea:focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: -3px; }
.utility-controls { display: grid; gap: 18px; padding: 20px; }
.utility-controls label, .recipe-panel-body > label { display: grid; gap: 9px; font-size: .8125rem; }
.utility-controls :is(input:not([type=checkbox]),select), .recipe-panel-body :is(input:not([type=file]),select) { inline-size: 100%; min-inline-size: 0; min-block-size: 44px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: var(--surface); font: inherit; }
.utility-controls .checkbox-field { display: flex; gap: 10px; min-block-size: 44px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tool-actions > * { max-inline-size: 100%; }
.utility-empty { padding: 50px 26px; min-block-size: 240px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; background: var(--surface-subtle); }
.utility-empty h2 { font-size: 1.25rem; letter-spacing: -.025em; font-weight: 500; margin: 0; }
.utility-empty p { color: var(--ink-muted); font-size: .875rem; margin: 0; line-height: 1.7; }
.utility-empty span { font-size: .75rem; color: var(--ink-muted); line-height: 1.6; }
.recipe-panel { border-block-start: 1px solid var(--line); padding: 0 20px; }
.recipe-panel summary { color: var(--ink); }
.recipe-panel summary span { display: block; margin-block-start: 5px; font-size: .6875rem; color: var(--ink-muted); }
.recipe-panel-body { padding-block: 2px 20px; display: grid; gap: 14px; }
.recipe-panel-body p { font-size: .75rem; color: var(--ink-muted); line-height: 1.6; margin: 0; }
.recipe-panel pre { max-block-size: 240px; overflow: auto; padding: 12px; margin: 0; border: 1px solid var(--line); background: var(--surface-subtle); border-radius: 6px; font: .6875rem/1.6 ui-monospace,monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-feedback { min-block-size: 48px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 4px; font-size: .8125rem; overflow-wrap: anywhere; }
.tool-error { color: var(--state-attention-text) !important; }
.tool-result-facts { padding: 16px 20px; border-block-end: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; font-size: .8125rem; }
.tool-result-facts > span { color: var(--ink-muted); font-size: .75rem; }
.tool-result-facts > p { inline-size: 100%; margin: 0; color: var(--state-attention-text); line-height: 1.6; }
.zip-input-list,.zip-entry-list { list-style: none; margin: 0; padding: 6px 18px; max-block-size: 550px; overflow: auto; }
.zip-input-list li { display: flex; align-items: center; gap: 16px; padding-block: 12px; border-block-end: 1px solid var(--line); min-inline-size: 0; }
.zip-input-list li:last-child,.zip-entry-list li:last-child { border-block-end: 0; }
.zip-input-list li > span:not(.zip-file-identity) { flex: none; font-size: .75rem; color: var(--ink-muted); }
.zip-file-identity { flex: 1; min-inline-size: 0; display: grid; gap: 6px; font-size: .8125rem; overflow-wrap: anywhere; }
.zip-file-identity strong,.zip-entry-list strong { font-weight: 500; }
.zip-file-identity small,.zip-entry-list small { color: var(--ink-muted); font-size: .6875rem; line-height: 1.6; }
.zip-entry-list li { border-block-end: 1px solid var(--line); }
.zip-entry-list label { display: flex; gap: 14px; align-items: start; min-block-size: 56px; padding: 12px 0; cursor: pointer; }
.zip-entry-list input { margin: 3px 0 0; flex: none; inline-size: 18px; block-size: 18px; }
.zip-entry-list label > span { min-inline-size: 0; display: grid; gap: 5px; font-size: .8125rem; overflow-wrap: anywhere; }
.zip-entry-list [data-blocked='true'] small { color: var(--state-attention-text); }
.zip-inspection-summary { padding: 18px 20px 8px; font-size: .8125rem; border-block-end: 1px solid var(--line); }
.zip-inspection-summary p { font-size: .75rem; color: var(--ink-muted); line-height: 1.6; }
.zip-results { margin-block: 4px 12px; }
.result-policy { padding: 0 20px; font-size: .75rem; color: var(--ink-muted); line-height: 1.6; }
.zip-failures { padding: 8px 20px; border-block-start: 1px solid var(--line); color: var(--state-attention-text); font-size: .8125rem; overflow-wrap: anywhere; }
@media(max-width: 950px) { .json-grid,.zip-grid { grid-template-columns: minmax(0,1fr) 250px; } }
@media(max-width: 720px) {
  .site-header { block-size: auto; min-block-size: 76px; flex-wrap: wrap; padding-block: 12px; gap: 10px; }
  .site-header .brand { inline-size: 61px; block-size: 36px; }
  .tool-nav { gap: 1px; }
  .tool-nav button { padding-inline: 10px; font-size: .8125rem; }
  .header-actions { gap: 3px; }
  .header-actions select { max-inline-size: 120px; }
  .json-grid,.zip-grid { grid-template-columns: minmax(0,1fr); }
  .utility-settings,.json-result { grid-column: 1; grid-row: auto; }
  .json-source { order: 0; }.utility-settings { order: 1; }.json-result { order: 2; }
  .utility-empty { padding: 28px 20px; }
  .zip-input-list li { flex-wrap: wrap; gap: 10px; }
  .zip-file-identity { flex-basis: 100%; }
}
@media(prefers-reduced-motion:reduce) { .utility-panel * { scroll-behavior: auto !important; } }
/* Metadata: quiet inspection, explicit removal policy, no false "safe" badge. */
y-metadata-tool { display:block; }
.metadata-grid { grid-template-columns:minmax(0,1fr) 330px; }
.metadata-settings { position:sticky; top:18px; }
.metadata-policy { display:flex; gap:8px 18px; flex-wrap:wrap; font-size:.8125rem; line-height:1.7; padding:16px 20px; margin-block:0 20px; border:1px solid var(--line); border-radius:10px; background:var(--surface-subtle); }
.metadata-policy span { color:var(--ink-muted); }
.metadata-file-strip { padding-block:0 18px; display:grid; gap:8px; }
.metadata-file-buttons { display:flex; gap:8px; flex-wrap:wrap; }
.metadata-file-buttons button { max-inline-size:300px; overflow-wrap:anywhere; white-space:normal; text-align:start; }
.metadata-file-buttons button[aria-pressed=true] { border-color:var(--ink); background:var(--surface-subtle); }
.metadata-summary { padding:22px; border-block-end:1px solid var(--line); }
.metadata-summary h2 { font-size:1.25rem; font-weight:500; overflow-wrap:anywhere; margin-block:8px; }
.metadata-summary p { font-size:.8125rem; color:var(--ink-muted); line-height:1.7; }
.metadata-summary .segmented { inline-size:max-content; max-inline-size:100%; }
.metadata-verification { padding:14px 16px; border-inline-start:3px solid var(--ink); background:var(--surface-subtle); margin-block:18px; }
.metadata-verification strong { font-size:.875rem; font-weight:500; }
.metadata-verification p:last-child { margin-bottom:0; }
.metadata-download { padding:18px 22px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; border-block-end:1px solid var(--line); }
.metadata-download span { color:var(--ink-muted); font-size:.75rem; overflow-wrap:anywhere; }
.metadata-blocks { padding-inline:22px; }
.metadata-block { border-block-end:1px solid var(--line); }
.metadata-block summary { padding-block:15px; }
.metadata-block summary > span { display:inline-grid; gap:6px; vertical-align:middle; max-inline-size:90%; }
.metadata-block strong { font-weight:500; font-size:.875rem; }
.metadata-block small { color:var(--ink-muted); font-size:.6875rem; }
.metadata-block dl { margin:0 0 14px; }
.metadata-block dl > div { display:grid; grid-template-columns:minmax(100px,.7fr) minmax(0,1fr); gap:12px; padding:12px 0; border-block-start:1px solid var(--line); font-size:.8125rem; }
.metadata-block dt small { display:block; margin-block-end:5px; }
.metadata-block dd { margin:0; font-family:ui-monospace,monospace; font-size:.75rem; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.metadata-no-blocks { padding-block:30px; font-size:.875rem; }.metadata-no-blocks p { color:var(--ink-muted); font-size:.8125rem; line-height:1.7; }
.metadata-check { display:flex !important; align-items:start; gap:12px; min-block-size:44px; padding-block:8px; cursor:pointer; }
.metadata-check input { inline-size:18px; block-size:18px; margin:1px 0 0; flex-shrink:0; }
.metadata-check span { display:grid; gap:6px; }.metadata-check strong { font-weight:500; font-size:.8125rem; }.metadata-check small { color:var(--ink-muted); line-height:1.6; font-size:.6875rem; }
.metadata-preserve { border-block-start:1px solid var(--line); padding-block-start:14px; }.metadata-preserve h3 { font-size:.8125rem; margin:0 0 8px; font-weight:500; }
.metadata-limits { padding:0 22px; }.metadata-limits p { color:var(--ink-muted); font-size:.75rem; line-height:1.7; }
.metadata-report-export { padding:18px 22px; border-block-start:1px solid var(--line); }.metadata-report-export p { font-size:.75rem; line-height:1.6; color:var(--ink-muted); }
.metadata-batch { margin-block:10px 20px; }
@media(max-width:1000px) { .metadata-grid { grid-template-columns:minmax(0,1fr) 290px; } }
@media(max-width:720px) { .metadata-grid { grid-template-columns:minmax(0,1fr); }.metadata-settings { position:static; }.metadata-file-buttons button { max-inline-size:100%; }.metadata-block dl > div { grid-template-columns:1fr; gap:6px; }.metadata-policy { padding:12px 16px; }.metadata-summary,.metadata-download,.metadata-report-export { padding:18px; }.metadata-blocks { padding-inline:18px; } }

/* Vector host presentation only. Editor controls live in its own ShadowRoot. */
y-vector-tool{display:block}#main-vector{padding:0;max-inline-size:none;position:relative}.vector-editor-mount{block-size:calc(100dvh - 80px);min-block-size:500px;min-inline-size:320px;background:var(--surface);border:0;border-radius:0;overflow:hidden}
.vector-feedback{position:relative;margin:0;padding:9px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.8125rem;color:var(--ink-muted);border-block-start:1px solid var(--line)}.vector-feedback[hidden]{display:none}.vector-warnings{margin:0;padding:9px 18px;font-size:.8125rem;border-block-start:1px solid var(--line)}.vector-warnings summary{cursor:pointer}.vector-warnings ul{max-block-size:150px;overflow:auto;padding-inline-start:20px}
.vector-help{color:var(--ink-muted);font-size:.8125rem;line-height:1.6;margin:0 0 14px}.vector-dialog{color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;padding:0;inline-size:min(580px,calc(100vw - 32px));max-inline-size:calc(100vw - 32px);max-block-size:calc(100dvh - 40px);overflow:hidden;box-shadow:0 24px 70px #0005}.vector-dialog[open]{display:flex;flex-direction:column}.vector-dialog::backdrop{background:#0006}.vector-dialog-heading,.vector-dialog-footer{display:flex;align-items:center;gap:14px;padding:16px 20px;flex-shrink:0}.vector-dialog-heading{border-block-end:1px solid var(--line)}.vector-dialog-heading h2{margin:0;font-size:1rem;font-weight:600}.vector-dialog-heading .text-button{margin-left:auto}.vector-dialog-footer{border-block-start:1px solid var(--line);justify-content:flex-end}.vector-dialog-scroll{padding:20px;overflow:auto;min-block-size:0}.vector-dialog .text-button{color:var(--ink-muted);font-size:.8125rem;min-block-size:32px;cursor:pointer}.vector-dialog .vector-download{color:var(--surface);background:var(--ink)}
.vector-detail-body{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-block:10px 16px}.vector-detail-body label{display:grid;gap:7px;font-size:.8125rem;color:var(--ink-muted)}.vector-detail-body .drawing-name{flex:1;min-inline-size:180px}.vector-detail-body :is(input,select){color:var(--ink);background:var(--surface);font:inherit;min-block-size:36px;max-inline-size:100%;padding:8px 10px;border:1px solid var(--line-strong);border-radius:6px}.vector-detail-body input[type=number]{inline-size:100px;font-family:ui-monospace,SFMono-Regular,monospace}.vector-detail-body input[type=color]{padding:3px;inline-size:48px;block-size:36px}.vector-detail-body .rk-button{min-block-size:36px;font-size:.8125rem}
.saved-list-heading{display:flex;align-items:center;justify-content:space-between;border-block-start:1px solid var(--line);padding-top:14px;margin-top:18px}.saved-list-heading h3{font-size:.8125rem;margin:0;font-weight:600}.vector-saved-list{list-style:none;padding:0;margin:0 0 16px}.vector-saved-list li{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-block:12px;border-block-end:1px solid var(--line)}.vector-saved-list li>span{flex:1;min-inline-size:160px;overflow-wrap:anywhere;font-size:.875rem}.vector-saved-list small{display:block;color:var(--ink-muted);font-size:.6875rem;margin-block-start:4px}.vector-saved-list .rk-button{min-block-size:32px;padding:6px 9px;font-size:.8125rem}
.vector-format-choice{padding:0;border:0;margin:0 0 16px}.vector-format-choice legend{color:var(--ink-muted);font-size:.8125rem;margin-bottom:8px}.vector-format-choice>div{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:8px;flex-wrap:wrap}.vector-format-choice label{position:relative;flex:1;min-inline-size:55px;display:flex;cursor:pointer;font-size:.8125rem;white-space:nowrap}.vector-format-choice input{position:absolute;opacity:0;inline-size:1px;block-size:1px}.vector-format-choice span{display:block;flex:1;text-align:center;padding:8px 9px;border-radius:5px;color:var(--ink-muted)}.vector-format-choice input:checked+span{background:var(--ink);color:var(--surface)}.vector-format-choice input:focus-visible+span{outline:2px solid #669fc3;outline-offset:2px}.vector-format-choice input:disabled+span{opacity:.4}.vector-send-options{border-block-start:1px solid var(--line);padding-top:14px;font-size:.8125rem;color:var(--ink-muted)}.vector-send-options summary{cursor:pointer;color:var(--ink)}
@media(max-width:720px){.vector-editor-mount{block-size:calc(100dvh - 100px);min-block-size:500px}.vector-dialog-heading,.vector-dialog-footer{padding:12px 16px}.vector-dialog-scroll{padding:16px}.vector-format-choice span{padding:8px 7px}.vector-detail-body .drawing-name{flex-basis:100%}.vector-feedback{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){y-vector-tool *{scroll-behavior:auto!important}}

/* A workspace fills the available page; host notices take real space, not overlays. */
y-vector-tool{display:flex;flex-direction:column;block-size:100dvh;min-block-size:560px}
.vector-site-header{flex-shrink:0;position:relative;z-index:30;padding-block:10px;min-block-size:60px}
y-vector-tool #main-vector{flex:1;min-block-size:0;display:flex;flex-direction:column}
y-vector-tool .vector-editor-mount{flex:1;block-size:auto;min-block-size:440px}
.vector-feedback,.vector-warnings{flex-shrink:0}.vector-global-tools{min-inline-size:0}.vector-tools-toggle{display:none}
@media(max-width:720px){
 .vector-site-header{min-block-size:56px;padding:8px 12px;display:flex;flex-wrap:nowrap;gap:10px;align-items:center}
 .vector-site-header .brand{font-size:30px;line-height:1;min-inline-size:0}
 .vector-site-header .header-actions{margin:0 0 0 auto;inline-size:auto}
 .vector-site-header .header-actions select{font-size:12px;min-block-size:32px;padding:5px 8px;inline-size:auto}
 .vector-tools-toggle{display:inline-flex;min-block-size:32px;padding:5px 9px;font-size:12px}
 .vector-global-tools{display:none;position:absolute;top:calc(100% - 2px);left:12px;right:12px;max-block-size:65dvh;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 12px 28px #0004}
 .vector-global-tools.open{display:block}.vector-global-tools nav{display:flex;flex-wrap:wrap;gap:4px}
 .vector-global-tools nav a{flex:1 0 28%;padding:10px;min-block-size:38px;font-size:12px;text-align:center}
}

y-vector-tool #main-vector{inline-size:100%;margin:0;align-self:stretch}

y-vector-tool > .vector-site-header{block-size:auto}

/* UI Pass 2: Vector has one document bar. Tools and appearance live behind its small text brand. */
y-vector-tool{min-block-size:480px}y-vector-tool .vector-editor-mount{min-block-size:440px}
.vector-tools-dialog{inline-size:min(400px,calc(100vw - 24px))}.vector-tools-dialog .tool-nav{display:grid;grid-template-columns:1fr 1fr;gap:4px;max-inline-size:none}.vector-tools-dialog .tool-nav a{min-block-size:38px;padding:10px 12px;text-align:left;font-size:.8125rem}.vector-tools-dialog h2{font-family:system-ui,sans-serif;font-weight:750;letter-spacing:-.04em}.vector-appearance-setting{display:flex;justify-content:space-between;align-items:center;gap:12px;border-block-start:1px solid var(--line);padding-top:16px;margin-top:16px;font-size:.8125rem;color:var(--ink-muted)}.vector-appearance-setting select{font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;min-block-size:32px;padding:5px 8px}
/* Showing Cancel must not resize the canvas and cancel the gesture that exposed it. */
.vector-feedback{min-block-size:40px;padding-block:7px}.vector-feedback .text-button{block-size:24px;min-block-size:24px;padding:1px 6px;line-height:20px;margin:0}

#preview-boundary:empty{display:none}#preview-boundary{padding:12px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-muted)}