:root{
    --ink:#0b0e14;
    --panel:#111624;
    --panel2:#161c2e;
    --line:#232c42;
    --text:#e6ebf4;
    --muted:#8a94a8;
    --faint:#5a6478;
    --a:#ffc857;      /* アドレスA: 測量テープのアンバー */
    --b:#6ecbff;      /* アドレスB: 図面のシアン */
    --dim:#f0f3f8;    /* 寸法線 */
    --ok:#7fd9a6;
    --err:#ff8f7a;
    --radius:10px;
    --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --sans:"IBM Plex Sans JP", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html,body{height:100%;}
  body{
    background:var(--ink);
    color:var(--text);
    font-family:var(--sans);
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--b);}

  .wrap{max-width:1100px; margin:0 auto; padding:20px 20px 48px;}

  header{
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
    padding:6px 2px 18px;
    border-bottom:1px solid var(--line);
    margin-bottom:20px;
  }
  .brand{font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--muted);}
  h1{font-size:19px; font-weight:600; letter-spacing:.02em;}
  h1 .cmd{font-family:var(--mono); color:var(--a); font-weight:500;}
  .tagline{color:var(--muted); font-size:12.5px;}

  .grid{
    display:grid; grid-template-columns: 340px 1fr; gap:18px;
  }
  @media (max-width: 860px){ .grid{grid-template-columns:1fr;} }

  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
  }
  .panel h2{
    font-size:11px; font-weight:600; letter-spacing:.14em;
    color:var(--faint); text-transform:uppercase;
    margin-bottom:12px;
  }

  .addr-block{border-left:3px solid var(--line); padding-left:12px; margin-bottom:16px;}
  .addr-block.a{border-color:var(--a);}
  .addr-block.b{border-color:var(--b);}
  .addr-block label{
    display:block; font-size:12px; color:var(--muted); margin-bottom:5px;
  }
  .addr-block .tag{
    font-family:var(--mono); font-weight:600; font-size:12px;
    margin-right:6px;
  }
  .addr-block.a .tag{color:var(--a);}
  .addr-block.b .tag{color:var(--b);}

  input[type=text], input[type=number]{
    width:100%;
    background:var(--ink);
    border:1px solid var(--line);
    color:var(--text);
    font-family:var(--mono);
    font-size:13.5px;
    padding:8px 10px;
    border-radius:7px;
    outline:none;
  }
  input:focus-visible{border-color:var(--muted); box-shadow:0 0 0 2px rgba(110,203,255,.18);}
  input.bad{border-color:var(--err);}
  .hint{font-size:11.5px; color:var(--faint); margin-top:4px; font-family:var(--mono);}
  .hint.err{color:var(--err); font-family:var(--sans);}

  .row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .field{margin-bottom:12px;}
  .field > label{display:block; font-size:12px; color:var(--muted); margin-bottom:5px;}

  .btnrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px;}
  button{
    font-family:var(--sans);
    font-size:12.5px;
    color:var(--text);
    background:var(--panel2);
    border:1px solid var(--line);
    border-radius:7px;
    padding:7px 12px;
    cursor:pointer;
  }
  button:hover{border-color:var(--muted);}
  button:focus-visible{outline:2px solid var(--b); outline-offset:1px;}
  button.primary{background:#20304e; border-color:#31456c;}
  button.mode{font-family:var(--mono);}
  button.mode.active-a{background:rgba(255,200,87,.14); border-color:var(--a); color:var(--a);}
  button.mode.active-b{background:rgba(110,203,255,.14); border-color:var(--b); color:var(--b);}

  details.origin{margin-top:14px; border-top:1px dashed var(--line); padding-top:12px;}
  details.origin summary{
    font-size:12px; color:var(--muted); cursor:pointer; list-style:none; user-select:none;
  }
  details.origin summary::before{content:"▸ "; color:var(--faint);}
  details.origin[open] summary::before{content:"▾ ";}
  details.origin .inner{margin-top:10px;}

  /* ===== 結果 ===== */
  .result{
    margin-top:18px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:18px 20px;
  }
  .result .main{
    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  }
  .result .label{font-size:12px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase;}
  .result .value{
    font-family:var(--mono);
    font-size:42px; font-weight:600; letter-spacing:.01em;
    color:var(--dim);
    font-variant-numeric:tabular-nums;
  }
  .result .value .unit{font-size:20px; color:var(--muted); margin-left:4px;}
  .result .tol{font-family:var(--mono); font-size:14px; color:var(--a);}
  .result .empty{color:var(--faint); font-size:13px; padding:6px 0;}

  .subgrid{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:10px; margin-top:14px;
  }
  .sub{
    background:var(--ink);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 12px;
  }
  .sub .k{font-size:11px; color:var(--faint); letter-spacing:.08em;}
  .sub .v{font-family:var(--mono); font-size:16px; margin-top:2px; font-variant-numeric:tabular-nums;}
  .sub .note{font-size:11px; color:var(--faint); font-family:var(--mono); margin-top:2px;}

  .centers{margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--muted); line-height:1.9; overflow-x:auto; white-space:nowrap;}
  .centers b.a{color:var(--a); font-weight:600;}
  .centers b.b{color:var(--b); font-weight:600;}

  /* ===== キャンバス ===== */
  .canvas-panel{padding:0; overflow:hidden; display:flex; flex-direction:column;}
  .canvas-head{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:12px 16px; border-bottom:1px solid var(--line);
  }
  .canvas-head h2{margin:0;}
  .canvas-head .spacer{flex:1;}
  .canvas-head .lv{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);}
  .canvas-head .lv output{font-family:var(--mono); color:var(--text); min-width:8.5em; text-align:right;}
  input[type=range]{accent-color:var(--b); width:130px;}
  canvas{display:block; width:100%; touch-action:manipulation; cursor:crosshair;}
  #plan{background:
    radial-gradient(1200px 500px at 30% -10%, rgba(110,203,255,.05), transparent 60%),
    var(--panel);}
  .elev-label, .plan-label{
    font-size:10.5px; letter-spacing:.16em; color:var(--faint);
    padding:6px 16px 2px; text-transform:uppercase; font-family:var(--mono);
    border-top:1px solid var(--line);
  }
  .plan-label{border-top:none;}
  footer{
    margin-top:26px; padding-top:14px; border-top:1px solid var(--line);
    color:var(--faint); font-size:12px;
    display:flex; gap:16px; flex-wrap:wrap;
  }
  .toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(10px);
    background:#1c2438; border:1px solid var(--line); color:var(--text);
    padding:8px 16px; border-radius:8px; font-size:13px;
    opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  @media (prefers-reduced-motion: reduce){ .toast{transition:none;} }

/* --- 以下はモックに無い追加分 --- */

/* wasm が初期化できなかったときの帯。操作は止める。 */
.fatal{
  background:#3a1512; color:var(--err);
  border-bottom:1px solid var(--err);
  padding:10px 16px; font-size:13px;
}
body.dead .wrap{ opacity:.35; pointer-events:none; }

/* 方位角・仰角の行 */
.result .main + .main{ margin-top:6px; }
.dir-sub{ color:var(--muted); font-size:12.5px; margin-left:10px; }