:root{--paper: #f2e7d3;--paper-deep: #e0cead;--ink: #3a2f26;--ink-soft: #6b5a49;--wood: #96683f;--wood-dark: #6d4a2e;--wood-deep: #4e341f;--rust: #c8532c;--grass: #5d8c42;--shadow: rgba(58, 41, 26, .3);--radius: 13px;--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E")}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:#2b2a26;color:var(--ink);font-family:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif;-webkit-text-size-adjust:100%}#app{position:relative;width:100%;height:100%}#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}button:focus-visible,input:focus-visible{outline:2px solid var(--rust);outline-offset:2px}.panel{border-radius:var(--radius);background-color:var(--paper);background-image:var(--grain),linear-gradient(168deg,#f6ecd9 0%,var(--paper-deep) 100%);background-blend-mode:soft-light,normal;border:1px solid rgba(109,74,46,.4);box-shadow:0 7px 20px var(--shadow),inset 0 1px #ffffffa6}.masthead{position:absolute;top:0;left:0;padding:18px 22px;pointer-events:none;text-shadow:0 1px 0 rgba(255,250,236,.5);z-index:3}.masthead h1{margin:0;font-size:1.55rem;font-weight:600;color:#4a3524;transform:rotate(-1.2deg)}.masthead__note{margin:2px 0 0;font-size:.78rem;color:var(--ink-soft);font-style:italic}.jarstand,.jar,.shelf,.shelf__pots{pointer-events:none}.brush,.pot,.jar__glass,.shelf__board{pointer-events:auto}.jarstand{position:absolute;left:26px;top:50%;transform:translateY(-50%);width:132px;height:300px;z-index:3}.jar{position:absolute;inset:0 0 74px;display:flex;justify-content:center;align-items:flex-end;gap:2px}.jar__glass{position:absolute;left:14px;right:14px;bottom:0;height:104px;border-radius:8px 8px 22px 22px/6px 6px 30px 30px;background:linear-gradient(100deg,#d6e4e2b8,#eef6f480 22%,#b2c7c59e 60%,#e2eeec8c);border:1px solid rgba(120,145,142,.55);border-top:none;box-shadow:inset 0 -14px 22px #607a7866,inset 0 3px #ffffff80,0 8px 16px var(--shadow);backdrop-filter:blur(1px)}.brush{position:relative;width:21px;height:100%;padding:0;border:none;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transition:transform .16s ease}.brush:nth-child(1){transform:rotate(-9deg) translateY(6px)}.brush:nth-child(2){transform:rotate(-4deg) translateY(1px)}.brush:nth-child(3){transform:rotate(1deg)}.brush:nth-child(4){transform:rotate(5deg) translateY(3px)}.brush:nth-child(5){transform:rotate(10deg) translateY(8px)}.brush:hover{filter:brightness(1.07)}.brush.is-held:nth-child(1){transform:rotate(-9deg) translateY(-24px)}.brush.is-held:nth-child(2){transform:rotate(-4deg) translateY(-29px)}.brush.is-held:nth-child(3){transform:rotate(1deg) translateY(-30px)}.brush.is-held:nth-child(4){transform:rotate(5deg) translateY(-27px)}.brush.is-held:nth-child(5){transform:rotate(10deg) translateY(-22px)}.brush__handle{order:3;width:11px;flex:1;border-radius:3px 3px 5px 5px;background:linear-gradient(90deg,#5c3f28,#a5764c 38%,#c79a6c 52%,#7a5334);box-shadow:inset 0 0 0 1px #3c281859}.brush__ferrule{order:2;width:13px;height:26px;border-radius:2px;background:linear-gradient(90deg,#7e8a90,#d7dfe2 40%,#eef3f4 52%,#8b979c);box-shadow:inset 0 -2px #0003}.brush__tip{order:1;margin-bottom:-1px;transition:filter .16s ease}.brush.is-held .brush__tip{filter:drop-shadow(0 0 7px rgba(255,206,120,.95)) drop-shadow(0 0 2px rgba(255,236,190,.9))}.brush--liner .brush__tip{width:5px;height:46px;background:linear-gradient(180deg,#2a2118,#4a3a28);clip-path:polygon(50% 0,100% 26%,100% 100%,0 100%,0 26%)}.brush--round .brush__tip{width:15px;height:40px;background:linear-gradient(180deg,#33291d,#5a462f);clip-path:polygon(50% 0,88% 20%,100% 62%,82% 100%,18% 100%,0 62%,12% 20%)}.brush--flat .brush__tip{width:22px;height:34px;background:linear-gradient(180deg,#3b2f20,#634c33);clip-path:polygon(6% 0,94% 0,100% 100%,0 100%)}.brush--airbrush .brush__tip{width:18px;height:34px;border-radius:50% 50% 40% 40%;background:radial-gradient(ellipse at 50% 35%,#6f5b41,#4a3a28 70%,#3a2c1d);filter:blur(.6px)}.brush--eraser .brush__tip{width:19px;height:30px;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#f0d7d2,#d9a79c);box-shadow:inset 0 -3px #96645a59}.bench{position:absolute;top:22px;right:22px;width:232px;padding:14px 16px 12px;display:grid;gap:9px;transform:rotate(.5deg);z-index:3}.bench__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding-bottom:6px;border-bottom:1px dashed rgba(109,74,46,.4)}.bench__brushname{font-size:1.05rem;color:#4a3524}.bench.is-erasing .bench__brushname:after{content:" \2014rubbing out";font-size:.68rem;font-style:italic;color:var(--ink-soft)}.bench__undo{display:flex;gap:4px}.bench__undo button{width:26px;height:24px;font-size:.95rem;line-height:1;color:var(--ink);background:linear-gradient(180deg,#f3e9d6,var(--paper-deep));border:1px solid var(--wood-dark);border-radius:5px;cursor:pointer}.bench__undo button:disabled{opacity:.35;cursor:default}.dial{display:grid;grid-template-columns:3.3rem 1fr 2.4rem;align-items:center;gap:7px;font-size:.76rem;color:var(--ink-soft)}.dial em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}.bench__base{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 10px;margin-top:4px;padding-top:10px;border-top:1px dashed rgba(109,74,46,.4);font-size:.78rem}.bench__base input[type=color]{width:34px;height:34px;padding:0;border:2px solid var(--wood-dark);border-radius:50%;background:none;cursor:pointer;box-shadow:inset 0 -3px 6px #00000040,0 2px 4px var(--shadow)}.bench__base input[type=color]::-webkit-color-swatch-wrapper{padding:3px}.bench__base input[type=color]::-webkit-color-swatch{border:none;border-radius:50%}#clear-artwork{grid-column:1 / -1;padding:5px 10px;font:inherit;font-size:.76rem;color:var(--ink);background:linear-gradient(180deg,#f3e9d6,var(--paper-deep));border:1px solid var(--wood-dark);border-radius:6px;cursor:pointer}input[type=range]{appearance:none;width:100%;margin:0;background:none;cursor:ew-resize}input[type=range]::-webkit-slider-runnable-track{height:7px;border-radius:4px;background:linear-gradient(180deg,var(--wood-deep),var(--wood));box-shadow:inset 0 1px 3px #00000073}input[type=range]::-moz-range-track{height:7px;border-radius:4px;background:linear-gradient(180deg,var(--wood-deep),var(--wood));box-shadow:inset 0 1px 3px #00000073}input[type=range]::-webkit-slider-thumb{appearance:none;width:17px;height:17px;margin-top:-5px;border-radius:50%;border:2px solid #fdf6e6;background:radial-gradient(circle at 34% 30%,#f0a483,var(--rust) 62%,#8f3418);box-shadow:0 2px 4px var(--shadow)}input[type=range]::-moz-range-thumb{width:17px;height:17px;border-radius:50%;border:2px solid #fdf6e6;background:radial-gradient(circle at 34% 30%,#f0a483,var(--rust) 62%,#8f3418);box-shadow:0 2px 4px var(--shadow)}.shelf{position:absolute;left:0;right:0;bottom:92px;display:flex;flex-direction:column;align-items:center;transform:rotate(-.3deg);z-index:3}.shelf__pots{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:6px;width:min(700px,72vw);padding:0 8px 4px}.shelf__board{width:min(752px,78vw);height:13px;border-radius:3px;background:linear-gradient(180deg,#a9754a 0%,var(--wood-dark) 45%,#4a3120 100%);box-shadow:0 6px 14px var(--shadow),inset 0 1px #ffe2bd66}.pot{position:relative;width:28px;height:28px;padding:0;border:none;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 33% 27%,color-mix(in srgb,var(--pot) 76%,white) 0%,var(--pot) 34%,color-mix(in srgb,var(--pot) 74%,black) 100%);box-shadow:inset 0 -4px 7px #00000059,inset 0 2px 3px #fff6,0 3px 5px var(--shadow);transition:transform .14s ease,box-shadow .14s ease}.pot:before{content:"";position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(150deg,#fdf3e2,#b9a687 42%,#7d6a4f);z-index:-1;box-shadow:0 2px 4px var(--shadow)}.pot:hover{transform:translateY(-3px)}.pot.is-held{transform:translateY(-11px) rotate(-9deg) scale(1.08);box-shadow:inset 0 -4px 7px #00000059,inset 0 2px 3px #ffffff80,0 9px 12px var(--shadow)}.pot--mix:after{content:"";position:absolute;inset:6px;border-radius:50%;background:conic-gradient(#e04a3a,#f2b705,#4faa4a,#3f6fc4,#8c4fbf,#e04a3a);box-shadow:inset 0 0 4px #00000073}.mixer{position:fixed;z-index:40;width:222px;padding:14px;display:grid;gap:10px;transform:rotate(-.6deg);box-shadow:0 14px 34px #281c1266,inset 0 1px #ffffffa6}.mixer__wheelwrap{position:relative;width:190px;height:190px;margin:0 auto}.mixer__wheel{display:block;border-radius:50%;cursor:crosshair;box-shadow:0 3px 8px var(--shadow),inset 0 0 0 1px #6d4a2e4d;touch-action:none}.mixer__marker{position:absolute;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;border:2px solid #fffaf0;box-shadow:0 0 0 1px #00000073,0 2px 4px var(--shadow);pointer-events:none}.mixer__value{display:grid;gap:4px;font-size:.72rem;font-style:italic;color:var(--ink-soft)}.mixer__foot{display:flex;align-items:center;gap:10px}.mixer__preview{width:30px;height:30px;border-radius:50%;border:2px solid var(--wood-dark);box-shadow:inset 0 -3px 6px #0000004d}.mixer__done{flex:1;padding:6px 8px;font:inherit;font-size:.8rem;color:var(--ink);background:linear-gradient(180deg,#f3e9d6,var(--paper-deep));border:1px solid var(--wood-dark);border-radius:6px;cursor:pointer}.spinner{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translate(-50%);width:min(560px,74vw);padding:9px 18px 11px;z-index:3}.spinner__label{display:block;margin-bottom:4px;font-size:.74rem;font-style:italic;color:var(--ink-soft);text-align:center}#rotation::-webkit-slider-thumb{width:26px;height:26px;margin-top:-10px}#rotation::-moz-range-thumb{width:26px;height:26px}.phone-gate{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:linear-gradient(160deg,#7fb4d8,#f0dfc0 55%,var(--grass))}.phone-gate__card{max-width:22rem;padding:26px 24px;text-align:center;border-radius:18px;background:var(--paper);border:1px solid rgba(109,74,46,.4);box-shadow:0 12px 30px #281e1459;transform:rotate(-.8deg)}.phone-gate__card h2{margin:0 0 10px;font-size:1.3rem;color:#4a3524}.phone-gate__card p{margin:0 0 8px;line-height:1.5;color:var(--ink-soft)}.phone-gate__small{font-size:.82rem;font-style:italic}@media(max-width:1024px){.jarstand{left:10px;width:112px;transform:translateY(-50%) scale(.88)}.bench{width:208px;right:12px;top:12px}.shelf__pots{max-width:58vw}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}.topbar{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;z-index:4}.topbar__save{padding:7px 18px;font:inherit;font-size:.86rem;color:#fdf6e6;background:linear-gradient(180deg,#d9683f 0%,var(--rust) 55%,#9c3d1e 100%);border:1px solid #8f3418;border-radius:8px;box-shadow:0 3px 7px var(--shadow),inset 0 1px #ffe0c880;cursor:pointer}.topbar__save:hover{filter:brightness(1.06)}.topbar__link{padding:5px 10px;font:inherit;font-size:.8rem;color:var(--ink);text-decoration:none;background:#f2e7d3d1;border:1px solid rgba(109,74,46,.45);border-radius:7px;cursor:pointer}.topbar__link:hover{background:var(--paper)}.masthead__note[data-state=saving]{opacity:.7}.masthead__note[data-state=failed]{color:#9c3d1e;font-style:normal}.signin,.namer{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;background:#261c1273;backdrop-filter:blur(2px)}.signin__card,.namer__card{width:min(340px,100%);padding:22px 22px 18px;display:grid;gap:11px;transform:rotate(-.5deg)}.signin__title,.namer__title{margin:0;font-size:1.3rem;color:#4a3524}.signin__blurb,.signin__lost,.namer__blurb{margin:0;font-size:.78rem;line-height:1.45;color:var(--ink-soft)}.signin__lost{font-style:italic;padding-top:9px;border-top:1px dashed rgba(109,74,46,.4)}.signin__field,.namer__field{display:grid;gap:4px;font-size:.78rem;color:var(--ink-soft)}.signin__field input,.namer__field input{padding:7px 9px;font:inherit;font-size:.92rem;color:var(--ink);background:#fdf8ec;border:1px solid var(--wood-dark);border-radius:6px}.signin__error{margin:0;font-size:.78rem;color:#9c3d1e}.signin__detail{margin:-4px 0 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;line-height:1.45;color:var(--ink-soft);word-break:break-word}.signin__actions,.namer__actions{display:flex;gap:8px}.signin__go,.signin__cancel,.namer__go,.namer__cancel{padding:7px 14px;font:inherit;font-size:.85rem;border-radius:7px;cursor:pointer}.signin__go,.namer__go{flex:1;color:#fdf6e6;background:linear-gradient(180deg,#d9683f,#9c3d1e);border:1px solid #8f3418}.signin__go:disabled,.namer__go:disabled{opacity:.6;cursor:default}.signin__cancel,.namer__cancel{color:var(--ink);background:var(--paper-deep);border:1px solid var(--wood-dark)}.signin__swap{margin:0}.namer__count{margin:-4px 0 0;font-size:.72rem;text-align:right;color:var(--ink-soft);opacity:.65}.namer__count[data-full=true]{color:#9c3d1e;opacity:1}.linky{padding:0;font:inherit;font-size:.78rem;color:var(--wood-dark);background:none;border:none;text-decoration:underline;cursor:pointer}