.frontend-tools-application{grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr)}.frontend-tools-rail .frontend-tools-select{width:100%}.frontend-tools-auto-run{margin-top:var(--space-sm)}.frontend-tools-input-panel,.frontend-tools-output-panel{min-width:0;min-height:0}.frontend-tools-editor-shell{display:flex;flex:1;min-height:0;border-top:1px solid color-mix(in srgb,var(--panel-border) 74%,transparent);background:linear-gradient(to right,color-mix(in srgb,var(--panel-border) 28%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--panel-border) 24%,transparent) 1px,transparent 1px),var(--surface-input);background-size:24px 24px}.frontend-tools-source{min-height:0;flex:1;resize:none;border:0;border-radius:0;background:color-mix(in srgb,var(--surface-input) 92%,transparent);color:var(--text-primary);font-family:var(--font-mono);font-size:.88rem;line-height:1.58;outline:none;padding:var(--space-lg)}.frontend-tools-source:focus{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 52%,transparent)}.frontend-tools-source.cm-editor-mount{padding:0;background:var(--surface-input)}.frontend-tools-source.cm-editor-mount .cm-editor{height:100%}.frontend-tools-output-panel{display:flex;flex-direction:column;gap:var(--space-md)}.frontend-tools-inline-copy{min-height:2rem}.frontend-tools-result-hero{margin:0;border:1px solid var(--panel-border);background:color-mix(in srgb,var(--surface-panel-primary) 82%,var(--surface-panel-secondary))}.frontend-tools-result-hero[data-result-tone=success]{border-color:color-mix(in srgb,var(--status-success) 34%,var(--panel-border));background:color-mix(in srgb,var(--status-success) 8%,var(--surface-panel-primary))}.frontend-tools-result-hero[data-result-tone=warning]{border-color:color-mix(in srgb,var(--status-warning) 38%,var(--panel-border));background:color-mix(in srgb,var(--status-warning) 9%,var(--surface-panel-primary))}.frontend-tools-result-hero[data-result-tone=error]{border-color:color-mix(in srgb,var(--status-danger) 38%,var(--panel-border));background:color-mix(in srgb,var(--status-danger) 9%,var(--surface-panel-primary))}.result-state[data-result-tone=success]{color:var(--status-success)}.result-state[data-result-tone=warning]{color:var(--status-warning)}.result-state[data-result-tone=error]{color:var(--status-danger)}.frontend-tools-output{display:grid;gap:var(--space-sm);min-height:0;overflow:auto}.frontend-tools-output-tabs{display:flex;flex-wrap:nowrap;flex-shrink:0;align-items:center;height:32px;gap:var(--space-xs);padding-bottom:var(--space-xs);border-bottom:1px solid color-mix(in srgb,var(--panel-border) 74%,transparent);overflow-x:auto}.frontend-tools-output-tab{height:24px;line-height:24px;flex-shrink:0;border:1px solid var(--panel-border);border-radius:var(--radius-sm);background:var(--surface-panel-secondary);color:var(--text-secondary);cursor:pointer;font:inherit;font-size:.72rem;font-weight:650;padding:0 var(--space-xs);white-space:nowrap}.frontend-tools-output-tab:hover,.frontend-tools-output-tab:focus-visible{border-color:color-mix(in srgb,var(--accent) 46%,var(--panel-border));color:var(--text-primary);outline:none}.frontend-tools-output-tab.is-active{border-color:color-mix(in srgb,var(--accent) 58%,var(--panel-border));background:color-mix(in srgb,var(--accent) 12%,var(--surface-panel-secondary));color:var(--text-primary)}.frontend-tools-record{border:1px solid var(--panel-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface-panel-primary) 88%,var(--surface-panel-secondary));overflow:hidden}.frontend-tools-record[data-record-tone=warning]{border-color:color-mix(in srgb,var(--status-warning) 36%,var(--panel-border))}.frontend-tools-record[data-record-tone=error]{border-color:color-mix(in srgb,var(--status-danger) 42%,var(--panel-border))}.frontend-tools-record .panel-label{margin:0;padding:var(--space-sm) var(--space-md);border-bottom:1px solid color-mix(in srgb,var(--panel-border) 80%,transparent);background:color-mix(in srgb,var(--surface-panel-secondary) 68%,transparent)}.frontend-tools-code-block pre{margin:0;max-height:320px;overflow:auto;padding:var(--space-md);white-space:pre-wrap;word-break:break-word}.frontend-tools-code-block code{font-family:var(--font-mono);font-size:.84rem;line-height:1.55;color:var(--text-primary)}.frontend-tools-list div,.frontend-tools-table div,.frontend-tools-kv div{display:grid;grid-template-columns:minmax(120px,.45fr) minmax(0,1fr);gap:var(--space-md);align-items:start;padding:var(--space-sm) var(--space-md);border-top:1px solid color-mix(in srgb,var(--panel-border) 72%,transparent);font-family:var(--font-mono);font-size:.8rem}.frontend-tools-list div{display:block;color:var(--text-secondary)}.frontend-tools-table div[data-record-tone=error] span{color:var(--status-danger)}.frontend-tools-kv strong,.frontend-tools-table strong{color:var(--text-primary);font-family:var(--font-sans);font-size:.78rem;font-weight:650}.frontend-tools-kv span,.frontend-tools-table span{min-width:0;color:var(--text-secondary);overflow-wrap:anywhere}.frontend-tools-message{padding:var(--space-md);border:1px solid var(--panel-border);border-radius:var(--radius-md);background:var(--surface-panel-secondary);color:var(--text-secondary);font-size:.86rem}.frontend-tools-message--error{border-color:color-mix(in srgb,var(--status-danger) 42%,var(--panel-border));color:var(--status-danger)}.frontend-tools-control-grid{display:grid;gap:var(--space-sm)}.frontend-tools-control-grid .settings-field{margin:0}.frontend-tools-control-grid .surface-input,.frontend-tools-control-grid .surface-select{min-width:0;width:100%}.frontend-tools-color-row__controls{display:grid;grid-template-columns:2.75rem minmax(0,1fr);gap:var(--space-xs)}.frontend-tools-color-input{min-height:2.25rem;padding:2px}.frontend-tools-control-note{margin:var(--space-sm) 0 0;color:var(--text-secondary);font-size:.78rem;line-height:1.45}.frontend-tools-preview{min-height:0}.frontend-tools-preview:empty{display:none}.frontend-tools-preview-card,.frontend-tools-preview-layout{min-height:176px;border:1px solid var(--panel-border);border-radius:var(--radius-md);background:linear-gradient(to right,color-mix(in srgb,var(--panel-border) 30%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--panel-border) 26%,transparent) 1px,transparent 1px),var(--surface-panel-primary);background-size:24px 24px}.frontend-tools-preview-card{display:grid;place-items:center}.frontend-tools-preview-card:after{content:"";width:min(54%,220px);aspect-ratio:1.6;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--panel-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface-raised) 82%,transparent)}.frontend-tools-preview-layout{display:flex;padding:var(--space-lg)}.frontend-tools-preview-layout span{min-width:48px;min-height:48px;border:1px solid color-mix(in srgb,var(--accent) 58%,var(--panel-border));background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:var(--radius-sm)}.frontend-tools-color-preview{display:grid;grid-template-columns:minmax(96px,.8fr) minmax(0,1fr) minmax(0,1fr);gap:var(--space-sm);min-height:132px;border:1px solid var(--panel-border);border-radius:var(--radius-md);background:var(--surface-panel-primary);padding:var(--space-md)}.frontend-tools-color-preview__swatch,.frontend-tools-color-preview__sample{display:grid;place-items:center;border:1px solid var(--panel-border);border-radius:var(--radius-sm);font-weight:750}.frontend-tools-color-preview__swatch{background:var(--picked-color)}.frontend-tools-color-preview__sample--light{background:#fff;color:var(--picked-color)}.frontend-tools-color-preview__sample--dark{background:#111827;color:var(--picked-color)}.frontend-tools-application--color-picker{grid-template-columns:minmax(0,1fr)}.frontend-color-picker-panel{min-width:0;overflow:auto}.frontend-color-picker-tabs{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.frontend-color-picker-tab.is-active{border-color:color-mix(in srgb,var(--accent) 58%,var(--panel-border));background:color-mix(in srgb,var(--accent) 12%,var(--surface-panel-secondary));color:var(--text-primary)}.frontend-color-picker-layout{display:grid;grid-template-columns:minmax(320px,.88fr) minmax(360px,1.12fr);gap:var(--space-md);min-height:0}.frontend-color-picker-card{min-width:0;border:1px solid var(--panel-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--surface-panel-primary) 88%,var(--surface-panel-secondary));padding:var(--space-md)}.frontend-color-picker-card[hidden]{display:none}.frontend-color-picker-card--readout{display:grid;gap:var(--space-md);grid-row:span 2}.frontend-color-field{position:relative;height:280px;border:1px solid var(--panel-border);border-radius:var(--radius-md);background:linear-gradient(to top,#000000,transparent),linear-gradient(to right,#ffffff,transparent),var(--picker-hue-color, #14b8a6);cursor:crosshair;touch-action:none}.frontend-color-field__handle{position:absolute;width:1.15rem;height:1.15rem;border:2px solid #ffffff;border-radius:50%;box-shadow:0 0 0 1px #0f172ab8;transform:translate(-50%,-50%)}.frontend-color-slider{display:grid;grid-template-columns:4rem minmax(0,1fr) 3.5rem;gap:var(--space-sm);align-items:center;margin-top:var(--space-md);color:var(--text-secondary);font-size:.82rem;font-weight:650}.frontend-color-slider input{width:100%;accent-color:var(--accent)}.frontend-color-entry-row,.frontend-color-picker-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-sm);margin-top:var(--space-md)}.frontend-color-swatch-large{display:grid;place-items:center;min-height:152px;border:1px solid color-mix(in srgb,var(--panel-border) 80%,transparent);border-radius:var(--radius-md);color:#061018;text-align:center}.frontend-color-swatch-large strong{font-family:var(--font-mono);font-size:2.2rem;line-height:1}.frontend-color-swatch-large span{font-family:var(--font-mono);font-size:.9rem}.frontend-color-format-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}.frontend-color-format-grid--wide{grid-template-columns:repeat(2,minmax(0,1fr))}.frontend-color-format-row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) 2.25rem;align-items:center;min-height:2.75rem;border:1px solid var(--panel-border);border-radius:var(--radius-sm);overflow:hidden}.frontend-color-format-row strong{height:100%;display:grid;place-items:center;border-right:1px solid var(--panel-border);color:var(--text-secondary);font-size:.78rem}.frontend-color-format-row span{min-width:0;padding:0 var(--space-sm);overflow:hidden;color:var(--text-primary);font-family:var(--font-mono);font-size:.84rem;text-overflow:ellipsis;white-space:nowrap}.frontend-color-format-row button{border-radius:0;font-size:0}.frontend-color-format-row button:before{content:"Copy";font-size:.88rem}.frontend-color-palettes{display:grid;gap:var(--space-sm)}.frontend-color-palette{display:grid;gap:var(--space-xs)}.frontend-color-palette .panel-label{margin:0}.frontend-color-palette div{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.frontend-color-swatch-button{width:2rem;height:2rem;border:1px solid var(--panel-border);border-radius:var(--radius-sm);cursor:pointer}.frontend-image-picker-stage{position:relative;display:grid;place-items:center;min-height:260px;border:1px solid var(--panel-border);border-radius:var(--radius-md);background:linear-gradient(to right,color-mix(in srgb,var(--panel-border) 28%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--panel-border) 24%,transparent) 1px,transparent 1px),var(--surface-input);background-size:24px 24px;overflow:hidden}.frontend-image-picker-stage canvas{width:100%;max-height:360px;object-fit:contain;cursor:crosshair}.frontend-image-picker-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--text-secondary);font-size:.86rem;pointer-events:none}.frontend-image-picker-empty[hidden]{display:none}.frontend-image-magnifier{display:grid;grid-template-columns:repeat(5,1fr);width:8.5rem;margin-top:var(--space-md);border:1px solid var(--panel-border);border-radius:var(--radius-sm);overflow:hidden}.frontend-image-magnifier span{aspect-ratio:1;border:1px solid color-mix(in srgb,var(--panel-border) 60%,transparent)}.frontend-image-magnifier span.is-selected{outline:2px solid var(--status-danger);outline-offset:-3px}@media(max-width:1024px){.frontend-tools-application,.frontend-color-picker-layout{grid-template-columns:minmax(0,1fr)}.frontend-color-picker-card--readout{grid-row:auto}}@media(max-width:720px){.frontend-tools-source:not(.cm-editor-mount){min-height:280px;padding:var(--space-md)}.frontend-tools-list div,.frontend-tools-table div,.frontend-tools-kv div{grid-template-columns:minmax(0,1fr);gap:var(--space-xs)}.frontend-color-format-grid,.frontend-color-format-grid--wide,.frontend-color-entry-row,.frontend-color-picker-actions{grid-template-columns:minmax(0,1fr)}.frontend-color-field{height:220px}}