.cs-studio{--cs-surface:#faf9f4;--cs-paper:#fff;--cs-ink:#30372f;--cs-muted:#72766d;--cs-line:#d8d9cf;--cs-accent:#596546;--cs-accent-deep:#3b4934;--cs-soft:#eef0e8;width:min(100%,320px);min-width:0;color:var(--cs-ink);font-family:DM Sans,sans-serif;font-size:12px;line-height:1.35}.cs-studio,.cs-studio *{box-sizing:border-box}.cs-studio button,.cs-studio input{font:inherit}:where(.cs-studio) button{color:inherit;cursor:pointer;border:0}.cs-studio button:disabled{cursor:default;opacity:.55}.cs-studio button:focus-visible,.cs-studio input:focus-visible,.cs-studio summary:focus-visible{outline:2px solid var(--cs-accent);outline-offset:3px}.cs-header{border-bottom:1px solid var(--cs-line);justify-content:space-between;align-items:flex-end;gap:12px;padding:0 0 12px;display:flex}.cs-eyebrow,.cs-subsection-heading,.cs-section-heading,.cs-field-heading,.cs-range-heading,.cs-value-group legend,.cs-mix-field>span:first-child{color:var(--cs-muted);letter-spacing:.06em;text-transform:uppercase;font-size:10px}.cs-eyebrow{letter-spacing:.14em;font-size:9px;display:block}.cs-selected-readout{align-items:center;gap:8px;margin-top:7px;display:flex}.cs-selected-swatch{border:1px solid #30372f30;border-radius:6px;width:34px;height:24px;box-shadow:inset 0 0 0 1px #ffffff80}.cs-selected-hex,.cs-mix-result,.cs-mix-preview code,.cs-color-chip code,.cs-hex-input,.cs-mix-input-line input{color:var(--cs-ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-family:DM Mono,SFMono-Regular,Consolas,monospace}.cs-selected-hex{font-size:13px;font-weight:600}.cs-spectrum-note,.cs-subtle-note{color:var(--cs-muted);letter-spacing:.08em;text-transform:uppercase;font-size:9px}.cs-tabs{background:#e7e8df;border-radius:8px;grid-template-columns:repeat(3,1fr);gap:2px;margin:12px 0 14px;padding:3px;display:grid}.cs-tab{min-height:32px;color:var(--cs-muted);background:0 0;border-radius:6px;padding:6px 5px;font-size:11px;transition:background .16s,color .16s}.cs-tab:hover{background:#dfe1d6}.cs-tab.is-active{background:var(--cs-paper);color:var(--cs-ink);box-shadow:0 1px 3px #30372f12}.cs-panel{min-width:0}.cs-sv-field{aspect-ratio:1.55;background:linear-gradient(to top, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 100%), var(--cs-hue-color,#ff3b30);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border:1px solid #30372f24;border-radius:9px;width:100%;position:relative;overflow:hidden}.cs-sv-pointer{pointer-events:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #30372faa}.cs-range-block{min-width:0;margin-top:12px}.cs-range-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.cs-range-heading,.cs-field-heading,.cs-subsection-heading,.cs-section-heading{justify-content:space-between;align-items:center;gap:8px;display:flex}.cs-range-heading label,.cs-field-heading label{cursor:pointer}.cs-range-heading output{color:var(--cs-ink);font-variant-numeric:tabular-nums;font-size:10px}.cs-range{appearance:none;width:100%;height:22px;accent-color:var(--cs-accent);cursor:pointer;background:0 0;margin:2px 0 0;padding:0;display:block}.cs-range::-webkit-slider-runnable-track{background:var(--cs-range-gradient,#d8d9cf);border-radius:99px;height:5px}.cs-range::-moz-range-track{background:var(--cs-range-gradient,#d8d9cf);border-radius:99px;height:5px}.cs-range::-webkit-slider-thumb{border:2px solid var(--cs-surface);background:var(--cs-accent-deep);-webkit-appearance:none;border-radius:50%;width:15px;height:15px;margin-top:-5px;box-shadow:0 0 0 1px #30372f66}.cs-range::-moz-range-thumb{border:2px solid var(--cs-surface);background:var(--cs-accent-deep);border-radius:50%;width:12px;height:12px;box-shadow:0 0 0 1px #30372f66}.cs-hue-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,red 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.cs-hue-range::-moz-range-track{background:linear-gradient(90deg,red 0%,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.cs-subsection{border-top:1px solid var(--cs-line);margin-top:15px;padding-top:12px}.cs-quick-swatches{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-top:9px;display:grid}.cs-quick-swatch{aspect-ratio:1.25;border:1px solid #30372f2e;border-radius:5px;width:100%;min-width:0;transition:box-shadow .16s,transform .16s;box-shadow:inset 0 0 0 1px #ffffff70}.cs-quick-swatch:hover{transform:translateY(-1px)}.cs-quick-swatch.is-selected{box-shadow:0 0 0 2px var(--cs-surface), 0 0 0 3px var(--cs-ink)}.cs-hex-control{border-bottom:1px solid var(--cs-line);padding-bottom:13px}.cs-field-heading span,.cs-field-heading label{line-height:1.2}.cs-hex-input,.cs-mix-input-line input,.cs-number-field input{border:1px solid var(--cs-line);background:var(--cs-paper);border-radius:6px;outline:none;min-width:0}.cs-hex-input{width:100%;height:37px;margin-top:7px;padding:7px 10px;font-size:14px;font-weight:600}.cs-hex-input:focus,.cs-mix-input-line input:focus,.cs-number-field input:focus{border-color:var(--cs-accent)}.cs-hex-input.is-invalid,.cs-mix-input-line input[aria-invalid=true]{border-color:#a45545}.cs-field-error{color:#934638;margin:5px 0 0;font-size:10px}.cs-value-group{border:0;min-width:0;margin:14px 0 0;padding:0}.cs-value-group legend{float:left;width:100%;margin-bottom:7px;padding:0}.cs-number-grid{clear:both;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.cs-number-field{color:var(--cs-muted);text-transform:uppercase;gap:5px;font-size:10px;display:grid}.cs-number-field input{width:100%;height:34px;color:var(--cs-ink);text-align:center;padding:5px 6px;font-size:12px}.cs-mix-heading{border-bottom:1px solid var(--cs-line);justify-content:space-between;align-items:flex-start;gap:10px;padding-bottom:12px;display:flex}.cs-mix-heading h3,.cs-section-heading h3{color:var(--cs-ink);letter-spacing:-.02em;margin:0;font-family:Fraunces,Georgia,serif;font-size:17px;font-weight:400}.cs-mix-heading p{max-width:205px;color:var(--cs-muted);margin:4px 0 0;font-size:10px;line-height:1.45}.cs-mix-result{flex:none;padding-top:2px;font-size:11px;font-weight:600}.cs-mix-inputs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px;display:grid}.cs-mix-field{gap:5px;min-width:0;display:grid}.cs-mix-input-line{border:1px solid var(--cs-line);background:var(--cs-paper);border-radius:6px;align-items:center;min-width:0;height:34px;padding:0 7px;display:flex}.cs-mini-swatch,.cs-chip-swatch{border:1px solid #30372f2e;flex:none}.cs-mini-swatch{border-radius:4px;width:16px;height:16px;margin-right:5px}.cs-mix-input-line input{background:0 0;border:0;border-radius:0;outline:0;width:100%;height:28px;padding:3px 0;font-size:11px}.cs-mix-input-line:focus-within{border-color:var(--cs-accent)}.cs-mix-range{margin-top:13px}.cs-mix-preview{border:1px solid var(--cs-line);background:var(--cs-paper);border-radius:7px;justify-content:space-between;align-items:center;gap:8px;min-height:42px;margin-top:13px;padding:6px 9px;display:flex}.cs-mix-preview-swatch{border:1px solid #30372f2e;border-radius:4px;width:100%;height:27px}.cs-mix-preview code{flex:none;font-size:11px}.cs-primary-button,.cs-save-button{border-radius:6px;min-height:32px;font-size:11px;transition:background .16s,color .16s}.cs-primary-button{background:var(--cs-accent-deep);color:#fff;width:100%;margin-top:10px;padding:7px 10px}.cs-primary-button:hover:not(:disabled){background:#2f3a2b}.cs-saved-section{border-top:1px solid var(--cs-line);margin-top:15px;padding-top:13px}.cs-section-heading{align-items:baseline}.cs-save-button{color:var(--cs-accent-deep);background:0 0;padding:5px 8px;font-weight:600}.cs-save-button:hover:not(:disabled){background:var(--cs-soft)}.cs-empty-note{color:var(--cs-muted);margin:8px 0 0;font-size:10px}.cs-saved-row,.cs-recommended-row{scrollbar-width:thin;gap:6px;min-width:0;margin-top:9px;padding:2px 1px 4px;display:flex;overflow-x:auto}.cs-saved-item{border:1px solid var(--cs-line);background:var(--cs-paper);border-radius:6px;flex:none;align-items:stretch;min-width:0;display:inline-flex}.cs-color-chip{min-width:0;color:var(--cs-ink);background:0 0;flex:none;align-items:center;gap:5px;padding:5px 6px;font-size:9px;display:inline-flex}.cs-color-chip:hover{background:var(--cs-soft)}.cs-chip-swatch{border-radius:4px;width:17px;height:17px}.cs-color-chip code{font-size:9px}.cs-remove-button{border-left:1px solid var(--cs-line);width:24px;color:var(--cs-muted);background:0 0;padding:0;font-size:15px;line-height:1}.cs-remove-button:hover{color:#934638;background:#f1e4df}.cs-recommended{border-top:1px solid var(--cs-line);margin-top:12px}.cs-recommended summary{color:var(--cs-muted);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;padding:10px 0 3px;font-size:10px}.cs-recommended p{color:var(--cs-muted);margin:4px 0 0;font-size:10px}.cs-recommended-row{margin-top:6px}.cs-recommended-chip{border:1px solid var(--cs-line);border-radius:6px}@media (max-width:300px){.cs-range-pair,.cs-mix-inputs{grid-template-columns:1fr;gap:6px}.cs-quick-swatches{gap:4px}}@media (prefers-reduced-motion:reduce){.cs-tab,.cs-quick-swatch,.cs-primary-button,.cs-save-button{transition:none}}.artwork-navigator{--an-paper:#fff;--an-stone:#faf9f4;--an-ink:#30372f;--an-muted:#62675d;--an-line:#d8d9cf;--an-accent:#596546;z-index:20;left:max(16px, env(safe-area-inset-left));bottom:max(84px, calc(env(safe-area-inset-bottom) + 72px));width:max-content;max-width:calc(100vw - 32px);color:var(--an-ink);font-family:DM Sans,sans-serif;font-size:12px;position:fixed}.artwork-navigator,.artwork-navigator *{box-sizing:border-box}.artwork-navigator button{min-width:44px;min-height:44px;color:inherit;font:inherit;cursor:pointer;border:0}.artwork-navigator button:focus-visible,.artwork-navigator__map:focus-visible{outline:2px solid var(--an-accent);outline-offset:3px}.artwork-navigator svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.35px;width:16px;height:16px}.artwork-navigator__trigger{background:var(--an-paper);border-radius:25px;align-items:center;gap:9px;min-height:44px;padding:0 15px;display:inline-flex;box-shadow:0 8px 24px #30372f18}.artwork-navigator__trigger svg{color:var(--an-muted);transform:rotate(-90deg)}.artwork-navigator__panel{width:min(268px,100vw - 32px);max-height:calc(100dvh - 108px - env(safe-area-inset-top));background:var(--an-stone);border-radius:15px;padding:12px;overflow:auto;box-shadow:0 12px 30px #30372f20}.artwork-navigator__heading,.artwork-navigator__actions,.artwork-navigator__zoom{align-items:center;display:flex}.artwork-navigator__heading{justify-content:space-between;gap:8px;padding:1px 2px 10px}.artwork-navigator__heading strong{text-overflow:ellipsis;white-space:nowrap;max-width:190px;font-family:Fraunces,Georgia,serif;font-size:15px;font-weight:400;display:block;overflow:hidden}.artwork-navigator__close{min-width:44px;min-height:44px;color:var(--an-muted);background:0 0;place-items:center;display:grid}.artwork-navigator__close svg{transform:rotate(180deg)}.artwork-navigator__map{background:var(--an-line);border:1px solid var(--an-line);cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:15px;position:relative;overflow:hidden}.artwork-navigator__map img{object-fit:contain;opacity:.82;pointer-events:none;width:100%;height:100%;display:block}.artwork-navigator__viewport{border:1.5px solid var(--an-accent);pointer-events:none;background:#ffffff38;min-width:3px;min-height:3px;position:absolute;box-shadow:0 0 0 1px #fff9}.artwork-navigator__map-hint{color:var(--an-muted);padding:7px 2px 9px;font-size:10px;line-height:1.3}.artwork-navigator__actions{flex-wrap:wrap;gap:5px}.artwork-navigator__zoom{border:1px solid var(--an-line);background:var(--an-paper);border-radius:25px;margin-right:auto;overflow:hidden}.artwork-navigator__zoom button{background:0 0;place-items:center;min-width:44px;min-height:44px;display:grid}.artwork-navigator__zoom span{min-width:40px;color:var(--an-muted);text-align:center;font-variant-numeric:tabular-nums;font-size:11px}.artwork-navigator__action{background:var(--an-paper);border-radius:25px;justify-content:center;align-items:center;gap:6px;min-height:44px;padding:0 9px;font-size:11px;display:inline-flex;border:1px solid var(--an-line)!important}.artwork-navigator__action:disabled{cursor:not-allowed;opacity:.48}.artwork-navigator button:hover:not(:disabled){color:var(--an-accent)}@media (max-width:600px){.artwork-navigator{bottom:calc(130px + env(safe-area-inset-bottom))}.artwork-navigator__panel{width:min(268px,100vw - 32px);max-height:calc(100dvh - 154px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.artwork-navigator__map-hint{display:none}}@media (prefers-reduced-motion:reduce){.artwork-navigator *,.artwork-navigator :before,.artwork-navigator :after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.completion-world-reaction{pointer-events:none;z-index:20;color:#eee8d9;opacity:0;background:#18221ddd;grid-template-columns:112px 1fr;align-items:center;width:min(360px,100vw - 32px);height:140px;animation:.76s cubic-bezier(.2,.8,.2,1) .35s forwards completion-world-reveal;display:grid;position:fixed;top:18px;left:50%;overflow:hidden;transform:translate(-50%,-12px);box-shadow:0 12px 30px #10181244}.completion-world-reaction__scene{filter:brightness(.48)saturate(.72);background:url(/artworks/originals/kyoto-after-rain.png) 50%/100% 100% no-repeat;align-self:stretch}.completion-world-reaction[data-effect=lanterns-lit] .completion-world-reaction__scene{background-blend-mode:screen;filter:brightness(.75)saturate(.84);background-image:radial-gradient(circle at 14% 10%,#ffdca0 0 8%,#0000 28%),url(/artworks/originals/kyoto-after-rain.png)}.completion-world-reaction[data-effect=water-awake] .completion-world-reaction__scene{background-blend-mode:screen;background-image:linear-gradient(#0000 52%,#b9d4c4 72%,#0000 100%),url(/artworks/originals/kyoto-after-rain.png)}.completion-world-reaction[data-effect=sanctuary-awake] .completion-world-reaction__scene{background-blend-mode:screen;background-image:radial-gradient(at 48% 40%,#e5d2a0 0 15%,#0000 58%),url(/artworks/originals/kyoto-after-rain.png)}.completion-world-reaction span{padding:16px;font:400 17px/1.1 Fraunces,Georgia,serif}.completion-world-reaction.is-reduced{opacity:1;animation:none;transform:translate(-50%)}@keyframes completion-world-reveal{0%{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%)}}@media (prefers-reduced-motion:reduce){.completion-world-reaction{opacity:1;animation:none;transform:translate(-50%)}}@font-face{font-family:DM Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/font-0.woff2)format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/font-1.woff2)format("truetype")}@font-face{font-family:DM Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/font-2.woff2)format("truetype")}@font-face{font-family:Fraunces;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/font-3.woff2)format("truetype")}@font-face{font-family:Fraunces;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/font-4.woff2)format("truetype")}:root{color:#30372f;font-synthesis:none;--surface:#efeee8;--paper:#fff;--text:#30372f;--muted:#72766d;--accent:#596546;--line:#d8d9cf;--display:"Fraunces", Georgia, serif;--duration:.18s;--ease:cubic-bezier(.16, 1, .3, 1);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:#efeee8;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;touch-action:manipulation;background:0 0;border:0;justify-content:center;align-items:center;gap:8px;display:inline-flex}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{transition:background var(--duration), color var(--duration), opacity var(--duration)}button:hover{background:#dfe1d6}h1,h2,p{margin:0}h1,h2{font-family:var(--display);font-weight:400}svg{flex-shrink:0}[hidden]{display:none!important}.app-shell{min-height:100dvh}.app-shell.tab-paint{isolation:isolate;height:100dvh;position:relative;overflow:hidden}.app-shell.tab-paint .app-main{height:100%}.app-header{z-index:6;height:calc(64px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));pointer-events:none;background:linear-gradient(#efeee8f5 0%,#efeee8d9 52%,#0000 100%);border-bottom:0;justify-content:space-between;align-items:center;gap:24px;transition:height .24s,opacity .24s,visibility 0s linear .24s;display:flex;position:absolute;inset:0 0 auto}.app-header>*{pointer-events:auto}.brand{font-family:var(--display);letter-spacing:-1.2px;align-items:center;gap:9px;font-size:29px;display:flex}.brand>svg{color:#626e50}.navigation{gap:34px;display:flex}.navigation button{letter-spacing:.03em;height:44px;color:var(--muted);padding:0;font-size:12px;position:relative}.navigation button svg{display:none}.navigation button.active{color:var(--text)}.navigation button.active:after{content:"";background:var(--accent);width:18px;height:2px;position:absolute;bottom:0;left:calc(50% - 9px)}.navigation button:hover{color:var(--text);background:0 0}.header-end{justify-content:flex-end;align-items:center;gap:26px;min-width:135px;display:flex}.icon-button{border-radius:50%;flex-shrink:0;width:44px;height:44px}.wallet,.wallet>span{align-items:center;gap:8px;font-size:12px;display:flex}.wallet{gap:22px}main{position:relative}.studio{height:100%;min-height:100dvh;position:relative}.painting-space{width:100%;height:100%;padding:0;display:block;position:relative}.art-title{z-index:3;pointer-events:none;align-items:center;gap:12px;width:auto;max-width:none;margin:0;display:flex;position:absolute;inset-block-start:calc(64px + env(safe-area-inset-top) + 8px);inset-inline-start:max(16px, env(safe-area-inset-left));inset-inline-end:max(16px, env(safe-area-inset-right))}.art-title>*{pointer-events:auto}.art-title>div{min-width:0}.art-title h1{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.back-button{border:1px solid var(--line);border-radius:50%;width:44px;min-width:44px;height:44px}.back-button svg{transform:rotate(180deg)}.eyebrow{letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:9px;font-weight:500;display:block}.art-title h1{letter-spacing:-.55px;margin-top:4px;font-size:22px;line-height:1.1}.save-label{color:var(--muted);align-items:center;gap:5px;margin-left:auto;font-size:10px;display:flex}.canvas-mount{z-index:0;isolation:isolate;width:100%;height:100%;min-height:0;display:block;position:absolute;inset:0;overflow:hidden}.painting-canvas{object-fit:contain;object-position:center;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;outline:none;width:100%;max-width:none;height:100%;max-height:none;display:block;position:absolute;inset:0}.painting-canvas:focus-visible{outline:1px solid var(--line);outline-offset:2px}.painting-canvas [data-region-id]:focus-visible{stroke:#799569;stroke-width:3px;outline:none}.art-skeleton{opacity:.7;background:#fff;width:100%;max-width:none;height:100%;position:absolute;inset:0}.studio-bottom{z-index:3;width:100%;max-width:none;padding:16px max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));pointer-events:none;background:linear-gradient(#0000 0%,#efeee8a8 48%,#efeee8e8 100%);grid-template-columns:minmax(130px,1fr) auto minmax(120px,1fr);align-items:center;gap:16px;display:grid;position:absolute;inset:auto 0 0}.canvas-tools,.immersion-button{pointer-events:auto}.canvas-tools{color:#f6f5ec;background:#313b30;border-radius:40px;align-items:center;gap:2px;padding:5px;display:flex;box-shadow:0 4px 16px #30372f12}.canvas-tools button{border-radius:50%;min-width:42px;height:42px;padding:0 11px;font-size:11px}.canvas-tools button:hover,.canvas-tools button.selected{background:#55604d}.canvas-tools button:active{background:#697963}.canvas-tools button:focus-visible{outline-color:#fff}.canvas-tools .fit-button,.canvas-tools .palette-trigger{border-radius:24px}.fit-button{font-variant-numeric:tabular-nums;min-width:86px!important}.toolbar-separator{background:#f5f5eb24;width:1px;height:20px;margin:0 4px}.palette-trigger{padding-right:14px!important}.current-pigment{background:var(--pigment-color);border:1px solid #ffffff69;border-radius:50%;width:20px;height:20px}.painting-progress{width:min(220px,100%);max-width:220px;color:var(--muted);grid-template-columns:1fr auto;gap:6px 9px;font-size:10px;display:grid}.progress-caption{grid-column:1/-1}.progress-track{background:#d7d9cf;align-self:center;height:2px;overflow:hidden}.progress-track>span{transform-origin:0;background:#697b56;width:100%;height:100%;transition:transform .24s;display:block}.region-count{font-variant-numeric:tabular-nums;font-size:9px}.immersion-button{min-width:44px;min-height:44px;color:var(--muted);white-space:nowrap;border-radius:20px;justify-self:end;padding:0 12px;font-size:10px}.flow-badge{z-index:2;color:#56634b;background:#f9f9f0eb;border-radius:30px;padding:7px 12px;font-size:10px;animation:.2s ease-out flow-in;position:absolute;bottom:16px;right:12px}.pigment-panel{right:max(24px, env(safe-area-inset-right));bottom:calc(78px + env(safe-area-inset-bottom));z-index:4;width:min(340px,100vw - 48px);max-height:min(720px, calc(100dvh - 132px - env(safe-area-inset-top)));overscroll-behavior:contain;touch-action:pan-y;animation:panel-in .18s var(--ease);background:#faf9f4;border:1px solid #d8d9ce;border-radius:15px;padding:21px;position:absolute;overflow-y:auto;box-shadow:0 12px 45px #25301c14}.panel-heading{justify-content:space-between;align-items:center;gap:10px;margin-bottom:22px;display:flex}.panel-heading h2{letter-spacing:-.5px;margin-top:5px;font-size:23px}.panel-heading .icon-button{width:44px;height:44px}.swatches{grid-template-columns:repeat(6,1fr);gap:10px;padding:1px 2px 22px;display:grid}.swatches button{aspect-ratio:1;border:2px solid #faf9f4;border-radius:50%;padding:0;position:relative;box-shadow:0 0 0 1px #373e3420}.swatches button.chosen{box-shadow:0 0 0 1px #30372f}.swatch-dot{background:#fff;border-radius:50%;width:5px;height:5px;box-shadow:0 0 0 1px #0002}.pigment-types{border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr);gap:7px;padding-top:20px;display:grid}.pigment-types button{border-radius:9px;flex-direction:column;gap:9px;padding:10px 2px;font-size:10px;display:flex}.pigment-types button.selected{background:#e8ebdf}.material-chip{border-radius:50%;width:39px;height:39px;display:block}.material-solid{background:var(--pigment-color)}.material-silk{background:linear-gradient(115deg, var(--pigment-color), color-mix(in srgb, var(--pigment-color) 88%, white), var(--pigment-color))}.material-watercolor{background:radial-gradient(ellipse at 25% 25%, #fff9, transparent 65%), linear-gradient(145deg, var(--pigment-color), #f3eee8 60%, var(--pigment-color));box-shadow:inset 2px 1px 7px #ffffff38}.material-gold{background:linear-gradient(130deg,#8d6b32 0%,#ccaa65 22%,#f6edcb 41%,#b99552 58%,#dbc180 75%,#91703a 100%)}.material-black-cat{background:linear-gradient(135deg, #101010 0 22%, var(--pigment-color) 48%, #171717 68%, var(--pigment-color));box-shadow:inset 0 0 0 1px #00000030}.guided-control{padding-top:22px;font-size:11px}.guided-control label{cursor:pointer;align-items:center;gap:8px;min-height:32px;display:flex}.guided-control p{color:var(--muted);margin-top:3px;font-size:10px;line-height:1.6}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}.export-actions{border-top:1px solid var(--line);flex-direction:column;gap:3px;margin-top:19px;padding-top:12px;display:flex}.export-actions button{border-radius:6px;justify-content:flex-start;height:38px;padding:0 8px;font-size:11px}.completion-panel{z-index:4;text-align:center;opacity:0;background:#faf9f3f5;border:1px solid #d7d8ca;border-radius:12px;width:min(430px,95%);padding:26px;animation:.65s 1.6s both completion-in;position:absolute;bottom:20px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #29352a18}.completion-panel h2{margin:12px 0 8px;font-size:27px}.completion-panel p{color:var(--muted);font-size:12px;line-height:1.6}.completion-reward{color:#7f703e;justify-content:center;align-items:center;gap:6px;margin:14px 0;font-size:11px;display:flex}.completion-bonus{color:#5d6458;margin:-8px 0 16px;font-size:11px;display:block}.completion-panel>div{flex-direction:column;align-items:center;gap:4px;display:flex}.primary{color:#fff;background:#3b4934;border-radius:25px;min-height:44px;padding:13px 20px;font-size:12px}.primary:hover{background:#536447}.text-button{border-radius:20px;padding:12px;font-size:11px}.is-immersive .app-header{opacity:0;visibility:hidden;pointer-events:none;border:0;height:0;overflow:hidden}.is-immersive .studio{height:100%}.is-immersive .painting-space{grid-template-rows:none}.is-immersive .art-title{opacity:.9;inset-block-start:max(12px, calc(env(safe-area-inset-top) + 12px))}.is-immersive .art-title .eyebrow,.is-immersive .save-label span{display:none}.is-immersive .back-button{opacity:1;display:inline-flex}.is-immersive .art-title h1{font-size:17px}.is-immersive .art-title>div{background:#fffffff2;border-radius:25px;padding:8px 12px}.is-immersive .back-button{background:#fff}.is-immersive .painting-progress{opacity:.82}.is-immersive .canvas-tools{opacity:.9}.is-immersive .immersion-button{opacity:1;visibility:visible;pointer-events:auto}.load-state{min-height:70dvh;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:24px;font-size:13px;display:flex}.load-state h1{text-align:center;max-width:420px;font-size:28px}.offline-note{z-index:10;color:#6c5935;background:#f5edce;border-radius:20px;padding:8px 14px;font-size:11px;position:fixed;top:8px;left:50%;transform:translate(-50%)}.toast{color:#fff;z-index:20;background:#313b30;border-radius:12px;align-items:center;gap:10px;width:max-content;max-width:min(720px,100vw - 30px);padding:12px 14px;font-size:12px;display:flex;position:fixed;bottom:100px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0002}.toast button{border-radius:50%;padding:8px}.toast button:hover{background:#55604d}.preferences-dialog{border:1px solid var(--line);width:min(420px,100vw - 32px);color:var(--text);background:#faf9f4;border-radius:16px;padding:26px}.preferences-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#1c2b2455}.dialog-heading{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.dialog-heading h2{font-size:27px}.preference-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-height:56px;font-size:13px;display:flex}.preference-row select{border:1px solid var(--line);background:#fff;border-radius:5px;padding:7px;font-size:12px}.preferences-dialog p{color:var(--muted);margin-top:20px;font-size:11px;line-height:1.5}.journey-page,.gallery-page{max-width:1120px;margin:0 auto;padding:65px 32px}.page-title{margin-bottom:38px}.page-title h1{letter-spacing:-1.5px;font-size:44px}.page-title p{color:var(--muted);margin-top:13px;font-size:13px}.journey-stop{grid-template-columns:minmax(220px,1fr) 1fr;align-items:center;gap:70px;display:grid}.journey-art img{object-fit:cover;border-radius:2px;width:100%;height:520px;display:block}.chapter-number{letter-spacing:.2em;color:#8c856c;font-size:11px}.journey-copy h2{letter-spacing:-1px;margin:16px 0;font-size:36px}.journey-copy p{max-width:320px;color:var(--muted);font-size:14px;line-height:1.8}.journey-detail{color:var(--muted);margin:25px 0;font-size:11px;display:block}.journey-footer{font-family:var(--display);color:var(--muted);text-align:center;margin-top:55px;font-size:24px}.collection-grid{grid-template-columns:repeat(3,1fr);gap:30px;display:grid}.collection-item{flex-direction:column;align-items:flex-start;padding:0;display:flex}.collection-item img{width:100%;height:auto}.collection-item h2{margin-top:18px;font-size:24px}.collection-item>span{color:var(--muted);margin-top:8px;font-size:11px}.empty-collection{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:400px;display:flex}.empty-collection h2{font-size:30px}.empty-collection p{max-width:360px;color:var(--muted);font-size:13px;line-height:1.7}@keyframes panel-in{0%{opacity:0;translate:0 8px}to{opacity:1;translate:0}}@keyframes flow-in{0%{opacity:0;translate:0 4px}to{opacity:1;translate:0}}@keyframes completion-in{0%{opacity:0;translate:0 14px}to{opacity:1;translate:0}}@keyframes immersive-secondary-fade{0%,36%{opacity:1}to{opacity:.42}}@media (hover:hover){.is-immersive .art-title,.is-immersive .painting-progress{animation:7s 1.8s both immersive-secondary-fade}.is-immersive .art-title:hover,.is-immersive .art-title:focus-within,.is-immersive .painting-progress:hover,.is-immersive .painting-progress:focus-within,.is-immersive .canvas-tools:hover,.is-immersive .canvas-tools:focus-within{opacity:1;animation:none}}.is-immersive .studio.ui-awake .art-title,.is-immersive .studio.ui-awake .painting-progress,.is-immersive .studio.ui-awake .canvas-tools{opacity:1;animation:none}@media (min-width:1700px){.pigment-panel{right:max(24px, env(safe-area-inset-right))}}@media (max-width:1023px){.app-header{height:calc(56px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left))}.studio{height:100%}.painting-space{grid-template-rows:none;padding:0}.art-title{inset-block-start:calc(56px + env(safe-area-inset-top) + 6px)}.header-end{gap:8px;min-width:44px}.studio-bottom{padding-inline:max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-left));grid-template-columns:minmax(120px,1fr) auto minmax(44px,1fr);gap:8px}.painting-progress{max-width:160px}.immersion-button span{display:none}.pigment-panel{right:max(16px, env(safe-area-inset-right));bottom:calc(72px + env(safe-area-inset-bottom));width:min(340px,100vw - 32px);max-height:calc(100dvh - 116px - env(safe-area-inset-top))}.journey-stop{gap:35px}.journey-art img{height:440px}}@media (max-width:599px){.app-header{height:calc(50px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));gap:8px}.brand{gap:6px;font-size:24px}.brand svg{width:19px}.navigation{gap:17px}.navigation button{height:38px;font-size:10px}.navigation button:first-child{display:none}.header-end{gap:4px;min-width:44px}.header-end>.icon-button{width:44px;height:44px}.wallet{gap:8px}.wallet span{gap:3px;font-size:9px}.wallet svg{width:12px}.studio{height:100%}.painting-space{grid-template-rows:none;padding:0}.art-title{gap:8px;inset-block-start:calc(50px + env(safe-area-inset-top) + 6px)}.art-title h1{font-size:18px}.eyebrow{letter-spacing:.13em;font-size:8px}.back-button{width:44px;height:44px}.save-label{font-size:8px}.save-label span{max-width:65px}.canvas-mount{padding:0}.studio-bottom{padding:8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px}.canvas-tools{grid-area:1/1/auto/-1;justify-self:center;gap:1px;padding:4px}.canvas-tools button{min-width:44px;height:44px;padding:0 8px}.palette-trigger{gap:6px;font-size:10px!important}.fit-button{min-width:75px!important}.toolbar-separator{margin:0 2px}.painting-progress{grid-area:2/1;align-items:center;gap:9px;width:100%;min-width:0;max-width:calc(100vw - 70px);font-size:9px;display:flex}.progress-track{width:55px}.region-count{font-size:8px}.immersion-button{grid-area:2/2;width:44px;min-height:44px;padding:0}.pigment-panel{left:max(12px, env(safe-area-inset-left));right:max(12px, env(safe-area-inset-right));bottom:calc(78px + env(safe-area-inset-bottom));width:auto;max-width:none;max-height:min(650px, calc(100dvh - 138px - env(safe-area-inset-top)));border-radius:18px;margin:auto;padding:18px 23px;position:fixed;overflow-y:auto}.panel-heading{margin-bottom:17px}.panel-heading h2{font-size:24px}.swatches{grid-template-columns:repeat(6,1fr);gap:12px;padding-bottom:17px}.swatches button{justify-self:center;width:100%;max-width:42px}.pigment-types{padding-top:13px}.material-chip{width:34px;height:34px}.guided-control{padding-top:12px}.export-actions{grid-template-columns:repeat(3,1fr);gap:2px;margin-top:12px;padding-top:10px;display:grid}.export-actions button{flex-direction:column;gap:5px;height:47px;padding:4px;font-size:9px}.is-immersive .painting-space{grid-template-rows:none}.is-immersive .art-title{inset-block-start:max(12px, calc(env(safe-area-inset-top) + 12px))}.is-immersive .art-title h1{margin:0;font-size:15px}.is-immersive .painting-progress{opacity:.82}.completion-panel{padding:23px 18px;bottom:12px}.completion-panel h2{font-size:24px}.journey-page,.gallery-page{padding:40px 20px}.page-title h1{font-size:36px}.journey-stop{grid-template-columns:1fr;gap:28px}.journey-art img{height:400px}.journey-copy h2{font-size:30px}.journey-copy p{max-width:none}.collection-grid{grid-template-columns:1fr}.empty-collection h2{font-size:27px}.toast{bottom:112px}.offline-note{width:max-content;max-width:96vw;font-size:10px;top:2px}}@media (max-height:540px) and (orientation:landscape){.app-header{height:calc(40px + env(safe-area-inset-top));padding:env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left))}.studio{height:100%}.painting-space{grid-template-rows:none;padding:0}.art-title{gap:8px;inset-block-start:calc(40px + env(safe-area-inset-top) + 4px)}.art-title .eyebrow{display:none}.art-title h1{font-size:16px}.studio-bottom{padding:4px max(12px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));grid-template-rows:1fr;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;display:grid}.canvas-tools{grid-area:1/2;padding:3px}.canvas-tools button{min-width:40px;height:40px}.painting-progress{grid-area:1/1;max-width:min(180px,100%)}.immersion-button{grid-area:1/3;min-height:40px}.pigment-panel{bottom:calc(54px + env(safe-area-inset-bottom));max-height:calc(100dvh - 62px - env(safe-area-inset-top));width:min(320px,100vw - 24px);left:auto;right:max(12px, env(safe-area-inset-right))}.is-immersive .painting-space{grid-template-rows:none}.is-immersive .art-title{inset-block-start:max(8px, calc(env(safe-area-inset-top) + 8px))}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation-duration:.01ms!important;animation-delay:0s!important}.is-immersive .art-title,.is-immersive .painting-progress,.is-immersive .canvas-tools{opacity:1;animation:none}}body:has(.tab-paint){overscroll-behavior:none;overflow:hidden}.studio-option{color:var(--muted);justify-content:space-between;align-items:center;gap:10px;margin-top:14px;font-size:10px;display:flex}.studio-option select{border:1px solid var(--line);max-width:145px;min-height:34px;font:inherit;color:var(--text);background:#fff;border-radius:6px;padding:5px 7px}.export-options{border-top:1px solid var(--line);margin-top:16px;padding-top:2px}.export-options summary{cursor:pointer;color:var(--muted);padding:10px 0;font-size:11px}.collection-loading{background:#fff;width:100%;min-height:220px;display:block}.material-options,.view-options{border-top:1px solid #d8d9ce;margin-top:12px;padding-top:8px}.material-options summary,.view-options summary{cursor:pointer;color:#5d6458;padding:7px 0;font-size:11px}.material-options .pigment-types{grid-template-columns:repeat(4,1fr);margin-top:8px}.pigment-panel .panel-heading{margin-bottom:14px}.pigment-panel .guided-control{margin-top:12px}@media (max-width:599px){.pigment-panel{max-height:min(650px,72dvh)}}.cat-discovery-status{z-index:4;color:#30302e;background:#ffffffed;border-radius:12px;max-width:min(340px,100% - 32px);padding:8px 12px;font-size:12px;position:absolute;bottom:16px;left:16px;box-shadow:0 3px 12px #00000010}.cat-discovery-status summary{cursor:pointer;min-height:24px}.cat-discovery-status[open]{gap:10px;display:grid}.cat-discovery-status[open] summary{margin-bottom:8px}.cat-discovery-status button{min-height:44px}.is-immersive .cat-discovery-status{display:none}.cat-passage-cta{z-index:5;inset-inline-start:50%;color:#282725;background:#fff;border:1px solid #d8d4cc;border-radius:999px;padding:10px 18px;position:absolute;bottom:54px;transform:translate(-50%);box-shadow:0 4px 18px #00000012}