/* base reset */
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; }
img{ max-width:100%; }
[hidden]{ display:none !important; }

:root{
    --bg:#EEF2F3; --surface:#FFFFFF; --surface-2:#F7FAFA; --line:#D3DFE1;
    --ink:#0E2A31; --muted:#5A7079; --accent:#0F6C7E; --accent-ink:#FFFFFF; --accent-soft:#DCECEF;
    --warn:#B06A00; --warn-soft:#FBF0DD; --good:#1F7A4D;
    --shadow:0 1px 2px rgba(14,42,49,.06), 0 8px 24px rgba(14,42,49,.06);
    --r:10px;
    color-scheme:light;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --bg:#0B1E23; --surface:#122A30; --surface-2:#0F252B; --line:#1F434B;
      --ink:#E6F0F1; --muted:#93AEB5; --accent:#4FC3D7; --accent-ink:#06262E; --accent-soft:#16383F;
      --warn:#E0A44A; --warn-soft:#2A2115; --good:#5CC48C;
      --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.28);
      color-scheme:dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B1E23; --surface:#122A30; --surface-2:#0F252B; --line:#1F434B;
    --ink:#E6F0F1; --muted:#93AEB5; --accent:#4FC3D7; --accent-ink:#06262E; --accent-soft:#16383F;
    --warn:#E0A44A; --warn-soft:#2A2115; --good:#5CC48C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.28);
    color-scheme:dark;
  }
  *{box-sizing:border-box}
  body{background:var(--bg); color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.5;}
  .wrap{max-width:1180px; margin:0 auto; padding-inline:16px; padding-block:0 40px;}
  header.top{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--bg); border-bottom:1px solid var(--line); padding-block:14px; margin-bottom:18px;}
  .brandrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .mark{width:36px;height:36px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:15px;letter-spacing:.02em;flex:none}
  .brand h1{font-size:19px; margin:0; font-weight:700; letter-spacing:-.01em;}
  .brand p{margin:1px 0 0; font-size:12.5px; color:var(--muted);}
  .pill{margin-left:auto; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); background:var(--accent-soft); border-radius:999px; padding:5px 11px;}
  .lay{display:grid; grid-template-columns:320px minmax(0,1fr); gap:20px; align-items:start;}
  @media (max-width:880px){ .lay{grid-template-columns:1fr;} }
  .panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);}
  .panel + .panel{margin-top:16px}
  .panel h2{font-size:12px; font-family:"IBM Plex Mono",monospace; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin:0; padding:13px 16px 0;}
  .panel .body{padding:12px 16px 16px;}
  label{display:block; font-size:11.5px; color:var(--muted); margin:8px 0 3px; font-weight:500;}
  input,select,textarea{width:100%; font:inherit; font-size:13.5px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px;}
  textarea{resize:vertical; min-height:96px; line-height:1.5;}
  input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 10px;}
  .modes{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
  .mode{flex:1 1 auto; text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; color:var(--ink);}
  .mode strong{display:block; font-size:13.5px; font-weight:600;}
  .mode span{font-size:11.5px; color:var(--muted);}
  .mode[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent);}
  .tiles{display:flex; flex-wrap:wrap; gap:7px;}
  .tile{cursor:pointer; font:inherit; font-size:12.5px; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:6px 12px;}
  .tile:hover{border-color:var(--accent); color:var(--accent);}
  .askrow{display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap;}
  button.primary{cursor:pointer; font:inherit; font-weight:600; font-size:14px; background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:10px 20px;}
  button.ghost{cursor:pointer; font:inherit; font-size:12.5px; background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:7px 12px;}
  button[disabled]{opacity:.55; cursor:not-allowed}
  .hint{font-size:11.5px; color:var(--muted);}
  .out{padding:18px 20px 22px; min-height:220px;}
  .out h3{font-size:15px; margin:18px 0 6px; font-weight:600;}
  .out h3:first-child{margin-top:0}
  .out p{margin:0 0 9px; font-size:14px;}
  .out ul,.out ol{margin:0 0 10px; padding-left:20px; font-size:14px;}
  .out li{margin-bottom:4px}
  .out table{border-collapse:collapse; width:100%; font-size:13px; margin-bottom:10px;}
  .out th,.out td{border:1px solid var(--line); padding:6px 9px; text-align:left; vertical-align:top;}
  .out th{background:var(--surface-2); font-weight:600;}
  .outhead{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:11px 16px; flex-wrap:wrap;}
  .outhead .who{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
  .outhead .tools{margin-left:auto; display:flex; gap:6px;}
  .flag{display:inline-block; font-size:11px; font-family:"IBM Plex Mono",monospace; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--warn-soft); color:var(--warn);}
  .note{background:var(--warn-soft); border-left:3px solid var(--warn); border-radius:0 8px 8px 0; padding:10px 13px; font-size:12.5px; margin:14px 0 0;}
  .hist{list-style:none; margin:0; padding:0;}
  .hist li{border-top:1px solid var(--line);}
  .hist li:first-child{border-top:0}
  .hist button{width:100%; text-align:left; background:none; border:0; cursor:pointer; color:var(--ink); font:inherit; font-size:12.5px; padding:9px 0; display:block;}
  .hist small{display:block; color:var(--muted); font-size:11px;}
  footer.foot{margin-top:26px; border-top:1px solid var(--line); padding-top:14px; font-size:11.5px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap;}
  .dots::after{content:""; animation:dots 1.2s steps(4,end) infinite;}
  @keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
  @media (prefers-reduced-motion:reduce){ .dots::after{animation:none; content:"..."} }