*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:14px/1.45 "Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);
  display:grid;grid-template-columns:280px minmax(0,1fr) 300px;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:16px;height:100vh}
body.min .drawer{display:none}
body.min{grid-template-columns:280px minmax(0,1fr)}
main{grid-column:2;grid-row:2}
h2{font-size:16px;margin:0 0 12px}
.note{color:var(--note);margin:10px 0 0;font-size:13px}
.lbl{display:block;color:var(--note);font-size:12.5px;margin:14px 0 4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
main{min-height:0;overflow:hidden;display:flex;flex-direction:column}
#canvas{flex:1;min-height:0;overflow:auto;display:flex;padding:16px;scrollbar-gutter:stable}
#sheet{position:relative;margin:auto;flex:none;background:#fff;overflow:hidden;box-shadow:0 10px 30px rgba(2,12,28,.55)}
.guide{position:absolute;border:1px dashed var(--c4);pointer-events:none}
@media(max-width:1100px){
  body{display:flex;flex-direction:column;height:auto;padding:12px}
  .col,.drawer,.side{width:100%;height:auto}
  main{overflow:visible;min-height:60vh}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}