*{box-sizing:border-box}body{margin:0;background:#090b0f;color:#f6f7f9;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
header,main{width:min(1100px,calc(100% - 24px));margin:auto}header{padding:28px 0 20px;display:flex;justify-content:space-between;gap:16px;align-items:end}
small{color:#8cf0b0;font-weight:800}h1{margin:6px 0;font-size:clamp(28px,5vw,50px)}p{color:#98a4b5}
main{display:grid;grid-template-columns:1fr 320px;gap:16px}section,aside{background:#141820;border:1px solid #2c3543;border-radius:20px;padding:14px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}button,.toolbar label{background:#1b222d;color:#fff;border:1px solid #2c3543;border-radius:11px;padding:10px 12px;font-weight:700}
input[type=file]{display:none}.stage{position:relative;aspect-ratio:9/12;background:#040507;border-radius:15px;overflow:hidden}
video{display:none}canvas{width:100%;height:100%;display:block}.stage div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#98a4b5;gap:7px}
.stage strong{color:#fff}.meter{height:5px;background:#252c36;margin-top:12px;border-radius:9px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:#8cf0b0}
aside label{display:block;margin:20px 0;color:#98a4b5}output{float:right;color:#fff}input[type=range]{width:100%;accent-color:#8cf0b0}
.skins{display:grid;grid-template-columns:1fr 1fr;gap:8px}.skins .active{background:#8cf0b0;color:#07120b}.note{background:#202630;padding:12px;border-radius:12px;font-size:12px;line-height:1.6}
@media(max-width:820px){header{align-items:start;flex-direction:column}main{grid-template-columns:1fr}}