@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:block}
*{box-sizing:border-box}
body{margin:0;display:flex;font:14px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;color:#222;background:#f3f3f3;min-height:100vh}
#panel{width:320px;flex:none;background:#fff;border-right:1px solid #ddd;padding:14px 16px;overflow-y:auto;height:100vh;position:sticky;top:0}
h1{font:700 28px "Barlow Condensed",sans-serif;margin:0 0 8px;text-transform:uppercase}
h1 small{font-size:14px;color:#d62828;vertical-align:middle}
h2{font:700 15px "Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#555;margin:0 0 6px}
section{border-bottom:1px solid #eee;padding:8px 0 10px}
label{display:block;margin:4px 0;font-size:12px;color:#555}
input,select,button{font:inherit;font-size:13px}
input:not([type=checkbox]),select{width:100%;padding:4px 6px;border:1px solid #ccc;border-radius:4px;background:#fff}
.row{display:flex;gap:6px;align-items:center}
.row>label,.row>input{flex:1}
.chk{display:flex;align-items:center;gap:4px;font-size:13px;color:#222}
.chk input{width:auto}
button{padding:5px 10px;border:1px solid #bbb;border-radius:4px;background:#f7f7f7;cursor:pointer}
button:hover{background:#eee}
.wide{width:100%;margin-top:6px}
.primary{background:#111;color:#fff;border-color:#111;font-weight:600;padding:8px}
.primary:hover{background:#333}
#drop{border:2px dashed #bbb;border-radius:6px;padding:14px;text-align:center;color:#666;margin-bottom:6px}
#drop.over{border-color:#d62828;background:#fff5f5}
.link{color:#d62828;cursor:pointer;text-decoration:underline;display:inline}
.small{font-size:11.5px;color:#777;margin:4px 0}
.filter{display:grid;grid-template-columns:1.6fr .7fr 1fr auto;gap:4px;margin-bottom:4px}
.filter button{padding:2px 7px}
.quad{display:grid;grid-template-columns:1fr 1fr;gap:4px}
main{flex:1;padding:18px;min-width:0}
canvas{width:100%;max-width:1200px;height:auto;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.12);touch-action:none;display:block}
.hint{max-width:1200px}
@media (max-width:800px){body{flex-direction:column}#panel{width:100%;height:auto;position:static}}