.colorium-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:34px 38px;border:1px solid var(--line);background:radial-gradient(circle at 75% 15%,rgba(209,151,54,.16),transparent 34%),linear-gradient(135deg,#171d20,#0c1114);box-shadow:inset 4px 0 #c58b31}.colorium-hero h2{margin:5px 0 8px;color:#f3eadb;font:46px/1 Georgia,serif}.colorium-hero p:last-child{margin:0;color:#9da9b0}.colorium-active{display:flex;align-items:center;gap:13px;padding:12px 16px;border:1px solid #495157;background:#0a0f12}.colorium-active>span{width:54px;height:54px;border:2px solid #d1ae69;box-shadow:0 0 18px rgba(0,0,0,.55)}.colorium-active div{display:grid;gap:4px}.colorium-active small,.colorium-card-head .eyebrow{color:#dba64b;font-weight:800;letter-spacing:.12em}.colorium-active b{font-size:18px}
.colorium-body{padding:26px 0 42px}.colorium-section-title{margin:0 0 14px;padding-left:15px;border-left:3px solid #d49a3e}.colorium-section-title h3{margin:3px 0 0;color:#eee8df;font:27px Georgia,serif}.colorium-section-title p{margin:0}.colorium-section-title.mixer-title{margin-top:34px;padding-top:2px}.colorium-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.wheel-layout{grid-template-columns:minmax(330px,.78fr) minmax(460px,1.22fr)}.colorium-body .card{border-color:#303a3f;background:linear-gradient(145deg,#151c20,#0f1518);box-shadow:0 12px 32px rgba(0,0,0,.18)}.colorium-tool,.colorium-wide,.colorium-wheel-card{padding:26px}.colorium-wide{margin-bottom:18px}.colorium-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px}.colorium-card-head h3{margin:4px 0 0;color:#f1ece4;font:25px Georgia,serif}.colorium-card-head p{margin:0}.color-wheel{display:block;width:min(100%,360px);height:auto;margin:0 auto;cursor:crosshair;filter:drop-shadow(0 12px 18px #000)}.wheel-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px}.wheel-controls label{display:flex;align-items:center;gap:10px;color:#9ca8af}.wheel-controls input,.mixer-row label input{accent-color:#d79d3d}.wheel-controls strong{font-family:monospace;color:#e7bd6e}.colorium-toggle,.harmony-modes{display:flex;flex-wrap:wrap;gap:8px}.harmony-modes{margin-bottom:22px}.colorium-body .chip{padding:9px 12px;border:1px solid #394348;background:#11181b;color:#b3bec4;cursor:pointer}.colorium-body .chip:hover,.colorium-body .chip.active{border-color:#c58b31;color:#f1c46d;background:#231d12}.harmony-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.colorium-swatch{min-width:0}.colorium-swatch>span{display:block;height:76px;border:1px solid rgba(255,255,255,.18);background:var(--swatch);box-shadow:inset 0 0 0 3px rgba(0,0,0,.14)}.colorium-swatch b,.colorium-swatch small{display:block;margin-top:7px;overflow:hidden;text-overflow:ellipsis}.colorium-swatch small{margin-top:2px;color:#849199;font-family:monospace}
.tone-ramp{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:10px;overflow-x:auto;padding-bottom:5px}.tone-ramp>div{min-width:110px;padding:10px;border:1px solid #273136;background:#0b1114}.tone-ramp .colorium-swatch>span{height:92px}.colorium-paint{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #263035}.colorium-paint>span{flex:0 0 24px;height:35px;border:1px solid #697277}.colorium-paint b,.colorium-paint small{display:block;font-size:12px}.colorium-paint small{margin-top:3px;color:#87949a}
.mixer-list{display:grid;gap:10px}.mixer-row{display:grid;grid-template-columns:46px minmax(120px,1fr) minmax(145px,1.1fr) 42px;align-items:center;gap:10px;padding:10px;border:1px solid #303a3f;background:#0c1215}.mixer-row input[type=color]{width:46px;height:46px;padding:2px;border:1px solid #525b5f;background:#0d1215}.mixer-row>input:not([type=color]){width:100%;min-height:42px;padding:8px 11px;border:1px solid #354047;background:#0b1114;color:#e7e3dc}.mixer-row label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;color:#d5a853}.mixer-row label b{min-width:54px;white-space:nowrap;font-size:12px}.mix-result{display:flex;align-items:center;gap:18px;margin-top:20px;padding:16px;border-left:3px solid #d79d3d;background:#191810}.mix-result>span{flex:0 0 90px;width:90px;height:90px;border:2px solid #d7b66d}.mix-result h3{margin:3px 0;font-size:25px}.mix-result p{margin:0;color:#9da7ac}.catalog-color-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #293238}.catalog-color-row>span{flex:0 0 38px;width:38px;height:38px;border:1px solid #788085}.catalog-color-row b,.catalog-color-row small{display:block}.catalog-color-row small{color:#86949a}.colorium-caveat{padding-left:12px;border-left:2px solid #8b672b;color:#919da3;font-size:13px}
@media(max-width:1180px){.tone-ramp{grid-template-columns:repeat(4,minmax(125px,1fr))}}
@media(max-width:850px){.colorium-hero,.colorium-card-head{align-items:stretch;flex-direction:column}.colorium-grid,.wheel-layout{grid-template-columns:1fr}.mixer-row{grid-template-columns:42px 1fr 42px}.mixer-row label{grid-column:1/-1}}
@media(max-width:560px){.colorium-hero{padding:24px}.colorium-hero h2{font-size:38px}.colorium-tool,.colorium-wide,.colorium-wheel-card{padding:18px}.tone-ramp{grid-template-columns:repeat(2,minmax(130px,1fr))}}