:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#e8ecf2;background:#0c1119}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#1c2838 0,#0c1119 65%)}header{max-width:1380px;margin:auto;padding:23px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #26313f}.brand{font-size:25px;font-weight:950;letter-spacing:-1.5px}.brand span{color:#d7fb79}.brand small{font-size:10px;font-weight:750;letter-spacing:2px;color:#7e8fa2;margin-left:10px}.header-meta{font-size:10px;color:#75869a;letter-spacing:1.4px}main{max-width:1380px;margin:auto;padding:25px 30px 60px;display:grid;grid-template-columns:minmax(320px,480px) minmax(490px,1fr);gap:42px}.display{position:sticky;top:20px;align-self:start}.screen-frame{position:relative;padding:8px;background:#1c2733;border:1px solid #384355;box-shadow:0 20px 75px #0008;border-radius:22px;max-width:450px;margin:auto}.screen-frame canvas{display:block;width:100%;aspect-ratio:9/16;border-radius:15px;background:#40534c}.rec-flag{display:none;position:absolute;right:20px;top:20px;background:#120e14b8;border-radius:25px;padding:8px 12px;color:#ff696d;font-size:12px;font-weight:900;letter-spacing:1px}.rec-flag.on{display:block}.monitor{margin:12px 0 15px;display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#9aa9b8}.monitor span:last-child{white-space:nowrap;color:#d7fb79;font-size:10px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}button,select,input{font:inherit}button{cursor:pointer;background:#232d3b;color:#e3ebf5;border:1px solid #3a485a;border-radius:10px;padding:11px;font-size:12px;font-weight:800}button:hover{background:#303e50}button.primary{background:#d7fb79;border-color:#d7fb79;color:#1b2517}button.record{background:#f56f75;border-color:#f56f75;color:#200f16}button:disabled{opacity:.4;cursor:default}.download{display:block;margin-top:12px;background:#d7fb79;color:#15231a;text-align:center;text-decoration:none;padding:15px;border-radius:12px;font-size:13px;font-weight:850}.hidden{display:none}.intro{margin:5px 0 21px}.tag{font-size:10px;color:#d7fb79;letter-spacing:1.8px;font-weight:900}.intro h1{margin:10px 0;font-size:clamp(30px,4vw,51px);letter-spacing:-2px;line-height:1.05}.intro h1 em{color:#d7fb79;font-style:normal}.intro p{font-size:13px;max-width:600px;line-height:1.65;color:#9ba9b9}.panel{border:1px solid #293746;border-radius:16px;background:#161f2a;padding:18px;margin:17px 0}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.panel-title h2{font-size:12px;letter-spacing:1.6px;margin:0}.panel-title span{font-size:10px;color:#8093a5}.editor-tools{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}.editor-tools button{font-size:10px;padding:8px 10px}.editor-tools .selected{background:#d7fb79;color:#1a2319;border-color:#d7fb79}.editor-wrap{border-radius:10px;overflow:hidden;border:1px solid #405364;background:#263c3d}.editor-wrap canvas{display:block;width:100%;touch-action:none;cursor:crosshair}.editor-footer{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:#b3c1ce}.editor-footer button{padding:7px 10px;font-size:10px}.small{font-size:11px;line-height:1.6;color:#8495a7;margin:10px 0 0}.setting{display:flex;align-items:center;gap:12px;justify-content:space-between;margin:10px 0;font-size:12px;color:#aebbca}.setting select,.setting input{background:#101823;color:#e3edf5;border:1px solid #35475a;border-radius:8px;padding:8px;width:165px}.setting input[type=checkbox]{width:18px;height:18px;accent-color:#d7fb79}.drivers{display:grid;gap:8px}.driver{display:grid;grid-template-columns:20px minmax(66px,1fr) 102px 105px 90px;gap:7px;align-items:center;padding:9px 8px;border:1px solid #2d3e50;border-radius:9px;font-size:11px}.driver label{font-size:10px;color:#a8b9cc}.driver input[type=color]{height:30px;width:30px;border:0;padding:0;background:transparent;cursor:pointer}.driver select,.driver input[type=text]{min-width:0;width:100%;background:#101823;border:1px solid #3b4c5e;padding:7px;color:#e5eaf2;border-radius:7px;font-size:11px}.driver .num{font-size:11px;color:#71869a;font-weight:800}footer{padding:22px;text-align:center;font-size:10px;letter-spacing:.5px;color:#718397}@media(max-width:980px){main{grid-template-columns:1fr;max-width:690px;gap:20px}.display{position:static}.screen-frame{max-width:410px}}@media(max-width:580px){main{padding:16px;grid-template-columns:minmax(0,1fr)}header{padding:16px}.header-meta{display:none}.brand{font-size:22px}.brand small{display:block;margin:0}.panel{padding:11px}.driver{grid-template-columns:17px minmax(50px,1fr) minmax(70px,95px) minmax(75px,90px);gap:5px}.driver input[type=color]{grid-column:4;grid-row:2}.driver select:last-child{grid-column:2/4;grid-row:2}}
.editor-tools select{background:#101823;border:1px solid #35475a;color:#dfe8f0;border-radius:8px;padding:7px;min-width:95px}#editor{aspect-ratio:12/19;width:100%;height:auto}#gateTools{margin-top:10px}.driver{grid-template-columns:20px minmax(60px,1fr) 100px 90px 32px}.screen-frame{max-width:390px}.monitor{line-height:1.5}.panel-title span{text-align:right}@media(min-width:981px){.display{top:12px}.screen-frame{max-width:min(390px,calc((100vh - 190px)*.5625))}}@media(max-width:580px){.driver{grid-template-columns:16px minmax(55px,1fr) 88px 80px}.screen-frame{max-width:360px}}