.art-shell { max-width: 980px; padding-bottom: 3rem; }
.art-hero { padding: clamp(1.8rem, 7vw, 5rem) 1rem; text-align: center; border-radius: 24px; color: #fff8e8; background: radial-gradient(ellipse at top, #64427f, #232b52 55%, #141a2c); }
.art-hero h1 { font-size: clamp(2rem, 7vw, 4rem); margin: .4em 0; }
.art-hero strong { color: #ffe4a5; }
.art-actions { display:flex; flex-wrap:wrap; align-items:end; gap:.65rem; margin:.75rem 0; }
.art-actions label { min-width: 0; max-width: 100%; margin: 0; }
.art-actions input[type=color] { min-width:3rem; padding:.2rem; }
.art-actions input[type=range] { width: 7rem; }
#art-paper { position:relative; max-width:720px; margin:auto; overflow:hidden; border-radius:12px; }
#art-canvas { display:block; width:100%; background:#fff9eb; touch-action:none; cursor:crosshair; }
#art-paper.sky { max-width:420px; }
#art-guide { position:absolute; top:40%; transform:translate(-50%,-50%); pointer-events:none; color:#ffe5a4; font-size:2.1rem; text-shadow:0 0 18px #ffdb94; }
.art-gallery { display:grid; grid-template-columns: repeat(auto-fit,minmax(min(100%, 220px),1fr)); gap:1rem; margin: 1rem 0; }
.art-card { min-width:0; padding: .8rem; background:#222a45; border:1px solid #464a68; border-radius: 15px; overflow-wrap:anywhere; }
.art-card img, #art-detail img { display:block; width:100%; object-fit:contain; }
.art-card .art-picture { border:0; padding:0; width:100%; background:#151c30; cursor:pointer; }
.art-sky-image { display:flex; position:relative; }
.art-sky-image img { width:50%; }
.art-sky-image span { position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); color:#ffe5a4; text-shadow:0 0 15px #ffdb94; font-size:clamp(1rem, 5vw, 2.6rem); }
#art-detail { width:min(92vw,800px); max-height:90dvh; overflow:auto; color:#fff8e8; background:#222a45; border:1px solid #787c9e; border-radius:16px; padding:1rem; }
#art-detail::backdrop { background:#0b1022db; }
#art-detail-body { overflow-wrap:anywhere; }
.art-frame { max-width:520px; margin:1rem auto; padding:1rem; text-align:center; }
.art-frame .art-picture { border:6px double #e2bc79; padding:5px; border-radius:7px; background:#1b1b31; }
.art-frame img { display:block; width:100%; }