:root{color-scheme:dark;font:15px/1.45 system-ui,sans-serif;background:#09131c;color:#e8eef6}*{box-sizing:border-box}body{margin:0}header{height:65px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid #263743;background:#0d1923;color:#91a4b8}header .brand{font-size:15px;color:#edf2f8;text-decoration:none;letter-spacing:.04em}.brand strong{color:#f9b12a;margin-left:8px}main{display:grid;grid-template-columns:minmax(0,1fr) 335px;gap:18px;padding:20px;max-width:1700px;margin:auto}.preview-panel,aside{background:#0f1e29;border:1px solid #263a49;border-radius:12px;min-width:0}.preview-panel{padding:18px}.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px}h1,h2,p{margin:0}h1{font-size:22px}h2{font-size:18px}.title p,.side-head p,.hint,small{color:#98aabc;font-size:13px}.stage{height:min(65vh,700px);min-height:320px;background:#071019;border:1px solid #243745;border-radius:9px;position:relative;display:grid;place-items:center;overflow:hidden}.stage canvas{width:100%;height:100%;object-fit:contain;touch-action:none;image-rendering:pixelated}.empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#96a9bb}.empty b{color:#e7edf5;font-size:18px}.empty[hidden],label[hidden]{display:none}button,.upload,select{font:inherit;border:1px solid #354b5b;border-radius:7px;background:#142735;color:#dbe5ee;min-height:42px;padding:9px 12px}button,.upload{cursor:pointer}.upload{display:inline-flex;align-items:center;justify-content:center;position:relative}.upload input{position:absolute;width:1px;height:1px;opacity:0}.primary{background:#ffb52b;border-color:#ffbd48;color:#111b22;font-weight:700}.secondary{background:#142735;color:#dbe5ee}button:disabled{opacity:.45;cursor:default}.views{display:flex;gap:4px;flex-wrap:wrap}.views button{min-height:38px}.views .selected{border-color:#ffb52b;color:#ffbf4b;background:#302718}.viewbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap}.viewbar label{display:flex;align-items:center;gap:8px}.viewbar select{min-height:38px;padding:6px}.hint{margin-top:9px}#status{margin-top:8px;color:#f7bb58;font-size:13px;min-height:20px}aside{padding:18px;height:fit-content}.side-head{padding-bottom:16px;border-bottom:1px solid #273b49}.settings{display:grid;gap:14px;padding:16px 0}.settings label:not(.check){display:block;font-size:13px;color:#bdcbda}.settings select,.settings input[type=range]{display:block;width:100%;margin-top:5px}.settings output{float:right;color:#ffbd4c;font-variant-numeric:tabular-nums}.settings input[type=range]{accent-color:#ffb52b;height:24px}.check{display:flex;align-items:center;gap:8px;min-height:32px}.check input{width:19px;height:19px;accent-color:#ffb52b}.file-box{padding:10px;border:1px dashed #425a6a;border-radius:7px}.file-box input{display:block;max-width:100%;margin-top:7px}.actions{display:grid;gap:8px}.actions>*{width:100%}@media(max-width:760px){header{height:55px;padding:0 14px}header span{display:none}main{display:flex;flex-direction:column;gap:10px;padding:10px}.preview-panel,aside{padding:13px}.toolbar{align-items:flex-start}.title h1{font-size:19px}.title p{font-size:12px}.stage{min-height:250px;height:44vh;max-height:460px}.viewbar{display:block}.views{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.views button{padding:6px 3px;font-size:12px}.viewbar label{margin-top:8px}.settings{grid-template-columns:1fr 1fr;column-gap:14px}.settings .check,.file-box,.settings small,.settings label:has(select){grid-column:1/-1}.actions{grid-template-columns:1fr 1fr}.actions .secondary{grid-column:1/-1}}@media(max-width:380px){.settings{grid-template-columns:1fr}.settings .check,.file-box,.settings small,.settings label:has(select){grid-column:auto}.actions{grid-template-columns:1fr}.actions .secondary{grid-column:auto}}