/* Requested dark backdrop; paint swatches and image pixel colors stay untouched. */
:root{color-scheme:dark;--paper:#181818;--ink:#eee;--muted:#b4b4b4;--line:#3c3c3c;--green:#486544;--accent:#d69c76}
body,.topbar,.panel,.reference-toolbar,.contrast-control,.zoom-controls,.head-panel,.reference-pair,footer{background:#181818}
.button,select,dialog input[type=search],.color-inputs input,.palette-option,.wheel-readout{background:#252525;color:var(--ink)}
.reference-toolbar,.head-panel{border-color:var(--line)}
.segmented,.close-button{background:#282828}.segmented button{color:#bbb}.segmented .selected{background:#414141;color:#fff}
.text-button,summary,.palette-explainer a,.guide-copy a{color:#c2d0b7}.step{color:#b5c6a7}
.reference-stage,.wheel-stage{background:#181818}.reference-stage.dragging{background:#283126}
.canvas-caption{background:#181818dd;color:#ddd}.color-map{background:#222}.color-area{border-color:#181818}
.palette-option:has(input:checked){background:#293126;border-color:#8fa47e}.guide-copy p,.guide-copy li{color:#c6c6c6}
.notice{background:#3b301e;color:#eed5a9}.error{color:#f1a891}dialog::backdrop{background:#0009}
.paint-dot,.option-swatch{border-color:#ffffff40}.tone-button[aria-pressed=true]{border-color:#b7cba4;box-shadow:0 0 0 1px #b7cba4}
input[type=range],input[type=checkbox]{accent-color:#a4b795}.wheel-readout i{border-color:#ffffff50}
.recipe{background:#222822}.ingredient-secondary small{color:#c2cbb9}
.brand{gap:12px;min-width:0}.brand-logo{display:block;width:70px;height:58px;flex-shrink:0;overflow:hidden;position:relative}
.brand-logo img{position:absolute;width:78px;height:78px;object-fit:contain;left:-4px;top:-10px}
.brand-name{font-size:1.55rem;letter-spacing:1px;font-weight:600}.brand .brand-tagline{font:400 .8rem/1.7 'Segoe UI',Tahoma,Arial,sans-serif;color:#b4b4b4;letter-spacing:0;margin:0}
.icon-reset{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:34px;height:34px;border:1px solid var(--line);border-radius:7px;padding:7px;color:#d5d5d5;text-decoration:none;background:#252525}
.icon-reset svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-reset:hover:enabled{background:#393939}.photo-reset-action{display:flex;align-items:center}
.reference-pair #reference-stage{height:auto;min-height:530px}.head-stage{background:#000;min-height:300px;height:300px;flex:none}
.head-light-controls{padding-bottom:0}.head-light-controls input,.head-control-fields input{margin:5px 0 10px;min-height:20px}
.head-camera-controls{padding:0 15px 12px}.head-camera-controls>summary{font-size:.8rem;padding:6px 0}
.head-control-fields{padding-top:10px}.head-control-fields label{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.8rem}
.head-control-fields output{font-size:.75rem;color:var(--muted);white-space:nowrap}.head-gesture-help{font-size:.72rem;line-height:1.8;color:var(--muted)}
.head-credit{padding-top:2px}.head-heading .icon-reset{width:30px;height:30px;padding:6px}
@media(max-width:850px){.brand .brand-tagline{max-width:160px;font-size:.75rem}.brand{gap:8px}}
@media(max-width:680px){.brand{display:grid;grid-template-columns:55px auto;gap:0 8px}.brand-logo{width:55px;height:49px;grid-row:1/3}.brand-logo img{width:66px;height:66px;left:-5px;top:-8px}.brand-name{font-size:1.2rem}.brand .brand-tagline{font-size:.65rem;max-width:none}.topbar{gap:10px}.head-stage{min-height:230px}.reference-pair #reference-stage{min-height:460px}.head-camera-controls{padding:0 9px 10px}.head-control-fields label{font-size:.72rem;flex-wrap:wrap;gap:2px}.head-camera-controls>summary{font-size:.72rem}.head-control-fields output{font-size:.7rem}.head-light-controls label{font-size:.75rem}.head-light-controls input{min-height:22px}}

.site-credit{border:0;justify-content:center;gap:5px;padding:22px 4.5%;font-size:.8rem;color:var(--muted)}.site-credit a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
@media(max-width:680px){.head-stage{height:240px;min-height:240px}}
/* A light, code-drawn paint tube: only the body fill encodes the proportion. */
.paint-tube{display:flex;align-items:center;direction:ltr;min-width:0;filter:drop-shadow(0 2px 2px #0003)}
.paint-tube .ingredient-track{flex:1;min-width:0;min-height:48px;border-radius:3px 10px 10px 3px;background:#333833;border:1px solid #9aa29470;overflow:hidden}
.paint-tube .ingredient-track::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,#ffffff26 0%,#ffffff05 18%,transparent 45%,#00000009 65%,#00000045 100%);box-shadow:inset 0 1px 0 #ffffff30,inset 0 -2px 0 #ffffff09}
.paint-tube .ingredient-track strong{position:relative;z-index:1;padding:12px 10px;font-size:.875rem;font-weight:650;line-height:1.45}
.tube-crimp{width:7px;height:44px;flex:none;border-radius:2px 0 0 2px;border:1px solid #8e968b;background:repeating-linear-gradient(90deg,#a3aa9d 0 1px,#4e564c 1px 3px);box-shadow:inset 0 1px 1px #ffffff50}
.tube-neck{height:26px;width:10px;flex:none;background:linear-gradient(180deg,#b0b7a9,#555e52 44%,#727a6c 70%,#3d453a);clip-path:polygon(0 0,100% 22%,100% 78%,0 100%);margin-left:-1px}
.tube-cap{width:22px;height:31px;flex:none;border:1px solid #8c95846b;border-radius:2px 5px 5px 2px;background:repeating-linear-gradient(0deg,#454c41 0 2px,#242a22 2px 4px);box-shadow:inset 2px 0 3px #ffffff14,inset -2px 0 2px #0007}
.ingredient-secondary{padding-inline:4px}.paint-tube .ingredient-fill{transition:none}
.study-palette{height:auto;min-height:0;aspect-ratio:3/2;margin:14px 0 12px;border-radius:14px;background:#181818 url('assets/study-wood-palette.png') center/100% 100% no-repeat;overflow:visible;container-type:inline-size;isolation:isolate}
.palette-dab{position:absolute;display:grid;place-items:center;border-radius:50%;padding:0;border:1px solid #ffffff35;box-shadow:0 3px 5px #0006,inset 0 1px 2px #ffffff26;outline-offset:3px;line-height:1.25}
.palette-dab:hover{box-shadow:0 0 0 2px #ffffff90,0 4px 7px #0006}.palette-dab[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 5px #181818aa,0 4px 8px #0006;z-index:3}
.dab-label{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:86%;pointer-events:none}.dab-label strong{font-size:clamp(10px,1.5cqw,14px);font-weight:500;line-height:1.35}.dab-label>span{font-size:clamp(11px,2cqw,18px);font-weight:600;direction:ltr}
.satellite-dab svg{width:45%;height:45%;max-width:19px;max-height:19px;stroke:currentColor;stroke-width:1.6;fill:none;pointer-events:none}
.study-palette~.tone-heading{margin:12px 0 0}.study-palette~.tone-heading>span{font-size:.85rem}.study-palette~.tone-heading small{font-size:.75rem}
.recipe .comparison{margin-top:17px}
/* Equal reference viewports, with all four head settings in one closed drawer. */
.reference-pair{--reference-height:530px;align-items:start}
.reference-pair #reference-stage,.reference-pair .head-stage{height:var(--reference-height);min-height:var(--reference-height)}
.head-panel{position:relative}.head-heading{position:absolute;top:0;left:0;right:0;z-index:2;background:linear-gradient(#0009,transparent);pointer-events:none}.head-heading button{pointer-events:auto}
.head-camera-controls{padding:9px 15px 10px;border-top:1px solid var(--line)}.head-camera-controls>summary{font-size:.85rem}.head-control-fields{padding-top:13px}
@media(max-width:1100px){.reference-pair{--reference-height:460px}}
@media(max-width:680px){.reference-pair{--reference-height:400px}.head-camera-controls{padding:7px 9px 9px}.head-camera-controls>summary{font-size:.75rem}.head-control-fields label{font-size:.75rem}.head-control-fields input{min-height:22px}}
.photo-reference{min-width:0}.photo-reference .contrast-control{padding:12px;gap:9px}.photo-reference .contrast-control label{font-size:.8rem;width:100%}.photo-reference .contrast-control input{min-width:35px}.photo-reference .contrast-control output{min-width:34px;font-size:.75rem}
@media(max-width:680px){.photo-reference .contrast-control{padding:9px;gap:6px}.photo-reference .contrast-control label{font-size:.73rem}.photo-reference .contrast-control label span{display:none}.photo-reference .contrast-control output{min-width:28px}.photo-reference .icon-reset{width:28px;height:28px;padding:5px}}
@media(max-width:680px){.dab-label strong{display:none}.dab-label>span{font-size:clamp(8px,3.4cqw,12px)}.study-palette{margin:8px -7px 10px;width:calc(100% + 14px)}.palette-dab[aria-pressed=true]{box-shadow:0 0 0 1.5px #fff,0 0 0 3px #181818aa,0 2px 4px #0006}.satellite-dab svg{width:50%;height:50%}}