:root{--bg:#fff;--text:#333333;--muted:#686868;--line:#e5e5e5;--dark:#f7f8fa;--teal:#1a7a5a;--green:#2d6a4f;--amber:#8a5a10;--red:#a04020;--purple:#6b46a8;--blue:#2a6cb6}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.65;display:flex;min-height:100vh}
    nav{width:164px;flex-shrink:0;padding:32px 20px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh;overflow-y:auto}
    .nav-logo{font-family:'Source Serif 4',serif;font-size:14px;font-weight:600;color:var(--text);text-decoration:none;margin-bottom:18px}
    nav a{color:var(--muted);text-decoration:none;font-size:12px;padding:3px 0;transition:color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    nav a:hover{color:var(--text)} nav a.active{color:var(--teal);font-weight:600}
    .nav-div{width:100%;height:1px;background:var(--line);margin:10px 0}
    .nav-lbl{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.55;margin-top:6px;margin-bottom:2px}
    .vline{width:1px;background:var(--line);flex-shrink:0}
    main{flex:1;padding:40px 52px 80px;max-width:860px}

    .mod-header{margin-bottom:28px}
    .mod-tagline{display:flex;align-items:center;gap:8px;margin-bottom:8px}
    .track-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--teal);padding:2px 8px;border-radius:3px}
    .mod-meta{font-size:11px;color:var(--muted)}
    h1{font-family:'Source Serif 4',serif;font-size:26px;font-weight:400;line-height:1.2;margin-bottom:10px}
    .mod-intro{font-family:inherit;font-size:14px;color:var(--muted);max-width:580px;line-height:1.65}

    .objectives{background:var(--dark);border-left:3px solid var(--teal);border-radius:0 6px 6px 0;padding:16px 20px;margin-bottom:40px}
    .obj-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--teal);font-weight:600;margin-bottom:10px}
    .objectives ul{list-style:none;display:flex;flex-direction:column;gap:5px}
    .objectives li{font-size:13px;padding-left:16px;position:relative}
    .objectives li::before{content:'→';position:absolute;left:0;color:var(--teal);font-size:11px;top:2px}

    h2{font-family:'Source Serif 4',serif;font-size:17px;font-weight:500;margin-bottom:14px;padding-bottom:9px;border-bottom:1px solid var(--line)}
    .section{margin-bottom:44px}
    p{margin-bottom:12px;font-size:14px;line-height:1.7}
    p:last-child{margin-bottom:0}
    strong{font-weight:600}

    .formula-box{background:var(--dark);border:1px solid var(--line);border-radius:6px;padding:16px 20px;margin:16px 0}
    .f-label{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:7px}
    .f-main{font-family:'Source Serif 4',serif;font-size:15px;line-height:1.7}
    .f-main+.f-main{margin-top:8px}
    .f-vars{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.65}

    .insight{border-left:3px solid var(--amber);background:#fef9f0;border-radius:0 6px 6px 0;padding:12px 16px;margin:16px 0}
    .insight-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--amber);margin-bottom:5px}
    .insight p{font-size:13px}
    .val-box{border-left:3px solid var(--purple);background:#f7f4fd;border-radius:0 6px 6px 0;padding:12px 16px;margin:16px 0}
    .val-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--purple);margin-bottom:5px}
    .val-box p{font-size:13px}

    /* CONNECTION GRID */
    .conn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
    .conn-card{border:1px solid var(--line);border-radius:6px;padding:11px 13px}
    .conn-head{font-size:12px;font-weight:700;margin-bottom:4px}
    .conn-body{font-size:11.5px;color:var(--muted);line-height:1.5}
    .conn-links{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
    .conn-link{font-size:9.5px;font-weight:600;padding:2px 6px;border-radius:3px;text-transform:uppercase;letter-spacing:.04em}

    .data-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
    .data-table th{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
    .data-table td{padding:8px 10px;border-bottom:1px solid var(--dark);vertical-align:top}
    .data-table tr:last-child td{border-bottom:none}
    .data-table .num{font-variant-numeric:tabular-nums;font-weight:500}
    .data-table .hi{color:var(--teal);font-weight:600}
    .data-table .neg{color:var(--red);font-weight:600}
    .data-table .pos{color:var(--green);font-weight:600}

    /* SIM BOX */
    .sim-box{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:20px 0}
    .sim-head{background:var(--dark);border-bottom:1px solid var(--line);padding:9px 16px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);display:flex;align-items:center;gap:6px}
    .sim-head::before{content:'◉';color:var(--teal);font-size:9px}
    .sim-grid{display:grid;grid-template-columns:1fr 1.3fr}
    .sim-controls{padding:16px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:11px}
    .sim-grid-stacked{grid-template-columns:1fr}
    .sim-grid-stacked .sim-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px;border-right:none;border-bottom:1px solid var(--line)}
    .sim-grid-stacked .sim-grp-lbl{grid-column:1/-1;margin-top:2px!important}
    .sim-grid-stacked #cf-tabs{grid-column:1/-1}
    .sim-grid-stacked canvas{height:300px;border:none!important;border-radius:0!important}
    .swaption-stacked{grid-template-columns:1fr}
    .swaption-stacked .sim-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 18px;border-right:none;border-bottom:1px solid var(--line)}
    .swaption-stacked .sim-grp-lbl,.swaption-stacked #sw-tabs{grid-column:1/-1}
    .swaption-stacked canvas{height:340px;border:none!important;border-radius:0!important}
    .sim-grp-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--line);margin-bottom:2px}
    .sr{display:flex;flex-direction:column;gap:3px}
    .sr-lbl{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted)}
    .sr-val{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
    input[type="range"]{-webkit-appearance:none;width:100%;height:3px;background:var(--line);border-radius:2px;outline:none;cursor:pointer}
    input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--teal);cursor:pointer}
    input[type="range"]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--teal);border:none;cursor:pointer}

    canvas{display:block;width:100%;border:1px solid var(--line);border-radius:6px}
    .canvas-wrap{margin:0}

    .tab-row{display:flex;gap:4px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--dark)}
    .tab-btn{font-size:11.5px;padding:4px 10px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--muted);cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
    .tab-btn.active{background:var(--teal);color:#fff;border-color:var(--teal)}

    .metrics-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
    .metric-box{background:var(--bg);padding:11px 14px}
    .metric-val{font-family:'Source Serif 4',serif;font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}
    .metric-lbl{font-size:10.5px;color:var(--muted)}
    .metric-box.hi  .metric-val{color:var(--teal)}
    .metric-box.pos .metric-val{color:var(--green)}
    .metric-box.neg .metric-val{color:var(--red)}

    /* PARITY GRID */
    .parity-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
    .parity-card{border:1px solid var(--line);border-radius:6px;padding:13px 15px}
    .parity-title{font-size:12px;font-weight:700;color:var(--teal);margin-bottom:6px}
    .parity-formula{font-family:'Source Serif 4',serif;font-size:14px;line-height:1.6;margin-bottom:6px}
    .parity-note{font-size:11.5px;color:var(--muted);line-height:1.5}

    .mod-nav{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:20px;border-top:1px solid var(--line)}
    .mod-nav a{color:var(--teal);text-decoration:none;font-size:13px;font-weight:500}
    .mod-nav a:hover{opacity:.75}
    .track-complete{text-align:center;padding:20px;background:linear-gradient(135deg,rgba(14,124,123,.08),rgba(45,106,79,.08));border-radius:8px;border:1px solid rgba(14,124,123,.2);margin-top:32px}
    .tc-title{font-family:'Source Serif 4',serif;font-size:18px;font-weight:500;color:var(--teal);margin-bottom:6px}
    .tc-sub{font-size:13px;color:var(--muted)}
    .footer{margin-top:16px;font-size:11px;color:var(--muted)}
    @media(max-width:720px){
      .sim-grid-stacked .sim-controls{grid-template-columns:1fr 1fr}
      .swaption-stacked .sim-controls{grid-template-columns:1fr 1fr}
      .metrics-strip{grid-template-columns:repeat(2,1fr)}
    }
  
    /* 2026 learning-quality pass */
    .skip-link{position:absolute;left:-9999px;top:8px;z-index:999;padding:8px 12px;background:var(--text);color:var(--bg);border-radius:4px}
    .skip-link:focus{left:8px}
    .lesson-frame{border-left:3px solid var(--teal);background:var(--dark);border-radius:0 6px 6px 0;padding:14px 18px;margin:0 0 34px}
    .lesson-kicker{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:5px}
    .lesson-frame p{font-size:13px;margin:0}
    .lesson-review,.lesson-sources{margin:40px 0}
    .lesson-review details{border-bottom:1px solid var(--line);padding:10px 0}
    .lesson-review summary{cursor:pointer;font-weight:600;font-size:13px}
    .lesson-review details p{color:var(--muted);font-size:13px;margin:8px 0 0}
    .lesson-sources ul{padding-left:18px;display:grid;gap:6px}
    .lesson-sources a{color:var(--teal);text-underline-offset:2px}
    .source-date{font-size:11px;color:var(--muted);margin-top:10px}
    button,input,select,a{touch-action:manipulation}
    button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--teal) 45%,transparent);outline-offset:3px}
    canvas{max-width:100%;height:auto}
    @media(max-width:760px){
      body{display:block}
      nav{width:100%;height:auto;position:static;padding:22px 20px;overflow:visible}
      nav a{white-space:normal;overflow:visible;text-overflow:clip;padding:5px 0}
      .vline{display:none}
      main{width:100%;max-width:none;padding:28px 20px 64px}
      .concept-grid,.sim-inner,.sim-2col,.sim-controls-row{grid-template-columns:1fr!important;display:grid!important}
      .sim-controls,.sim-ctrl{border-right:0!important;border-bottom:1px solid var(--line)}
      .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
      .tab-row{flex-wrap:wrap}
    }
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}