:root{color-scheme:dark;--bg: #17130f;--bg-raised: #241e18;--fg: #f2e9dc;--fg-muted: #a89a8a;--accent: #ff8a3d;--accent-soft: #4a2c14;--accent-glow: rgba(255, 138, 61, .45);--card-bg: #241e18;--hue-pink: #ff5fa2;--hue-purple: #9b7bef;--hue-green: #34c47c;--hue-blue: #3fa1ff;--hue-yellow: #ffcf3d;--glass-bg: rgba(32, 26, 20, .55);--glass-bg-strong: rgba(32, 26, 20, .75);--glass-border: rgba(255, 255, 255, .12);--glass-edge: rgba(0, 0, 0, .5);--glass-blur: 18px;--glass-saturate: 1.6;--appbar-bg: rgba(34, 28, 22, .94);--appbar-bg-blur: rgba(34, 28, 22, .86);--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px;--r-pill: 999px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.35);--shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.45);--shadow-3: 0 4px 8px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.55);--shadow-glow-accent: 0 0 0 3px var(--accent-glow), 0 4px 14px var(--accent-glow);--dur-fast: .12s;--dur-med: .2s;--dur-slow: .32s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}.popover-panel,.confirm-dialog,.bars-toggle{background-color:var(--glass-bg-strong)}@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){.popover-panel,.confirm-dialog,.bars-toggle{background-color:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--fg);font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow-x:hidden}#app{min-height:100dvh}h1,h2,.app-title{font-family:GoodDog,Segoe UI,sans-serif}button{font-family:inherit;cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.appbar-icon,.appbar-selected-swatch,.group-chip,.swatch,.stamp-swatch,.pattern-swatch,.size-swatch,.dialog-actions button,.bars-toggle,.reset-btn{transition:transform var(--dur-fast) var(--ease-spring),box-shadow var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}.appbar-icon:active,.appbar-selected-swatch:active,.group-chip:active,.swatch:active,.stamp-swatch:active,.pattern-swatch:active,.size-swatch:active,.dialog-actions button:active,.bars-toggle:active,.reset-btn:active{transform:scale(.96)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{transition-duration:1ms!important;animation-duration:1ms!important}}@keyframes pop-in{0%{opacity:0;transform:scale(.96) translateY(4px)}}.popover-panel{border-radius:var(--r-lg);padding:var(--sp-4);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-border),var(--shadow-3);max-width:min(90vw,420px);max-height:60vh;overflow:auto;animation:pop-in var(--dur-med) var(--ease-spring)}.popover-host{border:none;padding:0;background:transparent;z-index:1000}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;width:min(84vw,340px)}.swatch,.stamp-swatch,.pattern-swatch{min-width:48px;min-height:48px;border:1px solid var(--glass-edge);border-radius:var(--r-sm);background:var(--bg-raised);padding:2px}.swatch:hover,.stamp-swatch:hover,.pattern-swatch:hover{box-shadow:var(--shadow-1)}.stamp-swatch{height:48px;padding:4px;background:#fff}.stamp-swatch img{width:100%;height:100%;object-fit:contain}.stamp-size-row{position:sticky;bottom:calc(-1 * var(--sp-4));display:flex;justify-content:space-around;align-items:flex-end;gap:var(--sp-2);margin:var(--sp-3) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-bottom));background:var(--glass-bg-strong);border-top:1px solid var(--glass-edge)}.stamp-size-btn{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--sp-1);min-width:64px;min-height:44px;padding:var(--sp-2) var(--sp-1);border:1px solid transparent;border-radius:var(--r-md);background:none;color:var(--fg)}.stamp-size-dot{display:inline-block;border-radius:50%;background:var(--accent)}.stamp-size-label{font-size:.8rem;font-weight:600}.stamp-size-btn.selected{background:var(--accent-soft);box-shadow:var(--shadow-glow-accent)}.spectrum-wrap{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.9rem}.confirm-dialog{border:1px solid var(--glass-edge);border-radius:var(--r-xl);padding:var(--sp-5);max-width:320px;color:var(--fg);box-shadow:inset 0 1px 0 var(--glass-border),var(--shadow-3);animation:pop-in var(--dur-med) var(--ease-spring)}.confirm-dialog::backdrop{background:#140e0859;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.dialog-actions button{min-height:44px;min-width:88px;border-radius:var(--r-md);border:none;padding:0 16px;font-weight:600}.btn-ok{background:var(--accent);color:#fff;box-shadow:var(--shadow-1)}.btn-cancel{background:var(--bg-raised);color:var(--fg);border:1px solid var(--glass-edge)}.size-swatch{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;margin:4px;border-radius:var(--r-sm);border:1px solid var(--glass-edge);background:var(--bg-raised)}.size-swatch.selected{border-color:transparent;background:var(--accent-soft);box-shadow:var(--shadow-glow-accent)}.brush-flyout-row{display:flex;flex-wrap:wrap}.brush-flyout-opacity-label{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.85rem}.brush-flyout-opacity-label input[type=range]{flex:1}.size-dot{display:inline-block;border-radius:50%;background:currentColor}input[type=range]{-webkit-appearance:none;appearance:none;height:24px;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:var(--accent-soft)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;border:none;background:var(--accent);box-shadow:var(--shadow-1)}input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--accent-soft)}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;border:none;background:var(--accent);box-shadow:var(--shadow-1)}body.gallery-body-bg{background:radial-gradient(1200px 700px at 12% -10%,color-mix(in srgb,var(--hue-yellow) 22%,transparent),transparent 60%),radial-gradient(1000px 600px at 105% 15%,color-mix(in srgb,var(--hue-blue) 16%,transparent),transparent 55%),radial-gradient(900px 700px at 50% 110%,color-mix(in srgb,var(--hue-pink) 14%,transparent),transparent 60%),var(--bg)}.gallery-view{display:flex;flex-direction:column;height:100dvh;overflow:hidden}.gallery-header{flex:0 0 auto;display:flex;align-items:center;padding:calc(10px + var(--safe-top)) 16px 6px calc(16px + var(--safe-left))}.app-logo{margin:0;font-size:clamp(2.2rem,7vh,4rem);line-height:1;background:linear-gradient(90deg,var(--hue-pink),var(--accent),var(--hue-yellow),var(--hue-green),var(--hue-blue),var(--hue-purple));-webkit-background-clip:text;background-clip:text;color:transparent}.group-chips{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 10px calc(16px + var(--safe-left))}.group-chip{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--sp-4);border:none;border-radius:var(--r-pill);background:var(--accent, #ddd);color:#fff;font-weight:600;font-size:.85rem;box-shadow:var(--shadow-1)}.group-chip .group-emoji{font-size:1.5em;line-height:1}.group-title .group-emoji{font-size:1.35em;line-height:1}.group-chip:hover{transform:translateY(-1px);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent),var(--shadow-2)}.groups-scroller{flex:1 1 auto;display:flex;flex-direction:row;align-items:flex-start;gap:36px;overflow-x:auto;overflow-y:hidden;padding:4px 16px 20px calc(16px + var(--safe-left))}.gallery-group{flex:0 0 auto}.group-title{color:var(--accent);background:var(--glass-bg-strong);display:inline-block;padding:4px 16px;border-radius:var(--r-pill);border:1px solid var(--glass-edge);box-shadow:var(--shadow-1);margin:0 0 8px}@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){.group-title{background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}.gallery-grid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,230px);grid-auto-columns:340px;gap:12px;height:472px}.gallery-card{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--card-bg);outline:1px solid var(--glass-edge);outline-offset:-1px;box-shadow:var(--shadow-1);width:340px;height:230px;transition:transform var(--dur-med) var(--ease-spring),box-shadow var(--dur-med) var(--ease-out)}.gallery-card.spotlight-hero{grid-row:1 / -1;grid-column:span 2;width:692px;height:472px}.gallery-card.spotlight-hero .item-title{font-size:1.05rem}.gallery-card:hover,.gallery-card:focus-visible{transform:translateY(-4px) scale(1.03);box-shadow:var(--shadow-2);z-index:1}.item-image{width:100%;height:100%;object-fit:cover;display:block}.item-overlay{position:absolute;left:0;right:0;bottom:0;padding:6px 10px;background-image:linear-gradient(transparent,#00000026);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.item-title{margin:0;color:#fff;font-size:.85rem;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.painted-badge{position:absolute;top:6px;left:6px;background:var(--hue-green);color:#fff;font-size:.65rem;font-weight:600;padding:2px 8px;border-radius:var(--r-pill);box-shadow:var(--shadow-1)}.reset-btn{position:absolute;top:6px;right:6px;min-width:32px;min-height:32px;border-radius:50%;border:none;background:#140e0880;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:1rem}@media (max-width: 760px),(orientation: portrait){.gallery-view{height:auto;overflow:visible}.groups-scroller{flex-direction:column;overflow-x:visible;overflow-y:visible;gap:20px}.gallery-grid{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));grid-auto-columns:unset;height:auto}.gallery-card{width:auto;height:auto;aspect-ratio:220 / 150}.gallery-card.spotlight-hero{grid-row:auto;grid-column:span 2;width:auto;height:auto}}.drawing-view{position:relative;height:100dvh;overflow:hidden;background:var(--bg)}.stage{position:absolute;inset:0;overflow:hidden;background:repeating-conic-gradient(#2a241d 0% 25%,#332c24 0% 50%) 50% / 24px 24px;touch-action:none;-webkit-user-select:none;-webkit-touch-callout:none}.stage .layer{position:absolute}.canvas-under{z-index:0;background:#fff}.svg-host{z-index:1}.canvas-free{z-index:2}.svg-host svg{display:block}.appbar-top-mount,.appbar-bottom-mount{position:fixed;left:0;right:0;z-index:20;transition:transform .2s ease,opacity .2s ease}.appbar-top-mount{top:0}.appbar-bottom-mount{bottom:0}.appbar{height:80px;width:100%;display:flex;align-items:center;justify-content:space-around;gap:4px;padding:0 calc(4px + var(--safe-left)) 0 calc(4px + var(--safe-right));overflow-x:auto;overflow-y:hidden;box-shadow:var(--shadow-1);background-color:var(--appbar-bg)}@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){.appbar{background-color:var(--appbar-bg-blur);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate))}}.appbar-top{border-bottom:1px solid var(--glass-edge)}.appbar-bottom{border-top:1px solid var(--glass-edge)}.appbar-top-mount .appbar{padding-top:var(--safe-top);height:calc(80px + var(--safe-top))}.appbar-bottom-mount .appbar{padding-bottom:var(--safe-bottom);height:calc(80px + var(--safe-bottom))}@media (max-width: 860px){.appbar{height:55px}.appbar-top-mount .appbar{height:calc(55px + var(--safe-top))}.appbar-bottom-mount .appbar{height:calc(55px + var(--safe-bottom))}}@media (max-width: 569px){.appbar{height:50px}.appbar-top-mount .appbar{height:calc(50px + var(--safe-top))}.appbar-bottom-mount .appbar{height:calc(50px + var(--safe-bottom))}}.drawing-view.bars-hidden .appbar-top-mount,.drawing-view.stamp-mode .appbar-top-mount{transform:translateY(-100%);opacity:0;pointer-events:none}.drawing-view.bars-hidden .appbar-bottom-mount{transform:translateY(100%);opacity:0;pointer-events:none}.appbar-icon,.appbar-selected-swatch{flex:0 0 auto;width:40px;height:40px;min-width:40px;min-height:40px;border:none;border-radius:50%;background-color:#ffffffe6;background-repeat:no-repeat;padding:0;cursor:pointer;box-shadow:var(--shadow-1)}.appbar-icon:hover,.appbar-selected-swatch:hover{transform:translateY(-1px);box-shadow:var(--shadow-2)}.appbar-icon:active,.appbar-selected-swatch:active{transform:scale(.96)}.appbar-icon{background-position:0 0;background-size:160px 80px}.appbar-selected-swatch{margin-right:6px;box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-1)}.appbar-mode-btn.selected{background-color:#ffe3cf;box-shadow:var(--shadow-glow-accent)}.appbar-icon-plain{background-position:center;background-size:28px 28px}.bars-toggle-mount{position:fixed;bottom:calc(6px + var(--safe-bottom));right:calc(6px + var(--safe-right));z-index:25}.bars-toggle{width:44px;height:44px;border:1px solid var(--glass-edge);border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:contain;box-shadow:var(--shadow-2)}.fireworks-overlay{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:3000}.fireworks-banner{position:fixed;left:50%;top:34%;transform:translate(-50%,-50%);z-index:3001;pointer-events:none;font-size:clamp(2rem,8vw,4.5rem);font-weight:800;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55),0 0 30px rgba(255,214,64,.6);white-space:nowrap;animation:fireworks-pop .5s cubic-bezier(.2,1.4,.4,1) both;transition:opacity 1.2s ease,transform 1.2s ease}.fireworks-banner.fade{opacity:0;transform:translate(-50%,-70%)}@keyframes fireworks-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@media (prefers-reduced-motion: reduce){.fireworks-banner{animation:none}}