@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@110,500..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

  :root{
    --bg:#F5F7FA;
    --panel:#FFFFFF;
    --panel-2:#F8FAFC;
    --line:#DDE3EC;
    --ink:#1C2433;
    --muted:#6B7686;
    --bear:#D9483B;
    --mid:#4A6FA5;
    --bull:#1487C8;
    --amber:#C77E14;
    --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --disp:'Archivo','Archivo Expanded',Inter,'Helvetica Neue',Arial,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.45}
  body{padding:0 0 64px}
  .wrap{max-width:1180px;margin:0 auto;padding:0 20px}

  /* header */
  header{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#FFFFFF 0%,var(--bg) 100%)}
  .topline{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
  .topline b{color:var(--amber);font-weight:600}
  .hero{padding:26px 0 22px}
  h1{font-family:var(--disp);font-weight:800;font-stretch:110%;font-size:clamp(26px,4vw,40px);letter-spacing:.01em;text-transform:uppercase;line-height:1.05;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 12px}
  #ticker{font:inherit;color:var(--bull);text-transform:uppercase;background:transparent;border:none;border-bottom:3px dashed var(--line);outline:none;padding:0 2px;min-width:2ch;max-width:14ch}
  #ticker:focus{border-bottom-color:var(--bull)}
  .sub{margin-top:8px;color:var(--muted);max-width:760px}
  .hint-edit{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-top:6px}

  /* sections */
  section{margin-top:26px}
  .seclabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:10px;display:flex;align-items:center;gap:10px}
  .seclabel::after{content:"";flex:1;height:1px;background:var(--line)}

  /* global params */
  .grid-params{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px}
  .param{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
  .param label{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
  .param input{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;color:var(--ink);font-family:var(--mono);font-size:14px;padding:6px 8px;outline:none}
  .param input:focus{border-color:var(--bull)}
  .param .derived{font-size:15px;font-weight:600;padding:6px 0 1px}
  .param .unit{color:var(--muted);font-size:10px;margin-top:4px;display:block}

  /* scenario tabs */
  .tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .tab{cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:12px 14px;text-align:left;color:var(--ink);font-family:var(--mono);position:relative;transition:border-color .15s}
  .tab .nm{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
  .tab .vol{color:var(--muted);font-size:11px;margin-top:4px}
  .tab .px{font-size:18px;font-weight:600;margin-top:8px}
  .tab .chg{font-size:11px;margin-left:6px}
  .tab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:6px 0 0 6px;background:var(--c)}
  .tab.active{border-color:var(--c);box-shadow:0 1px 4px rgba(28,36,51,.08)}
  .tab:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

  /* main grid */
  .main{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:14px}
  @media(max-width:860px){.main{grid-template-columns:1fr}}
  .panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px}
  .panel h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:10px}

  /* chart view toggle */
  .chart-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .chart-head h3{margin-bottom:0}
  .views{display:flex;gap:6px;flex-wrap:wrap}
  .vbtn{cursor:pointer;background:var(--panel-2);border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .vbtn:hover{color:var(--ink)}
  .vbtn.active{color:#fff;border-color:transparent;background:var(--vc,var(--ink))}
  .vbtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

  /* readout */
  .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .tile{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
  .tile .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .tile .v{font-size:19px;font-weight:600;margin-top:5px}
  .tile .s{font-size:10px;color:var(--muted);margin-top:3px}
  .pos{color:#1E7F4F} .neg{color:var(--bear)}

  /* scenario inputs */
  .scen-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}

  /* table */
  .tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:6px}
  table{border-collapse:collapse;width:100%;min-width:920px;font-size:12px}
  th{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:right;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}
  th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--panel-2)}
  td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
  tr:last-child td{border-bottom:none}
  td input{width:72px;background:#FFFFFF;border:1px solid var(--line);border-radius:3px;color:var(--ink);font-family:var(--mono);font-size:12px;padding:4px 6px;text-align:right;outline:none}
  td input:focus{border-color:var(--amber)}
  td input.lab{width:80px;text-align:left;font-weight:600}
  td.calc{color:var(--muted)}
  td.price{font-weight:600;color:var(--ink)}
  .editable-hint{color:var(--amber)}

  .btn{cursor:pointer;background:var(--panel-2);border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-radius:4px;padding:7px 12px}
  .btn:hover{color:var(--ink);border-color:var(--muted)}
  .toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}

  /* chart */
  .chartbox{position:relative}
  svg text{font-family:var(--mono)}
  .legend{display:flex;gap:16px;margin-top:8px;font-size:11px;color:var(--muted);flex-wrap:wrap}
  .legend i{display:inline-block;width:14px;height:3px;border-radius:2px;margin-right:6px;vertical-align:middle}

  /* notes */
  .notes{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:860px){.notes{grid-template-columns:1fr}}
  .notes ul{list-style:none}
  .notes li{padding:7px 0;border-bottom:1px dashed var(--line);color:var(--muted);font-size:12px}
  .notes li b{color:var(--ink);font-weight:600}
  .foot{margin-top:22px;color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding-top:12px}