/* Interactive lesson widgets (from the original lesson stylesheet, retuned to the site palette) */
/* Base reset (matches the page skeleton the site was designed in) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}

    

  *{ box-sizing:border-box; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-sans);
    padding-inline:20px;
  }
  .wrap{ max-width:760px; margin:0 auto; }
  h1,h2{
    font-family:var(--font-sans);
    font-weight:650;
    text-wrap:balance;
    margin:0;
    letter-spacing:-0.01em;
  }
  .eyebrow{
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.11em;
    text-transform:uppercase;
    color:var(--accent-warm);
    font-weight:600;
  }
  p{ line-height:1.6; color:var(--text); }
  .muted{ color:var(--text-muted); }
  a{ color:var(--accent-ink); }
  code{ font-family:var(--font-mono); background:var(--cell-locked); padding:1px 5px; border-radius:4px; font-size:0.92em; }

  /* ---------- HERO ---------- */
  .hero{ padding-block:56px 28px; }
  .hero h1{ font-size:clamp(30px,5.4vw,46px); line-height:1.08; margin-top:10px; }
  .hero p{ font-size:17px; max-width:56ch; margin-top:16px; }

  /* ---------- WIDGET (shared look, used by Home + B2 + B3 + B4) ---------- */
  .widget{
    margin-block:28px 40px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    overflow:hidden;
  }
  .widget-head{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  }
  .widget-title{ font-family:var(--font-mono); font-size:13px; font-weight:600; }
  .widget-title span{ color:var(--text-muted); font-weight:400; }
  .jump-btn{
    font-family:var(--font-mono);
    font-size:12px;
    background:var(--accent);
    color:var(--accent-contrast);
    border:none;
    padding:7px 11px;
    border-radius:6px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
  }
  .jump-btn:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }

  .fx-bar{
    display:flex; align-items:stretch; gap:0;
    border-bottom:1px solid var(--border);
    background:var(--cell-locked);
  }
  .fx-namebox{
    font-family:var(--font-mono);
    font-weight:600;
    font-size:13px;
    width:56px;
    display:flex; align-items:center; justify-content:center;
    border-right:1px solid var(--border);
    background:var(--surface);
    flex-shrink:0;
  }
  .fx-icon{
    width:30px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-sans); font-style:italic; font-size:14px; color:var(--text-muted);
    border-right:1px solid var(--border);
  }
  .fx-bar input[type="text"]{
    flex:1; min-width:0;
    font-family:var(--font-mono);
    font-size:13.5px;
    border:none; background:transparent; color:var(--text);
    padding:10px 10px;
  }
  .fx-bar input[type="text"]:disabled{ color:var(--text-muted); }
  .fx-bar input[type="text"]::placeholder{ color:var(--text-muted); opacity:0.75; }
  .fx-bar input[type="text"]:focus{ outline:none; }
  .fx-go{
    flex-shrink:0;
    font-family:var(--font-mono);
    font-size:12px;
    background:var(--accent);
    color:var(--accent-contrast);
    border:none;
    padding:0 14px;
    cursor:pointer;
  }
  .fx-go:disabled{ background:var(--border); color:var(--text-muted); cursor:default; }

  .grid-scroll{ overflow-x:auto; }
  .grid{
    display:grid;
    grid-template-columns: 26px minmax(84px,1.3fr) minmax(58px,0.75fr) minmax(52px,0.7fr) minmax(76px,1fr);
    min-width:420px;
  }
  .grid.grid-2col{
    grid-template-columns: 26px minmax(110px,1.4fr) minmax(90px,1fr);
    min-width:260px;
  }
  .g{
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:7px 8px;
    font-family:var(--font-mono);
    font-size:12.5px;
    display:flex; align-items:center;
    min-height:32px;
  }
  .grid .g:last-child, .grid .g:nth-child(5n){ border-right:none; }
  .grid.grid-2col .g:nth-child(5n){ border-right:1px solid var(--border); }
  .grid.grid-2col .g:nth-child(3n){ border-right:none; }
  .g.num{ justify-content:flex-end; font-variant-numeric:tabular-nums; }
  .g.rownum{ justify-content:center; color:var(--text-muted); background:var(--cell-locked); font-size:11px; }
  .g.colletter{ justify-content:center; color:var(--text-muted); background:var(--cell-locked); font-size:11px; }
  .g.corner{ background:var(--cell-locked); }
  .g.header{ background:var(--cell-locked); font-weight:600; }
  .g.header.clickable{ cursor:pointer; }
  .g.header.clickable:hover{ background:color-mix(in srgb, var(--accent) 14%, var(--cell-locked)); }
  .g.header.clickable.selected{ box-shadow:inset 0 0 0 2px var(--accent-ink); }
  .g.given{ background:var(--surface); cursor:pointer; }
  .g.given.selected{ box-shadow:inset 0 0 0 2px var(--accent-ink); }
  .g.editable{
    background:var(--cell-editable);
    border-style:dashed;
    border-color:var(--accent-warm);
    cursor:pointer;
    color:var(--text);
    position:relative;
    justify-content:flex-end;
    font-variant-numeric:tabular-nums;
  }
  .g.span-label{ grid-column: 2 / span 3; justify-content:flex-start; }
  .g.editable.text{ justify-content:flex-start; font-variant-numeric:normal; }
  .g.editable .ghost{ color:var(--text-muted); opacity:0.65; }
  .g.editable.selected{ box-shadow:inset 0 0 0 2px var(--accent-warm); }
  .g.editable.correct{ background:color-mix(in srgb, var(--accent) 16%, var(--cell-editable)); }
  .g.spacer{ min-height:10px; border-bottom:none; }

  .fx-hint{
    padding:10px 16px 14px;
    font-size:13px;
    min-height:20px;
    color:var(--text-muted);
    border-top:1px solid var(--border);
  }
  .fx-hint.ok{ color:var(--accent-ink); }
  .fx-hint.err{ color:var(--accent-warm); }

  /* ---------- SECTIONS ---------- */
  .section{ padding-block:34px; border-top:1px solid var(--border); }
  .section h2{ font-size:clamp(22px,3.4vw,28px); margin-bottom:14px; }
  table.compare{ border-collapse:collapse; width:100%; font-size:14.5px; }
  table.compare th, table.compare td{
    text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;
  }
  table.compare th{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-muted); font-weight:600; }
  table.compare td.old{ color:var(--text-muted); }
  table.compare td.new{ color:var(--text); font-weight:500; }
  .table-scroll{ overflow-x:auto; }

  /* ---------- HOME: what is Excel / use cases ---------- */
  .intro-block{ margin-block:22px; }
  .intro-block p{ font-size:15px; max-width:64ch; }
  .intro-block h3{ font-family:var(--font-sans); font-weight:600; font-size:18px; margin:24px 0 8px; }
  .intro-block ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; max-width:64ch; }
  .intro-block li{ font-size:14.5px; }
  .usecase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
  @media (max-width:560px){ .usecase-grid{ grid-template-columns:1fr; } }
  .usecase{ border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:16px 18px; }
  .usecase .uc-num{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--accent-warm); letter-spacing:0.06em; }
  .usecase h4{ font-family:var(--font-sans); font-weight:600; font-size:16px; margin:4px 0 6px; }
  .usecase p{ font-size:13.5px; color:var(--text-muted); margin:0; }

  /* ---------- CLOSING ---------- */
  .closing p.credibility{ font-size:14.5px; max-width:54ch; }
  .feedback-row{ display:flex; gap:12px; align-items:center; margin-top:18px; flex-wrap:wrap; }
  .feedback-copy{ display:flex; gap:8px; align-items:center; }
  .feedback-copy code{ font-size:13px; }
  .notify-msg{ margin-top:10px; font-size:13.5px; color:var(--accent-ink); min-height:18px; }

  footer{ padding-block:34px 48px; }
  footer p{ font-size:13px; color:var(--text-muted); }
  footer p.trademark{ font-size:12px; }
  footer{ border-top:1px solid var(--border); margin-top:40px; }
  .footer-links{ display:flex; gap:18px; flex-wrap:wrap; margin-top:-4px; }
  .footer-links a{ color:var(--text-muted); }
  .footer-links a:hover{ color:var(--accent-ink); }

  /* ---------- PRIVACY POLICY ---------- */
  .policy{ max-width:65ch; }
  .policy .policy-date{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); margin:0 0 18px; }
  .policy h3{ font-family:var(--font-sans); font-weight:600; font-size:20px; letter-spacing:-0.01em; margin:34px 0 8px; }
  .policy ul{ padding-left:20px; margin:8px 0; }
  .policy li{ line-height:1.6; margin-block:6px; }

  /* ---------- LESSONS INDEX (on home view) ---------- */
  .lessons-index{ margin-block:32px 40px; border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:18px 18px 8px; }
  .tier-tabs{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .tier-tab{ font-family:var(--font-mono); font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:6px; border:1px solid var(--border); background:var(--cell-locked); color:var(--text-muted); cursor:pointer; }
  .tier-tab.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  .tier-tab.disabled{ cursor:default; }
  .tier-tab .soon{ font-weight:400; opacity:0.85; margin-left:4px; }
  .lesson-list{ list-style:none; margin:0; padding:0; }
  .lesson-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
  .lesson-list li:last-child{ border-bottom:none; }
  .lesson-list a{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--text); flex:1; min-width:0; }
  .lesson-list a:hover .ltitle{ color:var(--accent-ink); }
  .lnum{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent-warm); font-weight:600; flex-shrink:0; width:24px; }
  .ltitle{ font-size:14.5px; }
  .lstatus{ font-family:var(--font-mono); font-size:11px; padding:3px 8px; border-radius:5px; flex-shrink:0; }
  .lstatus.live{ background:color-mix(in srgb, var(--accent) 18%, var(--surface)); color:var(--accent-ink); }
  .lstatus.soon{ background:var(--cell-locked); color:var(--text-muted); }

  /* ---------- LESSON PAGES (B1-B8) ---------- */
  .lesson-page{ padding-block:44px 20px; }
  .back-link{ font-family:var(--font-mono); font-size:12.5px; color:var(--text-muted); text-decoration:none; display:inline-block; margin-bottom:20px; }
  .back-link:hover{ color:var(--accent-ink); }
  .page-tag{ font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--accent-warm); letter-spacing:0.06em; margin-bottom:8px; }
  .page-title{ font-size:clamp(26px,4.6vw,36px); margin-bottom:14px; }
  .page-intro{ font-size:16px; max-width:60ch; }

  .ref-block{ border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:16px 18px; margin-block:26px; }
  .ref-block h4{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); margin:0 0 12px; }
  .ref-block dl{ margin:0; display:flex; flex-direction:column; gap:10px; }
  .ref-block .rowdl{ display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
  .ref-block dt{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--accent-ink); flex-shrink:0; min-width:130px; }
  .ref-block dd{ margin:0; font-size:14px; color:var(--text); flex:1; min-width:180px; }
  .dg-badge{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:5px; background:var(--accent); color:var(--accent-contrast); font-family:var(--font-mono); font-weight:700; font-size:10px; flex-shrink:0; margin-right:1px; }
  .dg-badge-bg{ fill:var(--accent); }
  .dg-badge-num{ fill:var(--accent-contrast); font-family:var(--font-mono); font-weight:700; }

  .tip{ border-left:3px solid var(--accent-warm); background:var(--cell-locked); padding:12px 14px; border-radius:0 8px 8px 0; font-size:14px; margin-block:22px; }
  .tip strong{ color:var(--accent-warm); }

  .try-lead{ font-size:14.5px; margin-block:22px 12px; }

  /* B1 address demo: column × row = cell */
  .addr-demo-wrap{ margin-block:22px; }
  .addr-demo-scroll{ overflow-x:auto; }
  .addr-demo{
    display:inline-grid;
    grid-template-columns: 32px repeat(4, 48px);
    border:1px solid var(--border);
    border-radius:8px;
    overflow:hidden;
  }
  .addr-demo .ac{
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:12.5px;
    min-height:36px; color:var(--text-muted);
    background:var(--surface);
    transition:background .25s ease;
  }
  .addr-demo .ac:nth-child(5n){ border-right:none; }
  .addr-demo .ac.corner{ background:var(--cell-locked); }
  .addr-demo .ac.colhead{ background:var(--cell-locked); font-weight:600; }
  .addr-demo .ac.rowhead{ background:var(--cell-locked); font-weight:600; }
  .addr-demo .ac.col-hl{ background:color-mix(in srgb, var(--accent) 30%, var(--cell-locked)); color:var(--accent-ink); }
  .addr-demo .ac.row-hl{ background:color-mix(in srgb, var(--accent-warm) 30%, var(--cell-locked)); color:var(--accent-warm); }
  .addr-demo .ac.col-tint{ background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
  .addr-demo .ac.row-tint{ background:color-mix(in srgb, var(--accent-warm) 14%, var(--surface)); }
  .addr-demo .ac.hit{
    background:color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, var(--accent-warm) 20%, var(--surface)));
    box-shadow:inset 0 0 0 2px var(--accent-ink);
    font-weight:700; color:var(--text); font-size:13.5px;
  }
  .addr-demo-legend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--text-muted); }
  .addr-demo-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .addr-demo-legend i{ width:12px; height:12px; border-radius:3px; display:inline-block; flex-shrink:0; }
  .addr-demo-legend i.col{ background:color-mix(in srgb, var(--accent) 30%, var(--cell-locked)); }
  .addr-demo-legend i.row{ background:color-mix(in srgb, var(--accent-warm) 30%, var(--cell-locked)); }
  .addr-demo-legend i.hit{ background:color-mix(in srgb, var(--accent) 20%, color-mix(in srgb, var(--accent-warm) 20%, var(--surface))); box-shadow:inset 0 0 0 2px var(--accent-ink); }

  .page-nav{ display:flex; justify-content:space-between; gap:12px; margin-block:38px 8px; padding-top:20px; border-top:1px solid var(--border); flex-wrap:wrap; }
  .page-nav a{ font-family:var(--font-mono); font-size:13px; text-decoration:none; color:var(--accent-ink); }
  .page-nav a:hover{ text-decoration:underline; }

  /* B5 before/after */
  .compare-cells{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-block:16px; }
  .mini-cell{ border:1px solid var(--border); border-radius:8px; padding:12px 18px; font-family:var(--font-mono); font-size:15px; background:var(--surface); min-width:90px; text-align:center; }
  .mini-cell.styled{ font-weight:600; }
  .mini-cell.currency, .mini-cell.percent{ color:var(--accent-ink); }
  .mini-cell.flag{ background:color-mix(in srgb, var(--accent-warm) 22%, var(--surface)); border-color:var(--accent-warm); color:var(--accent-warm); }
  .arrow-sep{ font-family:var(--font-mono); color:var(--text-muted); font-size:13px; }

  /* B6 sortable table */
  .sort-table{ width:100%; border-collapse:collapse; font-size:14px; margin-block:18px; }
  .sort-table th, .sort-table td{ border-bottom:1px solid var(--border); padding:9px 10px; text-align:left; font-variant-numeric:tabular-nums; }
  .sort-table th{ cursor:pointer; font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); user-select:none; }
  .sort-table th:hover{ color:var(--accent-ink); }
  .sort-table th .arrow{ opacity:0.7; margin-left:4px; color:var(--accent-warm); }
  .filter-row{ display:flex; gap:8px; align-items:center; margin-bottom:6px; }
  .filter-row input{ font-family:var(--font-sans); font-size:13.5px; padding:7px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text); }
  .filter-row input:focus{ outline:2px solid var(--accent-ink); outline-offset:1px; }

  /* B7 sheets */
  .sheets-compare{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-block:18px; }
  @media (max-width:520px){ .sheets-compare{ grid-template-columns:1fr; } }
  .sheet-mini{ border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .sheet-mini-head{ background:var(--cell-locked); padding:8px 12px; font-family:var(--font-mono); font-size:12px; font-weight:600; border-bottom:1px solid var(--border); }
  .sheet-mini table{ width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:12.5px; }
  .sheet-mini td{ padding:7px 10px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
  .sheet-mini tr td:last-child{ border-right:none; }
  .sheet-mini td.ref-hit{ background:color-mix(in srgb, var(--accent) 18%, var(--surface)); font-weight:600; }

  /* B8 chart */
  .chart-wrap{ margin-block:18px; border:1px solid var(--border); border-radius:10px; padding:14px; background:var(--surface); }
  .chart-wrap svg{ width:100%; height:auto; max-width:420px; display:block; margin:0 auto; }
  .chart-toggle{ display:flex; gap:8px; margin-block:14px 0; flex-wrap:wrap; }
  .pie-wrap{ display:flex; gap:24px; align-items:center; flex-wrap:wrap; justify-content:center; padding-block:8px; }
  .pie{ width:140px; height:140px; border-radius:50%; flex-shrink:0; }
  .pie-legend{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:13.5px; }
  .pie-legend li{ display:flex; align-items:center; gap:8px; }
  .pie-swatch{ width:12px; height:12px; border-radius:3px; flex-shrink:0; }
  .pie-legend .pval{ color:var(--text-muted); font-variant-numeric:tabular-nums; }

  /* B1 insert-row / B6 dedupe / generic small action buttons reuse .jump-btn */
  .btn-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .ghost-btn{
    font-family:var(--font-mono); font-size:12px; font-weight:600;
    background:transparent; color:var(--text-muted); border:1px solid var(--border);
    padding:6px 10px; border-radius:6px; cursor:pointer;
  }
  .ghost-btn:hover{ color:var(--text); border-color:var(--text-muted); }
  .row-new{ animation:rowIn .5s ease; }
  .g.range-hl{ background:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
  .status-strip{
    padding:6px 16px; border-top:1px solid var(--border); background:var(--cell-locked);
    font-family:var(--font-mono); font-size:11.5px; color:var(--text-muted);
    text-align:right; min-height:18px;
  }
  @keyframes rowIn{ from{ background:color-mix(in srgb, var(--accent) 22%, var(--cell-editable)); } to{ background:var(--cell-editable); } }
  .fmt-picker{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
  .fmt-btn{
    font-family:var(--font-mono); font-size:12px; font-weight:600;
    padding:7px 12px; border-radius:6px; border:1px solid var(--border);
    background:var(--cell-locked); color:var(--text-muted); cursor:pointer;
  }
  .fmt-btn.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  .sandbox-input{
    width:100%; font-family:var(--font-mono); font-size:15px;
    padding:9px 12px; border:1px solid var(--border); border-radius:8px;
    background:var(--surface); color:var(--text);
  }
  .sandbox-input:focus{ outline:2px solid var(--accent-ink); outline-offset:1px; }
  .sandbox-note{ font-size:13px; color:var(--text-muted); margin-top:10px; min-height:18px; }

  /* ---------- FORUM ---------- */
  .forum{ margin-block:40px 0; border:1px solid var(--border); border-radius:10px; background:var(--surface); overflow:hidden; }
  .forum-head{ padding:14px 16px; border-bottom:1px solid var(--border); font-family:var(--font-sans); font-weight:600; font-size:17px; background:var(--cell-locked); }
  .forum-head .forum-sub{ font-family:var(--font-sans); font-weight:400; font-size:13px; color:var(--text-muted); }
  .forum-form{ padding:14px 16px; border-bottom:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
  .forum-name{
    font-family:var(--font-sans); font-size:13.5px; padding:8px 10px;
    border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); max-width:220px;
  }
  .forum-q-input, .forum-a-input{
    font-family:var(--font-sans); font-size:14px; padding:9px 11px;
    border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text);
    resize:vertical; min-height:56px;
  }
  .forum-name:focus, .forum-q-input:focus, .forum-a-input:focus{ outline:2px solid var(--accent-ink); outline-offset:1px; }
  .forum-form button, .forum-reply button{
    align-self:flex-start;
    font-family:var(--font-mono); font-size:12.5px; font-weight:600;
    background:var(--accent); color:var(--accent-contrast); border:none;
    padding:8px 14px; border-radius:6px; cursor:pointer;
  }
  .forum-form button:disabled{ background:var(--border); color:var(--text-muted); cursor:default; }
  .forum-list{ padding:6px 16px 14px; }
  .forum-empty{ color:var(--text-muted); font-size:13.5px; padding:10px 0; }
  .forum-q{ padding:14px 0; border-bottom:1px solid var(--border); }
  .forum-q:last-child{ border-bottom:none; }
  .forum-q-meta{ display:flex; align-items:baseline; gap:10px; font-size:12.5px; margin-bottom:5px; }
  .forum-q-meta strong{ font-size:13.5px; }
  .forum-time{ color:var(--text-muted); font-family:var(--font-mono); font-size:11px; }
  .forum-q-text{ font-size:14.5px; margin:0 0 8px; }
  .forum-toggle{
    font-family:var(--font-mono); font-size:12px; color:var(--accent-ink);
    background:none; border:none; padding:0; cursor:pointer; text-decoration:underline;
  }
  .forum-answers{ margin-top:10px; padding-left:14px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:10px; }
  .forum-answer{ font-size:14px; }
  .forum-answer-meta{ font-size:12px; color:var(--text-muted); margin-bottom:2px; }
  .forum-reply{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
  .forum-offline{ padding:12px 16px 16px; color:var(--text-muted); font-size:13.5px; }

  /* ---------- FOUR-PART LESSON STRUCTURE (skill check / teach / guided practice / real-world) ---------- */
  .part-label{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--accent-warm); margin:34px 0 10px; display:flex; align-items:center; gap:8px; }
  .part-label .pnum{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--accent-warm); color:var(--accent-contrast); font-size:10.5px; flex-shrink:0; }
  .skill-check{ border:1px dashed var(--border); border-radius:10px; padding:16px 18px; background:color-mix(in srgb, var(--accent) 7%, var(--surface)); margin-block:0 22px; }
  .skill-check ul{ margin:10px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
  .skill-check li{ font-size:14px; }
  .skill-check .sc-note{ font-size:13px; color:var(--text-muted); margin-top:12px; }
  .real-world{ border-left:3px solid var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); padding:16px 18px; border-radius:0 10px 10px 0; margin-block:26px; }
  .real-world h4{ margin:0 0 8px; font-family:var(--font-sans); font-weight:600; font-size:16px; }
  .real-world p{ margin:0 0 8px; font-size:14.5px; }
  .real-world ol{ margin:8px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
  .real-world li{ font-size:14px; }
  .real-world p:last-child, .real-world ol:last-child{ margin-bottom:0; }

  /* inline "change a value" edit cell (M1) */
  .g-edit-input{ width:100%; font-family:var(--font-mono); font-size:12.5px; border:none; background:transparent; color:var(--text); padding:0; }
  .g-edit-input:focus{ outline:none; }
  .sheet-tabs{ display:flex; gap:6px; align-items:center; padding:10px 16px 14px; flex-wrap:wrap; }
  .sheet-tab{ font-family:var(--font-mono); font-size:12px; font-weight:600; padding:6px 12px; border-radius:6px 6px 0 0; background:var(--cell-locked); border:1px solid var(--border); border-bottom:none; color:var(--text); cursor:text; }
  .sheet-tab input{ font-family:var(--font-mono); font-size:12px; font-weight:600; border:none; background:transparent; color:var(--text); width:90px; }
  .sheet-tab input:focus{ outline:none; }
  .sheet-tab-hint{ font-size:12px; color:var(--text-muted); }

  /* M2 formatting toolbar */
  .toolbar{ display:flex; gap:6px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--cell-locked); }
  .tool-btn{ font-family:var(--font-sans); font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; }
  .tool-btn.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  .tool-btn.b{ font-weight:800; }
  .tool-btn.i{ font-style:italic; }
  table.fmt-table{ width:100%; border-collapse:collapse; font-size:14px; }
  table.fmt-table td{ padding:9px 11px; border:1px solid var(--border); cursor:pointer; }
  table.fmt-table td.picked{ box-shadow:inset 0 0 0 2px var(--accent-ink); }
  table.fmt-table td.f-bold{ font-weight:700; }
  table.fmt-table td.f-italic{ font-style:italic; }
  table.fmt-table td.f-fill{ background:color-mix(in srgb, var(--accent-warm) 26%, var(--surface)); }
  table.fmt-table td.f-border{ box-shadow:inset 0 0 0 2px var(--text); }
  table.fmt-table td.f-border.picked{ box-shadow:inset 0 0 0 2px var(--text), inset 0 0 0 4px var(--accent-ink); }
  table.fmt-table td.f-center{ text-align:center; }
  table.fmt-table td.f-wrap{ white-space:normal; line-height:1.3; max-width:120px; }
  table.fmt-table td.f-big{ font-size:16px; }

  /* M8 excel table */
  table.xtable{ width:100%; border-collapse:collapse; font-size:14px; }
  table.xtable th, table.xtable td{ padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; font-variant-numeric:tabular-nums; }
  table.xtable th{ font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); background:var(--cell-locked); }
  table.xtable.is-table th{ background:var(--accent); color:var(--accent-contrast); position:relative; }
  table.xtable.is-table th .filt{ float:right; opacity:0.9; font-size:10px; }
  table.xtable.is-table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--accent) 9%, var(--surface)); }
  table.xtable tfoot td{ font-weight:700; border-top:2px solid var(--accent); border-bottom:none; background:var(--cell-locked); }

  /* M11 cleaning data */
  td.is-blank{ background:color-mix(in srgb, var(--accent-warm) 22%, var(--surface)); color:var(--accent-warm); font-style:italic; }
  .ws-marker{ color:var(--accent-warm); background:color-mix(in srgb, var(--accent-warm) 18%, var(--surface)); border-radius:2px; }
  .clean-toolbar{ display:flex; gap:8px; flex-wrap:wrap; padding:14px 16px; border-bottom:1px solid var(--border); }

  /* M12 shortcuts */
  table.shortcuts-table{ width:100%; border-collapse:collapse; font-size:14px; margin-block:4px; }
  table.shortcuts-table td{ padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top; }
  table.shortcuts-table td:first-child{ font-family:var(--font-mono); font-weight:600; color:var(--accent-ink); white-space:nowrap; }
  .autosum-target{ background:color-mix(in srgb, var(--accent) 18%, var(--cell-editable)); }

  /* ---------- HOME: completion standard ---------- */
  .completion-standard{ margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
  .completion-standard .cs-lead{ font-size:13px; color:var(--text-muted); margin-bottom:10px; }
  .cs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; list-style:none; margin:0 0 14px; padding:0; }
  @media (max-width:520px){ .cs-grid{ grid-template-columns:1fr; } }
  .cs-grid li{ font-size:13.5px; padding-left:20px; position:relative; }
  .cs-grid li::before{ content:"✓"; position:absolute; left:0; color:var(--accent-ink); font-weight:700; }

  /* ---------- INTERMEDIATE: shared extras ---------- */
  .field-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; padding:14px 16px; border-bottom:1px solid var(--border); }
  .field-row label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--text-muted); font-family:var(--font-mono); }
  .field-row select, .field-row input[type=text], .field-row input[type=date], .field-row input[type=number]{
    font-family:var(--font-sans); font-size:13.5px; padding:7px 9px;
    border:1px solid var(--border); border-radius:6px; background:var(--surface); color:var(--text);
  }
  .field-row select:focus, .field-row input:focus{ outline:2px solid var(--accent-ink); outline-offset:1px; }
  .field-msg{ font-size:12.5px; margin-top:4px; }
  .field-msg.err{ color:var(--accent-warm); }
  .field-msg.ok{ color:var(--accent-ink); }
  .locked-badge{ font-size:10.5px; font-family:var(--font-mono); color:var(--text-muted); }
  td.locked-cell, .g.locked-cell{ background:var(--cell-locked); color:var(--text-muted); position:relative; }
  td.input-cell, .g.input-cell{ background:var(--cell-editable); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
  td.rule-flag{ background:color-mix(in srgb, var(--accent-warm) 24%, var(--surface)); font-weight:600; }
  td.rule-top{ background:color-mix(in srgb, var(--accent) 20%, var(--surface)); font-weight:600; }
  td.rule-dupe{ box-shadow:inset 0 0 0 2px var(--accent-warm); }
  .xtable td.xt-given{ font-family:var(--font-mono); }
  .xtable td.xt-given.selected{ box-shadow:inset 0 0 0 2px var(--accent-ink); }
  .xtable td.xt-editable{ background:var(--cell-editable); border-style:dashed; border-color:var(--accent-warm); cursor:pointer; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
  .xtable td.xt-editable.text{ font-variant-numeric:normal; }
  .xtable td.xt-editable .ghost{ color:var(--text-muted); opacity:0.65; }
  .xtable td.xt-editable.selected{ box-shadow:inset 0 0 0 2px var(--accent-warm); }
  .xtable td.xt-editable.correct{ background:color-mix(in srgb, var(--accent) 16%, var(--cell-editable)); }
  .xtable td.range-hl{ background:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
  .databar-cell{ position:relative; }
  .databar-fill{ position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb, var(--accent) 30%, transparent); z-index:0; }
  .databar-val{ position:relative; z-index:1; }
  .chip-row{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--border); }
  .chip{ font-family:var(--font-mono); font-size:12px; font-weight:600; padding:6px 11px; border-radius:999px; border:1px solid var(--border); background:var(--cell-locked); color:var(--text-muted); cursor:pointer; }
  .chip.active{ background:var(--accent); border-color:var(--accent); color:var(--accent-contrast); }
  .freeze-wrap{ max-height:190px; overflow:auto; border-top:1px solid var(--border); }
  .freeze-wrap table{ border-collapse:separate; border-spacing:0; width:100%; font-size:13px; font-family:var(--font-mono); }
  .freeze-wrap td, .freeze-wrap th{ padding:7px 10px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); background:var(--surface); white-space:nowrap; }
  .freeze-wrap th{ background:var(--cell-locked); font-size:11px; text-transform:uppercase; color:var(--text-muted); }
  .freeze-wrap.frozen th{ position:sticky; top:0; z-index:2; }
  .freeze-wrap.frozen td:first-child, .freeze-wrap.frozen th:first-child{ position:sticky; left:0; z-index:1; background:var(--cell-locked); }
  .freeze-wrap.frozen th:first-child{ z-index:3; }
  .namebox-select{ font-family:var(--font-mono); font-weight:600; font-size:13px; border:none; background:transparent; color:var(--text); padding:0 6px; width:100%; }
  .namebox-select:focus{ outline:none; }
  .evaluate-steps{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
  .evaluate-step{ font-family:var(--font-mono); font-size:13.5px; padding:8px 12px; border-radius:6px; background:var(--cell-locked); }
  .evaluate-step.final{ background:color-mix(in srgb, var(--accent) 16%, var(--cell-locked)); font-weight:600; }
  .csv-raw{ font-family:var(--font-mono); font-size:12.5px; background:var(--cell-locked); border-radius:8px; padding:12px 14px; white-space:pre-wrap; word-break:break-all; margin:0; }
  .tab-panel{ padding:14px 16px; font-size:14px; }
  .tab-panel h5{ margin:0 0 6px; font-family:var(--font-sans); font-size:15px; font-weight:600; }
  .sheet-tabset{ display:flex; gap:4px; padding:12px 16px 0; flex-wrap:wrap; }
  .sheet-tabset .sheet-tab{ cursor:pointer; }
  .sheet-tabset .sheet-tab.active{ background:var(--surface); border-bottom:1px solid var(--surface); margin-bottom:-1px; color:var(--accent-ink); }

/* ---------- TOP BAR + LANGUAGE SWITCH ---------- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:14px; border-bottom:1px solid var(--border); }
.topbar .brand{ font-family:var(--font-sans); font-weight:650; font-size:17px; letter-spacing:-0.01em; color:var(--text); text-decoration:none; }
.topbar .brand:hover{ color:var(--accent-ink); }
.lang-switch select{
  font-family:var(--font-sans); font-size:13px;
  padding:6px 28px 6px 10px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); color:var(--text); cursor:pointer;
}
.lang-switch select:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:1px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ===================== ArumSoft Learning — interactive lessons (matches arumsoft.com) ===================== */
:root{
  --font-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Liberation Mono",Menlo,monospace;
  --color-brand:#177a5a;--color-brand-ink:#146c50;--color-brand-soft:#e8f4ef;
  --color-ink:#1c2126;--color-muted:#5b6670;--color-line:#e3e7ea;--color-subtle:#f6f8f9;
  --color-tip:#fff8e6;--color-tip-line:#e9b949;--color-warn:#fdeeee;--color-warn-line:#d64545;--color-note:#eef4fb;--color-note-line:#4a7fc1;
  /* tokens the interactive widgets use */
  --bg:#fff;--surface:#fff;--text:#1c2126;--text-muted:#5b6670;--border:#e3e7ea;--accent:#177a5a;--accent-ink:#146c50;
  --accent-warm:#b7791f;--accent-contrast:#fff;--cell-locked:#f6f8f9;--cell-editable:#fffbeb;
  color-scheme:light;
}
html{scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;padding:0;background:#fff;color:var(--color-ink);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:none;margin:0}
a{color:var(--color-brand-ink)}
p{line-height:1.65;color:var(--color-ink)}
h1,h2,h3,h4{font-family:var(--font-sans);letter-spacing:-.01em}
code{font-family:var(--font-mono);background:var(--color-subtle);border:1px solid var(--color-line);padding:0 .3em;border-radius:4px;font-size:.86em;color:var(--color-ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:8px;z-index:60;background:var(--color-ink);color:#fff;padding:8px 12px;border-radius:6px}
.skip:focus{left:12px}

/* ---------- header (same as site) ---------- */
.site-h{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--color-line);background:rgba(255,255,255,.95);backdrop-filter:blur(8px)}
.site-h-in{max-width:1200px;margin:0 auto;height:64px;display:flex;align-items:center;gap:24px;padding:0 24px}
.brand-l{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.025em;color:var(--color-ink);text-decoration:none;font-size:1.05rem;white-space:nowrap}
.brand-l .lt{font-weight:400;color:var(--color-muted)}
.site-nav{display:flex;align-items:center;gap:4px;flex:1}
.site-nav a{color:var(--color-muted);text-decoration:none;font-size:.95rem;padding:8px 12px;border-radius:6px}
.site-nav a:hover{background:var(--color-subtle);color:var(--color-ink)}
.site-nav a[aria-current]{color:var(--color-ink);font-weight:500}
.h-tools{display:flex;align-items:center;gap:4px;margin-left:auto}
.h-search{display:flex;align-items:center;gap:8px;border:1px solid var(--color-line);border-radius:6px;padding:6px 12px;color:var(--color-muted);font-size:.875rem;text-decoration:none;background:#fff;cursor:pointer;font-family:inherit}
.h-search:hover{border-color:var(--color-brand);color:var(--color-ink)}
.h-search kbd{font:inherit;font-size:.7rem}
.h-lang{color:var(--color-muted);text-decoration:none;font-size:.875rem;padding:6px 10px;border-radius:6px;white-space:nowrap}
.h-lang:hover{background:var(--color-subtle);color:var(--color-ink)}
.h-menu{display:none;border:0;background:none;padding:8px;border-radius:6px;cursor:pointer;color:var(--color-ink)}
.m-nav{display:none;border-top:1px solid var(--color-line);padding:8px 16px 14px}
.m-nav a{display:block;padding:10px 8px;color:var(--color-ink);text-decoration:none;border-radius:6px}
.m-nav.open{display:block}
dialog.sd{margin:10vh auto 0;width:min(640px,calc(100vw - 2rem));border:1px solid var(--color-line);border-radius:12px;padding:0;box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
dialog.sd::backdrop{background:rgba(28,33,38,.4)}
dialog.sd form{display:flex;align-items:center;gap:8px;padding:0 16px}
dialog.sd input{flex:1;height:56px;border:0;outline:0;font:inherit;font-size:1rem;background:transparent}
dialog.sd button{border:0;background:none;color:var(--color-muted);font-size:.75rem;padding:4px 8px;border-radius:6px;cursor:pointer}

/* ---------- page grid ---------- */
.crumbs{max-width:1200px;margin:0 auto;padding:20px 24px 0;font-size:.875rem;color:var(--color-muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li:before{content:"/";margin-right:6px;color:var(--color-muted)}
.crumbs a{color:var(--color-muted);text-decoration:none}
.crumbs a:hover{color:var(--color-ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--color-ink)}
.lp{max-width:1200px;margin:0 auto;padding:24px 24px 0;display:grid;grid-template-columns:220px minmax(0,1fr) 180px;gap:40px;align-items:start}
.lp-side,.lp-toc{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow:auto;font-size:.875rem}
.lp-side h2{font-size:.875rem;font-weight:600;margin:0 0 10px;color:var(--color-ink);letter-spacing:0}
.lp-side h2 a{color:inherit;text-decoration:none}
.lp-side ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--color-line)}
.lp-side li a{display:flex;gap:10px;padding:6px 10px 6px 12px;color:var(--color-muted);text-decoration:none;line-height:1.35;margin-left:-1px;border-left:2px solid transparent}
.lp-side li a:hover{color:var(--color-ink)}
.lp-side li a .n{flex-shrink:0;width:18px;text-align:right;font-variant-numeric:tabular-nums}
.lp-side li a[aria-current]{color:var(--color-ink);font-weight:600;border-left-color:var(--color-brand)}
.lp-side .lvl{display:flex;flex-wrap:wrap;gap:4px;margin:18px 0 0}
.lp-side .lvl a{font-size:.75rem;padding:3px 8px;border:1px solid var(--color-line);border-radius:999px;color:var(--color-muted);text-decoration:none}
.lp-side .lvl a[aria-current]{background:var(--color-brand-soft);border-color:#bfe0d2;color:var(--color-brand-ink);font-weight:600}
.lp-toc h2{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-muted);margin:0 0 8px}
.lp-toc ul{list-style:none;margin:0;padding:0}
.lp-toc a{display:block;padding:4px 0;color:var(--color-muted);text-decoration:none;line-height:1.35}
.lp-toc a:hover{color:var(--color-ink)}
.lp-main{min-width:0;max-width:720px}

/* ---------- hero ---------- */
.l-eyebrow{font-size:.875rem;color:var(--color-brand-ink);font-weight:500;margin:0 0 6px}
.l-eyebrow a{color:inherit;text-decoration:none}
.l-eyebrow a:hover{text-decoration:underline}
.lp-main h1{font-size:2.25rem;line-height:1.15;font-weight:600;letter-spacing:-.025em;margin:0 0 12px;color:var(--color-ink)}
.l-lead{font-size:1.125rem;line-height:1.6;color:var(--color-muted);margin:0 0 16px}
.l-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:.875rem;color:var(--color-muted);margin:0 0 6px}
.badge{display:inline-block;font-size:.75rem;font-weight:500;padding:2px 8px;border-radius:999px;background:var(--color-note);color:#2c5c96}
.badge.lv-b{background:var(--color-brand-soft);color:var(--color-brand-ink)}
.badge.lv-a{background:#fdf1e3;color:#9a4f12}
.badge.lv-e{background:#f3eefb;color:#5b3a9a}
.badge.int{background:var(--color-tip);color:#8a5a00}
.l-applies{font-size:.875rem;color:var(--color-muted);margin:0 0 22px}
.l-tut{display:flex;align-items:center;gap:14px;border:1px solid var(--color-line);background:var(--color-subtle);border-radius:12px;padding:14px 18px;margin:0 0 8px;text-decoration:none;color:var(--color-ink)}
.l-tut:hover{border-color:var(--color-brand)}
.l-tut svg{flex-shrink:0;color:var(--color-brand)}
.l-tut small{display:block;font-size:.75rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
.l-tut b{display:block;font-weight:600;color:var(--color-brand-ink);line-height:1.35}
.l-tut .go{margin-left:auto;color:var(--color-muted);font-size:1.2rem}
.lp-main > hr{border:0;border-top:1px solid var(--color-line);margin:28px 0 8px}

/* ---------- old lesson content, restyled ---------- */
.lesson-page{padding:0;margin:0}
.part-label{display:flex;align-items:center;gap:12px;font-family:var(--font-sans);font-size:1.375rem;font-weight:600;letter-spacing:-.01em;text-transform:none;color:var(--color-ink);margin:44px 0 14px;scroll-margin-top:84px}
.part-label .pnum{width:30px;height:30px;border-radius:50%;background:var(--color-brand);color:#fff;font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0}
.skill-check{border:1px solid var(--color-line);background:var(--color-subtle);border-radius:12px;padding:18px 22px;margin:0 0 8px;border-style:solid}
.skill-check ul{margin:10px 0 0;padding-left:0;list-style:none}
.skill-check li{position:relative;padding-left:26px;margin:7px 0;line-height:1.55}
.skill-check li:before{content:"";position:absolute;left:2px;top:.32em;width:14px;height:14px;border:1.5px solid #9aa5ae;border-radius:4px;background:#fff}
.sc-note{font-size:.9rem;color:var(--color-muted);margin:12px 0 0}
.ref-block{border:1px solid var(--color-line);border-radius:12px;background:#fff;padding:18px 22px;margin:0 0 18px}
.ref-block h4{font-family:var(--font-sans);font-size:.8rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted);margin:0 0 10px}
.ref-block dl{margin:0}
.rowdl{display:grid;grid-template-columns:minmax(150px,200px) 1fr;gap:4px 18px;padding:10px 0;border-top:1px solid var(--color-line)}
.rowdl:first-child{border-top:0;padding-top:2px}
.rowdl dt{font-family:var(--font-sans);font-weight:600;color:var(--color-ink);font-size:.95rem}
.rowdl dd{margin:0;color:var(--color-ink);line-height:1.6;font-size:.95rem}
.tip{border:0;border-left:3px solid var(--color-tip-line);background:var(--color-tip);border-radius:0 8px 8px 0;padding:12px 16px;margin:16px 0;font-size:.95rem;line-height:1.6}
.try-lead{font-size:1rem;color:var(--color-ink);margin:0 0 12px}
.widget{border:1px solid var(--color-line);border-radius:12px;background:#fff;overflow:hidden;margin:0 0 20px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.widget-head{background:var(--color-subtle);border-bottom:1px solid var(--color-line);padding:12px 16px}
.widget-title{font-family:var(--font-sans);font-size:.95rem;font-weight:600;color:var(--color-ink)}
.widget-title span{font-weight:400;color:var(--color-muted)}
.fx-bar{background:#fff}
.fx-namebox{font-family:var(--font-mono);background:var(--color-subtle);font-size:.8rem}
.fx-icon{font-family:Georgia,serif;font-style:italic}
.fx-go,.jump-btn{font-family:var(--font-sans);font-weight:500;font-size:.85rem;border-radius:0}
.jump-btn{border-radius:6px}
.fx-hint{font-family:var(--font-sans);font-size:.875rem;line-height:1.5}
.real-world{border:1px solid #bfe0d2;border-left:1px solid #bfe0d2;background:var(--color-brand-soft);border-radius:12px;padding:18px 22px;margin:0 0 8px}
.real-world h4{font-family:var(--font-sans);font-size:1.1rem;font-weight:600;margin:0 0 6px;color:var(--color-ink)}
.real-world p,.real-world li{color:var(--color-ink)}
.eyebrow{font-family:var(--font-sans);letter-spacing:.05em;color:var(--color-muted)}
.chip,.tool-btn,.fmt-btn,.ghost-btn,.tier-tab{font-family:var(--font-sans)}
.xtable th{font-family:var(--font-sans)}

.xl-hint{display:none;font-size:.8rem;color:var(--color-muted);margin:6px 0 0}
/* ---------- prev / next ---------- */
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:48px 0 0}
.pn a{display:block;border:1px solid var(--color-line);border-radius:12px;padding:14px 18px;text-decoration:none;color:var(--color-ink)}
.pn a:hover{border-color:var(--color-brand)}
.pn small{display:block;font-size:.8rem;color:var(--color-muted);margin-bottom:2px}
.pn b{font-weight:600;color:var(--color-brand-ink)}
.pn .nx{text-align:right;grid-column:2}
.fb{margin:28px 0 0;font-size:.875rem;color:var(--color-muted)}

/* ---------- footer (same as site) ---------- */
.site-f{margin-top:96px;border-top:1px solid var(--color-line);background:var(--color-subtle)}
.site-f-in{max-width:1200px;margin:0 auto;padding:40px 24px;display:grid;gap:24px;grid-template-columns:1fr auto}
.site-f p{margin:0;font-size:.875rem;color:var(--color-muted)}
.site-f .tm{grid-column:1/-1;font-size:.75rem;line-height:1.6}
.site-f ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.875rem}
.site-f ul a{color:var(--color-muted);text-decoration:none}
.site-f ul a:hover{color:var(--color-ink);text-decoration:underline}

@media (max-width:1180px){.lp{grid-template-columns:220px minmax(0,1fr)}.lp-toc{display:none}}
@media (max-width:1023px){
  .site-nav{display:none}.h-menu{display:block}
  .lp{grid-template-columns:minmax(0,1fr);padding-top:16px}
  .lp-side{position:static;max-height:none;order:2;border-top:1px solid var(--color-line);padding-top:24px;margin-top:24px}
  .lp-main{max-width:none}
}
@media (max-width:640px){
  .site-h-in,.crumbs,.lp{padding-left:16px;padding-right:16px}
  .site-h-in{gap:12px}
  .h-search .lbl,.h-search kbd{display:none}
  .lp-main h1{font-size:1.8rem}
  .rowdl{grid-template-columns:1fr}
  .pn{grid-template-columns:1fr}.pn .nx{grid-column:1}
  .site-f-in{grid-template-columns:1fr}
  .skill-check,.ref-block,.real-world{padding:16px}
}
@media print{.site-h,.lp-side,.lp-toc,.site-f,.pn{display:none}.lp{display:block}}
@media (max-width:640px){
  .rowdl{display:block}.rowdl dd{margin-top:4px}
  .xl-frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .xl-hint{display:block}
}
.ref-block .rowdl{display:grid;grid-template-columns:190px minmax(0,1fr);gap:4px 20px}
.ref-block .rowdl dt{width:auto;flex:none}
@media (max-width:640px){.ref-block .rowdl{display:block}}

/* ===================== "Where to find it in Excel" window ===================== */
.xl-shot{margin:40px 0 8px;scroll-margin-top:84px}
.xl-shot h2{font-size:1.375rem;font-weight:600;letter-spacing:-.01em;margin:0 0 6px;color:var(--color-ink)}
.xl-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px;font-size:.9rem;color:var(--color-muted)}
.xl-path span{background:var(--color-subtle);border:1px solid var(--color-line);border-radius:6px;padding:2px 8px;color:var(--color-ink);font-weight:500}
.xl-path span.sep{background:none;border:0;padding:0;color:var(--color-muted);font-weight:400}
.xl-frame{border:1px solid var(--color-line);border-radius:12px;background:linear-gradient(180deg,#eef2f4,#e6ebee);padding:14px;overflow:hidden}
.xl-scale{width:760px;transform-origin:0 0}
.xl-legend{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.xl-legend li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;line-height:1.5}
.xl-legend .xc{position:static;flex-shrink:0;margin-top:1px}
.xl-note{font-size:.8rem;color:var(--color-muted);margin:12px 0 0}

.xl-win{position:relative;width:760px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 28px rgba(16,40,30,.16);
  font:12px/1.25 "Segoe UI",system-ui,-apple-system,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#242424;text-align:left;user-select:none}
.xl-win *{box-sizing:border-box}
.xl-win svg.xi{display:block;flex-shrink:0}

/* callout badge + highlight ring */
.xc{position:absolute;z-index:6;top:-9px;left:-9px;width:20px;height:20px;border-radius:50%;background:#e8590c;color:#fff;
  font:700 11px/20px "Segoe UI",system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff,0 2px 5px rgba(0,0,0,.25)}
.xc + .xc{left:14px}
.xl-win .hl{position:relative;outline:2px solid #e8590c;outline-offset:1px;border-radius:3px;z-index:3}

/* title bar */
.xl-title{position:relative;height:32px;background:#0e6b3a;color:#fff;display:flex;align-items:center;gap:10px;padding:0 0 0 10px;font-size:11.5px}
.xl-title.hl{outline-offset:-2px}
.xl-logo{background:#fff;border-radius:3px;padding:1px;display:flex}
.xl-as{opacity:.92;display:flex;align-items:center;gap:5px}
.xl-toggle{display:inline-block;width:24px;height:12px;border-radius:7px;background:#fff;position:relative}
.xl-toggle:after{content:"";position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#0e6b3a}
.xl-qa{display:flex;align-items:center;padding:2px 3px;position:relative}
.xl-fn{flex:1;text-align:center;font-weight:600;white-space:nowrap}
.xl-dim{font-weight:400;opacity:.75}
.xl-search{background:rgba(255,255,255,.16);border-radius:4px;padding:3px 10px;width:150px;display:flex;align-items:center;gap:6px;opacity:.95}
.xl-win-ctl{display:flex;height:100%}
.xl-win-ctl i{font-style:normal;width:38px;display:flex;align-items:center;justify-content:center;font-size:12px}

/* tabs */
.xl-tabs{display:flex;align-items:flex-end;gap:2px;background:#f3f3f3;padding:4px 8px 0;height:30px;border-bottom:1px solid #e1e1e1}
.xl-tab{position:relative;padding:4px 9px 6px;font-size:12px;color:#444;white-space:nowrap;border-radius:4px 4px 0 0}
.xl-tab.on{color:#0e6b3a;font-weight:600;background:#fff}
.xl-tab.on:after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:3px;border-radius:2px;background:#0e6b3a}
.xl-tab.ctx{color:#0e6b3a}
.xl-tab.hl{outline-offset:-1px}

/* ribbon */
.xl-ribbon{position:relative;z-index:10;display:flex;align-items:stretch;background:#fff;height:100px;border-bottom:1px solid #e1e1e1;padding:4px 4px 0;white-space:nowrap}
.xg{position:relative;display:flex;flex-direction:column;padding:0 6px;border-right:1px solid #e3e3e3;flex-shrink:0}
.xg:last-child{border-right:0}
.xg-body{flex:1;display:flex;align-items:flex-start;gap:2px}
.xg-label{font-size:10.5px;color:#666;text-align:center;padding:2px 0 3px}
.xcol{display:flex;flex-direction:column;gap:1px}
.xcol.z{gap:4px;padding-top:4px}
.xrows{display:flex;flex-direction:column;gap:5px;padding-top:4px}
.xrow{display:flex;gap:2px;align-items:center}
.xb{position:relative;display:flex;align-items:center;border-radius:3px;color:#242424}
.xb.L{flex-direction:column;justify-content:flex-start;width:auto;min-width:46px;max-width:78px;padding:3px 4px 0;gap:3px;white-space:normal;text-align:center;font-size:11px;line-height:1.15;height:72px}
.xb.L span{display:block}
.xb.S{gap:5px;padding:2px 5px 2px 3px;height:22px;font-size:11.5px}
.xb.C{gap:6px;padding:2px 4px;height:22px;font-size:11.5px}
.xb.T{width:24px;height:22px;justify-content:center}
.xb.F{height:22px;border:1px solid #c8c8c8;border-radius:3px;padding:0 4px 0 6px;font-size:11.5px;gap:6px;min-width:112px;justify-content:space-between;background:#fff}
.xb.F.F2{min-width:40px}
.xb.F i{font-style:normal;font-size:9px;color:#666}
.xb.N{flex-direction:column;align-items:flex-start;font-size:11px;gap:2px;padding:2px 4px;height:44px}
.xb.N em{font-style:normal;border:1px solid #c8c8c8;padding:2px 6px;min-width:96px;border-radius:3px;background:#fff}
.xb.Agrid{display:grid;grid-template-columns:repeat(3,22px);gap:4px 2px;padding:2px}
.xb.Agrid i{display:block;height:14px;background:linear-gradient(#555,#555) 0 2px/var(--w) 1.4px no-repeat,linear-gradient(#555,#555) 0 6px/12px 1.4px no-repeat,linear-gradient(#555,#555) 0 10px/var(--w) 1.4px no-repeat;margin:0 4px}
.xb.G{display:grid;grid-template-columns:repeat(4,30px);gap:3px;padding:6px 2px}
.sw{display:block;height:44px;border:1px solid #cfd6dc;border-radius:2px;background:repeating-linear-gradient(180deg,#fff 0 8px,#dbe7f6 8px 16px)}
.sw.s0{background:repeating-linear-gradient(180deg,#2b6cb0 0 8px,#fff 8px 9px,#dbe7f6 9px 17px,#fff 17px 18px)}
.sw.s1{background:repeating-linear-gradient(180deg,#1e7145 0 8px,#fff 8px 9px,#d6eadf 9px 17px,#fff 17px 18px)}
.sw.s2{background:repeating-linear-gradient(180deg,#c05621 0 8px,#fff 8px 9px,#fbe3d3 9px 17px,#fff 17px 18px)}
.sw.s3{background:repeating-linear-gradient(180deg,#4a5568 0 8px,#fff 8px 9px,#e2e8f0 9px 17px,#fff 17px 18px)}
.xck{display:inline-block;width:12px;height:12px;border:1px solid #777;border-radius:2px;background:#fff;flex-shrink:0;position:relative}
.xck.on{background:#0e6b3a;border-color:#0e6b3a}
.xck.on:after{content:"";position:absolute;left:3px;top:0;width:4px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.xrad{display:inline-block;width:12px;height:12px;border:1px solid #777;border-radius:50%;background:#fff;position:relative;flex-shrink:0}
.xrad.on:after{content:"";position:absolute;inset:2px;border-radius:50%;background:#0e6b3a}

/* dropdown menus */
.xl-menu{position:absolute;top:calc(100% + 2px);left:0;z-index:20;background:#fff;border:1px solid #c8c8c8;border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.18);padding:4px;min-width:170px;text-align:left;font-size:12px;white-space:nowrap}
.xb.L .xl-menu{top:74px}
.xl-menu.sub{left:calc(100% - 4px);top:0}
.xm-item{position:relative;padding:5px 26px 5px 12px;border-radius:4px;color:#242424}
.xm-item.on{background:#e3f1e9;font-weight:600;color:#0e6b3a}
.xm-arrow{position:absolute;right:10px;color:#666}
.xm-sep{height:1px;background:#e1e1e1;margin:3px 0}

/* backstage */
.xl-backstage{display:flex;height:330px;background:#fff}
.bs-nav{width:170px;background:#0e6b3a;color:#fff;padding:10px 0;display:flex;flex-direction:column;gap:2px}
.bs-back{padding:4px 18px 12px;font-size:16px}
.bs-item{position:relative;padding:8px 18px;font-size:13px}
.bs-item.on{background:rgba(255,255,255,.18);font-weight:600}
.bs-item.hl{outline-color:#ffb37a}
.bs-main{flex:1;padding:22px 28px}
.bs-h{font-size:22px;font-weight:300;margin-bottom:16px}
.bs-row{position:relative;display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:6px;margin-bottom:6px}
.bs-row b{display:block;font-weight:600;font-size:12.5px}
.bs-row span{display:block;color:#666;font-size:11.5px;white-space:normal}
.bs-row.hl{background:#fff4ec}

/* formula bar */
.xl-fbar{display:flex;align-items:center;gap:6px;padding:5px 8px;background:#fff;border-bottom:1px solid #e1e1e1}
.xl-nb{position:relative;width:86px;height:22px;border:1px solid #d0d0d0;border-radius:3px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 6px;font-size:11.5px;white-space:nowrap;overflow:visible}
.xl-nb i{font-style:normal;font-size:9px;color:#777}
.xl-fx-ic{display:flex;gap:9px;color:#888;font-size:11px;padding:0 4px}
.xl-fx-ic em{font-family:Georgia,serif;font-style:italic;color:#555}
.xl-fx{position:relative;flex:1;height:22px;border:1px solid #d0d0d0;border-radius:3px;display:flex;align-items:center;padding:0 8px;overflow:visible;min-width:0}
.xl-fx code{font:12px/1 Consolas,"Cascadia Mono",ui-monospace,monospace;background:none;padding:0;color:#1f1f1f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* grid */
.xl-gridwrap{position:relative;background:#fff;height:206px;overflow:hidden}
.xl-gridwrap.hl{outline-offset:-3px}
.xl-grid{border-collapse:collapse;table-layout:fixed;width:100%;font-size:11.5px}
.xl-grid col.rh{width:34px}
.xl-grid th{background:#f5f5f5;color:#555;font-weight:400;font-size:11px;border:1px solid #dcdcdc;height:21px;text-align:center;position:relative;padding:0}
.xl-grid th.corner i{position:absolute;right:2px;bottom:2px;border-left:7px solid transparent;border-bottom:7px solid #b8b8b8}
.xl-grid th.on{background:#d5ebdf;color:#0e6b3a;font-weight:600}
.xl-grid thead th.on{box-shadow:inset 0 -2px 0 #0e6b3a}
.xl-grid tbody th.on{box-shadow:inset -2px 0 0 #0e6b3a}
.xl-grid td{border:1px solid #e3e3e3;height:21px;padding:0 5px;white-space:nowrap;overflow:hidden;text-overflow:clip;position:relative}
.xl-grid td.n{text-align:right;font-variant-numeric:tabular-nums}
.xl-grid td.err{color:#c53030}
.xl-grid td.b{font-weight:700}
.xl-grid td.i{font-style:italic}
.xl-grid td.c{text-align:center}
.xl-grid td.r{text-align:right}
.xl-grid td.wrap{white-space:normal;line-height:1.1}
.xl-grid td.h2{height:34px}
.xl-grid td.hdr{font-weight:700;background:#f2f7f4}
.xl-grid td.fillY{background:#fff2cc}
.xl-grid td.fillG{background:#e2efda}
.xl-grid td.fillB{background:#ddebf7}
.xl-grid td.dark{background:#1e5b3a;color:#fff;font-weight:700}
.xl-grid td.cfR{background:#ffc7ce;color:#9c0006}
.xl-grid td.cfG{background:#c6efce;color:#006100}
.xl-grid td.cfY{background:#ffeb9c;color:#9c5700}
.xl-grid td.bdr{box-shadow:inset 0 -1.5px 0 #333}
.xl-grid td.bbox{outline:1.5px solid #333;outline-offset:-1px}
.xl-grid td.merge{text-align:center;font-weight:700}
.xl-grid td.lock{background:#f3f3f3;color:#555}
.xl-grid td.inp{background:#fff8e1}
.xl-grid td.mono{font-family:Consolas,ui-monospace,monospace;font-size:11px}
.xl-grid td.muted{color:#888}
.xl-grid td.blank{background:#fde8e8}
.xl-grid td.spill{background:#eef6ff}
.xl-grid td.th-t{background:#2b6cb0;color:#fff;font-weight:600}
.xl-grid td.band{background:#dbe7f6}
.xl-grid td.tot{font-weight:700;box-shadow:inset 0 1.5px 0 #2b6cb0;background:#fff}
.xl-grid td.th-t.flt,.xl-grid td.flt{padding-right:20px}
.xl-grid td .fa{position:absolute;right:2px;top:3px;width:15px;height:14px;border:1px solid #bbb;border-radius:2px;background:#fff;color:#444;font-size:8px;line-height:13px;text-align:center;font-weight:400}
.xl-grid td.rg{background-color:rgba(14,107,58,.10)}
.xl-grid td.th-t.rg{background-color:#2b6cb0}
.xl-grid td.ants{outline:1.5px dashed #0e6b3a;outline-offset:-2px}
.xl-grid td.sel{outline:2px solid #0e6b3a;outline-offset:-2px;background:#fff;z-index:2}
.xl-grid td.sel.th-t{background:#2b6cb0}
.xl-grid td .fh{position:absolute;right:-1px;bottom:-1px;width:6px;height:6px;background:#0e6b3a;border:1px solid #fff}
.xl-grid td.hl{outline:2px solid #e8590c;outline-offset:-2px;z-index:3;border-radius:0}
.xl-grid td .xc{top:-1px;left:auto;right:-1px;width:18px;height:18px;line-height:18px;font-size:10px}
.xl-grid th .xc{top:-3px;left:-3px;width:18px;height:18px;line-height:18px;font-size:10px}
.xl-grid th.hl{outline:2px solid #e8590c;outline-offset:-2px}
.xl-grid td .dbar{position:absolute;left:2px;top:3px;bottom:3px;background:linear-gradient(90deg,#63be7b,#c6e7cf);border-radius:1px}
.xl-grid td .dbar + span{position:relative}
.xl-grid tr.fzr td,.xl-grid tr.fzr th{border-bottom:2px solid #8a8a8a}
.xl-grid td.fzc{border-right:2px solid #8a8a8a}
.xl-grid td.hidden-r{height:4px}

/* objects over the grid */
.xo{position:absolute;z-index:8}
.xo.chart{background:#fff;border:1px solid #bdbdbd;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:8px 10px 6px;display:flex;flex-direction:column}
.xo.chart svg{flex:1;width:100%;min-height:0}
.xo-t{text-align:center;font-size:12px;font-weight:600;color:#333;margin-bottom:4px}
.xo .hd{position:absolute;width:7px;height:7px;border:1px solid #888;background:#fff;border-radius:50%}
.hd.tl{left:-4px;top:-4px}.hd.tr{right:-4px;top:-4px}.hd.bl{left:-4px;bottom:-4px}.hd.br{right:-4px;bottom:-4px}
.xo.slicer,.xo.timeline{background:#fff;border:1px solid #bdbdbd;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:6px 8px;font-size:11.5px}
.sl-h{display:flex;justify-content:space-between;font-weight:600;margin-bottom:6px}
.sl-h span{color:#888;font-weight:400}
.sl-i{border:1px solid #c9d3dc;border-radius:2px;padding:3px 8px;margin-bottom:3px;color:#555;background:#fff}
.sl-i.on{background:#cfe1f6;border-color:#8db2dc;color:#1f3d63}
.tl-l{color:#666;font-size:10.5px;margin-bottom:4px}
.tl-m{display:flex;gap:2px}
.tl-m i{flex:1;font-style:normal;text-align:center;font-size:9.5px;color:#666;border-bottom:8px solid #e5e5e5;padding-bottom:2px}
.tl-m i.on{border-bottom-color:#4a7fc1;color:#1f3d63;font-weight:600}
.xo.dialog{background:#fff;border:1px solid #9e9e9e;border-radius:8px;box-shadow:0 12px 32px rgba(0,0,0,.28);font-size:11.5px;overflow:visible}
.dl-title{display:flex;justify-content:space-between;padding:8px 12px;font-size:12px;font-weight:600;border-bottom:1px solid #eee}
.dl-title span{color:#777;font-weight:400}
.dl-body{padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.dl-r{position:relative;display:flex;flex-direction:column;gap:3px}
.dl-r label{color:#333}
.dl-in{border:1px solid #bdbdbd;border-radius:3px;padding:3px 7px;min-height:22px;background:#fff;font-family:Consolas,ui-monospace,monospace;font-size:11px;display:flex;justify-content:space-between;align-items:center}
.dl-in.sel{font-family:inherit;font-size:11.5px}
.dl-in i{font-style:normal;font-size:9px;color:#666}
.dl-c{position:relative;display:flex;align-items:center;gap:7px}
.dl-t{position:relative;color:#444;white-space:normal;line-height:1.35}
.dl-h{font-weight:600;color:#333;margin-top:2px}
.dl-tabs{display:flex;gap:2px;border-bottom:1px solid #ddd;margin:-2px 0 2px}
.dl-tabs i{font-style:normal;padding:3px 8px;color:#555;font-size:11px}
.dl-tabs i.on{border-bottom:2px solid #0e6b3a;color:#0e6b3a;font-weight:600}
.dl-btns{display:flex;justify-content:flex-end;gap:6px;padding:8px 12px 10px}
.dl-btns i{font-style:normal;border:1px solid #bdbdbd;border-radius:4px;padding:3px 14px;background:#fff}
.dl-btns i.pri{background:#0e6b3a;border-color:#0e6b3a;color:#fff}
.xo.pane{top:0!important;bottom:0;right:0;left:auto!important;background:#fafafa;border-left:1px solid #d0d0d0;padding:8px 10px;font-size:11.5px;overflow:hidden;box-shadow:-4px 0 12px rgba(0,0,0,.06)}
.pn-title{display:flex;justify-content:space-between;font-weight:600;font-size:13px;margin-bottom:8px}
.pn-title span{color:#888;font-weight:400}
.pn-s{position:relative;margin-bottom:8px}
.pn-h{font-size:10.5px;color:#666;margin-bottom:3px;text-transform:none}
.pn-i{display:flex;align-items:center;gap:6px;padding:2px 2px}
.pn-i.chip{background:#fff;border:1px solid #cfcfcf;border-radius:3px;padding:2px 6px;margin-bottom:3px}
.xo.code{background:#fff;border:1px solid #8a8a8a;box-shadow:0 10px 28px rgba(0,0,0,.25);font-size:11px;border-radius:4px;overflow:hidden}
.cd-title{display:flex;justify-content:space-between;background:#e9edf2;padding:5px 10px;font-weight:600}
.cd-title span{font-weight:400;color:#555}
.cd-body{padding:8px 12px;font:11px/1.5 Consolas,"Cascadia Mono",ui-monospace,monospace;white-space:pre;color:#1f2a44}
.xo.note{background:#fff9c4;border:1px solid #c9b458;box-shadow:2px 2px 6px rgba(0,0,0,.15);padding:6px 8px;font-size:11px;white-space:normal;line-height:1.35}
.xo.tipbox{background:#fff;border:1px solid #bdbdbd;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:6px 9px;font-size:11px;white-space:normal;line-height:1.35}
.xo.spill{border:1.5px solid #4a7fc1;pointer-events:none}
.xo.arrow{overflow:visible;pointer-events:none}

/* bottom */
.xl-sheets{position:relative;display:flex;align-items:stretch;height:26px;background:#f3f3f3;border-top:1px solid #dcdcdc;font-size:11.5px;padding-left:6px}
.st-nav{color:#999;font-size:8px;display:flex;align-items:center;padding-right:8px;letter-spacing:4px}
.st{position:relative;padding:0 14px;display:flex;align-items:center;color:#444;border-right:1px solid #dedede}
.st.on{background:#fff;color:#0e6b3a;font-weight:600;box-shadow:inset 0 -2px 0 #0e6b3a}
.st-add{display:flex;align-items:center;padding:0 10px;color:#666;font-size:15px}
.st-scroll{flex:1}
.xl-status{display:flex;align-items:center;gap:14px;height:24px;background:#f3f3f3;border-top:1px solid #e6e6e6;padding:0 10px;font-size:11px;color:#555;white-space:nowrap}
.xs-acc{color:#666}
.xs-r{position:relative;margin-left:auto}
.xs-z{color:#777}
.xs-z i{display:inline-block;width:60px;height:2px;background:#bbb;vertical-align:middle;position:relative}

@media (max-width:640px){.xl-frame{padding:8px;border-radius:10px}}
.xl-win .xo.hl{position:absolute}
.xl-grid td.hl{overflow:visible}
.xl-grid td .xc{top:-11px;right:-11px;left:auto}
.xl-title > .xc{left:auto;right:126px;top:6px}
.xl-gridwrap > .xc{left:auto;right:8px;top:28px}
.xl-sheets > .xc{left:auto;right:10px;top:3px}
.xl-win > .xl-title.hl,.xl-win > .xl-sheets.hl{outline-offset:-2px}
.xb > .xc{left:auto;right:-9px}
.xl-nb > .xc{left:auto;right:-12px;top:-10px}
.xs-r > .xc{left:-26px;top:2px}
.xl-fx > .xc{left:-12px;top:-10px}
.dl-r > .xc,.dl-c > .xc,.dl-t > .xc,.pn-s > .xc{left:-17px;top:-4px}
.xm-arrow{top:4px}
.bs-item > .xc{left:auto;right:8px;top:7px}
.xl-win .bs-row.hl{z-index:auto}

/* lesson 1 numbered terms match the window's callouts */
.dg-badge{background:#e8590c!important;color:#fff!important;font-family:var(--font-sans)!important}