:root{
    --bg:#f0f3f6; --panel:#ffffff; --panel2:#f6f8fa; --edge:#ccd6df; --edge2:#9db4c6;
    --washi:#F1EBDE; --washi-edge:#b9b19e;
    --ink:#171310; --text:#2b3a48; --dim:#6b7d8f; --accent:#2f7fb8; --accent-dim:#5b9cc9;
    --warn:#c9502e; --shu:#c9502e;
    --mono:"SF Mono","Cascadia Code",Consolas,"Roboto Mono",monospace;
  }
  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;color:var(--text);padding:28px 20px 48px;
    font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
    background:var(--bg);
    background-image:
      linear-gradient(rgba(47,127,184,.07) 1px,transparent 1px),
      linear-gradient(90deg,rgba(47,127,184,.07) 1px,transparent 1px);
    background-size:24px 24px}
  .wrap{max-width:1060px;margin:0 auto}
  h1{font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:24px;font-weight:600;
    letter-spacing:.3em;color:var(--text);margin:0;display:inline}
  .sub{font-size:11px;color:var(--accent);letter-spacing:.18em;margin-left:14px;font-family:var(--mono)}
  .lede{font-size:12.5px;color:var(--dim);margin:8px 0 20px;max-width:780px;line-height:1.9;
    border-left:2px solid var(--edge2);padding-left:12px}
  .lede b{color:var(--text);font-weight:600}
  .cols{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
  .left{flex:1 1 480px;min-width:320px}
  .right{flex:0 1 340px;min-width:290px}
  .paper{background:var(--washi);border:1px solid var(--washi-edge);
    display:flex;justify-content:center;align-items:center;padding:16px;min-height:260px;
    position:relative;box-shadow:0 0 0 1px var(--edge),6px 6px 0 rgba(47,127,184,.10)}
  .paper canvas{display:block;max-width:100%;touch-action:none}
  .paper .hint{position:absolute;left:10px;bottom:8px;font-size:10.5px;color:#8a8170;font-family:var(--mono)}
  .panel{background:var(--panel);border:1px solid var(--edge);padding:16px;margin-bottom:14px;position:relative}
  .panel::before{content:"";position:absolute;top:-1px;left:-1px;width:10px;height:10px;
    border-top:2px solid var(--accent-dim);border-left:2px solid var(--accent-dim)}
  .sec{font-size:11px;color:var(--accent);letter-spacing:.22em;font-family:var(--mono);
    margin:16px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--edge)}
  label.fld{font-size:11px;color:var(--dim);display:block;margin-bottom:5px}
  input[type=text],textarea,select{width:100%;background:var(--panel2);color:var(--text);
    border:1px solid var(--edge);border-radius:0;padding:9px 12px;font-size:16px;
    letter-spacing:.1em;outline:none;font-family:inherit}
  input[type=text]:focus,textarea:focus,select:focus{border-color:var(--accent-dim)}
  /* ドロップダウンを開いたときの選択肢。ブラウザによっては select の色を継がないので明示する */
  select option{background:var(--panel);color:var(--text)}
  textarea{resize:vertical;min-height:70px;line-height:1.6}
  .seg{display:flex;gap:0;margin:0 0 4px;border:1px solid var(--edge)}
  .seg button{flex:1;padding:8px 0;cursor:pointer;font-size:12px;border:none;
    border-right:1px solid var(--edge);background:none;color:var(--dim);font-family:inherit}
  .seg button:last-child{border-right:none}
  .seg button.on{background:rgba(47,127,184,.10);color:var(--accent);
    box-shadow:inset 0 -2px 0 var(--accent)}
  .grp{font-size:11px;color:var(--dim);letter-spacing:.08em;margin:12px 0 6px}
  .sl{margin-bottom:11px}
  .sl .lab{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-bottom:3px}
  .sl .lab b{color:var(--accent);font-family:var(--mono);font-weight:400}
  input[type=range]{width:100%;accent-color:var(--accent);height:4px}
  .tog{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
    padding:5px 0;color:var(--text);font-size:12.5px;font-family:inherit;text-align:left}
  .tog .knob{width:34px;height:18px;position:relative;background:#d5dde4;
    transition:background .2s;flex-shrink:0;border:1px solid var(--edge)}
  .tog.on .knob{background:var(--accent)}
  .tog .knob::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;
    background:#ffffff;border:1px solid var(--edge);transition:left .2s}
  .tog.on .knob::after{left:18px}
  .btn-main{width:100%;padding:12px 0;font-size:13.5px;cursor:pointer;
    background:var(--accent);color:#ffffff;border:1px solid var(--accent);
    letter-spacing:.08em;font-family:inherit;margin-top:4px}
  .btn-main:hover{background:#256a9c}
  .btn-sub{padding:10px 12px;font-size:12px;cursor:pointer;background:none;
    color:var(--text);border:1px solid var(--edge);font-family:inherit}
  .btn-sub:hover{border-color:var(--accent-dim);color:var(--accent)}
  .btn-row{display:flex;gap:8px;margin-top:8px}
  .btn-row .grow{flex:1}
  .dstat{font-size:11.5px;font-family:var(--mono);color:var(--dim);line-height:1.9;margin-top:10px}
  .dstat b{color:var(--text);font-weight:400}
  .note{font-size:11px;color:var(--dim);margin-top:12px;line-height:1.8}
  .note b{color:var(--text)}
  .note a{color:var(--accent)}
  .warn{color:var(--warn)}
  .below{display:flex;gap:12px;margin-top:10px;align-items:center;flex-wrap:wrap}
  #btnReset{display:none}
  .outbox{border:1px solid var(--edge);padding:12px;margin:10px 0;background:var(--panel2)}
  .outbox.primary{border-color:var(--edge2)}
  .outbox .oh{font-size:12px;color:var(--text);letter-spacing:.1em;margin-bottom:4px;font-family:var(--mono)}
  details.outbox summary{cursor:pointer;list-style:none}
  details.outbox summary::before{content:"▸ ";color:var(--dim)}
  details.outbox[open] summary::before{content:"▾ "}
  details.panel summary{list-style:none}
  details.panel summary::before{content:"▸ ";color:var(--dim)}
  details.panel[open] summary::before{content:"▾ "}