:root{color-scheme:light dark;font-family:system-ui,sans-serif}body{margin:0}.shell{display:flex;flex-direction:column;height:100vh}.app{display:flex;gap:24px;padding:24px;align-items:flex-start;flex:1;overflow:auto}.palette-panel{min-width:220px;width:280px}.palette-panel ul{list-style:none;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.palette-panel li{display:flex;align-items:center;gap:6px}.palette-panel li .label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.palette-toggle,.palette-strip{display:none}.swatch{display:inline-block;width:32px;height:32px;border-radius:5px;border:1px solid rgba(128,128,128,.5);vertical-align:middle}.lab-plane-frame{display:inline-block;position:relative;border:1px solid rgba(128,128,128,.5);line-height:0}.lab-plane{display:block;cursor:crosshair;touch-action:manipulation}.lab-plane,.image-canvas{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.lab-plane-marker{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;pointer-events:none}.webgl-error{max-width:512px;line-height:1.5;padding:16px}.l-slider{display:flex;flex-direction:column;gap:8px;width:84px;align-items:center}.l-slider label{font-variant-numeric:tabular-nums;white-space:nowrap}.l-slider input{writing-mode:vertical-lr;direction:rtl;height:512px}.readout{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}.readout .swatch{width:44px;height:44px;border-radius:6px}.disclaimer{max-width:512px;font-size:.8rem;opacity:.7}.gamut-layout{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:start;grid-template-areas:"plane slider" "info slider";column-gap:24px}.gamut-plane{grid-area:plane}.gamut-slider{grid-area:slider}.gamut-info{grid-area:info}.color-search{position:relative}.color-search input{width:100%;padding:6px 8px;box-sizing:border-box}.suggestions{position:absolute;z-index:10;left:0;right:auto;margin:2px 0 0;padding:4px;min-width:100%;width:max-content;max-width:min(480px,90vw);list-style:none;background:Canvas;border:1px solid rgba(128,128,128,.5);border-radius:6px;max-height:280px;overflow-y:auto}.suggestions li{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:4px;cursor:pointer}.suggestions .label{white-space:nowrap}.suggestions .opacity-badge{margin-left:4px}.suggestions li.highlighted{background:#80808040}.suggestions .sublabel{opacity:.65;margin-left:auto}.palette-panel li button{cursor:pointer}.gamut-actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.gamut-actions button{cursor:pointer}.gamut-actions .hint{flex-basis:100%;margin:0;font-size:.85rem;opacity:.7}.opacity-badge{flex-shrink:0;padding:1px 5px;border:1px solid currentColor;border-radius:8px;font-size:.65rem;font-weight:600;opacity:.7;cursor:help}.affiliate-link{flex-shrink:0;font-size:.75rem;white-space:nowrap;text-decoration:none;padding:2px 6px;border:1px solid rgba(128,128,128,.5);border-radius:8px;opacity:.85}.affiliate-link:hover{opacity:1}.affiliate-disclosure{margin:8px 0 0;font-size:.72rem;opacity:.6;line-height:1.4}.recipe-shopping{margin-top:16px}.recipe-shopping ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}.recipe-shopping li{display:flex;align-items:center;gap:8px}.recipe-shopping li .label{flex:1;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 24px;border-bottom:1px solid rgba(128,128,128,.3)}.topbar h1{margin:0;font-size:1.4rem}.topbar-nav{display:flex;gap:8px}.topbar-nav button{font-size:1rem;cursor:pointer}.modal-overlay{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#0006}.modal{background:Canvas;border:1px solid rgba(128,128,128,.5);border-radius:8px;padding:20px;min-width:320px;max-width:90vw;display:grid;gap:12px}.modal form{display:grid;gap:8px}.modal label{display:grid;gap:4px}.form-error{color:#c0392b;margin:0;font-size:.9rem}.modal-close{justify-self:end;cursor:pointer}.modal.library{min-width:420px;max-height:80vh;overflow-y:auto}.library-save{display:grid;gap:8px}.library-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.library-list li{display:flex;align-items:center;gap:10px;padding:6px 8px;border:1px solid rgba(128,128,128,.3);border-radius:6px;flex-wrap:wrap}.swatch.mini{width:14px;height:14px;border-radius:3px}.library-swatches{display:inline-flex;gap:2px}.library-name{font-weight:600}.library-meta{opacity:.65;font-size:.85rem;margin-left:auto}.library-actions{display:inline-flex;gap:6px}.library-actions button{cursor:pointer}.library-notice{margin:0;font-size:.9rem;opacity:.8}.recipe-drawer{position:fixed;top:0;right:0;bottom:0;width:min(720px,92vw);background:Canvas;border-left:1px solid rgba(128,128,128,.5);box-shadow:-4px 0 16px #0000001f;padding:1rem;overflow-y:auto;z-index:30}.recipe-drawer-header{display:flex;align-items:center;gap:.5rem}.recipe-drawer-header h3{flex:1;margin:0}.recipe-steps{padding-left:1.25rem;display:flex;flex-direction:column;gap:.75rem}.recipe-step p{margin:.15rem 0}.recipe-drops{font-size:1.3rem;line-height:1.1;letter-spacing:.15em;opacity:.7}.recipe-result .swatch{width:64px;height:64px;border-radius:8px}.recipe-shopping .swatch{width:22px;height:22px;border-radius:4px;flex:none}.recipe-summary{margin-top:1rem;display:flex;flex-wrap:wrap;gap:1.25rem;align-items:flex-start}.color-compare{display:inline-flex;flex-direction:column;gap:.35rem}.color-compare-pair{display:inline-flex;border:1px solid rgba(128,128,128,.6);border-radius:8px;overflow:hidden}.color-compare-half{width:88px;height:88px;display:block}.color-compare-half+.color-compare-half{border-left:1px solid rgba(128,128,128,.6)}.color-compare-labels{display:flex;justify-content:space-around;font-size:.85rem;opacity:.8}.recipe-advice{flex:1;min-width:12rem}.recipe-advice ul{margin:.35rem 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.3rem}.recipe-advice li{line-height:1.35}.recipe-tabs{display:flex;gap:.5rem;margin-top:.75rem;margin-bottom:.75rem}.recipe-tabs .active{font-weight:600;text-decoration:underline}.gamut-note{font-size:.8em;opacity:.65}.recipe-open{margin-top:.5rem;cursor:pointer}.history-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.5rem}.history-list li{display:flex;align-items:center;gap:.5rem}.history-pigments{flex:1;font-size:.9em;opacity:.75;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-footer{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:12px 24px;border-top:1px solid rgba(128,128,128,.3);font-size:.8rem;opacity:.7}.site-footer a{color:inherit;text-decoration:none}.site-footer a:hover{text-decoration:underline;opacity:1}.turnstile-slot:empty{display:none}.recipe-verdict{margin:0 0 .5rem;font-weight:600}.recipe-verdict.achievable{color:#2e7d32}.recipe-verdict.close{color:#b26a00}.recipe-verdict.out-of-palette{color:#c0392b}.main-tabs{display:flex;gap:4px;margin-bottom:12px;border-bottom:1px solid rgba(128,128,128,.4)}.main-tabs button{border:none;background:none;padding:8px 16px;cursor:pointer;font:inherit;border-bottom:2px solid transparent}.main-tabs button.active{border-bottom-color:currentColor;font-weight:600}.image-panel{width:720px;max-width:100%}.image-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:320px;border:2px dashed rgba(128,128,128,.5);border-radius:8px;padding:24px;text-align:center}.image-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:8px;flex-wrap:wrap}.camera-button{display:none}@media(pointer:coarse){.camera-button{display:inline-block}}.image-frame{width:min(100%,calc(max(200px,min(70vh,100vh - 340px)) * var(--ratio, 1)));position:relative;line-height:0;box-sizing:border-box;border:1px solid rgba(128,128,128,.5)}.image-canvas{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation}.image-marker{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000;pointer-events:none}.magnifier{position:fixed;width:120px;height:120px;border-radius:50%;pointer-events:none;z-index:50;border:2px solid #fff;box-shadow:0 0 0 1px #000,0 4px 12px #00000059}.image-readout{margin-top:8px;display:flex;flex-direction:column;gap:4px}.feasibility{margin:0;font-size:.9rem}.feasibility.likely{color:#2e7d32}.feasibility.unlikely{color:#b26a00}.image-actions{display:flex;gap:8px;flex-wrap:wrap}.image-actions .recipe-open{margin-top:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(max-width:767px){.gamut-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"plane" "slider" "info";row-gap:12px}.lab-plane-frame{display:block;width:100%;max-width:512px;box-sizing:border-box}.lab-plane{width:100%;height:auto}.l-slider{flex-direction:row;width:100%}.l-slider input{writing-mode:horizontal-tb;direction:ltr;height:auto;width:auto;flex:1}.l-slider label{flex:none;min-width:4.5em}input:not([type=range]):not([type=file]),select,textarea{font-size:16px}.suggestions li{flex-wrap:wrap}.suggestions .label{white-space:normal;min-width:0}.modal-close,.topbar-nav button{min-height:44px;min-width:44px}.modal .modal-close{position:sticky;bottom:0}.palette-panel h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.palette-toggle{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:44px;font:inherit;font-weight:600;cursor:pointer}.palette-strip{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.palette-strip .swatch{width:24px;height:24px;border-radius:4px}.palette-panel[data-expanded=true] .palette-strip,.palette-panel[data-expanded=false] .palette-body{display:none}.palette-panel li button,.palette-panel li .affiliate-link{min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center}.shell{height:auto;min-height:100dvh}.app{flex-direction:column;align-items:stretch;padding:12px;gap:12px;overflow:visible}.palette-panel{width:100%;min-width:0}main{width:100%;min-width:0}.topbar{flex-wrap:wrap;gap:8px;padding:8px 12px}.topbar h1{font-size:1.2rem}.main-tabs button{min-height:44px}.suggestions{left:0;right:0;width:auto;min-width:0;max-width:none}.image-panel{width:100%}.image-frame{width:min(100%,calc(60vh * var(--ratio, 1)))}.recipe-drawer{left:0;width:100%;height:100vh;height:100dvh;border-left:none;box-shadow:none;box-sizing:border-box}.modal-overlay{place-items:stretch}.modal,.modal.library{min-width:0;width:auto;max-width:none;height:100vh;max-height:100vh;height:100dvh;max-height:100dvh;border:none;border-radius:0;overflow-y:auto;box-sizing:border-box;align-content:start}}