select,button{font:inherit}select{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:6px;min-height:44px;padding:9px 12px;max-width:100%}button{color:var(--fg);background:var(--surface);border:1px solid var(--line);min-height:44px;padding:10px 14px;cursor:pointer}button:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.color-settings{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;border:1px solid var(--line);background:var(--surface)}.color-settings p{margin:0 auto 0 0;font-weight:600;font-size:14px}.color-settings label,.color-settings a{font-size:12px}.color-settings a{color:var(--accent)}.color-section{margin:64px 0}.color-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.color-filters{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}.color-filters label{display:flex;align-items:center;gap:10px;font-size:12px;min-width:0}.color-filters select{max-width:360px}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.color-card{border:1px solid var(--line);background:var(--surface);min-width:0}.color-card[hidden]{display:none}.palette-sample{position:relative;padding:26px;background:var(--sample-bg);color:var(--sample-fg);min-height:240px;overflow:hidden}.palette-sample small{font-size:11px}.palette-sample h2{position:relative;z-index:1;font-size:24px;margin:23px 0 10px}.palette-sample p{position:relative;z-index:1;font-size:12px;margin:0 0 24px}.palette-sample button{position:relative;z-index:1;background:var(--sample-accent);color:var(--sample-on);border:0;font-size:12px;border-radius:5px}.palette-shape{position:absolute;right:-25px;top:10px;width:160px;height:160px;background:var(--sample-soft);border-radius:50% 20% 50% 30%;transform:rotate(-12deg);opacity:.6}.color-card:has([aria-pressed=true]){outline:3px solid var(--accent);outline-offset:3px}.palette-swatches{display:flex;padding:13px;gap:6px}.palette-swatches button{min-width:0;flex:1;padding:0;background:none;border:0}.palette-swatches i{display:block;background:var(--swatch);height:32px;border:1px solid var(--line);border-radius:3px}.palette-swatches span{font-size:10px;line-height:25px}.palette-meta{padding:0 20px 22px;font-size:12px;line-height:1.7}.palette-meta p{color:var(--muted)}.palette-meta a{color:var(--accent)}#color-count,.color-live>p,.color-rule{color:var(--muted);font-size:13px;line-height:1.9}.color-live>.color-heading>a{font-size:13px;color:var(--accent)}.color-preview-wrap{background:var(--surface);padding:16px;border:1px solid var(--line)}#color-frame{display:block;width:100%;height:660px;border:0;background:var(--bg);margin:auto}.color-preview-wrap[data-width=phone] #color-frame{max-width:390px}.role-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin:22px 0}.role-list button{display:flex;gap:10px;align-items:center;text-align:left;min-width:0}.role-list i{width:28px;height:36px;flex-shrink:0;border:1px solid var(--line)}.role-list span{font-size:11px}.role-list strong{display:block;font-size:11px;margin-top:6px}#color-guide>p{color:var(--muted);font-size:13px;line-height:1.8}.originals summary{cursor:pointer;padding:20px 0;border-top:1px solid var(--line);font-size:18px}.original-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}.original-grid article{border:1px solid var(--line);padding:18px;min-width:0}.original-grid h3{font-size:14px}.original-grid a{font-size:12px;color:var(--accent)}.original-grid .palette-swatches{padding:0}.copy-status:not(:empty){position:fixed;z-index:200;bottom:16px;left:50%;transform:translateX(-50%);max-width:90%;padding:14px 22px;border:1px solid var(--line);background:var(--surface);color:var(--fg);box-shadow:0 5px 30px #0003;font-size:13px;pointer-events:none}
@media(max-width:1000px){.color-grid,.original-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.role-list{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:600px){.color-grid,.original-grid{grid-template-columns:1fr}.color-heading{display:block}.color-filters{gap:10px}.color-filters label{flex-wrap:wrap}.color-filters select{max-width:100%}.role-list{grid-template-columns:repeat(2,minmax(0,1fr))}.color-settings{padding:18px;gap:12px}.color-settings p{width:100%}.color-section{margin:40px 0}.color-preview-wrap{padding:0}#color-frame{height:660px}.color-filters:has(#color-example){display:block}.color-filters:has(#color-example) label{margin:12px 0}}