:root{
    --bg:#0e1116; --panel:#151a21; --panel-2:#1a212a; --line:#232c38;
    --ink:#dfe6ef; --ink-dim:#8894a4; --ink-faint:#5b6675;
    --sel:#ffb454; --pick:#35c3e8; --bad:#e0655f; --warn:#e8b34a; --ok:#6bd68a;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0; overscroll-behavior:none; touch-action:manipulation}   /* no double-tap zoom, no rubber-banding */
  body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:13px;
       display:flex; flex-direction:column; overflow:hidden}

  header{display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; padding:6px 14px; min-height:46px; flex:0 0 auto;
         border-bottom:1px solid var(--line); background:var(--panel)}
  .title{display:flex; align-items:baseline; gap:10px}
  .title b{font-weight:600; letter-spacing:.02em}
  .title span{font-family:var(--mono); font-size:10.5px; color:var(--ink-faint);
              text-transform:uppercase; letter-spacing:.14em}
  /* ---------- quick access beside the title: undo and redo ---------- */
  .qat{display:flex; gap:4px; align-self:center; margin-left:2px}
  .qat button{width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center}
  .qat button svg{width:20px; height:20px; display:block}
  .qat button:disabled{opacity:.3}
  /* ---------- the ribbon: named groups of icon buttons ---------- */
  .ribbon{display:flex; margin-left:auto; flex-wrap:wrap; align-items:stretch}
  .rgroup{display:flex; flex-direction:column; align-items:center; padding:0 10px; border-left:1px solid var(--line)}
  .rgroup:first-child{border-left:none}
  .rgroup:last-child{padding-right:0}
  .rbtns{display:flex; gap:3px}
  .rcap{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
        margin-top:1px; line-height:1.5}
  .ribbon button{display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 9px 4px; min-width:60px;
                 background:transparent; border-color:transparent; color:var(--ink-dim)}
  .ribbon button:hover{border-color:#39465a; background:#1f2833; color:var(--ink)}
  .ribbon button svg{width:22px; height:22px; display:block}
  .ribbon button span{font-size:11px; line-height:1; white-space:nowrap}
  .ribbon button em{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-left:2px}
  .ribbon button.on{border-color:var(--pick); color:var(--pick); background:#12242c}
  .ribbon button.rel{box-shadow:0 0 0 1px var(--sel) inset; border-color:var(--sel); color:var(--sel)}
  .ribbon button.rel em{color:var(--sel)}

  /* ---------- radial menu on right-click ---------- */
  #radial{position:absolute; width:0; height:0; z-index:25}
  #radial[hidden]{display:none}
  #radial .ring{position:absolute; border:1px dashed var(--ink-faint); border-radius:50%; opacity:.45; pointer-events:none}
  #radial .rhub{position:absolute; left:-23px; top:-23px; width:46px; height:46px; border-radius:50%;
                background:var(--panel); border:1px solid #39465a; display:flex; align-items:center; justify-content:center;
                font-family:var(--mono); font-size:9px; color:var(--ink-dim); text-align:center; line-height:1.2; padding:2px;
                box-shadow:0 6px 24px rgba(0,0,0,.55); cursor:default}
  #radial .ritem{position:absolute; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%; padding:0;
                 background:var(--panel); border:1px solid #39465a; color:var(--ink); display:flex; flex-direction:column;
                 align-items:center; justify-content:center; gap:2px; box-shadow:0 6px 24px rgba(0,0,0,.55)}
  #radial .ritem svg{width:18px; height:18px; display:block}
  #radial .ritem span{font-size:8.5px; line-height:1; white-space:nowrap; color:var(--ink-dim)}
  #radial .ritem:hover{border-color:var(--pick); color:var(--pick); background:#12242c}
  #radial .ritem:hover span{color:var(--pick)}
  #radial .ritem.warn:hover{border-color:var(--bad); color:var(--bad); background:#2a1717}
  #radial .ritem.warn:hover span{color:var(--bad)}

  button,.filebtn{font-family:var(--sans); font-size:12px; color:var(--ink); background:var(--panel-2);
    border:1px solid var(--line); padding:6px 11px; border-radius:3px; cursor:pointer; white-space:nowrap;
    transition:border-color .12s, background .12s, color .12s}
  button:hover,.filebtn:hover{border-color:#39465a; background:#1f2833}
  button:focus-visible,.filebtn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--pick); outline-offset:1px}
  button.on{border-color:var(--pick); color:var(--pick); background:#12242c}
  button.primary{border-color:#2f6f86; background:#16303b; color:#bfe9f7}
  button.primary:hover{border-color:var(--pick); background:#1b3c4a}
  button.ghost{background:transparent}
  button.warn:hover{border-color:var(--bad); color:var(--bad)}
  button:disabled{opacity:.35; cursor:default}
  button.mini{padding:4px 8px; font-size:11px}

  header, .winhead, #stage{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}
  input, select, textarea, .derived{user-select:text; -webkit-user-select:text}
  main{flex:1; display:flex; min-height:0; position:relative}
  #stage{position:relative; flex:1; min-width:0; cursor:crosshair; touch-action:none}
  #svg{position:absolute; inset:0; width:100%; height:100%; display:block}

  .hud{position:absolute; pointer-events:none; font-family:var(--mono); font-size:11px}
  #status{left:0; right:0; bottom:0; height:26px; display:flex; align-items:center; gap:20px; padding:0 12px;
          background:linear-gradient(to top, rgba(14,17,22,.95), rgba(14,17,22,0)); color:var(--ink-dim)}
  #status b{color:var(--ink); font-weight:500}
  #status .msg{color:var(--pick)}
  #scalebar{left:12px; bottom:34px; color:var(--ink-dim)}
  #scalebar .bar{height:6px; border:1px solid var(--ink-faint); border-top:none; margin-bottom:3px}
  #callout{padding:7px 9px; background:rgba(14,17,22,.94); border:1px solid var(--pick); border-radius:2px;
           color:var(--ink); line-height:1.55; white-space:pre; display:none; z-index:3}
  #callout u{color:var(--pick); text-decoration:none; letter-spacing:.1em}
  #hint{left:12px; top:12px; color:var(--ink-faint); line-height:1.7; text-transform:uppercase;
        letter-spacing:.1em; font-size:10px}
  #hint .touch{display:none}

  /* ---------- windows opened from the ribbon ---------- */
  #windows{position:absolute; inset:0; pointer-events:none; overflow:hidden}
  .win{position:absolute; width:316px; max-width:calc(100% - 16px); max-height:calc(100% - 40px);
       display:flex; flex-direction:column; background:var(--panel); border:1px solid #39465a; border-radius:4px;
       box-shadow:0 12px 40px rgba(0,0,0,.5); pointer-events:auto}
  .win[hidden]{display:none}
  .winhead{display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line);
           cursor:move; flex:0 0 auto; touch-action:none}
  .winhead b{font-size:10px; font-weight:600; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.16em}
  .winhead span{flex:1; font-family:var(--mono); font-size:11px; color:var(--ink-dim);
                overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .winhead button{padding:0 7px; font-size:15px; line-height:1.4}
  .winbody{overflow-y:auto; padding:12px 14px 14px; min-height:0}
  .winhead .mini{padding:2px 8px; font-size:11px; line-height:1.5}
  /* windows that stretch: a grip in the corner, dragged with a mouse or a finger */
  .win.resizable{min-width:320px; min-height:220px}
  .wingrip{position:absolute; right:0; bottom:0; width:22px; height:22px; cursor:nwse-resize; touch-action:none; opacity:.75;
           background:linear-gradient(135deg, transparent 0 52%, var(--ink-faint) 52% 60%, transparent 60% 72%, var(--ink-faint) 72% 80%, transparent 80%)}
  .winbody.v3d{padding:0; overflow:hidden; flex:1; position:relative; cursor:grab}
  #svg3d{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
  .exlist .ex{padding:9px 10px 10px; border:1px solid var(--line); border-radius:3px; background:var(--panel-2); margin-bottom:8px}
  .exlist .ex b{display:block; font-size:12px; margin-bottom:3px}
  .exlist .ex b em{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-left:6px}
  .exlist .ex p{margin:0 0 8px; font-size:11px; color:var(--ink-dim); line-height:1.5}
  .exlist .sub{margin:0 0 8px; padding:7px 9px 4px; border:1px dashed var(--line); border-radius:3px}
  .exlist .subrow{display:flex; align-items:center; gap:8px; margin-bottom:4px}
  .exlist .subrow .nm{flex:1; font-size:12px}
  .exlist .subrow .nm em{font-style:normal; font-family:var(--mono); font-size:10px; color:var(--ink-faint); margin-left:6px}
  .exlist .sub p{margin:0 0 4px}
  .winlist{max-height:168px; overflow-y:auto; margin-bottom:10px}
  .winlist:empty{display:none}
  .row{display:flex; align-items:center; gap:8px; margin-bottom:8px}
  .row label{flex:1; color:var(--ink-dim); font-size:12px}
  input[type=number],input[type=text],select{font-family:var(--mono); font-size:12px; color:var(--ink);
    background:var(--bg); border:1px solid var(--line); border-radius:3px; padding:5px 7px}
  input[type=number]{width:92px; text-align:right}
  input[type=text]{width:130px}
  select{width:100%; cursor:pointer}
  input:hover,select:hover{border-color:#39465a}
  .unit{width:24px; color:var(--ink-faint); font-family:var(--mono); font-size:11px}
  .chk{display:flex; align-items:center; gap:7px; color:var(--ink-dim); font-size:12px; cursor:pointer}
  .derived{font-family:var(--mono); font-size:11px; color:var(--ink-faint); line-height:1.8;
           border-top:1px dashed var(--line); padding-top:9px; margin-top:11px}
  .derived b{color:var(--ink-dim); font-weight:400}
  .empty{color:var(--ink-faint); font-size:12px; line-height:1.6}
  .note{font-size:11px; color:var(--ink-faint); line-height:1.5; margin-top:9px}

  .alert{margin-top:10px; padding:8px 9px; border-radius:3px; font-family:var(--mono);
         font-size:11px; line-height:1.65}
  .alert.warn{border:1px solid #6a5220; background:#241d0e; color:var(--warn)}
  .alert.bad{border:1px solid #6a2f2c; background:#241211; color:var(--bad)}
  .alert b{display:block; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:9.5px; margin-bottom:3px}

  .chips{display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 4px}
  .chip{padding:4px 8px; font-family:var(--mono); font-size:11px; border:1px solid var(--line);
        border-radius:12px; background:var(--panel-2); color:var(--ink-faint); cursor:pointer}
  .chip:hover{border-color:#39465a}
  .chip.on{border-color:var(--pick); color:var(--pick); background:#12242c}
  .swatches{display:flex; gap:6px; margin:2px 0 10px}
  .sw{width:20px; height:20px; border-radius:50%; border:2px solid transparent; cursor:pointer}
  .sw.on{border-color:var(--ink)}

  .list{display:flex; flex-direction:column; gap:4px}
  .item{display:flex; align-items:center; gap:8px; padding:7px 8px; background:var(--panel-2);
        border:1px solid transparent; border-radius:3px; font-family:var(--mono); font-size:11px; cursor:pointer}
  .item:hover{border-color:#39465a}
  .item.on{border-color:var(--sel)}
  .item .dot{width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--ink-faint)}
  .item .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .item .meta{margin-left:auto; color:var(--ink-faint); text-align:right; white-space:nowrap}
  .item .meta.bad{color:var(--bad)} .item .meta.warn{color:var(--warn)} .item .meta.ok{color:var(--ok)}
  .item .x{padding:0 3px; color:var(--ink-faint); background:none; border:none; font-size:15px; line-height:1; cursor:pointer}
  .item .x:hover{color:var(--bad); background:none}
  .btnrow{display:flex; gap:6px; margin-top:10px}
  .btnrow button{flex:1}
  input[type=file]{display:none}

  @media (max-width:1200px){
    .title span{display:none}          /* an iPad on its side: the ribbon keeps the title's row */
    header{gap:8px 12px}
    .rgroup{padding:0 6px}
    .ribbon button{min-width:56px; padding-left:7px; padding-right:7px}
  }
  @media (max-width:1000px){
    #hint{display:none}
    .win{width:calc(100% - 16px); left:8px !important}
  }
  /* ---------- a finger-first device: an iPad in a browser ---------- */
  @media (hover: none), (pointer: coarse){
    #hint .mouse{display:none}
    #hint .touch{display:inline}
    .ribbon button{padding-top:7px; padding-bottom:6px}
    .winhead button{padding:2px 12px; font-size:17px}
    .qat button{width:40px; height:40px}
    .item{padding:9px 8px}
    .item .x{padding:0 8px; font-size:18px}
    input[type=number],input[type=text],select{padding:7px 8px}
    .chip{padding:6px 10px}
    button.mini{padding:6px 10px}
  }
  @media (prefers-reduced-motion: reduce){*{transition:none !important}}

  /* ---------- side buttons + side settings dialog ---------- */
  .facebtn{font-family:var(--mono)}
  .facebtn.off{opacity:.35}
  .facebtn.bad{border-color:#6a5220; color:var(--warn)}
  /* ---------- the elevation window: one face, its runs and its section ---------- */
  .dlgrow{display:flex; align-items:center; gap:7px; margin:3px 0; font-size:11px;
          font-family:var(--mono); padding:2px 4px; border-radius:3px; cursor:pointer}
  .dlgrow:hover{background:var(--panel-2)}
  .dlgrow.on{background:#2a2114}
  .dlgrow.on .nm{color:var(--sel)}
  #elevBody svg circle[data-sel]{cursor:pointer; pointer-events:all}   /* the whole conduit, not just its outline, takes the click */
  .dlgrow .dot{width:9px; height:9px; border-radius:2px; flex:none}
  .dlgrow .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .dlgrow em{font-style:normal; color:var(--ink-faint)}
  .dlgrow button{padding:0 6px}

  /* ---------- collapsible property clusters ---------- */
  .clus{margin:0 0 6px}
  .clushead{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 9px}
  .clushead span{font-size:12px; color:var(--ink); white-space:nowrap}
  .clushead em{flex:1; font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint);
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right}
  .clushead i{font-style:normal; color:var(--ink-faint); font-size:10px}
  .clushead.open{border-color:#39465a}
  .clusbody{padding:8px 2px 2px}
  .clusbody[hidden]{display:none}

  /* ---------- per-obstacle choice on a run ---------- */
  .row select{flex:1; min-width:0}