:root{--bg:#f4f2ee;--glass:#faf9f6d1;--glass-hi:#0000000f;--line:#28221c1f;--text:#2b2723;--muted:#7d766d;--sel:#2b2723;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--text);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;margin:0;font:15px/1.4 system-ui,-apple-system,Segoe UI,sans-serif;overflow:hidden}#gl{touch-action:none;width:100%;height:100%;display:block;position:fixed;inset:0}@media (pointer:fine){#gl{cursor:none}}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}svg{fill:currentColor;width:24px;height:24px}.icon{place-items:center;display:grid}.icon .f,[aria-checked=true] .icon[data-fill] .o{display:none}[aria-checked=true] .icon[data-fill] .f{display:block}.glass,.round,.paints,.seg,.hint span{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.aim{pointer-events:none;width:100%;height:100%;position:fixed;inset:0;overflow:visible}.aim[hidden]{display:none}.aim line{stroke:#2b27238c;stroke-width:1.5px;stroke-dasharray:5 6}.aim circle{fill:none;stroke:#2b27238c;stroke-width:1.5px}.cursor{pointer-events:none;border:1px solid #2b272380;border-radius:50%;position:fixed;top:0;left:0;box-shadow:0 0 0 1px #ffffff80}.cursor:after{content:"";background:#2b2723b3;border-radius:50%;width:3px;height:3px;margin:-1.5px;position:absolute;top:50%;left:50%}.cursor[hidden]{display:none}#hud{z-index:1;pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:fixed;inset:0}#hud button,#hud .paints{pointer-events:auto}body.demo .dock,body.demo #printBtn{opacity:0;visibility:hidden;pointer-events:none}.dock,#printBtn{transition:opacity .3s,visibility .3s}.top{padding:calc(var(--sat) + 10px) calc(var(--sar) + 12px) 0 calc(var(--sal) + 12px);align-items:flex-start;gap:10px;display:flex}.round{border-radius:50%;flex:none;place-items:center;width:44px;height:44px;display:grid}.round:active{background:var(--glass-hi)}.hint{text-align:center;opacity:0;flex:1;align-self:center;margin:0;font-size:13.5px;transition:opacity .4s}.hint span{border-radius:18px;padding:8px 16px;display:inline-block}.hint.show{opacity:1}.dock{width:min(100%,520px);padding:0 calc(var(--sar) + 10px) calc(var(--sab) + 10px) calc(var(--sal) + 10px);flex-direction:column;gap:8px;margin:0 auto;display:flex}.paints{border-radius:999px;align-self:center;gap:4px;max-width:100%;padding:5px;display:flex}#paints{gap:4px;display:flex}.palette-btn{color:var(--muted);border-right:1px solid var(--line);border-radius:50% 0 0 50%;padding-right:2px}.palette-btn:active{color:var(--text)}.swatch{border-radius:50%;flex:none;place-items:center;width:40px;height:40px;display:grid}.swatch i{border-radius:50%;width:28px;height:28px;transition:transform .15s;box-shadow:inset 0 0 0 1px #0000001f}.swatch.soap i{color:var(--muted);background:radial-gradient(circle at 35% 30%,#fff,#e9eef0);place-items:center;display:grid}.swatch.soap svg{width:18px;height:18px}.swatch.soap.alt{outline:2px dashed var(--sel);outline-offset:-1px}.swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--sel)}.swatch[aria-checked=true] i{transform:scale(1.1)}@media (width<=380px){.swatch{width:36px;height:36px}.swatch i{width:25px;height:25px}}.seg{border-radius:18px;gap:2px;padding:4px;display:flex}.seg button{letter-spacing:.01em;min-width:0;min-height:54px;color:var(--muted);border-radius:14px;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:11px;display:flex}.seg button[aria-checked=true]{background:var(--sel);color:#faf9f6}.sheet{z-index:2;padding:calc(var(--sat) + 62px) 12px 0 calc(var(--sal) + 12px);background:#28221c2e;align-items:flex-start;display:flex;position:fixed;inset:0}.sheet[hidden]{display:none}.sheet-panel{border:1px solid var(--line);background:#faf9f6f5;border-radius:18px;flex-direction:column;width:260px;padding:6px;display:flex;box-shadow:0 20px 50px #28221c40}.sheet-panel button,.sheet-panel a{text-align:left;color:inherit;border-radius:12px;padding:13px 14px;text-decoration:none}.sheet-panel button:not(.tile):active,.sheet-panel a:active,.sheet-panel button:not(.tile):hover,.sheet-panel a:hover{background:var(--glass-hi)}.sheet-panel button[hidden]{display:none}.sheet-sep{background:var(--line);height:1px;margin:4px 8px}.sheet-panel .row{align-items:center;gap:14px;display:flex}.sheet-panel .row[hidden]{display:none}.row.app img{border-radius:6px;flex:none;width:22px;height:22px}.row .two{flex-direction:column;line-height:1.25;display:flex}.row .two small{color:var(--muted);font-size:12.5px}.row .icon{color:var(--muted)}.row svg{width:22px;height:22px}.switch{background:#28221c33;border-radius:11px;flex:none;width:38px;height:22px;margin-left:auto;transition:background .2s;position:relative}.switch:after{content:"";background:#faf9f6;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px}[aria-checked=true]>.switch{background:var(--sel)}[aria-checked=true]>.switch:after{transform:translate(16px)}.tiles{grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px;display:grid}.sheet-panel .tile{border:1px solid var(--line);border-radius:14px;flex-direction:column;justify-content:space-between;align-items:flex-start;height:96px;padding:10px 12px;font-weight:600;display:flex;position:relative;overflow:hidden}.tile svg{width:28px;height:28px}.tile.fresh{background:radial-gradient(circle at 70% 30%,#fff,#ecebe6)}.tile.fresh .icon{color:#9fb6c0}.tile.demo{color:#fbfaf7;text-shadow:0 1px 6px #0006;background:url(/demo-tile.jpg) 50%/cover}.tile.demo:before{content:"";background:linear-gradient(#140e1e1a,#140e1e99);position:absolute;inset:0}.tile>*{position:relative}.sheet-panel .tile:hover,.sheet-panel .tile:active{filter:brightness(.95)}.sheet-bottom{padding:calc(var(--sat) + 12px) 12px calc(var(--sab) + 150px);justify-content:center;align-items:flex-end}.sheet-bottom .sheet-panel{width:min(100%,360px);max-height:100%;overflow-y:auto}.pal{justify-content:space-between;align-items:center;gap:12px;display:flex}.pal[aria-checked=true]{background:var(--glass-hi);font-weight:600}.pal .dots{border-radius:999px;padding:3px 3px 3px 7px;display:flex}.pal .dots i{width:20px;height:20px;box-shadow:0 0 0 1.5px var(--paper,#fff);border-radius:50%;margin-left:-4px}.print{z-index:3;padding:calc(var(--sat) + 20px) 16px calc(var(--sab) + 20px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#28221c8c;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:fixed;inset:0}.print[hidden]{display:none}.print canvas{max-width:100%;min-height:0;max-height:calc(100% - 80px);animation:.6s ease-out lift;box-shadow:0 12px 40px #00000059}@keyframes lift{0%{opacity:0;transform:translateY(12px)scale(.98)}}.print-actions{gap:10px;display:flex}.print-actions button{background:var(--glass);border:1px solid var(--line);border-radius:14px;align-items:center;gap:6px;min-height:46px;padding:0 18px;font-weight:600;display:flex}.print-actions svg{width:20px;height:20px}.print-actions .primary{background:var(--text);color:#faf9f6;border-color:#0000}.start{z-index:4;padding:calc(var(--sat) + 20px) 20px calc(var(--sab) + 20px);background:#f4f2ee40;place-items:center;transition:opacity .35s;display:grid;position:fixed;inset:0}.start.gone{opacity:0;pointer-events:none}.start[hidden]{display:none}.start-panel{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#faf9f6eb;border:1px solid #fff9;border-radius:26px;width:min(100%,380px);padding:26px 22px 22px;box-shadow:0 30px 80px #28221c40}.start h1{letter-spacing:-.02em;margin:0;font:italic 400 42px/1.1 Georgia,Times New Roman,serif}.lead{color:var(--muted);margin:10px 0 16px}.note{color:var(--muted);margin:16px 0 0;font-size:13px}.start-actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;display:grid}.start-actions button,.start .install{border:1px solid var(--line);border-radius:14px;min-height:50px;font-weight:600}.start-actions .primary{background:var(--text);color:#faf9f6;border-color:#0000}.start .install{width:100%;min-height:46px;margin-top:10px}.start .install[hidden]{display:none}.start-links{color:var(--muted);justify-content:center;gap:8px;margin:16px 0 0;font-size:13px;display:flex}.start-links a{color:inherit;text-underline-offset:3px;text-decoration:underline}
