:root{--surround: light-dark(#f3ecdf, #1c222b);--tray: light-dark(#fffaf2, #2a313c);--ink: light-dark(#22262e, #f1ebe0);--muted: light-dark(#5b626c, #aab2bd);--accent: light-dark(#2a62c4, #8fb3ff);--tomato: light-dark(#c8372d, #ff7a6e);--sunflower: light-dark(#f2b705, #ffd04a);--paper: #fbf7ef;--focus-paper: #3a72d4;--on-paper: #22262e;--radius-tray: 18px;--radius-btn: 12px;--gap: 8px;--target: 44px;--shadow: 0 6px 18px rgb(0 0 0 / .16), 0 1px 3px rgb(0 0 0 / .12);--fade: .32s}:root{color-scheme:light dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:var(--surround);color:var(--ink);font:17px/1.55 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app>main{max-width:34rem;margin:0 auto;padding:24px 16px}#app>main h1{font-size:2.8rem;margin:.2rem 0 .6rem;letter-spacing:-.02em}#app>main p:nth-of-type(2){color:var(--muted)}#app>main p:last-child{color:var(--muted);font-size:.95rem;border-top:1px solid currentColor;padding-top:.8rem;margin-top:2rem}:where(button,input,select,[tabindex]):focus-visible,.pan-mix:focus-within{outline:3px solid var(--accent);outline-offset:2px}body,.tray,.corner{transition:background-color var(--fade) ease,color var(--fade) ease}.corner{position:fixed;top:12px;left:12px;display:flex;align-items:center;gap:var(--gap);padding:6px;border-radius:var(--radius-tray);background:var(--tray);box-shadow:var(--shadow);color:var(--ink)}.corner-btn{display:flex;align-items:center;justify-content:center;padding:0;border:2px solid currentColor;border-radius:10px;background:transparent;color:inherit;cursor:pointer}.corner-btn[aria-pressed=true]{border-color:var(--accent)}.tray{position:fixed;left:50%;bottom:12px;transform:translate(-50%);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:8px;max-width:calc(100vw - 24px);border-radius:var(--radius-tray);background:var(--tray);box-shadow:var(--shadow);color:var(--ink)}.tray-pans,.tray-size,.tray-history,.tray-sym{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.pan{position:relative;width:40px;height:40px;padding:0;border-radius:50%;border:2px solid var(--muted);cursor:pointer;display:block}.pan{display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -4px 6px #0000002e}.pan[aria-checked=true],.pan-on{border:4px solid var(--accent)}.pan-tick{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.pan-mix{overflow:hidden;border-style:dashed;width:32px;height:32px}.pan-mix-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.tray-well{width:40px;height:40px;display:flex;align-items:center;justify-content:center}.tray-dot{display:block;border-radius:50%;border:1px solid var(--muted);animation:tray-land .12s ease-out}@keyframes tray-land{0%{transform:scale(1.35)}to{transform:scale(1)}}.tray-range{width:120px;min-height:40px;accent-color:var(--accent)}.tray-value{min-width:4ch;font-size:.9rem;color:var(--muted)}.tray-btn{min-width:64px;min-height:40px;padding:0 12px;border-radius:12px;border:2px solid var(--muted);background:transparent;color:var(--ink);font:inherit;cursor:pointer}.tray-btn[aria-pressed=true]{border-color:var(--accent)}.tray-btn[aria-disabled=true]{opacity:.55;cursor:default}.well{flex:none;width:56px;height:56px;padding:0;border-radius:50%;border:2px solid var(--muted);background:var(--tray);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}.well[aria-pressed=true]{border-color:var(--accent);border-width:4px}.well-dish{fill:var(--tray);stroke:var(--muted);stroke-width:2}.well-puddle{stroke:var(--muted);stroke-width:1;transform-origin:28px 28px;animation:well-swirl .42s ease-out}@keyframes well-swirl{0%{transform:rotate(-90deg) scale(1.08);filter:brightness(1.15)}to{transform:rotate(0) scale(1);filter:none}}.well-rinse{flex:none;min-width:40px;width:40px;padding:0;display:flex;align-items:center;justify-content:center}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:480px){.tray{gap:8px}.tray-range{width:100px}}canvas{touch-action:none;cursor:crosshair}canvas:focus-visible{outline:3px solid var(--focus-paper);outline-offset:-3px}canvas.sheet-pan{cursor:grab}canvas.sheet-panning{cursor:grabbing}[hidden]{display:none!important}.rail{position:fixed;left:12px;top:84px;display:flex;flex-direction:column;gap:var(--gap);padding:var(--gap);border-radius:var(--radius-tray);background:var(--tray);box-shadow:var(--shadow);color:var(--ink)}.rail-tools{display:flex;flex-direction:column;gap:var(--gap)}.rail-item{position:relative}.rail-btn{width:48px;height:48px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:var(--radius-btn);border:2px solid var(--muted);background:transparent;color:var(--ink);cursor:pointer}.rail-btn[aria-pressed=true]{border-color:var(--accent)}.rail-btn[aria-disabled=true]{opacity:.55;cursor:default}.tip{display:none;position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);white-space:nowrap;padding:4px 8px;border-radius:8px;background:var(--tray);box-shadow:var(--shadow);font-size:.9rem;pointer-events:none}.rail-btn:hover+.tip,.rail-btn:focus-visible+.tip{display:block}.flyout{position:absolute;left:calc(100% + 8px);top:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--gap);padding:var(--gap);max-width:calc(100vw - 96px);border-radius:var(--radius-tray);background:var(--tray);box-shadow:var(--shadow)}.tuck{width:40px;height:40px;align-self:center;display:flex;align-items:center;justify-content:center;padding:0;border-radius:var(--radius-btn);border:2px solid var(--muted);background:transparent;color:var(--ink);cursor:pointer}.tray-open{animation:tray-pop .18s ease-out;transform-origin:left center}.rail-open{animation:tray-pop .18s ease-out;transform-origin:top center}@keyframes tray-pop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}#tray-body{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;min-width:0}@media(max-width:599px){.tray{max-width:calc(100vw - 16px);flex-wrap:nowrap}#tray-body{flex-wrap:wrap}.tray-pans{flex-wrap:nowrap;min-width:0;overflow-x:auto;scroll-snap-type:x proximity}#tray-body>.tray-pans{flex:1 1 0}.tray-pans>.tray-pans{flex:1 1 0}.tray-size{flex-basis:100%;justify-content:center}.tray-value{display:none}.pan{flex:none;scroll-snap-align:start}}@media(max-width:400px){.rail{left:8px;top:76px;padding:4px}.rail-btn{width:44px;height:44px}.flyout{max-width:calc(100vw - 80px)}.tray{bottom:8px;padding:6px}.tray-range{width:80px}}@media(max-height:480px){.rail{top:68px;max-height:calc(100vh - 76px);overflow-y:auto}.tray{bottom:6px}}