*{box-sizing:border-box} :root{font-family:"DM Sans","PingFang SC","Microsoft YaHei",sans-serif;color:#332a3e;background:#faf8fd;--accent:#7045ba;--line:#eadff3} body{margin:0} [hidden]{display:none!important} button,input,a{font:inherit} a{color:inherit;text-decoration:none} button,.button,.primary{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--line);background:white;border-radius:12px;padding:9px 14px;color:inherit} button:hover,.button:hover{border-color:var(--accent)} .primary{background:var(--accent);color:white;border-color:transparent;font-weight:650} .primary:hover{background:#59349a}
header{background:white;border-bottom:1px solid var(--line)} .bar{max-width:1240px;margin:auto;min-height:76px;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}.brand small{display:block;color:#736481;font-size:11px;font-weight:500}.mark{display:grid;place-items:center;background:#efe3ff;color:#7344bc;width:42px;height:42px;border-radius:13px;font-size:26px}nav{display:flex;gap:8px;flex-wrap:wrap}nav a{padding:9px 12px;border-radius:9px}nav a[aria-current]{background:#f1e9fb;color:#6639af;font-weight:700}
main{max-width:1240px;margin:auto;padding:34px 24px 65px;min-height:83vh}.hero{background:radial-gradient(circle at 84% 24%,#fff3ef 0,transparent 37%),linear-gradient(115deg,#f0e2ff,#f9edf6);border:1px solid #eadbf4;border-radius:26px;padding:44px 48px;position:relative}.tag{background:#fff8;color:#633c96;border-radius:30px;padding:6px 13px;font-size:13px;font-weight:700}h1{font-size:clamp(31px,4vw,54px);letter-spacing:-.045em;line-height:1.2;margin:16px 0}p,.summary,.meta{color:#6c5d78}.controls{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:28px;flex-wrap:wrap}.filters,.row{display:flex;gap:8px;flex-wrap:wrap}.filters button[aria-pressed=true]{background:#eee2fe;color:#622aa8;border-color:#e1cef8}.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;background:white;padding:5px 12px}.search input{border:0;width:180px}.summary{font-size:13px;margin:14px 0}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:19px}.card{display:block;text-align:left;padding:0;overflow:hidden;border-radius:17px;width:100%}.card:hover{box-shadow:0 7px 25px #6c49801a}.art{display:grid;place-items:center;aspect-ratio:1.25;background:var(--tile,#f0e8f8)}.art canvas{width:65%;height:auto;image-rendering:pixelated}.caption{padding:15px;display:block}.caption strong,.meta{display:block}.meta{margin-top:5px;font-size:13px}.empty{grid-column:1/-1;padding:30px;color:#6c5d78;background:white;border:1px dashed var(--line);border-radius:16px}footer{text-align:center;border-top:1px solid var(--line);padding:23px;color:#776887}footer span{margin:0 6px}
.pagehead{margin-bottom:24px}.studio{display:grid;grid-template-columns:215px minmax(0,1fr) 205px;gap:15px;align-items:start}.studio aside,.stage{background:white;border:1px solid var(--line);border-radius:17px;padding:15px}.studio label{display:block;font-size:13px;margin:0 0 12px}.studio .upload{position:relative;display:inline-flex;cursor:pointer}.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.studio input:not([type=checkbox],[type=file]){width:100%;margin-top:5px}.studio h2{font-size:16px}.check input{margin:0 6px 0 0}input:not([type=range],[type=checkbox],[type=file]){padding:7px;color:inherit;border:1px solid var(--line);border-radius:7px;background:white}.search input{border:0!important}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.swatch{background:var(--color);height:27px;padding:0;border:1px solid #a294aa}.swatch[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:1px}.stage{text-align:center}.stage canvas{display:block;width:100%;height:auto;max-height:73vh;object-fit:contain;touch-action:none;image-rendering:pixelated;cursor:crosshair}.stage p{font-size:13px;min-height:16px}.actions{display:grid;gap:8px;margin-top:14px}.count{display:flex;gap:8px;align-items:center;font-size:13px;padding:4px}.count b{margin-left:auto}.dot{width:15px;height:15px;border-radius:4px;border:1px solid #ab9bb5;background:var(--color)}
dialog{border:1px solid var(--line);border-radius:19px;color:inherit;padding:26px;width:min(480px,calc(100vw - 24px));max-height:90vh}dialog::backdrop{background:#2b173e88}.close{position:absolute;right:12px;top:12px}.detail-art{padding:12px;background:#f4edf8;border-radius:14px;margin:14px 0}.detail-art canvas{width:100%;max-height:45vh;object-fit:contain;image-rendering:pixelated}
@media(max-width:860px){.studio{grid-template-columns:180px minmax(0,1fr)}.studio aside:last-child{grid-column:1/-1}}@media(max-width:570px){.bar{flex-wrap:wrap;gap:5px}.bar>.primary{display:none}main{padding:19px 14px}.hero{padding:29px 20px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.studio{display:flex;flex-direction:column}.studio>*{width:100%}.stage{order:-1}.palette{grid-template-columns:repeat(8,1fr)}}