:root { color-scheme: dark; font-family: ui-monospace, monospace; background:#071b2a; color:#edf7ff; } * { box-sizing:border-box; } body { margin:0; padding:16px; overflow:hidden; } main { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:16px; height:calc(100vh - 32px); } .workspace, aside { background:#103246; border:1px solid #31708b; border-radius:8px; padding:14px; } .workspace { display:flex; flex-direction:column; min-height:0; } aside { min-height:0; overflow-y:auto; } h1,h2 { margin:0 0 8px; color:#77e8ff; } h1 { font-size:23px; } h2 { font-size:16px; } p { color:#c7e4ed; font-size:13px; } .toolbar, .track-actions { display:flex; gap:8px; margin:10px 0; } button,input,textarea { font:inherit; } button { border:1px solid #77e8ff; border-radius:4px; background:#164d63; color:#fff; padding:8px; cursor:pointer; } button:hover { background:#247ea2; } button:disabled { cursor:not-allowed; opacity:.45; } canvas { display:block; width:100%; min-height:0; flex:1; background:#164d63; border:1px solid #77e8ff; cursor:crosshair; } label { display:grid; gap:8px; } output { color:#ffcf70; } textarea { width:100%; background:#071b2a; color:#b8ff97; border:1px solid #31708b; padding:8px; resize:vertical; } .hint { line-height:1.5; } @media(max-width:900px){ body{overflow:auto;} main{grid-template-columns:1fr;height:auto;} canvas{height:auto;min-height:400px;} aside{overflow:visible;} }