.icon-generator-page .icon-workbench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.icon-generator-page:is(:focus, :focus-visible), .icon-generator-page #icon-main:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
.icon-controls { padding: 0.75rem; border: 1px solid var(--cell-border); border-radius: var(--cell-radius); background: var(--cell-background); box-shadow: var(--cell-shadow); }
#icon-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.icon-controls fieldset { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.icon-controls legend { padding: 0; margin-bottom: 0.35rem; font-weight: var(--bold-font-weight); }
.icon-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.5rem; }
.icon-field-grid label { display: grid; min-width: 0; gap: 2px; font-size: 0.875rem; }
.icon-field-grid input { width: 100%; min-width: 0; height: 2rem; min-height: 2rem; padding: 0.2rem 0.4rem; }
.icon-field-grid .icon-field-toggle { display: flex; align-items: center; grid-column: 1 / -1; min-height: 2rem; gap: 0.4rem; }
.icon-field-grid input[type="checkbox"] { flex: none; width: 1rem; height: 1rem; min-height: 1rem; margin: 0; padding: 0; accent-color: var(--vibrant-color); }
#icon-status { color: var(--light-text-color); font-size: 0.875rem; }
.icon-outputs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
.icon-output-card { min-width: 0; margin: 0; padding: 0; }
.icon-generator-page .icon-output-card > summary { display: flex; align-items: center; gap: 0.5em; width: max-content; margin: 0; border-radius: 0.2rem; font: inherit; white-space: nowrap; list-style: none; cursor: pointer; }
.icon-output-card > summary::-webkit-details-marker { display: none; }
.icon-output-card[open] > summary { margin-bottom: 0.75rem; }
.icon-section-disclosure { flex: none; width: 12px; height: 12px; fill: currentColor; color: var(--light-text-color); }
.icon-output-card[open] .icon-section-disclosure { color: var(--vibrant-color); transform: rotate(90deg); }
.icon-header-separator { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--light-text-color); }
.icon-preview-checker { box-sizing: content-box; display: grid; place-items: center; width: var(--icon-preview-size); height: var(--icon-preview-size); padding: calc(var(--icon-preview-size) * 0.075); background-color: var(--cell-background); background-image: conic-gradient(color-mix(in srgb, var(--normal-text-color) 10%, transparent) 25%, transparent 0 50%, color-mix(in srgb, var(--normal-text-color) 10%, transparent) 0 75%, transparent 0); background-size: 16px 16px; }
.icon-preview-checker > img { display: block; max-width: none; }
.icon-generator-page .icon-downloads button { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--normal-text-color); font: inherit; font-weight: var(--normal-font-weight); text-decoration: underline dotted var(--light-text-color); text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.icon-generator-page .icon-downloads button:hover:not(:disabled) { border-radius: 0.2rem; background: var(--canvas-hover-background); box-shadow: 0 0 0 3px var(--canvas-hover-background); text-decoration-style: solid; text-decoration-color: var(--normal-text-color); }
.icon-output-card[data-pending="true"] .icon-downloads button { visibility: hidden; }
/* The export source is real outline DOM, laid out at source resolution, never a miniature screenshot. Only the requested text and dimension overrides live here. */
.icon-scene-host { position: fixed; left: -10000px; top: 0; width: 2048px; pointer-events: none; }
.icon-scene { --cell-border: color-mix(in srgb, var(--normal-text-color) 14%, transparent); --cell-shadow: 0 0.0625rem 0.2rem color-mix(in srgb, var(--normal-text-color) 6%, transparent); margin: 0; padding: 0; background: var(--canvas-background); }
.icon-scene[data-icon-theme="light"] { --canvas-background: #f2f2f2; --cell-background: #ffffff; --normal-text-color: var(--normal-text-light); --light-text-color: var(--light-text-light); --vibrant-color: var(--vibrant-light); }
.icon-scene[data-icon-theme="dark"] { --canvas-background: #101010; --cell-background: #1d1d1d; --normal-text-color: var(--normal-text-dark); --light-text-color: var(--light-text-dark); --vibrant-color: var(--vibrant-dark); }
.icon-scene .research-outline { margin-left: 12px; }
.icon-scene .hierarchy-connectors path { stroke-width: var(--icon-line-width); }
.icon-scene[data-show-symbols="false"] :is(.research-outline-disclosure svg, .hierarchy-level-marker), .icon-scene[data-show-text-box="false"] .icon-text-block { visibility: hidden; }
.icon-scene .research-outline-item { width: var(--icon-cell-width); height: var(--icon-cell-height); border-radius: min(var(--icon-corner-radius), calc(var(--icon-cell-width) / 2), calc(var(--icon-cell-height) / 2)); }
.icon-scene .research-outline-item[data-icon-hidden="true"] { visibility: hidden; }
.icon-scene .research-outline-node { position: relative; display: flex; align-items: center; height: 100%; padding: var(--icon-padding) var(--icon-padding) var(--icon-padding) calc(var(--icon-padding) + var(--cell-symbol-width) + var(--cell-symbol-text-gap)); }
.icon-scene .outline-node-line { display: flex; align-items: center; height: 100%; }
.icon-scene .outline-cap-anchor { position: static; }
.icon-scene .research-outline-disclosure { inset-block-start: 50%; inset-inline-start: calc(var(--icon-padding) + (var(--cell-symbol-width) - var(--disclosure-hit-size)) / 2); transform: translateY(-50%); }
.icon-scene .research-level-marker-slot { inset-block-start: 50%; inset-inline-start: var(--icon-padding); transform: translateY(-50%); }
.icon-text-block { position: relative; display: inline-block; flex: none; width: var(--icon-block-width); height: var(--icon-block-height); left: var(--icon-block-x); top: var(--icon-block-y); border-radius: min(var(--corner-radius), calc(var(--icon-block-height) / 4)); background: var(--light-text-color); opacity: 0.3; }
@media (max-width: 760px) {
  #icon-fields { grid-template-columns: minmax(0, 1fr); }
  .icon-field-grid { grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); }
}