:root{color-scheme:light;--paper:#EEF1F6;--ink:#202A43;--violet:#7768D8;--line:#D4D9E4;--muted:#626C80;--mint:#6CBEAF}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif}button,input,select{font:inherit;color:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{border:1px solid var(--line);border-radius:8px;background:white;min-height:44px;padding:9px 12px;cursor:pointer;font-weight:600}button:hover:not(:disabled){border-color:var(--violet);background:#F5F3FC}button:disabled{opacity:.4;cursor:default}button[aria-pressed="true"]{background:#E9E5FC;border-color:var(--violet);color:#5142A8}.primary{background:var(--ink);color:white;border-color:var(--ink)}button.primary:hover:not(:disabled){background:#364264;color:white}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid #7768D8;outline-offset:4px}input,select{min-width:0;border:1px solid var(--line);border-radius:7px;background:#FFF;min-height:44px;padding:8px 10px}h1,h2,p{margin:0}h2{font-size:15px;font-weight:650}.studio{max-width:1536px;margin:auto;padding:24px 28px 36px}.studio-header{display:flex;align-items:center;gap:22px;border-bottom:1px solid var(--line);padding-bottom:21px;margin-bottom:26px}.studio-header h1{font-size:26px;letter-spacing:-1px;font-weight:750}.back-link{font-size:13px;padding:12px 0}.studio-header #saveStatus{margin-left:auto;font-size:13px;color:#42766D}.studio-header #saveStatus[data-state="error"]{color:#AF3557}.workspace{display:grid;grid-template-columns:202px minmax(0,1fr) 238px;gap:28px;align-items:start}.materials,.collection{min-width:0;display:grid;gap:20px}.section-heading,.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.section-heading span{font-size:12px;color:var(--muted)}.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.swatch{min-height:34px;padding:3px;border-radius:9px;background:transparent}.swatch i{display:block;width:24px;height:24px;margin:auto;border-radius:50%;background:var(--bead);box-shadow:inset 1px 2px 3px #FFFFFF90,inset -2px -3px 4px #00000030,0 2px 3px #202A4325;position:relative}.swatch i:after{content:"";position:absolute;inset:35%;border-radius:50%;background:var(--paper);box-shadow:0 1px 0 #FFFFFFAA,inset 0 2px 2px #202A4370}.custom-color{display:flex;align-items:center;justify-content:space-between;font-size:13px}.custom-color input{width:66px;height:38px;padding:3px}.tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}.row>button{flex:1;white-space:nowrap}.inventory,.templates,.backups{padding-top:19px;border-top:1px solid var(--line)}.inventory h2,.templates h2,.backups h2{margin-bottom:14px}#counts{display:grid;gap:8px;max-height:260px;overflow:auto}.count-row{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}.count-row i{width:14px;height:14px;border-radius:50%;background:var(--bead);border:1px solid #202A4325}.count-row strong{margin-left:auto;color:var(--ink)}.workbench{min-width:0}.work-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:16px}.work-heading label{flex:1;min-width:0;font-size:12px;color:var(--muted);display:grid;gap:6px}.work-heading input{font-size:21px;font-weight:600;max-width:360px;background:transparent;border-color:transparent;border-bottom-color:var(--line);border-radius:0;padding-left:0}.work-heading input:focus{background:white}.work-heading span{font-size:13px;color:var(--muted);padding-bottom:12px;white-space:nowrap}.board-viewport{width:100%;aspect-ratio:1;overflow:auto;display:flex;overscroll-behavior:contain;border:8px solid #303C57;border-radius:16px;background:#202A43;box-shadow:0 16px 30px #202A4325,inset 0 0 0 1px #FFFFFF30}#beadBoard{display:block;margin:auto;touch-action:none;cursor:crosshair}#beadBoard.panning{cursor:grabbing}.bench-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;font-size:13px;color:var(--muted)}.bench-footer .row{gap:10px}.zoom-controls{display:flex;align-items:center;gap:7px}.zoom-controls #zoomLabel{min-width:46px;text-align:center;font-variant-numeric:tabular-nums;font-size:13px;color:var(--muted)}.zoom-controls button{min-height:36px;padding:4px 10px;font-size:13px}.new-work{display:grid;gap:8px}.dim-inputs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.new-work label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.dim-inputs input{width:100%;text-align:center}.presets{display:flex;flex-wrap:wrap;gap:6px}.presets button{flex:1;min-height:34px;padding:4px 6px;font-size:12px;white-space:nowrap}.works{display:grid;gap:10px;max-height:340px;overflow:auto}.work-item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center;text-align:left;padding:10px}.work-item canvas{max-width:48px;max-height:48px;border-radius:4px;background:#202A43}.work-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.work-item small{display:block;font-size:11px;color:var(--muted);margin-top:5px}.backups{display:grid;gap:8px}.backups h2{margin-bottom:4px}.recovery{border:1px solid #D59DAC;background:#FFF0F4;padding:16px;margin-bottom:20px;border-radius:8px;display:grid;gap:12px;font-size:14px}.recovery .row{justify-content:start;flex-wrap:wrap}.recovery button{flex:0 1 auto}#notice{background:#FFF0F4;border-left:3px solid #C4496B;padding:12px;margin-bottom:18px;overflow-wrap:anywhere}[hidden]{display:none!important}
.image-import{display:grid;gap:8px;padding-top:19px;border-top:1px solid var(--line)}
.image-import .row{justify-content:start}
.image-preview{border:1px solid var(--line);border-radius:9px;background:#FFF;padding:6px}
.image-preview img{display:block;width:100%;max-height:110px;object-fit:contain}
.color-limit{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.color-limit select{flex:1;max-width:128px}
@media(min-width:1500px){.workspace{grid-template-columns:218px minmax(0,1fr) 250px;gap:36px}}
@media(max-width:1100px){.studio{padding:20px}.workspace{grid-template-columns:170px minmax(0,1fr);gap:22px}.collection{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:16px}.collection>.section-heading,.collection>.works,.collection>.image-import{grid-column:1/-1}.works{grid-template-columns:repeat(3,minmax(0,1fr))}.palette{gap:4px}.swatch{padding:3px}.studio-header{gap:15px}}
@media(max-width:650px){.studio{padding:14px 12px 28px}.studio-header{display:grid;grid-template-columns:1fr auto;gap:10px;margin-bottom:18px;padding-bottom:15px}.studio-header h1{grid-row:1;grid-column:2;font-size:21px}.studio-header #saveStatus{margin:0;grid-row:2;font-size:12px}.studio-header #pngBtn{grid-row:2;grid-column:2;padding:8px 12px}.workspace{display:flex;flex-direction:column;gap:22px}.materials,.workbench,.collection{width:100%}.materials{gap:12px;grid-template-columns:1fr auto}.materials>.section-heading,.materials>.palette,.materials>.tools{grid-column:1/-1}.palette{grid-template-columns:repeat(12,minmax(0,1fr));gap:3px}.swatch{min-height:36px;width:100%}.swatch i{width:22px;height:22px}.tools{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.tools button{padding:8px 4px;font-size:13px}.custom-color{gap:10px}.materials>.row{justify-content:end}.inventory{display:none}.work-heading input{font-size:20px}.board-viewport{border-width:5px;border-radius:12px}.bench-footer{flex-wrap:wrap;gap:10px;font-size:12px}.bench-footer .row{margin-left:auto}.bench-footer button{font-size:12px}.zoom-controls{font-size:12px}.zoom-controls button{min-height:32px;padding:4px 8px}.zoom-controls #zoomLabel{min-width:40px;font-size:12px}.dim-inputs{gap:6px}.presets{gap:4px}.presets button{min-height:30px;font-size:11px}.collection{display:grid;grid-template-columns:1fr 1fr;gap:16px}.collection>.section-heading,.collection>.works,.collection>.new-work,.collection>.image-import{grid-column:1/-1}.works{grid-template-columns:1fr 1fr;max-height:260px}.work-item{grid-template-columns:36px minmax(0,1fr);gap:7px;padding:8px}.work-item canvas{max-width:36px;max-height:36px}.collection>.row{grid-column:1/-1}.templates .row{flex-direction:column}.templates button{width:100%}.recovery .row{display:grid;grid-template-columns:1fr 1fr}}