:root{
    --ink:        #16181c;
    --ink-2:      #3d4048;
    --ink-3:      #74777f;
    --line:       #e4e1db;
    --line-soft:  #efedE8;
    --canvas:     #f6f4f0;
    --surface:    #ffffff;
    --brass:      #8a6a3e;
    --brass-lift: #f4eee4;
    --gold:       #c9a227;
    --ok:         #2c6e4b;
    --warn:       #8f5b16;
    --err:        #a32b21;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
    --shadow-sm: 0 1px 2px rgba(22,24,28,.05);
    --shadow-md: 0 4px 20px -6px rgba(22,24,28,.14), 0 1px 3px rgba(22,24,28,.05);
    --shadow-pop: 0 12px 34px -10px rgba(22,24,28,.30), 0 2px 6px rgba(22,24,28,.08);
  }

  #lmsc-root *{ box-sizing: border-box; }
  #lmsc-root{ -webkit-text-size-adjust: 100%; }
  #lmsc-root{
    margin: 0;
    font: 15px/1.6 var(--sans);
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
  }
  #lmsc-root h1, #lmsc-root h2, #lmsc-root h3{ margin: 0; }
  #lmsc-root code{ font-family: var(--mono); font-size: .92em; }

  #lmsc-root .eyebrow{
    font-size: 10.5px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--ink-3);
  }

  /* ---------------- masthead ---------------- */
  #lmsc-root .masthead{ background: var(--surface); border-bottom: 1px solid var(--line); }
  #lmsc-root .masthead-in{
    max-width: 1240px; margin: 0 auto; padding: 22px 32px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  }
  #lmsc-root .mark{
    width: 38px; height: 38px; flex: none; border-radius: 3px;
    background: linear-gradient(150deg, #2a2d33, #16181c 60%);
    display: grid; place-items: center;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  }
  #lmsc-root .mark span{
    width: 16px; height: 22px; border-radius: 2px;
    background: linear-gradient(160deg, var(--gold), #8a6a3e);
    box-shadow: 0 0 10px rgba(201,162,39,.55);
  }
  #lmsc-root .masthead h1{ font: 400 21px/1.2 var(--serif); letter-spacing: -.01em; }
  #lmsc-root .masthead h1 em{ font-style: italic; color: var(--brass); }
  #lmsc-root .masthead .sub{ font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
  #lmsc-root .tag{
    margin-left: auto; padding: 5px 11px; border: 1px solid var(--line);
    border-radius: 100px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
    background: var(--canvas);
  }

  /* ---------------- layout ---------------- */
  #lmsc-root .wrap{ max-width: 1240px; margin: 0 auto; padding: 28px 32px 80px; }
  #lmsc-root .cols{ display: grid; grid-template-columns: minmax(0,1fr) 374px; gap: 26px; align-items: start; }
  @media (max-width: 1000px) { #lmsc-root .cols{ grid-template-columns: minmax(0,1fr); } }

  #lmsc-root .card{
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 8px; box-shadow: var(--shadow-sm); margin-bottom: 22px;
  }
  #lmsc-root .card-hd{ padding: 20px 24px 0; }
  #lmsc-root .card-bd{ padding: 18px 24px 24px; }
  #lmsc-root .card h2{ font: 400 17px/1.3 var(--serif); letter-spacing: -.005em; }
  #lmsc-root .lede{ margin: 6px 0 0; font-size: 13px; color: var(--ink-3); max-width: 64ch; }
  #lmsc-root .rule{ height: 1px; background: var(--line-soft); margin-top: 16px; }

  /* ---------------- form ---------------- */
  #lmsc-root .group + .group{ margin-top: 26px; }
  #lmsc-root .group-hd{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  #lmsc-root .group-hd .hair{ flex: 1; height: 1px; background: var(--line-soft); }

  #lmsc-root .grid{ display: grid; gap: 18px 16px; }
  #lmsc-root .grid.c3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  #lmsc-root .grid.c2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  @media (max-width: 720px) { #lmsc-root .grid.c3, #lmsc-root .grid.c2{ grid-template-columns: minmax(0,1fr); } }
  #lmsc-root .span2{ grid-column: 1 / -1; }

  #lmsc-root .field-hd{ display: flex; align-items: center; gap: 7px; margin-bottom: 8px; position: relative; }
  #lmsc-root .field-hd .ico{ color: var(--brass); display: block; flex: none; }
  #lmsc-root .field-hd label{
    font-size: 11px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--ink-2); cursor: pointer;
  }
  /* Fixed specification, not a choice — reads as a badge on the field.
     Distinct from `.tag`, which is the masthead pill and pushes itself right. */
  #lmsc-root .field-hd .pin{
    padding: 2.5px 8px; border-radius: 100px; white-space: nowrap;
    font-size: 9.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--brass);
    background: var(--brass-lift); border: 1px solid #e6dbc9;
  }

  #lmsc-root select, #lmsc-root input[type=number], #lmsc-root input[type=date]{
    width: 100%; padding: 10px 12px; font: 15px/1.4 var(--sans);
    border: 1px solid var(--line); border-radius: 5px;
    background: var(--surface); color: var(--ink);
    transition: border-color .15s, box-shadow .15s;
  }
  #lmsc-root select{
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%2374777f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 34px;
  }
  #lmsc-root select:hover, #lmsc-root input:hover{ border-color: #cfcbc3; }
  #lmsc-root select:focus, #lmsc-root input:focus{
    outline: none; border-color: var(--brass);
    box-shadow: 0 0 0 3px rgba(138,106,62,.13);
  }
  #lmsc-root option:disabled{ color: #b6b3ac; }

  #lmsc-root .hint{ margin: 7px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
  #lmsc-root .hint:empty{ display: none; }
  #lmsc-root .notice{
    display: flex; gap: 8px; align-items: flex-start;
    margin-top: 8px; padding: 9px 11px; border-radius: 5px;
    background: #fdf6e9; color: var(--warn); border: 1px solid #f0e2c6;
    font-size: 12.5px; line-height: 1.5;
  }
  #lmsc-root .notice svg{ flex: none; margin-top: 2px; }
  /* Something included rather than withheld — not a warning, so not amber. */
  #lmsc-root .notice.good{ background: #eef6f1; color: var(--ok); border-color: #cfe4d8; }

  /* ---------------- info popover ---------------- */
  #lmsc-root .info{
    width: 18px; height: 18px; padding: 0; flex: none; border: 0; cursor: pointer;
    border-radius: 50%; background: var(--line-soft); color: var(--ink-3);
    display: grid; place-items: center; transition: background .15s, color .15s;
  }
  #lmsc-root .info:hover, #lmsc-root .info[aria-expanded="true"]{ background: var(--ink); color: #fff; }
  #lmsc-root .info:focus-visible{ outline: 2px solid var(--brass); outline-offset: 2px; }
  #lmsc-root .pop{
    position: absolute; z-index: 40; top: calc(100% + 9px); left: 0;
    width: min(330px, 78vw); padding: 14px 15px;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 7px; box-shadow: var(--shadow-pop);
    font: 400 13px/1.62 var(--sans); color: var(--ink-2);
    text-transform: none; letter-spacing: 0;
  }
  #lmsc-root .pop[hidden]{ display: none; }
  #lmsc-root .pop::before{
    content: ''; position: absolute; top: -5px; left: 22px; width: 9px; height: 9px;
    background: var(--surface); border-left: 1px solid var(--line);
    border-top: 1px solid var(--line); transform: rotate(45deg);
  }
  #lmsc-root .pop .pop-t{
    font: 700 10.5px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase;
    color: var(--brass); margin-bottom: 7px;
  }
  #lmsc-root .pop .drift{
    display: block; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--warn);
  }

  /* ---------------- swatches ---------------- */
  #lmsc-root .swatches{ display: flex; flex-wrap: wrap; gap: 10px; }
  /* A flex item stretches to the tallest sibling, and a button centres its own
     content — so a two-line caption ("Neutral White") used to push its chip to
     the top of its box while every one-line neighbour sat lower. Pinning the
     content to the start keeps every chip on one line; the caption's reserved
     two lines keep the captions on one baseline too. It also fixes the tick,
     which is positioned against the button rather than the chip. */
  #lmsc-root .sw{
    position: relative; padding: 0; cursor: pointer; background: none;
    border: 0; width: 58px; text-align: center; font-family: inherit;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
  }
  #lmsc-root .sw .chip{
    display: block; width: 58px; height: 44px; margin: 0 0 7px; flex: none;
    border-radius: 5px; border: 1px solid rgba(22,24,28,.14);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .16s cubic-bezier(.22,1,.36,1), box-shadow .16s;
    background-clip: padding-box;
  }
  #lmsc-root .sw .cap{
    display: block; font-size: 10.5px; line-height: 1.25; color: var(--ink-3);
    min-height: 2.5em;   /* two lines — the longest caption in the catalogue */
    transition: color .15s;
  }
  #lmsc-root .sw:hover .chip{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
  #lmsc-root .sw[aria-checked="true"] .chip{ box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
  #lmsc-root .sw[aria-checked="true"] .cap{ color: var(--ink); font-weight: 600; }
  #lmsc-root .sw:focus-visible{ outline: none; }
  #lmsc-root .sw:focus-visible .chip{ box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brass); }
  #lmsc-root .sw:disabled{ cursor: not-allowed; }
  #lmsc-root .sw:disabled .chip{ opacity: .34; transform: none; box-shadow: none; }
  #lmsc-root .sw:disabled .cap{ color: #b6b3ac; }
  #lmsc-root .sw .tick{
    position: absolute; top: 5px; right: 5px; width: 15px; height: 15px;
    border-radius: 50%; background: var(--ink); color: #fff;
    display: none; place-items: center;
  }
  #lmsc-root .sw[aria-checked="true"] .tick{ display: grid; }
  #lmsc-root .sw .chip.none{
    background: var(--surface);
    background-image: linear-gradient(135deg, transparent 46%, #c9c5bd 46%, #c9c5bd 54%, transparent 54%);
  }

  /* ---------------- callout ---------------- */
  #lmsc-root .callout{
    display: flex; gap: 11px; align-items: flex-start;
    margin-top: 24px; padding: 14px 16px;
    background: var(--brass-lift); border: 1px solid #e6dbc9;
    border-radius: 6px; font-size: 13.5px; line-height: 1.6; color: #5c4526;
  }
  #lmsc-root .callout svg{ flex: none; margin-top: 3px; color: var(--brass); }
  #lmsc-root .callout b{ color: #43331c; }

  /* ---------------- price rail ---------------- */
  #lmsc-root .rail{ position: sticky; top: 24px; }
  #lmsc-root .price-card{
    background: linear-gradient(168deg, #1e2127, #14161a 62%);
    border: 1px solid #2b2e35; border-radius: 8px; color: #f2efe9;
    box-shadow: var(--shadow-md); overflow: hidden;
  }
  #lmsc-root .pc-top{ padding: 22px 24px 20px; }
  #lmsc-root .price-card .eyebrow{ color: #9aa0aa; }
  #lmsc-root .price-amount{
    font: 400 41px/1.05 var(--serif); letter-spacing: -.02em; margin-top: 10px;
    color: #fff; font-variant-numeric: tabular-nums;
  }
  #lmsc-root .price-amount .cur{ font-size: 24px; color: var(--gold); margin-right: 2px; vertical-align: 5px; }
  #lmsc-root .price-meta{ margin-top: 9px; font-size: 12.5px; color: #9aa0aa; }
  #lmsc-root .price-tax{
    margin-top: 15px; padding: 9px 11px; border-radius: 5px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
    font-size: 12.5px; line-height: 1.55; color: #c9ccd2;
    display: flex; gap: 8px; align-items: flex-start;
  }
  #lmsc-root .price-tax svg{ flex: none; margin-top: 2px; color: var(--gold); }

  #lmsc-root .banner{ margin: 0 24px 20px; padding: 11px 13px; border-radius: 5px;
            font-size: 12.5px; line-height: 1.55; }
  #lmsc-root .banner.clamp{ background: rgba(201,162,39,.13); border: 1px solid rgba(201,162,39,.32); color: #f0dca8; }
  #lmsc-root .banner.err{ background: rgba(163,43,33,.16); border: 1px solid rgba(163,43,33,.42); color: #f4c0bb; }
  #lmsc-root .banner b{ color: #fff; }

  #lmsc-root .kv{ border-top: 1px solid #2b2e35; background: rgba(0,0,0,.16); }
  #lmsc-root .kv table{ width: 100%; border-collapse: collapse; font-size: 12.5px; }
  #lmsc-root .kv th, #lmsc-root .kv td{ padding: 9px 24px; text-align: left; vertical-align: top; }
  #lmsc-root .kv td{ text-align: right; font-variant-numeric: tabular-nums; color: #e8e5df; }
  #lmsc-root .kv th{ font-weight: 500; color: #9aa0aa; }
  #lmsc-root .kv tr + tr th, #lmsc-root .kv tr + tr td{ border-top: 1px solid rgba(255,255,255,.055); }
  #lmsc-root .kv tr.total th, #lmsc-root .kv tr.total td{ color: #fff; font-weight: 700; }
  #lmsc-root .kv .fired{ color: var(--gold); font-weight: 600; }
  #lmsc-root .kv .muted{ color: var(--ink-3); font-weight: 400; }

  /* ---------------- tabs ---------------- */
  #lmsc-root .tabs{ display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 24px; flex-wrap: wrap; }
  #lmsc-root .tab{
    position: relative; border: 0; background: none; cursor: pointer;
    padding: 13px 14px; font: 700 11px/1 var(--sans);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
    transition: color .15s;
  }
  #lmsc-root .tab:hover{ color: var(--ink); }
  #lmsc-root .tab[aria-selected="true"]{ color: var(--ink); }
  #lmsc-root .tab[aria-selected="true"]::after{
    content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px;
    height: 2px; background: var(--brass);
  }
  #lmsc-root .tab .count{
    margin-left: 7px; padding: 2px 6px; border-radius: 100px;
    font-size: 10px; letter-spacing: .04em; background: var(--line-soft); color: var(--ink-3);
  }
  #lmsc-root .tab .count.ok{ background: #e3f0e8; color: var(--ok); }
  #lmsc-root .tab .count.bad{ background: #fbe6e4; color: var(--err); }
  #lmsc-root .panel{ padding: 22px 24px 26px; }
  #lmsc-root .panel[hidden]{ display: none; }

  /* ---------------- trace ---------------- */
  #lmsc-root .step{ position: relative; padding-left: 18px; margin-bottom: 18px; }
  #lmsc-root .step:last-child{ margin-bottom: 0; }
  #lmsc-root .step::before{
    content: ''; position: absolute; left: 0; top: 4px; bottom: 2px;
    width: 2px; background: var(--line); border-radius: 2px;
  }
  #lmsc-root .step.final::before{ background: var(--brass); }
  #lmsc-root .step .lbl{ font: 700 10.5px/1 var(--sans); letter-spacing: .11em;
               text-transform: uppercase; color: var(--brass); }
  #lmsc-root .step code{ display: block; font-size: 12px; line-height: 1.55; color: var(--ink-3);
               word-break: break-all; margin-top: 5px; }
  #lmsc-root .step code.sub{ color: var(--ink-2); }
  #lmsc-root .step .res{ display: inline-block; margin-top: 6px; font: 700 13px/1 var(--mono); }

  /* ---------------- schema ---------------- */
  #lmsc-root pre.schema{
    background: #14161a; color: #d6d3cd; padding: 18px; border-radius: 6px;
    font: 12px/1.62 var(--mono); overflow-x: auto; margin: 0;
  }
  #lmsc-root pre.schema .k{ color: #93c5e8; }
  #lmsc-root pre.schema .s{ color: #d8b48b; }
  #lmsc-root .compare{ display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px;
             border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
  #lmsc-root .compare > div{ padding: 15px 17px; }
  #lmsc-root .compare > div:first-child{ border-right: 1px solid var(--line); background: #faf8f5; }
  #lmsc-root .compare .val{ font: 400 19px/1.25 var(--serif); margin-top: 7px; }
  #lmsc-root .compare .cap{ font-size: 12px; color: var(--ink-3); margin-top: 6px; }
  @media (max-width: 560px) {
    #lmsc-root .compare{ grid-template-columns: 1fr; }
    #lmsc-root .compare > div:first-child{ border-right: 0; border-bottom: 1px solid var(--line); }
  }

  /* ---------------- tests ---------------- */
  #lmsc-root .summary{ font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
  #lmsc-root .summary b.ok{ color: var(--ok); } #lmsc-root .summary b.bad{ color: var(--err); }
  #lmsc-root .test{ display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft);
          font-size: 13px; align-items: flex-start; }
  #lmsc-root .test:last-child{ border-bottom: 0; padding-bottom: 0; }
  #lmsc-root .pill{ flex: none; margin-top: 1px; padding: 3px 8px; border-radius: 3px;
          font: 700 10px/1.3 var(--sans); letter-spacing: .09em; }
  #lmsc-root .pill.pass{ background: #e3f0e8; color: var(--ok); }
  #lmsc-root .pill.fail{ background: #fbe6e4; color: var(--err); }
  #lmsc-root .test .got{ font: 12px/1.5 var(--mono); color: var(--ink-2); margin-top: 4px; }
  #lmsc-root .test .src{ font-size: 12px; color: var(--ink-3); margin-top: 3px; }

  /* ---------------- faq ---------------- */
  #lmsc-root .faq{ border-top: 1px solid var(--line-soft); }
  #lmsc-root .faq details{ border-bottom: 1px solid var(--line-soft); }
  #lmsc-root .faq summary{
    list-style: none; cursor: pointer; padding: 15px 34px 15px 0; position: relative;
    font: 500 14.5px/1.5 var(--sans); color: var(--ink);
  }
  #lmsc-root .faq summary::-webkit-details-marker{ display: none; }
  #lmsc-root .faq summary::after{
    content: ''; position: absolute; right: 6px; top: 21px;
    width: 9px; height: 9px; border-right: 1.6px solid var(--ink-3);
    border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg);
    transition: transform .2s cubic-bezier(.22,1,.36,1);
  }
  #lmsc-root .faq details[open] summary::after{ transform: rotate(-135deg); top: 25px; }
  #lmsc-root .faq summary:hover{ color: var(--brass); }
  #lmsc-root .faq .ans{ padding: 0 40px 17px 0; font-size: 13.5px; line-height: 1.68; color: var(--ink-2); }

  #lmsc-root .foot{ margin-top: 26px; font-size: 12px; color: var(--ink-3); text-align: center; }