*{box-sizing:border-box}body{margin:0;background:#101114;color:#f5f5f5;font:15px system-ui,-apple-system,"Microsoft JhengHei",sans-serif}header{padding:15px 18px;border-bottom:1px solid #333;display:flex;justify-content:space-between;align-items:center}header small,.hint{color:#aaa}main{max-width:1050px;margin:auto;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1fr);gap:18px}.preview{min-width:0;position:sticky;top:8px;align-self:start}canvas{display:block;max-width:100%;width:auto;height:min(66vh,650px);margin:auto;background:#000;border:1px solid #333}.transport{display:flex;align-items:center;gap:8px;margin-top:10px}.transport input{flex:1;min-width:40px}.panel{background:#1b1d21;padding:16px;border-radius:14px;min-width:0}h2{font-size:16px;margin:14px 0 10px}label{display:flex;flex-direction:column;gap:5px;color:#ddd;font-size:13px}input,select,button,.upload{border:1px solid #494c53;background:#292c32;color:white;padding:10px;border-radius:8px;font:inherit;min-width:0}button,.upload{cursor:pointer}button:disabled{opacity:.5;cursor:wait}input[type=color]{padding:2px;width:54px;height:37px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.colors{display:flex;flex-wrap:wrap;gap:12px}.colors label{flex-direction:row;align-items:center}.roll{display:grid;grid-template-columns:32px 1fr 1.2fr 35px;align-items:end;gap:7px;margin:8px 0}.roll input{width:100%}.roll .who{font-size:12px;color:#aaa;text-align:center;align-self:center}.actions{display:flex;gap:7px;flex-wrap:wrap;margin:12px 0}.hint{font-size:12px;line-height:1.6}#error{color:#ff9d9d;font-size:13px}.upload{display:inline-flex;align-items:center}@media(max-width:760px){main{display:block;padding:10px}.preview{position:static;margin-bottom:12px}canvas{height:min(48vh,460px)}.panel{padding:12px}.roll{grid-template-columns:30px 1fr 1.2fr 35px}}