body{background-color:#e9eedf;background-image:linear-gradient(#eef2e7dd,#dce8d8bb),repeating-linear-gradient(90deg,transparent 0 49px,#b5c4ae55 50px 51px)}.atelier{background:linear-gradient(110deg,#ede0c4,#f5ead3 55%,#e5d1af);border:2px solid #d0b892;box-shadow:0 6px 0 #bca17b,0 13px 22px #48604a18;border-radius:15px;position:relative}.atelier:before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(0deg,transparent 0 48px,#bda17b18 49px 50px)}.atelier>*{position:relative}.detail-easel{width:min(100%,470px);aspect-ratio:480/580;background:url(easel-detail.svg) center/100% 100% no-repeat;margin:0 auto;position:relative;filter:drop-shadow(0 5px 5px #654a3020)}.detail-easel #board{position:absolute;top:5%;left:6%;width:88%;margin:0;padding:5px;border:1px solid #c5b691;border-radius:2px;gap:1px;background:#d3ccb7;box-shadow:inset 0 0 0 2px #f8f1df,0 1px 1px #69472c50}.detail-easel .cell{border:0;border-radius:0;box-shadow:none;font-size:11px;transition:filter .1s;background-blend-mode:soft-light}.cell.paper{background-image:repeating-linear-gradient(0deg,transparent 0 3px,#dcd5bf33 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#dcd5bf22 3px 4px)}.cell.painted{background-image:linear-gradient(135deg,#ffffff55,transparent 45%,#293f3012),repeating-linear-gradient(0deg,transparent 0 6px,#ffffff12 6px 7px);box-shadow:inset 0 1px #ffffff60,inset 1px 0 #ffffff35}.cell:hover{filter:brightness(1.04);outline:2px solid #678c73;outline-offset:-2px}.tools-detail{display:block;width:min(100%,430px);height:auto;max-height:80px;object-fit:contain;margin:-24px auto 0;pointer-events:none}.palette{width:max-content;max-width:100%;margin:6px auto 14px;padding:10px 20px 14px;border:2px solid #bb976a;border-radius:42% 28% 37% 33%/45% 45% 55% 55%;background:linear-gradient(120deg,#f2d4a0,#d4ac77);box-shadow:0 4px 0 #a9855c,inset 0 2px #fff0c6;gap:14px}.swatch{border:2px solid #fff7dc;border-radius:47% 54% 45% 52%;box-shadow:0 3px 0 #94734855,inset 0 3px 0 #ffffff80;position:relative}.swatch:after{content:'';position:absolute;top:7px;left:8px;width:12px;height:4px;border-radius:50%;background:#ffffff77;transform:rotate(-22deg)}.swatch.active{outline-color:#456e50}.reference .ref{border:6px solid #fffdf6;box-shadow:0 0 0 1px #d4c6a9,3px 4px 0 #d6c9aa;transform:rotate(-2deg);border-radius:1px;position:relative}.reference .ref:after{content:'';position:absolute;width:35px;height:9px;top:-4px;left:35%;background:#c7d6abbb;border:1px solid #acbe93;transform:rotate(2deg)}aside.card{background:linear-gradient(90deg,#fffdf4 94%,#f0ecd9);border-radius:8px 18px 18px 8px;border-color:#d4d4bb;box-shadow:3px 4px 0 #cbd4bc}.finished-art{width:176px;aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border:9px solid #ddb17e;outline:2px solid #997248;box-shadow:0 5px 10px #493d2520;margin:20px auto}.art-complete #board{box-shadow:0 0 0 2px #fff8d9,0 0 12px #e5bb6b55}@media(max-width:600px){.atelier{padding:10px}.detail-easel{width:100%;max-width:410px}.tools-detail{margin-top:-17px;max-height:65px}.palette{gap:12px;padding:8px 14px 12px}.swatch{width:42px;height:44px;min-width:36px}.reference .ref{border-width:4px}.detail-easel .cell{font-size:10px}section>.actions:last-child{border-color:#bc9f7255}}@media(max-width:350px){.palette{gap:9px;padding-left:10px;padding-right:10px}.swatch{width:38px;min-width:34px}.detail-easel #board{padding:3px}.detail-easel .cell{font-size:10px}}@media(orientation:landscape) and (max-height:550px){.detail-easel{width:100%;max-width:440px}.tools-detail{max-height:62px;margin-top:-19px}.palette{gap:10px;padding:8px 12px 12px}.layout{grid-template-columns:180px minmax(0,1fr)}.atelier{padding:8px}.detail-easel .cell{font-size:10px}.reference .ref{width:132px;height:132px}aside.card{padding:12px}.reference p{font-size:11px}}
body{background-size:100% 100%,100% 100%;background-attachment:fixed}
.compact-dock:empty{display:none}
@media(orientation:landscape) and (max-height:420px){
html,body{height:100%;overflow:hidden}main{height:100dvh;max-width:none;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden}header,footer{display:none}.layout{height:100%;margin:0;grid-template-columns:clamp(128px,25vw,178px) minmax(0,1fr);gap:8px;align-items:stretch}.layout>aside.card{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:9px}.reference .ref{width:104px;height:104px;margin:0 auto 8px}.reference p{display:none}.reference h2{font-size:16px;margin:4px 0}.reference small{font-size:10px;letter-spacing:0}aside .actions{gap:5px;margin-top:7px}aside .actions button{font-size:11px;padding:6px;flex:1 1 45px}#record{font-size:10px}#status{font-size:12px}.atelier{height:100%;min-height:0;padding:6px;display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;border-radius:12px}.detail-easel{flex:none;width:min(calc(100dvh - 34px),calc(100vw - 250px));height:min(calc(100dvh - 34px),calc(100vw - 250px));aspect-ratio:1;margin:0;overflow:hidden;background-size:100% auto;background-position:top center;filter:none}.detail-easel #board{width:88%;top:5%;left:6%;padding:3px}.detail-easel .cell{font-size:11px}.tools-detail{display:none}.palette{flex:none;flex-direction:column;width:56px;max-width:56px;margin:0;padding:8px 5px 10px;gap:7px;border-radius:32px;align-items:center;box-shadow:0 3px 0 #a9855c}.swatch{flex:none;width:44px;height:44px;min-width:44px}.swatch.active{transform:none;outline-offset:0}.compact-dock{border-top:1px dashed #c1c9ad;margin-top:10px;padding-top:8px}.compact-dock>#help{width:100%;font-size:12px}.compact-dock .actions{display:flex;flex-wrap:wrap;font-size:11px}.compact-dock .actions select{flex:1 1 100%;width:100%;font-size:11px;padding:6px}.compact-dock .actions button{font-size:11px;padding:6px}dialog{max-height:calc(100dvh - 24px);overflow:auto}
}