.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 32px}.mode-card{position:relative;display:flex;gap:6px;flex-direction:column;align-items:flex-start;text-align:left;padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);color:var(--foreground);cursor:pointer}.mode-card b{font-family:var(--font-display);font-size:23px;font-weight:500}.mode-card span{font-size:12px;line-height:1.5;color:var(--secondary)}.mode-card[aria-pressed=true]{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}.mode-card[aria-pressed=true] b{color:var(--accent-text)}
.paint-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.85fr);gap:32px;align-items:center;margin-bottom:48px}.paint-arena{width:100%}.paint-arena canvas{cursor:default;touch-action:pan-y}#paintNote{text-align:center;font-size:11px;line-height:1.6;color:var(--secondary);margin:0;padding:14px 12px}.mk .paint-controls h2{font-size:32px}.hex-picker{display:flex;align-items:end;gap:16px;margin-top:28px}.hex-picker .mk-field{flex:1;min-width:0}.hex-picker input[type=text]{width:100%;font-family:ui-monospace,monospace;font-size:21px;letter-spacing:.06em;text-transform:uppercase}.hex-picker input[type=color]{appearance:none;-webkit-appearance:none;flex:0 0 64px;width:64px;height:56px;border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px;background:var(--background);cursor:pointer}.hex-picker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.hex-picker input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}.hex-picker input[type=color]::-moz-color-swatch{border:0;border-radius:5px}.hex-picker input[aria-invalid=true]{border-color:#ef5979}.hex-hint{font-size:11px;color:var(--secondary);margin:12px 0 0!important;line-height:1.6}.hex-comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.hex-comparison>div{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm)}.hex-result-swatch{display:block;height:64px;border:1px solid #8992a5;border-radius:var(--radius-sm)}.hex-comparison small{font-size:11px;color:var(--secondary)}.hex-comparison b{font-family:ui-monospace,monospace;font-size:16px;letter-spacing:.04em}.mk #paintResult h2{font-size:25px;margin:16px 0 12px}
@media(max-width:1000px){.paint-layout{gap:20px}}
@media(max-width:700px){.mode-picker{gap:10px;margin-bottom:24px}.mode-card{padding:16px 12px}.mode-card b{font-size:20px}.mode-card span{font-size:10px}.paint-layout{grid-template-columns:1fr;gap:20px}.paint-arena{max-width:460px;margin:auto}.paint-controls{width:100%;padding:24px}.hex-picker{margin-top:20px}.hex-comparison{gap:12px}.mk .paint-controls h2{font-size:28px}}

.mode-card:disabled{cursor:not-allowed;border-style:dashed;opacity:.7}.mode-card:disabled span{color:var(--accent-text);font-weight:600}