.tool-design{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.tool-design__summary{align-items:center;gap:var(--space-12);padding:var(--space-12) var(--space-16);font-size:var(--text-body-sm);color:var(--ink);cursor:pointer;font-weight:500;list-style:none;display:flex}.tool-design__summary::-webkit-details-marker{display:none}.tool-design__summary:after{content:"";width:0;height:0;color:var(--ink-muted);transition:transform var(--dur-fast) ease;border-block-start:5px solid;border-inline:4px solid #0000;flex:none;margin-inline-start:auto}.tool-design[open]>.tool-design__summary:after{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.tool-design__summary:after{transition:none}}.tool-design__summary:hover{background:var(--surface-sunken);--focus-color:var(--focus-color-strong)}.tool-design__body{gap:var(--space-16);padding:var(--space-16);border-top:1px solid var(--border);display:grid}.tool-design__group{gap:var(--space-8);display:grid}.tool-design__label{font-size:var(--text-micro);letter-spacing:.4px;text-transform:uppercase;color:var(--ink-muted);font-weight:600}.tool-design__row{gap:var(--space-8);flex-wrap:wrap;align-items:center;display:flex}.tool-design__chip{height:32px;padding:0 var(--space-12);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);font-size:var(--text-caption);color:var(--ink-secondary);cursor:pointer;font-weight:500}.tool-design__chip:hover{background:var(--surface-sunken);--focus-color:var(--focus-color-strong)}.tool-design__chip[data-active],.tool-design__chip[aria-checked=true]{border-color:var(--ink);color:var(--ink);background:var(--surface-sunken);--focus-color:var(--focus-color-strong)}.tool-design__swatch{border:1px solid var(--border-strong);border-radius:var(--radius-sm);cursor:pointer;width:28px;height:28px;padding:0}.tool-design__swatch[aria-checked=true]{outline:var(--focus-width) solid var(--ink);outline-offset:2px}.tool-design__upload{align-items:center;display:inline-flex;position:relative}.tool-design__upload input[type=file]{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.tool-design__hint{font-size:var(--text-caption);color:var(--ink-muted);line-height:1.5}.tool-design__problem{color:var(--fail)}.tool-design__picker{align-items:center;gap:var(--space-6);color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0;display:inline-flex}.tool-design__picker-label{font-size:var(--text-micro);color:var(--ink-muted);font-weight:500}.tool-design__picker .cf__well{border-color:var(--border-strong);block-size:28px;inline-size:32px}.tool-design__pair{display:contents}.tool-design__inline{align-items:center;gap:var(--space-8);display:inline-flex}.tool-design__inline input[type=range]{width:120px;min-height:24px}.tool-design__select{height:32px;padding:0 var(--space-8);border:1px solid var(--border-field);border-radius:var(--radius-sm);background:var(--surface);font-size:max(var(--field-text-floor), var(--text-caption));color:var(--ink)}.tool-design__caution{color:var(--warn-ink)}.tool-design__frame-controls{gap:var(--space-8);display:grid}.tool-design__embedded{border-top:1px solid var(--border);padding-top:var(--space-12)}.tool-design__embedded summary{align-items:center;gap:var(--space-8);cursor:pointer;padding-block:var(--space-4);margin-block:-4px;list-style:none;display:flex}.tool-design__embedded summary::-webkit-details-marker{display:none}.tool-design__embedded summary:after{content:"";width:0;height:0;color:var(--ink-muted);transition:transform var(--dur-fast) ease;border-block-start:5px solid;border-inline:4px solid #0000;flex:none;margin-inline-start:auto}.tool-design__embedded[open]>summary:after{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.tool-design__embedded summary:after{transition:none}}.tool-design__code{margin-top:var(--space-8);padding:var(--space-8) var(--space-10);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-sunken);--focus-color:var(--focus-color-strong);font-size:var(--text-micro);word-break:break-all;display:block}.tool-design__save{min-height:24px;padding-block:var(--space-4);font-size:var(--text-body-sm);color:var(--accent-strong);align-items:center;font-weight:500;text-decoration:none;display:inline-flex}.tool-design__save:hover{text-decoration:underline}.tool-design__section{gap:var(--space-16);padding-bottom:var(--space-20);border-bottom:1px solid var(--border);display:grid}.tool-design__section:last-of-type{border-bottom:0;padding-bottom:0}.tool-design__section-head{gap:var(--space-2);min-block-size:24px;display:grid}.tool-design__section-title{font-size:var(--text-body-md);color:var(--ink);font-weight:600}.tool-design__section-note{font-size:var(--text-caption);color:var(--ink-muted);line-height:1.5}.tool-design__section .tool-design__label{font-size:var(--text-micro)}.tool-design__shape{align-items:center;gap:var(--space-4);min-width:62px;padding:var(--space-8) var(--space-6);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;color:var(--ink-secondary);flex-direction:column;display:inline-flex}.tool-design__shape:hover{background:var(--surface-sunken);--focus-color:var(--focus-color-strong)}.tool-design__shape[aria-checked=true]{border-color:var(--ink);background:var(--surface-sunken);--focus-color:var(--focus-color-strong);color:var(--ink)}.tool-design__shape svg{display:block}.tool-design__shape-label{font-size:var(--text-micro);text-align:center;line-height:1.3}.tool-design__row--shapes{gap:var(--space-6)}.tool-design__section{padding-bottom:0}.tool-design__section>summary{align-items:baseline;gap:var(--space-8);padding:var(--space-12) 0;cursor:pointer;list-style:none;display:flex}.tool-design__section>summary::-webkit-details-marker{display:none}.tool-design__section>summary:after{content:"";width:0;height:0;transition:transform var(--dur-fast) ease;color:var(--ink-muted);border-block-start:5px solid;border-inline:4px solid #0000;flex:none;align-self:center}.tool-design__section[open]>summary:after{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.tool-design__section>summary:after{transition:none}}.tool-design__section-body{gap:var(--space-16);padding-bottom:var(--space-20);display:grid}.generator{overflow:clip}@media (width>=900px){.generator__preview{align-self:start;position:sticky;top:85px}}.tool-design__section>summary{align-items:start;column-gap:var(--space-10);row-gap:var(--space-2);padding:var(--space-14) 0;cursor:pointer;grid-template-columns:28px 1fr 12px;list-style:none;display:grid}.tool-design__section>summary:after{grid-area:1/3/span 2;align-self:center}.tool-design__section-icon{border-radius:var(--radius-sm);background:var(--surface-sunken);--focus-color:var(--focus-color-strong);block-size:28px;inline-size:28px;color:var(--ink-secondary);grid-area:1/1/span 2;justify-content:center;align-self:center;align-items:center;display:flex}.tool-design__section[open]>summary .tool-design__section-icon{color:var(--ink)}.tool-design__section-title{white-space:nowrap;grid-column:2}.tool-design__section-note{grid-column:2}.tool-design__section>summary:hover .tool-design__section-title{text-decoration:underline}.tool-design__section-body{gap:var(--space-12);padding-bottom:18px}.tool-design__section-body>.tool-design__group{padding:var(--space-12);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-sunken);--focus-color:var(--focus-color-strong);gap:var(--space-10)}.tool-design__section-body .tool-design__row{gap:var(--space-8);row-gap:var(--space-10)}.tool-design__group>.tool-design__hint{margin-top:-2px}.tool-print{border-top:1px solid var(--border);padding-top:var(--space-12)}.tool-print__summary{align-items:center;gap:var(--space-8);cursor:pointer;font-size:var(--text-body-sm);color:var(--ink);padding-block:var(--space-4);margin-block:-4px;font-weight:500;list-style:none;display:flex}.tool-print__summary::-webkit-details-marker{display:none}.tool-print__summary:after{content:"";width:0;height:0;color:var(--ink-muted);transition:transform var(--dur-fast) ease;border-block-start:5px solid;border-inline:4px solid #0000;flex:none;margin-inline-start:auto}.tool-print[open]>.tool-print__summary:after{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.tool-print__summary:after{transition:none}}.tool-print__body{gap:var(--space-10);padding-top:var(--space-10);display:grid}.tool-print__field{gap:var(--space-4);display:grid}.tool-print__field .tool-design__select{max-width:100%}.tool-print__button{justify-self:start}.tool-design--tabs{--tabs-wash-border:#c9d3fb;--tabs-surface-soft:#fbfcfe}.tool-design--tabs[data-tabs-ready]{background:0 0;border:0}.tool-design--tabs[data-tabs-ready]>.tool-design__summary{display:none}.tool-design--tabs[data-tabs-ready]>.tool-design__body{gap:var(--space-14);border-top:0;padding:0}.tool-design__tabs[hidden]{display:none}.tool-design--tabs[data-tabs-ready] .tool-design__section{gap:var(--space-12);border:0;padding:0}.tool-design--tabs[data-tabs-ready] .tool-design__section:not([open]){display:none}.tool-design--tabs[data-tabs-ready] .tool-design__section>summary{cursor:default;pointer-events:none;padding:0;display:block}.tool-design--tabs[data-tabs-ready] .tool-design__section>summary:after,.tool-design--tabs[data-tabs-ready] .tool-design__section-icon,.tool-design--tabs[data-tabs-ready] .tool-design__section-title{display:none}.tool-design--tabs[data-tabs-ready] .tool-design__section-note{font-size:var(--text-micro);color:var(--ink-muted);line-height:1.5}.tool-design--tabs[data-tabs-ready] .tool-design__section-body{gap:var(--space-12);padding-bottom:0}.tool-design--tabs[data-tabs-ready] .tool-design__section-body>.tool-design__group{gap:var(--space-12);padding:var(--space-14) var(--space-16);border:1px solid var(--border);border-radius:var(--radius);background:var(--canvas)}.tool-design--tabs[data-tabs-ready] .tool-design__label{font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:normal;text-transform:none;color:var(--ink)}.tool-design--tabs[data-tabs-ready] .tool-design__hint{font-size:var(--text-micro)}.tool-design--tabs[data-tabs-ready] .tool-design__row[role=radiogroup]:has(>.tool-design__chip),.tool-design__seg{justify-self:start;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-sm);background:var(--surface-sunken);--focus-color:var(--focus-color-strong);display:inline-flex}.tool-design__seg[hidden]{display:none}.tool-design--tabs[data-tabs-ready] .tool-design__row[role=radiogroup]>.tool-design__chip,.tool-design__seg>button{height:var(--control-sm);padding:0 var(--space-14);border-radius:var(--radius-xs);color:var(--ink-secondary);font-size:var(--text-micro);font-weight:var(--weight-medium);cursor:pointer;background:0 0;border:0}.tool-design--tabs[data-tabs-ready] .tool-design__row[role=radiogroup]>.tool-design__chip[aria-checked=true],.tool-design__seg>button[aria-checked=true]{background:var(--canvas);color:var(--ink)}.tool-design--tabs[data-tabs-ready] .tool-design__chip[aria-pressed]{border-radius:var(--radius-full)}.tool-design--tabs[data-tabs-ready] .tool-design__chip[aria-pressed=true]{border-color:var(--tabs-wash-border);background:var(--accent-wash);color:var(--accent-ink)}.tool-design--tabs[data-tabs-ready] .tool-design__swatch{box-sizing:border-box;block-size:36px;inline-size:36px;padding:var(--space-2);border:2px solid var(--border);border-radius:var(--radius-full);background-clip:content-box!important}.tool-design--tabs[data-tabs-ready] .tool-design__swatch[aria-checked=true]{border-color:var(--accent)}.tool-design--tabs[data-tabs-ready] .tool-design__picker{gap:var(--space-8);padding:var(--space-4) var(--space-12) var(--space-4) var(--space-4);border:1px solid var(--border);border-radius:var(--radius);background:var(--canvas)}.tool-design--tabs[data-tabs-ready] .tool-design__picker:hover{border-color:var(--ink-muted)}.tool-design--tabs[data-tabs-ready] .tool-design__picker[aria-expanded=true]{border-color:var(--accent-fill)}.tool-design--tabs[data-tabs-ready] .tool-design__picker .cf__well{border-color:var(--border);block-size:30px;inline-size:30px}.tool-design--tabs[data-tabs-ready] .tool-design__inline:has(input[type=range]){align-items:center;row-gap:var(--space-4);flex:200px;grid-template-columns:1fr auto;display:grid}.tool-design--tabs[data-tabs-ready] .tool-design__inline:has(input[type=range])>.tool-design__picker-label{grid-area:1/1}.tool-design--tabs[data-tabs-ready] .tool-design__inline:has(input[type=range])>.tool-design__hint{font-family:var(--font-mono);grid-area:1/2}.tool-design--tabs[data-tabs-ready] .tool-design__inline input[type=range]{inline-size:100%;accent-color:var(--accent-fill);grid-column:1/-1}.tool-design--tabs[data-tabs-ready] .tool-design__row--shapes{gap:var(--space-8);grid-template-columns:repeat(auto-fill,minmax(min(100%,76px),1fr));display:grid}.tool-design--tabs[data-tabs-ready] .tool-design__shape{height:auto;inline-size:auto;padding:var(--space-10) var(--space-4) var(--space-8);border:1px solid var(--border);border-radius:var(--radius);background:var(--canvas);align-content:start;align-self:stretch}.tool-design--tabs[data-tabs-ready] .tool-design__shape[aria-checked=true]{border-color:var(--accent);background:var(--accent-wash)}@media (width>=640px){.tool-design--tabs[data-tabs-ready] [data-design-group=shape] .tool-design__section-body{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-design--tabs[data-tabs-ready] [data-design-group=shape] .tool-design__section-body>:first-child{grid-column:1/-1}}.tool-design--tabs[data-tabs-ready] [data-design-group=logo] .tool-design__section-body{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));align-items:start}.tool-design--tabs[data-tabs-ready] .tool-design__upload{box-sizing:border-box;inline-size:100%;height:auto;min-height:calc(var(--control-lg) + var(--space-24));padding:var(--space-16) var(--space-10);border:1px dashed var(--border-strong);border-radius:var(--radius);background:var(--tabs-surface-soft);color:var(--accent-ink);font-weight:var(--weight-semibold);justify-content:center}.tool-design--tabs[data-tabs-ready] .tool-design__upload:hover{border-color:var(--accent)}.tool-design--tabs[data-tabs-ready] [data-design-group=output] .tool-design__group>.tool-design__row{gap:var(--space-12);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:end;display:grid}.tool-design--tabs[data-tabs-ready] [data-design-group=output] .tool-design__inline:not(:has(input[type=range])){gap:var(--space-6);display:grid}.tool-design--tabs[data-tabs-ready] .tool-design__pair{gap:var(--space-6);align-content:start;display:grid}.tool-design--tabs[data-tabs-ready] .tool-design__save{padding:var(--space-12) var(--space-16);border:1px solid var(--tabs-wash-border);border-radius:var(--radius);background:var(--accent-wash);color:var(--accent-ink);font-weight:var(--weight-medium);text-decoration:none;display:flex}
