.drw{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr auto auto;grid-template-areas:"tools palette" "tools sheet" "bar bar" "theory theory";grid-gap:10px 12px;gap:10px 12px;min-width:0}.drwtools{grid-area:tools;display:flex;flex-direction:column;gap:6px}.drwpalette{grid-area:palette;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}.drwsheet{grid-area:sheet;position:relative;min-width:0;display:flex;flex-direction:column}.drwbar{grid-area:bar;align-items:center;gap:8px}.drwbar,.drwtheory{display:flex;flex-wrap:wrap}.drwtheory{grid-area:theory;align-items:flex-end;gap:10px 14px;padding-top:10px;border-top:1px solid var(--настекле-край)}.drwcanvas{display:block;width:100%;height:clamp(280px,52vh,560px);flex:1 0 auto;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.12),0 8px 24px rgba(0,0,0,.14);touch-action:none;cursor:crosshair}.drwcanvas.erasing{cursor:cell}.drwempty{position:absolute;inset:0;display:grid;place-content:center;padding:0 16px;pointer-events:none;text-align:center}.drwempty p{margin:0;color:rgba(34,48,43,.38);font:500 26px/1.2 var(--font-heading);letter-spacing:.02em}.toolstage .widget .drwtool{width:42px;height:42px;display:inline-grid;place-items:center;padding:0;border-radius:999px}.toolstage .widget .drwtool.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}.toolstage .widget .drwtool:disabled{opacity:.4}.drwtools{padding-bottom:34px}.toolstage .widget .drwtool.danger{position:relative;z-index:2;height:76px;margin-bottom:-34px;display:inline-flex;flex-direction:column;justify-content:center;gap:6px;color:#fff;background:var(--accent);border-color:var(--accent)}.toolstage .widget .drwtool.danger b{font:700 18px/1 var(--font-body)}.drwsamplecap{position:absolute;left:14px;bottom:10px;margin:0;pointer-events:none;color:rgba(34,48,43,.55);font:500 13px/1.2 var(--font-body);letter-spacing:.01em;animation:drwcapfade 2.6s ease-out forwards}@keyframes drwcapfade{0%,70%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.drwsamplecap{animation:none}}.drwsr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.drwdetailrow{display:inline-flex;align-items:center;min-height:32px;font-size:13.5px}.drwdetailrow.off .drwdetail{opacity:.5}.drwnote{color:var(--настекле-тихо)}.drwdetail{display:flex;align-items:center;gap:10px}.drwdetail span{font:600 12px/1.2 var(--font-body);color:var(--настекле-тихо)}.drwdetail input{width:140px;accent-color:var(--accent)}.drwdetail b{min-width:6.5em;font-weight:600}.drwdetailrow.off .drwdetail b{font-weight:400;color:var(--настекле-тихо)}.drwpal button{padding:7px 12px;font-size:13px;border-radius:0}.drwcolors{display:flex;flex-wrap:wrap;gap:8px}.toolstage .widget .drwcolor{width:32px;height:32px;padding:0;border-radius:999px;background:var(--ink);border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 0 0 1px rgba(255,255,255,.22)}.toolstage .widget .drwcolor.on{outline:2px solid var(--fg);outline-offset:2px}.toolstage .widget .drwcolor,.toolstage .widget .drwcolor.on,.toolstage .widget .drwcolor:active,.toolstage .widget .drwcolor:hover{background:var(--ink)!important;border-color:transparent!important}.toolstage .widget .drwcolor:hover:not(.on){outline:2px solid color-mix(in srgb,var(--fg) 45%,transparent);outline-offset:2px}.drwcolorname{font-size:13px;color:var(--настекле-тихо);min-width:7em}.drwspacer{flex:1 1 auto}.toolstage .widget .drwplay{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-size:16px;font-weight:600;border-color:var(--accent)}.toolstage .widget .drwplay,.toolstage .widget .drwplay.on{background:var(--accent);color:#fff}.toolstage .widget .drwtoggle{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 11px;border-radius:9px;font-size:14px}.toolstage .widget .drwtoggle.on{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--accent)}.toolstage .widget .drwtoggle:disabled{opacity:.45}.drwdownload{position:relative}.drwmenu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:4;display:flex;flex-direction:column;min-width:220px;padding:6px;border-radius:12px;background:var(--bg);border:1px solid var(--настекле-край);box-shadow:0 10px 30px rgba(0,0,0,.22)}.toolstage .widget .drwmenu button{display:flex;align-items:baseline;gap:10px;white-space:nowrap;padding:9px 11px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left}.toolstage .widget .drwmenu button:focus-visible,.toolstage .widget .drwmenu button:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}.drwmenu b{min-width:4.6em;font:600 14px/1.25 var(--font-body)}.drwmenu span{font-size:12.5px;color:var(--настекле-тихо)}.drwfield{display:flex;flex-direction:column;gap:4px}.drwfield>span:first-child{font:600 12px/1.2 var(--font-body);color:var(--настекле-тихо)}.drwfield select,.drwtempo input{padding:8px 9px;border-radius:8px;font-size:14px}.drwtempo{flex-direction:row;align-items:center;gap:8px}.drwtempo input{width:4.2em;text-align:center}.drwinline{flex-direction:row;align-items:center;gap:8px}.drwstep{display:inline-flex;align-items:center;gap:6px}.toolstage .widget .drwstep button{width:34px;height:34px;padding:0;border-radius:8px;font-size:17px}.drwstep b{min-width:1.6em;text-align:center;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}@media (max-width:640px){.drw{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"tools" "palette" "sheet" "bar" "theory"}.drwtools{flex-direction:row;flex-wrap:wrap;padding-bottom:0}.drwdetail input{width:110px}.drwsheet{margin-inline:6px}.drwcanvas{height:clamp(300px,62vh,560px);height:clamp(300px,62dvh,560px)}.drwbtntext{display:none}.toolstage .widget .drwcolor{width:30px;height:30px}}@media (pointer:coarse){.toolstage .widget .drwstep button{width:40px;height:40px}.drwpal button{min-height:40px}.toolstage .widget .drwcolor{position:relative}.toolstage .widget .drwcolor:after{content:"";position:absolute;inset:-7px;border-radius:999px}.drwcolors{gap:10px}.drwdetail input{height:40px}}@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){.drw{grid-template-columns:auto minmax(0,1fr) minmax(200px,36%);grid-template-rows:auto auto 1fr;grid-template-areas:"tools sheet palette" "tools sheet bar" "tools sheet theory";align-items:start}.drwtools{display:grid;grid-template-columns:repeat(2,42px);align-content:start}.drwcanvas{height:calc(100vh - 24px);height:calc(100dvh - 24px)}.drwbar,.drwtheory{gap:8px 10px}.drwtheory{padding-top:8px}.drwbtntext{display:none}.drwdetail input{width:100px}.drwdetail{flex-wrap:wrap;row-gap:2px}}html:has(.toolsite .drw){height:auto;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}body:has(.toolsite .drw){height:auto;min-height:100dvh;overflow:visible;overscroll-behavior:none}