:root{color-scheme:light;--bg: #f4f4f5;--surface: #ffffff;--border: #e4e4e7;--border-subtle: #ececef;--border-strong: #d4d4d8;--text: #18181b;--text-secondary: #52525b;--text-tertiary: #a1a1aa;--accent: #18181b;--accent-hover: #3f3f46;--focus: #fdd309;--radius: 8px;--radius-lg: 12px;--font: "Inter", system-ui, -apple-system, sans-serif;--font-mono: ui-monospace, "SF Mono", "Cascadia Code", monospace;--shadow-preview: 0 1px 2px rgba(24, 24, 27, .04), 0 8px 24px rgba(24, 24, 27, .06);font-family:var(--font);line-height:1.5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app{min-height:100vh;display:flex;flex-direction:column}.app__topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.875rem clamp(1.25rem,3vw,2rem);background:var(--surface);border-bottom:1px solid var(--border)}.app__brand{display:flex;align-items:baseline;gap:.65rem}.app__title{margin:0;font-size:.9375rem;font-weight:600;letter-spacing:-.02em}.app__badge{font-size:.6875rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}.app__layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0;align-items:stretch}@media(max-width:960px){.app__layout{grid-template-columns:1fr}}.app__preview{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(1.25rem,3vw,2rem);min-height:0}.preview-frame{width:100%;display:flex;justify-content:center}.preview{position:relative;width:min(100%,calc(min(72vh,900px) * var(--preview-ar)));max-height:min(72vh,900px);aspect-ratio:var(--preview-ar);margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-preview)}.preview__canvas{display:block;width:100%;height:100%}.preview__logo{position:absolute;pointer-events:none;object-fit:contain}.preview__status{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.75rem;padding:0 .125rem}.preview__meta{font-size:.75rem;font-weight:500;color:var(--text-tertiary);font-variant-numeric:tabular-nums;letter-spacing:.01em}.app__sidebar{display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--border);min-height:0;max-height:calc(100vh - 3.25rem);overflow-y:auto}@media(max-width:960px){.app__sidebar{border-left:none;border-top:1px solid var(--border);max-height:none}}.sidebar__body{flex:1;padding:.25rem 0}.sidebar__footer{padding:1rem 1.25rem 1.25rem;border-top:1px solid var(--border-subtle);background:var(--surface);position:sticky;bottom:0}.section{padding:1rem 1.25rem;border-bottom:1px solid var(--border-subtle)}.section:last-child{border-bottom:none}.section__label{margin:0 0 .75rem;font-size:.6875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary)}.section__stack{display:flex;flex-direction:column;gap:.625rem}.tabs{display:flex;gap:0;padding:3px;background:var(--bg);border-radius:var(--radius);border:1px solid var(--border)}.tabs__btn{flex:1;border:none;background:transparent;color:var(--text-secondary);border-radius:calc(var(--radius) - 2px);padding:.4375rem .5rem;font-size:.8125rem;font-weight:500;cursor:pointer;transition:background .12s,color .12s}.tabs__btn:hover:not(.tabs__btn--active){color:var(--text)}.tabs__btn--active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px #18181b0f}.chip-grid{display:flex;flex-wrap:wrap;gap:.375rem}.chip{border:1px solid var(--border);background:transparent;color:var(--text-secondary);border-radius:999px;padding:.3125rem .75rem;font-size:.75rem;font-weight:500;cursor:pointer;transition:border-color .12s,color .12s,background .12s}.chip:hover:not(.chip--active){border-color:var(--border-strong);color:var(--text)}.chip--active{border-color:var(--accent);background:var(--accent);color:#fff}.swatch-row{display:grid;grid-template-columns:2.75rem 1fr auto;align-items:center;gap:.625rem}.swatch-row__input{width:2.75rem;height:2rem;padding:2px;border:1px solid var(--border);border-radius:6px;background:var(--surface);cursor:pointer}.swatch-row__input::-webkit-color-swatch-wrapper{padding:0}.swatch-row__input::-webkit-color-swatch{border:none;border-radius:4px}.swatch-row__name{font-size:.8125rem;font-weight:500;color:var(--text-secondary)}.swatch-row__hex{font-family:var(--font-mono);font-size:.6875rem;color:var(--text-tertiary);letter-spacing:.02em}.slider{display:grid;grid-template-columns:1fr auto;gap:.25rem .75rem;align-items:center}.slider__label{font-size:.8125rem;color:var(--text-secondary)}.slider__value{font-size:.75rem;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text-tertiary);min-width:2.5rem;text-align:right}.slider input[type=range]{grid-column:1 / -1;width:100%;height:4px;margin:.375rem 0;accent-color:var(--accent);cursor:pointer}.slider input[type=number]{grid-column:1 / -1;width:100%;padding:.4375rem .625rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.8125rem}.field{display:flex;flex-direction:column;gap:.375rem}.field__label{font-size:.75rem;font-weight:500;color:var(--text-secondary)}.field__input{padding:.5rem .625rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.8125rem}.field__input::placeholder{color:var(--text-tertiary)}.check{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-secondary);cursor:pointer}.check input{width:.9375rem;height:.9375rem;margin:0;accent-color:var(--accent);cursor:pointer}.btn-row{display:flex;flex-wrap:wrap;gap:.375rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;border:1px solid var(--border);border-radius:var(--radius);padding:.4375rem .75rem;font-size:.8125rem;font-weight:500;cursor:pointer;background:var(--surface);color:var(--text);transition:border-color .12s,background .12s}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--ghost{background:transparent;color:var(--text-secondary)}.btn--ghost:hover:not(:disabled){border-color:#d4d4d8;color:var(--text);background:var(--bg)}.btn--sm{padding:.3125rem .625rem;font-size:.75rem}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn--primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn--full{width:100%}.export-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.375rem}@media(max-width:960px){.export-grid{grid-template-columns:1fr}}.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.size-grid--spaced{margin-top:.625rem}.preset-list{display:flex;flex-direction:column;gap:.25rem}.preset-item{display:flex;align-items:center;justify-content:space-between;width:100%;border:none;background:transparent;color:var(--text-secondary);border-radius:var(--radius);padding:.4375rem .5rem;font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:background .12s,color .12s}.preset-item:hover:not(.preset-item--active){background:var(--bg);color:var(--text)}.preset-item--active{background:var(--bg);color:var(--text);font-weight:600}.preset-item__dims{font-size:.6875rem;font-weight:400;color:var(--text-tertiary);font-variant-numeric:tabular-nums}