.art-stage{--art-lift:drop-shadow(0 4px 4px #462a0c61);--art-lift-high:drop-shadow(0 9px 10px #462a0c73);color:var(--color-ink);background:url(/art-studio/scene.webp) 50%/cover no-repeat,linear-gradient(#8fd8ff,#d9f3ff 62%,#e7b878 62%);position:relative;overflow:hidden}.art-stage small{font-size:.68em;font-weight:600;display:block}.art-plate{cursor:pointer;color:#17508f;font:inherit;filter:var(--art-lift);background:0 0;border:6px solid #0000;border-image:url(/art-studio/plate.webp) 80 fill/16px;justify-content:center;align-items:center;transition:filter .2s ease-out,transform .2s ease-out,opacity .2s ease-out;display:inline-flex}.art-plate:active{filter:var(--art-lift-high)}.art-plate svg{width:32px;height:32px}.art-plate:disabled{opacity:.45;cursor:default}@media (hover:hover){.art-plate:not(:disabled):hover{filter:var(--art-lift-high)}}@media (prefers-reduced-motion:no-preference){@media (hover:hover){.art-plate:not(:disabled):hover{transform:translateY(-2px)}}.art-plate:not(:disabled):active{transition-duration:75ms;transform:scale(.98)}}.art-stage :is(button,a,path[role=button]):focus-visible{outline-offset:3px;outline:4px solid #17508f}.art-frame{aspect-ratio:1.261;filter:var(--art-lift-high);background:url(/art-studio/frame.webp) 50%/100% 100% no-repeat;display:block;position:relative}.art-picture{background:#fffdf6;width:86.875%;height:82.1666%;position:absolute;inset:8.9167% 6.5625%;overflow:visible}.art-picture path:not(.art-hit){stroke:#1c2b3a;stroke-width:3.5px;stroke-linejoin:round;transition:fill .2s ease-out}.art-picture path[role=button]{cursor:pointer;touch-action:manipulation}.art-picture path:focus:not(:focus-visible){outline:none}.art-hit{fill:none;stroke:#0000;stroke-width:26px;pointer-events:stroke;cursor:pointer;touch-action:manipulation}.art-picker{border-radius:32px;grid-template-columns:minmax(0,1fr);align-content:start;justify-items:center;gap:10px;min-height:min(100dvh - 130px,700px);padding:18px 16px 32px;display:grid}.art-picker-back{z-index:2;position:absolute;top:14px;left:14px}.art-sign{aspect-ratio:900/260;width:min(460px,62vw);filter:var(--art-lift-high);background:url(/art-studio/sign.webp) 50%/100% 100% no-repeat;place-items:center;display:grid}.art-sign h1{color:#4b2a0d;font:800 clamp(22px, 3.4vw, 36px) / 1.1 var(--font-display);text-align:center;margin:0}.art-nuri{z-index:1;width:clamp(92px,13vw,170px);height:auto;position:absolute;top:8px;right:2%}.art-choose{text-align:center;border:6px solid #0000;border-image:url(/art-studio/plate.webp) 80 fill/14px;margin:0;padding:0 12px;font-size:18px;font-weight:800;line-height:1.25}.art-carousel{grid-template-columns:72px repeat(3,minmax(0,1fr)) 72px;align-items:center;gap:12px;width:min(1120px,100%);margin-top:8px;display:grid}.art-arrow{width:72px;height:72px}.art-pick{cursor:pointer;min-width:0;font:inherit;color:inherit;background:0 0;border:0;flex-direction:column;align-items:center;gap:10px;padding:0;display:flex}.art-pick .art-frame{--art-rest:perspective(1100px) rotateX(10deg);width:100%;transform:var(--art-rest);transition:filter .2s ease-out,transform .2s ease-out}.art-pick[data-slot="0"] .art-frame{--art-rest:perspective(1100px) rotateX(10deg) rotate(-3deg)}.art-pick[data-slot="1"] .art-frame{--art-rest:perspective(1100px) rotateX(6deg) scale(1.05)}.art-pick[data-slot="2"] .art-frame{--art-rest:perspective(1100px) rotateX(10deg) rotate(3deg)}.art-pick-name{border:6px solid #0000;border-image:url(/art-studio/plate.webp) 80 fill/12px;padding:0 10px;font-size:18px;font-weight:800;line-height:1.25}.art-pick:active .art-frame{filter:drop-shadow(0 16px 14px #462a0c80)}.art-difficulty{margin-top:3px;font-size:.8em;font-weight:600;display:block}@media (prefers-reduced-motion:no-preference){.art-pick:active .art-frame{transform:scale(.98) var(--art-rest);transition-duration:75ms}}@media (hover:hover){.art-pick:hover .art-frame{filter:drop-shadow(0 16px 14px #462a0c80)}}@media (prefers-reduced-motion:no-preference) and (hover:hover){.art-pick:hover .art-frame{transform:translateY(-4px) scale(1.03) var(--art-rest)}}@media (prefers-reduced-motion:reduce){.art-pick .art-frame{transition:none}}.art-board{z-index:60;outline:none;height:100dvh;position:fixed;inset:0}.art-board-inner{height:100%;padding:max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));grid-template-rows:minmax(0,1fr) auto;grid-template-columns:76px minmax(0,1fr) 76px;gap:8px;display:grid}.art-rail{flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.art-tool{width:72px;height:72px}.art-done{color:#0f7a4a;width:76px;height:76px}.art-board-inner>.art-frame{grid-area:1/2;place-self:center;width:min(100%,126.1dvh - 153.842px);height:auto;min-height:0}.art-rail{grid-row:1}.art-rail-end{grid-column:3;align-self:end}.art-board:not([data-finished]) .art-board-inner{grid-template-columns:76px minmax(0,1fr) clamp(140px,17vw,240px)}.art-example{pointer-events:none;flex-direction:column;grid-area:1/3;align-self:start;align-items:stretch;gap:4px;min-width:0;margin:0;display:flex}.art-example figcaption{text-align:center;border:6px solid #0000;border-image:url(/art-studio/plate.webp) 80 fill/12px;padding:0 8px;font-size:16px;font-weight:800;line-height:1.2}.art-tray{width:min(780px,100%);height:clamp(72px,10vw,98px);filter:var(--art-lift-high);background:url(/art-studio/paint-tray.webp) 50%/100% 100% no-repeat;grid-area:2/1/auto/-1;justify-self:center;position:relative}.art-color{cursor:pointer;background:0 0;border:0;border-radius:50%;width:64px;height:64px;margin:-32px 0 0 -32px;padding:0;transition:box-shadow .2s ease-out,transform .2s ease-out;position:absolute}.art-color:before{content:"";border:3px solid #0000;border-radius:50%;position:absolute;inset:5px 2px}.art-color{touch-action:none}.art-color[aria-pressed=true]:before{border-color:#ffe06b;box-shadow:0 0 0 2px #795314,inset 0 0 0 1px #795314}.art-color svg{filter:drop-shadow(0 1px 1px #4b2a0d);width:18px;height:18px;position:absolute;bottom:3px;left:23px}.art-color:active{box-shadow:0 5px 8px #3c230880}@media (hover:hover){.art-color:hover{box-shadow:0 5px 8px #3c230880}}@media (prefers-reduced-motion:no-preference){.art-color:active{transition-duration:75ms;transform:scale(.98)}}.art-paper{background:#fffdf6;position:absolute;inset:8.9167% 6.5625%}.art-paint,.art-lines,.art-keyboard{width:100%;height:100%;position:absolute;inset:0}.art-paint{touch-action:none}.art-lines,.art-keyboard{pointer-events:none}.art-keyboard path{fill:#0000;stroke:#0000}.art-keyboard path:focus-visible{stroke:#17508f;stroke-width:4px;stroke-dasharray:5 3;outline:none!important}.art-brush-overlay{pointer-events:none;z-index:3;position:absolute;inset:0;overflow:clip}.art-brush{pointer-events:none;will-change:transform;width:140px;height:105px;transition:transform .2s ease-out;position:absolute;top:0;left:0}.art-brush[data-follow=true]{transition:none}.art-brush-art{background:url(/art-studio/brush.webp) 50%/100% 100% no-repeat;width:100%;height:100%;position:absolute}.art-brush-tint{mix-blend-mode:multiply;position:absolute;inset:0;-webkit-mask:url(/art-studio/brush-tip.webp) 50%/100% 100% no-repeat;mask:url(/art-studio/brush-tip.webp) 50%/100% 100% no-repeat}@media (hover:hover){.art-paint{cursor:none}}@media (prefers-reduced-motion:reduce){.art-brush{transition:none;transition-duration:0s!important}}.art-board[data-finished] .art-board-inner{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(200px,300px);align-items:center;gap:20px;padding:16px 24px}.art-board[data-finished] .art-frame{grid-column:1;width:min(100%,126.1dvh - 40.352px)}.art-result{text-align:center;flex-direction:column;align-items:stretch;gap:12px;display:flex}.art-result-nuri{align-self:center;width:clamp(84px,16vh,150px);height:auto}.art-result h2{color:#4b2a0d;font:800 28px / 1.2 var(--font-display);outline:none;margin:0}.art-text-button{flex-direction:column;min-height:64px;padding:8px 14px;font-size:17px;font-weight:800;line-height:1.2}@media (orientation:portrait){.art-board:not([data-finished]) .art-board-inner{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:76px minmax(0,1fr) 76px}.art-board:not([data-finished]) .art-board-inner>.art-frame,.art-board:not([data-finished]) .art-rail{grid-row:2}.art-board:not([data-finished]) .art-board-inner>.art-frame{width:min(100%,126.1dvh - 416.13px)}.art-board:not([data-finished]) .art-tray{grid-row:3}.art-example{grid-column:1/-1;justify-self:center;width:200px}}@media (max-width:639px) and (orientation:portrait){.art-picker{min-height:0;padding-top:76px}.art-nuri{width:84px;top:4px;right:4px}.art-sign{width:58vw}.art-carousel{grid-template-columns:64px minmax(0,1fr) 64px;gap:8px}.art-arrow{width:64px;height:64px}.art-pick[data-slot="0"],.art-pick[data-slot="2"]{display:none}.art-pick[data-slot="1"] .art-frame{transform:none}}@media (orientation:landscape) and (max-height:520px){.art-picker{z-index:60;border-radius:0;align-content:center;gap:2px;height:100dvh;min-height:0;padding:6px 12px 8px;position:fixed;inset:0}.art-sign{width:210px}.art-sign h1{font-size:19px}.art-sign h1 small,.art-choose{display:none}.art-nuri{width:76px;top:2px;left:calc(50% + 112px);right:auto}.art-carousel{grid-template-columns:64px repeat(3,minmax(0,1fr)) 64px;gap:8px;width:min(620px,100%);margin-top:4px}.art-arrow{width:64px;height:64px}.art-pick{gap:4px}.art-pick-name{padding:0 6px;font-size:14px}.art-pick-name small{display:none}.art-tool{width:64px;height:64px}.art-done{width:68px;height:68px}.art-board:not([data-finished]) .art-board-inner{grid-template-columns:66px minmax(0,calc(126.1dvh - 105.924px)) minmax(130px,1fr);gap:4px;padding-block:4px}.art-example{justify-self:center;width:min(100%,126.1dvh - 238.329px)}.art-example figcaption{padding:0 6px;font-size:14px}.art-example figcaption small{display:none}.art-board-inner>.art-frame{width:min(100%,126.1dvh - 105.924px)}.art-tray{width:min(680px,100%);height:72px}.art-color{width:64px;height:64px}.art-board[data-finished] .art-board-inner{grid-template-columns:minmax(0,1fr) minmax(180px,230px);gap:10px;padding:8px 14px}.art-board[data-finished] .art-frame{width:min(100%,126.1dvh - 20.176px)}.art-result{gap:6px}.art-result-nuri{width:64px}.art-result h2{font-size:20px}}.art-defs{width:0;height:0;position:absolute}