.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.tool{margin-top:var(--space-6)}.dropzone{display:block;cursor:pointer;border:var(--border-width-2) dashed var(--border-default);border-radius:var(--radius-xl);background:var(--bg-panel);transition:var(--transition-control)}.dropzone:hover{border-color:var(--border-accent);background:var(--bg-field-hover)}.dropzone__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:clamp(var(--space-8),8vw,var(--space-16));text-align:center}.dropzone__inner strong{font-size:var(--text-xl);color:var(--text-primary)}.dropzone__inner span{color:var(--text-tertiary)}.dropzone__inner .btn{margin-top:var(--space-3)}.tool__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--bg-panel);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg)}.tool__reset{margin-left:auto}.toggle,.slider{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-md);color:var(--text-secondary);cursor:pointer}.slider .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text-primary);min-width:2.5ch}.slider select,.hex-input{height:var(--control-height);padding-inline:var(--space-2);background:var(--bg-field);color:var(--text-primary);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);font:inherit}.hex-input{width:9ch;font-family:var(--font-mono)}.color-input{width:40px;height:32px;padding:2px;border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-field);cursor:pointer}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--space-3);margin-top:var(--space-4)}.stat{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);background:var(--bg-panel);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg)}.stat__label{font-size:var(--text-sm);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:var(--tracking-wide)}.stat__value{font-size:var(--text-xl);color:var(--text-secondary);font-variant-numeric:tabular-nums}.stat__value strong{color:var(--text-primary)}.stat__delta{font-size:var(--text-sm);color:var(--success);font-weight:var(--weight-semibold)}.preview{margin-top:var(--space-4);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);background:repeating-conic-gradient(var(--bg-sunken) 0% 25%,var(--bg-field) 0% 50%) 50% / 24px 24px;display:grid;place-items:center;min-height:280px;padding:var(--space-6)}.preview__frame{width:min(320px,70%)}.preview__frame svg{width:100%;height:auto;display:block}.tool__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}.tool__hint{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--text-tertiary)}.tool__error{margin-top:var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--danger-subtle);color:var(--danger)}.code{margin-top:var(--space-4)}.code summary{cursor:pointer;color:var(--text-secondary);font-size:var(--text-md)}.code pre{margin-top:var(--space-3);max-height:280px;overflow:auto;padding:var(--space-4);background:var(--bg-sunken);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);white-space:pre-wrap;word-break:break-all}.favicons{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-5);margin-top:var(--space-5);padding:var(--space-6);background:var(--bg-panel);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg)}.favicon{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);background:none;border:none;cursor:pointer;color:var(--text-tertiary);font:inherit}.favicon__swatch{display:grid;place-items:center;border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-sm);overflow:hidden}.favicon__swatch img{object-fit:contain}.favicon:hover .favicon__label{color:var(--text-accent)}.favicon__label{font-size:var(--text-sm);font-variant-numeric:tabular-nums}.harmony{display:inline-flex;flex-wrap:wrap;gap:var(--space-1)}.harmony__btn{height:var(--control-height);padding-inline:var(--space-3);background:var(--bg-field);color:var(--text-secondary);border:var(--border-width) solid var(--border-default);border-radius:var(--radius-md);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:var(--transition-control)}.harmony__btn:hover{border-color:var(--border-strong);color:var(--text-primary)}.harmony__btn--active{background:var(--accent-subtle);border-color:var(--border-accent);color:var(--text-accent)}.palette{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--space-3);margin-top:var(--space-5)}.swatch{display:flex;flex-direction:column;gap:var(--space-2);background:none;border:none;padding:0;cursor:pointer;font:inherit}.swatch__chip{height:96px;border-radius:var(--radius-md);border:var(--border-width) solid hsl(0 0% 100% / .08);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.swatch:hover .swatch__chip{transform:translateY(-2px)}.swatch__hex{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);text-align:center}