:root{color-scheme:dark;--bg:#111117;--panel:#1a1a23;--line:#30303e;--text:#eeedf5;--muted:#9b99ad;--accent:#be99ff;--pink:#ff6f9d;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 35% 0,#242034 0,transparent 55%),var(--bg);color:var(--text);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;border:1px solid var(--line);border-radius:8px;background:#242430;color:var(--text);padding:9px 13px;font-size:12px;white-space:nowrap}button:hover{background:#33303f}button:disabled{opacity:.5;cursor:default}a{color:var(--accent)}.topbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);background:#14141ceb}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-size:18px}.brand small{display:block;color:var(--muted);font-size:11px;margin-top:4px}.logo{display:grid;place-items:center;background:linear-gradient(135deg,#bf99ff,#fc6f99);color:#18121d;border-radius:12px;width:42px;height:42px;font-weight:900;font-size:25px}.connection{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:12px}.dot,.small-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#a49774}.dot.ready,.small-dot{background:#95cfae}main{max-width:1530px;margin:auto;padding:38px 4vw 22px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);margin:0 0 12px}h1{font-size:clamp(25px,2.8vw,39px);letter-spacing:-1.2px;margin:0 0 10px;font-weight:650}.intro p:not(.eyebrow){color:var(--muted);font-size:13px;margin:0;line-height:1.6}.help-link{font-size:12px;white-space:nowrap;text-decoration:none;border-bottom:1px solid #6e537e;padding:5px 0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px;align-items:start}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px}.editor{overflow:hidden}.panel-head{padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-head h2,.settings h2{font-size:15px;font-weight:600;margin:0 0 7px}.panel-head p{font-size:11px;color:var(--muted);margin:0;line-height:1.6}.layer-tags{display:flex;gap:7px;flex-direction:column;white-space:nowrap;font-size:10px}.layer-tags span,.layer-tags strong{font-weight:400;padding:6px 9px;border:1px solid var(--line);border-radius:5px;color:var(--muted)}.layer-tags strong{border-color:#675285;color:#d6c2f5;background:#30273d}.keyboard-scroll{overflow-x:auto;padding:28px 20px;background:linear-gradient(#16161d,#1d1824);border-top:1px solid #292532;border-bottom:1px solid #292532}.keyboard{min-width:680px;max-width:1000px;margin:auto;padding:14px;border:1px solid #393140;border-radius:12px;background:#141318;box-shadow:0 12px 50px #0004}.keyboard-row{display:flex;gap:5px;margin-bottom:5px}.keyboard-row:last-child{margin:0}.key{padding:0;flex-basis:0;height:43px;min-width:0;border-radius:5px;border:1px solid #ffffff19;position:relative;font-size:10px;color:#fff;text-shadow:0 1px 3px #000c;background:#555;box-shadow:inset 0 -3px 0 #0003;transition:outline-color .12s}.key[aria-pressed=true]{outline:2px solid #dab2ff;outline-offset:-2px}.key[aria-pressed=true]:after{content:"";position:absolute;right:5px;top:5px;width:4px;height:4px;background:#edccff;border-radius:50%}.key:hover{filter:brightness(1.15)}.selection-bar{display:flex;align-items:center;flex-wrap:wrap;gap:7px;padding:14px 20px}.selection-bar>span{color:var(--muted);font-size:11px;margin-right:7px}.selection-bar button{font-size:10px;padding:7px 9px}.selection-bar .source-button{margin-left:auto;border-color:#604c7b;color:#d5bef3}.selection-bar input[type=color]{width:28px;height:28px;padding:0;border:0;background:none}.preview-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--line);background:#1e1b26;gap:15px}.preview-button{background:#383044;border-color:#604b76;color:#e6cfff}.preview-bar span{font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted);margin-left:10px}.preview-bar p{font-size:10px;line-height:1.5;color:var(--muted);max-width:245px;margin:0}.settings{padding:22px 20px}.settings label{display:block;font-size:11px;color:#b8b4ca;margin:15px 0}.settings input:not([type=range]),.settings select,.frame-tools input[type=number]{width:100%;background:#121219;border:1px solid #3b3548;border-radius:7px;color:var(--text);padding:9px;margin-top:6px;font-size:12px}.settings input[type=range]{width:100%;accent-color:var(--accent);margin-top:10px}.settings output{float:right;color:var(--accent);font-size:10px}.two,.three{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.three{grid-template-columns:repeat(3,1fr);gap:7px}.two label,.three label{margin:0}.three[hidden],[hidden]{display:none!important}.run-controls{display:grid;gap:8px;margin-top:22px}.primary{background:#b293e1;border-color:#c8a8f7;color:#17121e;font-weight:650}.primary:hover{background:#c4a3f1}#runStatus{font-size:11px;color:#acccaF;line-height:1.6;min-height:34px;margin:12px 0}.background-note{display:flex;gap:8px;background:#171e1c;padding:12px;border:1px solid #304438;border-radius:8px}.small-dot{flex:none;margin-top:5px}.background-note b{font-size:11px;font-weight:500;color:#b2d5bd}.background-note p{font-size:10px;color:#9cac9f;line-height:1.6;margin:5px 0 0}details{font-size:11px;color:var(--muted);line-height:1.8;margin-top:18px}summary{cursor:pointer;color:#c9c0db}details ol{padding-left:18px}.subtle{margin-top:16px;width:100%;background:transparent;color:var(--muted);font-size:11px}.timeline-panel,.library-section{padding:18px 20px;border-top:1px solid var(--line)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head h3{font-size:13px;margin:0}.section-head button{font-size:10px;padding:7px 9px}.timeline{display:flex;overflow-x:auto;gap:8px;margin:14px 0}.frame-card{min-width:108px;text-align:left;border-radius:8px;padding:10px;border:1px solid #3e3549;background:#201e29}.frame-card.active{border-color:var(--accent);background:#302739}.frame-card b{display:block;font-size:11px;margin-bottom:8px}.frame-card small{color:var(--muted);font-size:10px}.swatches{display:flex;gap:2px;margin-bottom:7px}.swatches span{width:11px;height:14px;border-radius:2px}.frame-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.frame-tools label{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}.frame-tools input[type=color]{width:32px;height:28px;padding:0;border:0;background:none}.frame-tools input[type=range]{width:85px;accent-color:var(--accent)}.frame-tools input[type=number]{width:85px;margin:0;padding:7px}.frame-tools button{font-size:10px;padding:8px}.hint{font-size:10px;line-height:1.7;color:var(--muted);margin:15px 0 0}.library{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.library:empty:after{content:"Сохрани анимацию, чтобы вернуться к ней позже.";font-size:11px;color:var(--muted)}.library-item{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;overflow:hidden}.library-item button{border:0;border-radius:0;background:transparent;font-size:11px}.library-item button.delete{color:#b296a6;padding:8px}.toast{font-size:12px;color:#d3bcee;min-height:20px;margin:18px 0 0}.toast.error{color:#f3b2b2}footer{font-size:10px;color:#777386;margin-top:20px;text-align:center}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}@media(max-width:1100px){main{padding:28px 24px}.workspace{grid-template-columns:1fr;gap:14px}.settings{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.settings h2,.run-controls,#runStatus,.background-note,.settings details,.settings>.subtle{grid-column:1/-1}.settings>.three{grid-column:1/-1}.panel-head{padding:18px}.key{height:38px}.layer-tags{display:none}.selection-bar .source-button{margin-left:0}.intro{align-items:flex-start}}@media(max-width:850px){.workspace{grid-template-columns:1fr}.settings{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.settings h2,.run-controls,#runStatus,.background-note,.settings details,.settings>.subtle{grid-column:1/-1}.topbar{padding:12px 20px;height:auto;gap:15px}.connection>span:not(.dot){display:none}.intro{flex-direction:column;gap:12px}.panel-head{padding:16px}.settings>.three{grid-column:1/-1}.section-head{align-items:flex-start;flex-direction:column}.preview-bar p{max-width:180px}}@media(prefers-reduced-motion:reduce){.key{transition:none}}
html[lang=en] .library:empty:after{content:"Save an animation to return to it later."}.connection select{padding:7px 8px;background:#201d29;color:#ddd;border:1px solid #44364f;border-radius:7px;font-size:11px}


.mini-keyboard{display:grid;gap:1px;margin:9px 0;width:100px;height:30px}.mini-row{display:flex;gap:1px;height:4px}.mini-row span{flex-basis:0;min-width:0;border-radius:1px}.frame-card.active{outline:1px solid var(--accent)}

.language-switch{display:inline-flex;gap:3px;background:#121219;border:1px solid #3b3548;border-radius:8px;padding:3px}.language-switch button{border:0;padding:7px 10px;background:transparent;color:#aaa5b8;font-weight:600;font-size:11px}.language-switch button[aria-pressed=true]{background:#b293e1;color:#17121e}

.reactive-settings{margin:18px 0;padding:14px;border:1px solid #715887;border-radius:10px;background:#bb91e80a}.reactive-settings summary{font-weight:650;color:#d4b8ef}.reactive-settings label{margin-top:12px}.reactive-test{display:flex!important;align-items:center;gap:10px}.reactive-test input{width:auto!important}.reactive-settings input[type=color]{height:38px;width:100%}
.binding-row{display:flex;gap:6px;margin-top:6px}.binding-row button:first-child{flex:1}#ruleList>div{padding:8px 0;border-bottom:1px solid #44364f;overflow-wrap:anywhere;font-size:11px}#ruleList button{padding:3px 8px;margin-left:4px}