*{box-sizing:border-box}body{background:#090b11;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}#root{min-height:100vh}.app-shell{min-height:100vh;padding:2rem clamp(1rem,2.5vw,2.5rem) 4rem;transition:background-color .24s,color .24s}h1{margin:0;font-size:clamp(2rem,4vw,3.2rem);line-height:1.1}h2{margin:0 0 .75rem;font-size:1.15rem}.eyebrow{letter-spacing:.04em;text-transform:uppercase;opacity:.8;margin:0 0 .5rem;font-weight:700}.subhead{opacity:.84;max-width:68ch;margin:.6rem 0 0}.top-panel{background:color-mix(in oklab, currentColor 4%, transparent);border:1px solid color-mix(in oklab, currentColor 15%, transparent);border-radius:1.3rem;gap:1.05rem;padding:1rem 1rem 1.1rem;display:grid}.control-layout{gap:.78rem;display:grid}.top-actions{justify-content:space-between;align-items:center;gap:.8rem;display:flex}.icon-actions{grid-template-columns:56px 56px;gap:.6rem;display:grid}.export-inline{justify-content:flex-end;align-items:center;gap:.65rem;display:flex}.icon-square{background:linear-gradient(140deg, color-mix(in oklab, currentColor 8%, transparent), color-mix(in oklab, currentColor 4%, transparent));-webkit-backdrop-filter:blur(14px)saturate(1.12);border:1px solid #ffffff47;border-radius:14px;place-items:center;width:56px;height:56px;font-size:1.28rem;transition:transform .18s,border-color .18s,box-shadow .18s;display:grid;box-shadow:inset 0 1px #ffffff47,0 12px 24px -16px #070a0ea6}.icon-square:hover{border-color:#ffffff6b;transform:translateY(-1px);box-shadow:inset 0 1px #ffffff57,0 16px 30px -14px #070a0eb8}.control-field{gap:.28rem;display:grid}label{gap:.25rem;font-size:.86rem;display:grid}input,select,button{border:1px solid color-mix(in oklab, currentColor 22%, transparent);background:color-mix(in oklab, currentColor 4%, transparent);color:inherit;font:inherit;border-radius:.65rem;padding:.55rem .7rem}button{cursor:pointer}.control-btn,.control-field input:not([type=range]),.control-field select,.control-inline{min-height:48px}.control-btn{align-self:end}.compact-control{min-height:42px;padding:.42rem .72rem;font-size:.85rem}.export-inline .compact-control:first-child{width:min(100%,270px)}.toggle{align-items:center;gap:.5rem;display:flex}.seed-row{grid-template-columns:7fr 3fr;gap:.6rem;display:grid}.control-mid-row{grid-template-columns:2fr 1.06fr;gap:.72rem;display:grid}.seed-row input,.seed-row button{width:100%;min-height:52px}.harmony-control{width:100%;min-height:52px;font-size:1rem}.options-row{flex-wrap:wrap;align-items:center;gap:.9rem 1.35rem;display:flex}.plain-toggle{background:0 0;border:0;min-height:0;padding:0}.control-inline{border:1px solid color-mix(in oklab, currentColor 22%, transparent);background:color-mix(in oklab, currentColor 4%, transparent);border-radius:.65rem;align-self:end;padding:0 .7rem}.toggle input{width:1rem;height:1rem;margin:0}.toggle input[type=checkbox]{appearance:none;border:1px solid color-mix(in oklab, currentColor 22%, transparent);cursor:pointer;background:#fff;border-radius:.18rem;width:1.35rem;height:1.35rem;padding:0}.toggle input[type=checkbox]:checked{background:color-mix(in oklab, currentColor 82%, white);box-shadow:inset 0 0 0 3px color-mix(in oklab, currentColor 10%, white)}.creativity-row{max-width:100%;margin-top:.05rem}.error{color:#ff5f7a;margin:0;font-weight:600}.chips-row{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.chips-row span{border:1px solid color-mix(in oklab, currentColor 24%, transparent);background:color-mix(in oklab, currentColor 8%, transparent);border-radius:999px;padding:.25rem .65rem;font-size:.82rem}.key-colors{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.65rem,1.4vw,.95rem);margin-top:1.1rem;display:grid}.swatch-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem;margin-top:1.1rem;display:grid}.swatch-card{border:1px solid color-mix(in oklab, currentColor 18%, transparent);background:color-mix(in oklab, currentColor 6%, transparent);border-radius:1rem;grid-template-rows:8.2rem auto auto;display:grid;overflow:hidden}.swatch-preview{justify-content:start;align-items:end;padding:.7rem;font-weight:700;display:flex}.swatch-meta{gap:.22rem;padding:.7rem;font-size:.78rem;display:grid}.swatch-meta p{margin:0}.token-label{font-size:.82rem;font-weight:700}.pass-chip{border:1px solid color-mix(in oklab, currentColor 28%, transparent);border-radius:999px;width:fit-content;margin-top:.25rem;padding:.12rem .48rem}.swatch-actions{grid-template-columns:1fr 1fr;gap:.45rem;padding:.7rem;display:grid}.token-panel,.a11y-panel{border:1px solid color-mix(in oklab, currentColor 18%, transparent);background:color-mix(in oklab, currentColor 5%, transparent);border-radius:1rem;margin-top:1.2rem;padding:.9rem}.tabs{flex-wrap:wrap;gap:.5rem;display:flex}.tabs .active{border-color:color-mix(in oklab, currentColor 70%, transparent);background:color-mix(in oklab, currentColor 16%, transparent)}.token-panel-head{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.copy-all-btn{white-space:nowrap;min-height:38px;padding:.45rem .72rem}.token-table-wrap{overflow-x:auto}.token-table{border-collapse:collapse;width:100%;font-size:.85rem}.token-table th,.token-table td{text-align:left;border-bottom:1px solid color-mix(in oklab, currentColor 12%, transparent);padding:.55rem}.token-name-cell{align-items:center;gap:.45rem;display:inline-flex}.token-color-dot{border:1px solid color-mix(in oklab, currentColor 22%, transparent);border-radius:999px;flex:none;width:.68rem;height:.68rem}.a11y-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.55rem;display:grid}.a11y-card{border:1px solid color-mix(in oklab, currentColor 15%, transparent);border-radius:.8rem;padding:.65rem}.a11y-card p{margin:.22rem 0;font-size:.82rem}.warnings{margin:.8rem 0 0;padding-left:1.2rem}.warnings li{margin:.2rem 0}.preview-shell{border:1px solid color-mix(in oklab, currentColor 18%, transparent);border-radius:1rem;margin-top:.8rem;padding:1rem;transition:all .22s}.preview-navbar{border:1px solid;border-radius:1rem;justify-content:space-between;align-items:center;padding:.75rem .9rem;display:flex}.preview-navbar a{font-size:.86rem;text-decoration:none}.preview-brand{align-items:center;gap:.45rem;font-weight:700;display:inline-flex}.preview-brand-dot{border-radius:50%;width:.62rem;height:.62rem}.preview-links{align-items:center;gap:1rem;display:flex}.preview-hero-clean{border:1px solid;border-radius:1rem;grid-template-columns:1.6fr 1fr;gap:.85rem;margin-top:.85rem;padding:1rem;display:grid}.preview-hero-copy h3{margin:.6rem 0 0;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.1}.preview-hero-copy p{max-width:46ch;margin:.55rem 0 0}.preview-tags{flex-wrap:wrap;gap:.42rem;display:flex}.preview-tags span{border-radius:999px;padding:.24rem .58rem;font-size:.76rem;font-weight:700}.preview-hero-actions{flex-wrap:wrap;gap:.56rem;margin-top:.85rem;display:flex}.preview-hero-panel{border:1px solid;border-radius:.92rem;padding:.85rem}.preview-hero-panel h4{margin:0}.preview-hero-panel p{margin:.3rem 0 0}.preview-hero-panel ul{gap:.4rem;margin:.7rem 0 0;padding:0;list-style:none;display:grid}.preview-hero-panel li{justify-content:space-between;align-items:center;font-size:.82rem;display:flex}.preview-hero-chip{border-radius:999px;margin-top:.75rem;padding:.32rem .62rem;font-size:.75rem;font-weight:700;display:inline-flex}.preview-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:.56rem;margin-top:.8rem;display:grid}.preview-strip-card{border:1px solid;border-radius:.82rem;padding:.72rem}.preview-strip-card p,.preview-strip-card h4{margin:0}.preview-alerts{flex-wrap:wrap;gap:.52rem;margin-top:.8rem;display:flex}.preview-alert{border:1px solid;border-radius:999px;padding:.55rem .7rem;font-size:.78rem}.preview-cta-mini{border:1px solid;border-radius:.9rem;justify-content:space-between;align-items:center;gap:.7rem;margin-top:.8rem;padding:.8rem;display:flex}.preview-cta-mini p{margin:0}@media (width<=980px){.top-actions{flex-direction:column;align-items:stretch}.export-inline{justify-content:flex-start}.control-mid-row,.seed-row{grid-template-columns:1fr}.key-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.preview-hero-clean,.preview-strip{grid-template-columns:1fr}.preview-cta-mini,.token-panel-head{flex-direction:column;align-items:flex-start}}@media (width<=680px){.key-colors{grid-template-columns:1fr}}