:root{--bg:#fff;--pn:#ecece8;--ln:#cfcfca;--ink:#1d1d1b;--mt:#6b6b66;--ac:#1a56ff;--ac2:#ff5a36;--ok:#00a56a;--wr:#e08a00;--bd:#e5484d}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.45 "IBM Plex Sans",system-ui,sans-serif}
.app{display:grid;grid-template-columns:350px 1fr;height:100dvh}

/* Grasshopper-style canvas: dotted grey, components with grips. The panel sits beside the viewport, never over it. */
.panel{background:var(--pn) radial-gradient(#cfcfca 1px,transparent 1.2px) 0 0/16px 16px;border-right:1px solid #b9b9b3;overflow:auto;padding:20px 22px 28px}
h1{font-size:17px;font-weight:600;margin:0 0 4px}
h2{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--mt);margin:0 0 6px}
header p{margin:0;color:var(--mt);font-size:12.5px}
.actions{display:flex;gap:8px;margin:18px 0 8px}
button{font:inherit;color:var(--ink);background:#f7f7f4;border:1px solid #2b2b29;border-radius:3px;padding:7px 12px;cursor:pointer}
button:hover{background:#fff;border-color:var(--ac)}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.go{flex:1;background:var(--ac);border-color:var(--ac);color:#fff;font-weight:600}
.go:hover{background:var(--ac2);border-color:var(--ac2);color:#fff}
.go:disabled{opacity:.55;cursor:default}
#fold{display:none}
#status{min-height:18px;margin:0 0 2px;font-size:12px;color:var(--ok)}
.sl{position:relative;background:#f7f7f4;border:1px solid #2b2b29;border-radius:3px;padding:8px 10px 10px;margin:12px 0}
.sl::before,.sl::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;background:#fff;border:1px solid #2b2b29;border-radius:50%}
.sl::before{left:-5px}.sl::after{right:-5px}
.sl label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mt)}
output{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:18px;margin:8px 0 0;border:1px solid #2b2b29;border-radius:2px;cursor:ew-resize;background:linear-gradient(to right,#b9b9b3 var(--v,50%),#fff var(--v,50%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:5px;height:18px;background:var(--ink)}
input[type=range]::-moz-range-thumb{width:5px;height:18px;background:var(--ink);border:0;border-radius:0}
.hist{margin-top:16px;background:#f7f7f4;border:1px solid #2b2b29;border-radius:3px;padding:8px 10px}
.hist canvas{display:block;width:100%;height:auto}
.method{margin-top:16px;color:var(--mt);font-size:12.5px}
.method summary{cursor:pointer;color:var(--ink)}
.method ul{padding-left:18px;margin:8px 0 0}
.method li{margin-bottom:5px}

/* Viewport (Rhino-like): KPI strip above, toolbar below, canvas in between */
.stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--ln);background:#f7f7f4}
.kpi{padding:12px 16px;border-right:1px solid var(--ln)}
.kpi:last-child{border:0}
.kpi span{display:block;color:var(--mt);font-size:12px}
.kpi b{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums}
.kpi i{display:block;font-style:normal;font-size:12px;color:var(--mt);min-height:17px;font-variant-numeric:tabular-nums}
.ok{color:var(--ok)!important}.wr{color:var(--wr)!important}.bd{color:var(--bd)!important}
#view{flex:1;min-height:0;position:relative;background:#fff;border:1px solid #9aa3ab;margin:8px}
#view canvas{display:block;width:100%;height:100%;touch-action:none}
.vtab{position:absolute;top:0;left:0;z-index:2;padding:2px 10px;font-size:12px;background:#e9edf0;border:0 solid #9aa3ab;border-width:0 1px 1px 0;color:#333;pointer-events:none}
.bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding:6px 16px 10px;color:var(--mt);font-size:12px}
.tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.grp{display:inline-flex}
.grp button{border-radius:0;margin-left:-1px}
.grp button:first-child{border-radius:3px 0 0 3px;margin:0}.grp button:last-child{border-radius:0 3px 3px 0}
.bar button{padding:4px 10px;font-size:12px}
.bar button[aria-pressed=true]{background:var(--ac);color:#fff;border-color:var(--ac)}

@media(max-width:820px){
  .app{display:flex;flex-direction:column}
  .stage{order:1;flex:1}
  .panel{order:2;flex:none;max-height:46dvh;border-right:0;border-top:1px solid #b9b9b3;padding:12px 18px calc(14px + env(safe-area-inset-bottom))}
  .panel header p{display:none}
  h1{font-size:15px}
  .actions{margin:8px 0 6px}
  .actions button{padding:8px 10px}
  #fold{display:block}
  .panel.fold .sliders,.panel.fold .method,.panel.fold .hist{display:none}
  .kpi{padding:8px 10px}
  .kpi span{font-size:10.5px}
  .kpi b{font-size:16px}
  .kpi i{font-size:10.5px;min-height:14px}
  #view{margin:4px}
  .bar{padding:4px 10px 6px;gap:4px}
  #dims{font-size:11px;width:100%}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* aviation-canopy additions */
.panel{border-top:3px solid transparent;border-image:linear-gradient(90deg,#1a56ff,#1ec8e0 45%,#ff5a36) 1}
h3{display:flex;align-items:center;gap:8px;margin:18px 0 -2px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ac)}
.sliders h3:nth-of-type(2)::before{background:var(--ac2)}
.sliders h3:nth-of-type(3)::before{background:#1ec8e0}
.presets{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.presets button{padding:5px 10px;font-size:12px}
.presets button:hover{background:var(--ac);border-color:var(--ac);color:#fff}
.kpi b{color:var(--ink)}
.kpis{border-bottom:2px solid var(--ac)}
@media(max-width:820px){.panel.fold h2,.panel.fold .presets{display:none}h3{margin-top:12px}}