*{box-sizing:border-box}body{margin:0;background:#0d111a;color:#eef1f8;font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}header{height:76px;display:flex;align-items:center;gap:12px;padding:14px clamp(18px,4vw,54px);border-bottom:1px solid #293043;background:#141925}.mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#ff3826,#ae1820);font-size:26px;font-weight:900}header strong,header small{display:block}header small{color:#9da8bc;font-size:12px}.layout{max-width:1500px;margin:auto;display:grid;grid-template-columns:350px minmax(0,1fr);gap:25px;padding:26px}.controls,.preview{background:#171d29;border:1px solid #2a3244;border-radius:20px;padding:24px;min-width:0}.controls h1{font-size:23px;line-height:1.2;margin:0 0 9px}.controls p,.note{color:#a5aec0;font-size:13px;margin:0 0 20px}.controls label{display:block;margin:15px 0;color:#dbe1ed;font-weight:600;font-size:13px}.controls input:not([type=file]):not([type=range]){width:100%;height:45px;display:block;margin-top:7px;padding:0 13px;border:1px solid #3a4459;border-radius:10px;background:#101622;color:white;font:inherit;outline:none}.controls input:focus{border-color:#fa5a4b}.upload{border:1px dashed #68738b;padding:15px;border-radius:12px;cursor:pointer;background:#202838}.upload input{display:block;margin-top:8px;width:100%;font-size:12px}.controls input[type=range]{display:block;width:100%;accent-color:#f04435;margin-top:8px}h2{font-size:16px}.serial{padding:14px;background:#101622;border:1px solid #2e374a;border-radius:12px;font-size:12px;color:#9da8bc;margin:16px 0}.serial strong{display:block;font-size:20px;letter-spacing:1px;color:white}.secondary,.primary{cursor:pointer;border:0;border-radius:10px;font-weight:700;padding:11px 14px}.secondary{background:#303a4d;color:#f1f4fb;margin-top:10px}.primary{width:100%;padding:15px;background:linear-gradient(110deg,#ed2d27,#fb6436);color:white;font-size:15px}.error{color:#ff968e!important;min-height:18px}.preview{align-self:start}.previewHead{display:flex;justify-content:space-between;gap:10px;margin-bottom:20px}.previewHead span{color:#9da8bc;font-size:13px}.canvasShell{background:#0e1420;padding:12px;border-radius:15px;overflow:hidden}canvas{display:block;width:100%;height:auto;touch-action:none;border-radius:8px}.note{text-align:center;margin:18px 0 0}@media(max-width:900px){.layout{grid-template-columns:1fr;padding:14px;gap:14px}.controls,.preview{padding:18px}.preview{grid-row:1}header{height:66px}.previewHead{margin-bottom:12px}}@media(max-width:500px){.controls,.preview{padding:13px}.canvasShell{padding:3px}.previewHead span{font-size:11px}}