: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[aria-pressed=true],.pan-on{border:4px solid var(--accent)}.pan-mix{overflow:hidden;border-style:dashed}.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}@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}