: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}.palette-panel ul{list-style:none;padding:0;display:grid;gap:8px}.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;border:1px solid rgba(128,128,128,.5);line-height:0}.lab-plane{display:block;cursor:crosshair}.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}.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:0;margin:2px 0 0;padding:4px;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 li.highlighted{background:#80808040}.suggestions .sublabel{opacity:.65;margin-left:auto}.palette-panel li button{margin-left:auto;cursor:pointer}.palette-panel li{display:flex;align-items:center;gap:8px}.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}.palette-panel li .opacity-badge{margin-left:auto}.palette-panel li .opacity-badge+button{margin-left: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}.account-menu{position:relative}.account-menu summary{cursor:pointer;list-style:none;padding:4px 8px;font-size:1.05rem}.menu-chip{display:inline-block;margin-left:8px;padding:2px 8px;border:1px solid rgba(128,128,128,.6);border-radius:6px;font-size:.85rem;font-weight:600}.topbar>button{font-size:1rem;cursor:pointer}.account-menu-items{position:absolute;right:0;z-index:20;display:grid;gap:4px;padding:8px;background:Canvas;border:1px solid rgba(128,128,128,.5);border-radius:6px;min-width:160px}.account-menu-items button{cursor:pointer;text-align:left}.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-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}.recipe-paywall{border:1px solid rgba(128,128,128,.5);border-radius:8px;padding:.75rem;margin-top:.5rem}.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}.sub-status{font-size:.85rem;opacity:.75;margin:.25rem 0}