.shade-colors-section{margin-top:48px;margin-bottom:48px;scroll-margin-top:150px;color:#1d1d1f}
.shade-colors-section h2{font-size:clamp(26px,3.5vw,42px);line-height:1.18;letter-spacing:-.025em;margin:0 0 14px}
.shade-colors-note,.shade-color-help{color:#6e6e73;font-size:14px;line-height:1.6}
.shade-color-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;margin-top:24px;align-items:start}
.shade-color-preview{margin:0;min-width:0;background:#fff;border:1px solid #e9e9ed;border-radius:24px;padding:20px;text-align:center}
.shade-color-art{display:block;aspect-ratio:1;background:#fff;overflow:hidden;border-radius:16px;width:100%;color:inherit}
.shade-color-art svg{display:block;width:100%;height:100%;overflow:hidden}
button.shade-color-art{border:0;padding:0;cursor:zoom-in}
.shade-color-preview figcaption{padding:12px 0 0;font-weight:600;overflow-wrap:anywhere}
.shade-color-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.shade-color-controls label{font-size:13px;color:#6e6e73;display:grid;gap:8px;min-width:0}
.shade-color-controls select,.shade-color-controls input{box-sizing:border-box;width:100%;min-height:46px;border:1px solid #d2d2d7;border-radius:12px;padding:10px 12px;background:#fff;color:#1d1d1f;font:inherit;font-size:16px}
.shade-color-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-height:560px;overflow:auto;padding:3px}
.shade-color-option{appearance:none;background:#fff;border:1px solid #e5e5ea;border-radius:16px;padding:6px 6px 10px;cursor:pointer;color:#1d1d1f;font:inherit;min-width:0;text-align:center}
.shade-color-option>span:last-child{display:block;font-size:12px;line-height:1.5;padding-top:6px;overflow-wrap:anywhere}
.shade-color-option[aria-pressed=true]{border-color:#0071e3;box-shadow:0 0 0 2px #0071e3}
.shade-color-option:focus-visible,.shade-color-controls :focus-visible,.shade-color-clear:focus-visible,.shade-color-art:focus-visible{outline:3px solid #0071e3;outline-offset:3px}
.shade-color-status{min-height:24px;font-size:14px;line-height:1.5;color:#6e6e73;margin:16px 0 8px}
.shade-color-clear{border:0;background:transparent;color:#0071e3;cursor:pointer;font:inherit;font-size:14px;padding:10px 0;min-height:44px}
.shade-color-budget-link{display:inline-flex;color:#0071e3;font-weight:600;margin-top:14px;min-height:44px;align-items:center}
.shade-color-dialog{width:min(680px,90vw);max-height:88vh;padding:24px;border:0;border-radius:28px;background:#fff;box-sizing:border-box;color:#1d1d1f}
.shade-color-dialog::backdrop{background:rgba(0,0,0,.45)}
.shade-color-dialog .shade-color-art{max-height:65vh}
.shade-color-close{display:block;margin:0 0 12px auto;background:#f5f5f7;border:0;border-radius:50%;width:44px;height:44px;cursor:pointer;font-size:24px;color:#1d1d1f}
.shade-color-dialog-label{text-align:center;font-weight:600;font-size:18px;margin:14px 0}
.shade-calculator .shade-colors-section{padding:24px;background:#f5f5f7;border-radius:24px;margin:24px 0}
.shade-calculator .shade-colors-section h2{font-size:26px}
.shade-calculator .shade-color-options{max-height:420px}
@media(max-width:700px){.shade-color-layout{grid-template-columns:1fr;gap:20px}.shade-color-preview{padding:12px}.shade-color-preview .shade-color-art{max-height:300px}.shade-color-controls{grid-template-columns:1fr}.shade-color-options{max-height:440px;gap:10px}.shade-calculator .shade-colors-section{padding:16px}.shade-colors-section{scroll-margin-top:100px}.shade-color-dialog{padding:16px}.shade-color-option>span:last-child{font-size:12px}}
.shade-day-night{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:32px;margin-top:32px;margin-bottom:48px;padding:28px;background:#f5f5f7;border-radius:28px}.shade-day-night[hidden]{display:none}.shade-day-night img{display:block;width:100%;height:440px;object-fit:contain;background:#fff;border-radius:24px}.shade-day-night h2{font-size:clamp(26px,3vw,42px);line-height:1.15}.shade-day-night p{line-height:1.7;color:#6e6e73}.shade-day-night .shade-colors-note{font-size:13px}@media(max-width:700px){.shade-day-night{grid-template-columns:1fr;padding:20px;gap:12px}.shade-day-night img{height:350px}}
.shade-color-art svg.shade-color-distant{width:80%;height:80%;margin:auto}