:root{
    --bg:#f3f4f6; --surface:#ffffff; --surface-2:#eceef2; --line:#dde1e8;
    --text:#0f172a; --muted:#0f172a; --faint:#8a92a0;
    --accent:#5878a6; --accent-ink:#3d5a85; --accent-soft:rgba(88,120,166,.12);
    --up:#5a9e7a; --down:#c26a6a; --live:#1da35c;
    --radius:6px;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --bg:#0b0e13; --surface:#131822; --surface-2:#0f141d; --line:#232b38;
      --text:#e8ebf0; --muted:#e8ebf0; --faint:#6b7484;
      --accent:#7f9cc4; --accent-ink:#a8bedd; --accent-soft:rgba(127,156,196,.14);
      --live:#3ad584;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0b0e13; --surface:#131822; --surface-2:#0f141d; --line:#232b38;
    --text:#e8ebf0; --muted:#e8ebf0; --faint:#6b7484;
    --accent:#7f9cc4; --accent-ink:#a8bedd; --accent-soft:rgba(127,156,196,.14);
    --live:#3ad584;
  }
  :root[data-theme="light"]{
    --bg:#f3f4f6; --surface:#ffffff; --surface-2:#eceef2; --line:#dde1e8;
    --text:#0f172a; --muted:#0f172a; --faint:#8a92a0;
    --accent:#5878a6; --accent-ink:#3d5a85; --accent-soft:rgba(88,120,166,.12);
    --live:#1da35c;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font:400 16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  a{color:inherit}
  .wrap{max-width:1080px; margin:0 auto; padding:0 24px}

  .eyebrow{
    font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent); margin:0 0 14px;
  }
  h1,h2,h3{text-wrap:balance; margin:0}
  h2{line-height:1.18}
  h3{line-height:1.35}

  /* ---------- Nav ---------- */
  header.nav{
    position:sticky; top:0; z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
  }
  .nav-inner{display:flex; align-items:center; gap:28px; height:60px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:.02em; text-decoration:none}
  .logo{display:block; width:auto; height:30px}
  .logo--dark{display:none}
  :root[data-theme="dark"] .logo--light{display:none}
  :root[data-theme="dark"] .logo--dark{display:block}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .logo--light{display:none}
    :root:not([data-theme="light"]) .logo--dark{display:block}
  }
  .foot-brand .logo{height:26px}
  .orbit-hub .logo{height:46px}
  .nav-links{display:flex; gap:22px; margin-left:auto; font-size:14px}
  .nav-login{font-size:14px; color:var(--text); text-decoration:none; white-space:nowrap}
  .nav-login:hover, .nav-login:focus-visible{color:var(--accent)}
  .nav-links a{color:var(--muted); text-decoration:none}
  .nav-links a:hover, .nav-links a:focus-visible{color:var(--text)}
  .btn{
    display:inline-block; padding:9px 18px; border-radius:var(--radius);
    font-size:14px; font-weight:600; text-decoration:none; border:1px solid transparent;
    transition:background .15s ease, border-color .15s ease;
  }
  .btn-primary{background:var(--accent); color:var(--bg)}
  .btn-primary:hover{background:var(--accent-ink)}
  .btn-ghost{border-color:var(--line); color:var(--text)}
  .btn-ghost:hover{border-color:var(--accent)}
  a:focus-visible,.btn:focus-visible,.theme-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .theme-btn{
    display:grid; place-items:center; width:34px; height:34px; padding:0;
    background:none; border:1px solid var(--line); border-radius:var(--radius);
    color:var(--muted); cursor:pointer; transition:border-color .15s ease, color .15s ease;
  }
  .theme-btn:hover{border-color:var(--accent); color:var(--text)}
  .theme-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4}
  .theme-btn svg .half{fill:currentColor; stroke:none}

  /* ---------- Hero ---------- */
  .hero{padding:84px 24px 64px}
  .hero-grid{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:start}
  .hero h1{font-size:clamp(34px,4.6vw,50px); line-height:1.08; font-weight:650; letter-spacing:-.022em}
  .hero h1 .os{color:var(--accent)}
  .hero p.lede{color:var(--muted); font-size:16px; max-width:52ch; margin:18px 0 0}
  .hero p.lede-strong{color:var(--text); font-weight:650; font-size:18px; letter-spacing:-.01em}
  .hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
  .manifesto{margin-top:26px; max-width:58ch}
  .manifesto p{font-size:16px; color:var(--muted); margin:0 0 16px; text-wrap:pretty}
  .manifesto strong{color:var(--text); font-weight:650}
  .manifesto .m-big{font-size:clamp(19px,2.2vw,24px); font-weight:650; color:var(--text); letter-spacing:-.015em; line-height:1.25; text-wrap:balance}
  .manifesto .m-close{margin:28px 0 0; text-wrap:initial; font-size:clamp(17px,2vw,22px)}
  .manifesto .m-close .os{color:var(--accent)}
  .hero-note{margin-top:18px; font-size:13px; color:var(--faint)}

  /* dashboard mock */
  .mock{
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:18px 18px 14px; box-shadow:0 24px 60px -32px rgba(0,0,0,.45);
  }
  .mock-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
  .mock-title{font-size:13px; font-weight:600}
  .mock-scope{font-size:12px; color:var(--faint)}
  .kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
  .kpi{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:10px 12px}
  .kpi .k-label{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); font-weight:600}
  .kpi .k-value{font-size:19px; font-weight:650; font-variant-numeric:tabular-nums; margin-top:2px; letter-spacing:-.01em}
  .kpi .k-delta{font-size:11.5px; font-variant-numeric:tabular-nums; font-weight:600}
  .k-delta.up{color:var(--up)} .k-delta.down{color:var(--down)}
  .chart{margin-top:14px}
  .chart-caption{display:flex; gap:16px; font-size:11.5px; color:var(--faint); margin-top:8px}
  .chip-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:baseline}
  .chart svg{display:block; width:100%; height:auto}
  .pace-now{stroke:var(--accent)} .pace-ly{stroke:var(--faint)}
  .grid-line{stroke:var(--line)}
  .pace-end{fill:var(--accent)}
  @media (prefers-reduced-motion:no-preference){
    .mock.active .pace-now{stroke-dasharray:900; stroke-dashoffset:900; animation:draw 1.6s .3s ease-out forwards}
    @keyframes draw{to{stroke-dashoffset:0}}
  }

  /* hero: carrusel de vistas del panel (misma mecánica que el de correos) */
  .mock-stack{display:grid}
  .mock-stack .mock{
    grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .8s ease, visibility 0s linear .8s;
    display:flex; flex-direction:column;
  }
  .mock-stack .mock .hbars{flex:1; justify-content:center; gap:16px}
  .mock-stack .mock .chart{flex:1; display:flex; flex-direction:column; justify-content:center}
  .mock-stack .mock .mock-note{margin-top:auto; padding-top:16px}
  .mock-stack .mock.active{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .8s ease}
  @media (prefers-reduced-motion:reduce){ .mock-stack .mock{transition:none} }
  .mock-carousel .mail-dots{margin-top:16px}

  /* barras horizontales de los mocks (benchmark, F&B, mercados) */
  .hbars{display:flex; flex-direction:column; gap:9px; margin-top:4px}
  .hbar{display:grid; grid-template-columns:96px minmax(0,1fr) 118px; gap:12px; align-items:center}
  .hb-label{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .hb-you .hb-label{font-weight:650; color:var(--text)}
  .hb-track{display:block; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; height:14px; overflow:hidden}
  .hb-fill{display:block; height:100%; background:var(--accent); border-radius:2px 4px 4px 2px}
  .hb-comp{background:var(--faint); opacity:.55}
  .hb-value{font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
  .hb-sub{color:var(--faint); font-weight:400}
  .hbar .k-delta{font-size:11px}
  /* benchmark: stats min/avg/max como en el dashboard (sin aspecto de botón) */
  .bench-stats{display:flex; gap:22px; justify-content:flex-end; margin-top:6px}
  .bstat{display:flex; flex-direction:column; align-items:flex-end; gap:1px}
  .bstat .bs-label{font-size:9.5px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--text)}
  .bstat .bs-value{font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
  .bstat-you .bs-value{color:var(--accent)}
  .live-scope{color:var(--live); display:inline-flex; align-items:center}
  .live-dot{
    display:inline-block; width:10px; height:10px; border-radius:50%;
    background:var(--live); margin-right:8px; flex:none;
    position:relative; top:1px;
  }
  @media (prefers-reduced-motion:no-preference){
    .live-dot{animation:livepulse 3.2s ease-in-out infinite}
    @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
  }
  /* benchmark: barra corta + tabla de precios hoy / +7 / +30 */
  .bench{display:flex; flex-direction:column; gap:13px; margin-top:4px; flex:1; justify-content:center}
  .bench-row{display:grid; grid-template-columns:96px minmax(0,1fr) 50px 56px 60px; gap:11px; align-items:center}
  .bench-head{margin-bottom:-4px}
  .bench-head span{font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); text-align:right}
  .bench-p{font-size:12px; font-variant-numeric:tabular-nums; text-align:right; color:var(--muted); white-space:nowrap}
  .bench-p:nth-child(3){font-weight:600; color:var(--text)}
  .hb-you .bench-p{font-weight:650; color:var(--text)}
  .mini-title{margin:16px 0 0; font-size:10px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
  /* mercados: detalle por canal */
  .chan{display:flex; flex-direction:column; gap:9px; margin-top:10px}
  .chan-row{display:grid; grid-template-columns:minmax(0,1.3fr) 80px 78px 88px; gap:11px; align-items:center}
  .chan-head span{font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); text-align:right}
  .chan-v{font-size:12px; font-variant-numeric:tabular-nums; text-align:right; color:var(--muted); white-space:nowrap}
  .chan-row .chan-v:nth-child(2){font-weight:600; color:var(--text)}
  .chan-bad{color:var(--down) !important; font-weight:600}
  .hbars-mini{margin-top:10px}
  .hbars-mini .hb-track{height:9px}
  .mock-stack .mock .hbars-mini{flex:0 0 auto; gap:9px}
  .mock-note{margin:14px 0 0; font-size:12.5px; line-height:1.55; color:var(--faint)}
  .mock-note strong{color:var(--text); font-weight:650}
  .proj-dip{fill:var(--surface); stroke:var(--accent); stroke-width:2}
  .proj-pt{fill:var(--accent)}
  .fade-top{stop-color:var(--accent); stop-opacity:.20}
  .fade-bot{stop-color:var(--accent); stop-opacity:0}
  .svg-tick{fill:var(--faint); font-size:10.5px}
  .svg-dipnum{fill:var(--text); font-size:13px; font-weight:650; font-variant-numeric:tabular-nums}
  .svg-note{fill:var(--faint); font-size:11px; font-weight:600}

  /* ---------- Sections ---------- */
  section{padding:72px 0; border-top:1px solid var(--line)}
  .sec-head{max-width:56ch; margin-bottom:40px}
  .sec-head h2{font-size:clamp(24px,3vw,32px); font-weight:650; letter-spacing:-.018em}
  .sec-head p{color:var(--muted); margin:14px 0 0}
  .sec-strong{color:var(--text); font-weight:650; letter-spacing:-.015em; font-size:clamp(17px,2vw,22px); line-height:1.25}
  .sec-head .sec-strong{margin-top:24px}
  .sec-tight{margin-bottom:0}
  .split .sec-mid{align-self:center; margin-bottom:0}
  .sec-mid p:not(.eyebrow):not(.sec-strong){max-width:47ch}
  /* mock de correo de la IA (carrusel con fundido cruzado) */
  .mail-carousel{margin:52px auto 0; max-width:640px}
  .mail-stack{display:grid}
  .mail{
    grid-area:1 / 1; opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .8s ease, visibility 0s linear .8s;
    background:var(--surface);
    border:1px solid var(--line); border-radius:10px; padding:22px 26px 20px;
    box-shadow:0 24px 60px -32px rgba(0,0,0,.45); margin:0;
  }
  .mail.active{opacity:1; visibility:visible; pointer-events:auto; transition:opacity .8s ease}
  @media (prefers-reduced-motion:reduce){ .mail{transition:none} }
  .mail-dots{display:flex; justify-content:center; gap:12px; margin-top:20px}
  .mail-dot{
    width:10px; height:10px; padding:0; border:0; border-radius:50%;
    background:var(--faint); opacity:.55; cursor:pointer;
    transition:background .2s ease, transform .2s ease, opacity .2s ease;
  }
  .mail-dot:hover{opacity:1}
  .mail-dot.active{background:var(--accent); opacity:1; transform:scale(1.25)}
  .mail-dot:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
  .mail-head{display:flex; align-items:center; gap:12px}
  .mail-avatar{width:auto; height:22px; flex:none; align-self:center}
  .mail-from{margin:0; font-size:14px}
  .mail-meta{margin:1px 0 0; font-size:12.5px; color:var(--faint)}
  .mail-subject{margin:16px 0 0; font-size:15.5px; font-weight:650; letter-spacing:-.01em}
  .mail-body{border-top:1px solid var(--line); margin-top:14px; padding-top:14px}
  .mail-body p{margin:0 0 12px; font-size:14px; line-height:1.6}
  .mail-tag{
    display:inline-block; margin-right:6px; padding:1px 9px; border-radius:999px;
    font-size:11px; font-weight:650; letter-spacing:.06em; text-transform:uppercase;
    color:var(--accent); background:var(--accent-soft);
  }
  .mail-sign{color:var(--faint); margin-bottom:0 !important; font-size:12.5px !important; line-height:1.5 !important; margin-top:18px}
  .mail-sign strong{color:var(--text)}
  .mail-sign a{color:var(--accent); text-decoration:none}
  .mail-sign em{font-style:italic}
  .ia-note{margin-top:44px; max-width:60ch}
  .ia-note .sec-strong{margin:0}
  .ia-note p{color:var(--muted); margin:10px 0 0; font-size:15px}

  .modules{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
  .module{background:var(--surface); padding:22px 20px 24px; transition:background .15s ease}
  .module:hover{background:var(--surface-2)}
  .module h3{font-size:15px; font-weight:650; display:flex; align-items:center; gap:8px}
  .module p{font-size:13.5px; color:var(--muted); margin:8px 0 0; line-height:1.55}
  .module .m-tagline{color:var(--accent); font-weight:650; margin-top:6px}
  .module .m-strong{color:var(--text); font-weight:650; margin-top:10px; line-height:1.45}
  .module .m-glyph{color:var(--accent); font-weight:700; font-size:13px; font-variant-numeric:tabular-nums}

  /* split features */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
  .feature-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:18px}
  .feature-list li{padding-left:18px; border-left:2px solid var(--line)}
  .feature-list li strong{display:block; font-size:14.5px; font-weight:650; line-height:1.35}
  .feature-list li span{font-size:13.5px; color:var(--muted)}
  .feature-list li:hover{border-left-color:var(--accent)}

  /* tv photo */
  .tv-photo{
    width:min(100%,380px); aspect-ratio:4/5; object-fit:cover; object-position:50% 38%;
    border-radius:10px; border:1px solid var(--line); display:block;
    box-shadow:0 24px 60px -32px rgba(0,0,0,.45); justify-self:center; align-self:center; margin-top:48px;
  }

  /* integrations: tarjetas cuadradas en órbita alrededor del hub OSHotel, con diálogo animado */
  .int-orbit{position:relative; width:100%; max-width:520px; aspect-ratio:1/1; margin:0 auto; justify-self:center}
  .orbit-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
  .orbit-lines line{stroke:var(--line); stroke-width:1}
  .orbit-pulse{fill:var(--accent)}
  .orbit-chip{
    position:absolute; left:calc(var(--x) * 1%); top:calc(var(--y) * 1%);
    transform:translate(-50%,-50%);
    width:104px; height:104px; padding:10px 8px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    text-align:center; font-size:10.8px; line-height:1.3; font-weight:550; color:var(--text);
    border:1px solid var(--line); border-radius:12px; background:var(--surface);
    transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
  }
  .orbit-chip .oicon{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
  .orbit-chip.lit{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 3px var(--accent-soft)}
  .orbit-chip .spin{
    display:none; width:30px; height:30px; flex:none; border-radius:50%;
    border:3px solid var(--accent-soft); border-top-color:var(--accent);
    animation:orbitspin .7s linear infinite;
  }
  .orbit-chip.busy .oicon, .orbit-chip.busy .lbl{display:none}
  .orbit-chip.busy .spin{display:block}
  @keyframes orbitspin{to{transform:rotate(360deg)}}
  .orbit-hub{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    padding:18px 26px; font-size:15px; font-weight:700; letter-spacing:.02em;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .orbit-hub.lit{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 12px 34px -12px var(--accent)}
  @media (max-width:560px){
    .orbit-chip{width:78px; height:78px; font-size:9px; gap:5px; padding:6px 5px; border-radius:10px}
    .orbit-chip .oicon{width:14px; height:14px}
    .orbit-chip .spin{width:22px; height:22px}
    .orbit-hub{padding:13px 18px; font-size:13px}
  }

  /* platform */
  .plat{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
  .plat h3{font-size:15px; font-weight:650; margin:0}
  .plat .p-num + h3{margin-top:8px}
  .plat p{font-size:13.5px; color:var(--muted); margin:8px 0 0}
  .plat .p-num{font-size:26px; font-weight:650; color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1.2}

  /* CTA */
  .cta{text-align:left}
  .cta-box{
    border:1px solid var(--line); border-radius:10px; background:var(--surface);
    padding:44px 40px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  }
  .cta-box h2{font-size:clamp(22px,2.6vw,28px); font-weight:650; letter-spacing:-.018em}
  .cta-box p{color:var(--muted); margin:10px 0 0; max-width:48ch}

  footer{border-top:1px solid var(--line); padding:52px 0 36px; font-size:13.5px; color:var(--text)}
  .foot-brand{margin-bottom:36px}
  .foot-brand .brand{font-size:16px; color:var(--text)}
  .foot-claim{margin:12px 0 0; color:var(--text)}
  .foot-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; align-items:start}
  .foot-col{display:flex; flex-direction:column; gap:9px}
  .foot-col h4{
    margin:0 0 4px; font-size:11.5px; font-weight:650; letter-spacing:.12em;
    text-transform:uppercase; color:var(--text);
  }
  .foot-col a{text-decoration:none; color:var(--text)}
  .foot-col a:hover{color:var(--accent)}
  .foot-where p{margin:0; line-height:1.6}
  .foot-tagline{
    margin:44px 0 0; padding-top:24px; border-top:1px solid var(--line);
    text-align:center; color:var(--text); font-size:13px;
  }
  @media (max-width:880px){
    .foot-grid{grid-template-columns:1fr 1fr}
  }

  @media (max-width:880px){
    .hero-grid,.split{grid-template-columns:1fr}
    .modules{grid-template-columns:1fr 1fr}
    .plat{grid-template-columns:1fr}
    .kpis{grid-template-columns:repeat(2,1fr)}
    .hero{padding:56px 24px 48px}
  }
  @media (max-width:560px){
    .modules{grid-template-columns:1fr}
    .nav-links{display:none}
  }

  /* ---------- Páginas interiores (sobre, legal) ---------- */
  .page{max-width:680px; margin:0 auto; padding:76px 24px 88px}
  .page .eyebrow{margin-bottom:12px}
  .page h1{font-size:clamp(30px,4vw,42px); font-weight:650; letter-spacing:-.02em; line-height:1.12}
  .page .lead{font-size:18px; font-weight:650; letter-spacing:-.01em; margin:20px 0 0}
  .page p{margin:18px 0 0; font-size:16.5px; line-height:1.65; text-wrap:pretty}
  .page .trio{margin:26px 0 0; font-weight:650; line-height:1.7}
  .page .closing{font-size:clamp(19px,2.2vw,24px); font-weight:650; letter-spacing:-.015em; line-height:1.3; margin:34px 0 0}
  .contact-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
  .page h2{font-size:20px; font-weight:650; letter-spacing:-.012em; line-height:1.3; margin:40px 0 0}
  .page h2 + p{margin-top:12px}
  .page .datos{margin:18px 0 0; padding:20px 22px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
  .page .datos p{margin:6px 0 0; font-size:15.5px}
  .page .datos p:first-child{margin-top:0}
  .page .fecha{margin-top:40px; font-weight:650}
  .page ul{margin:14px 0 0; padding-left:24px}
  .page ul li{margin-top:7px; font-size:16px; line-height:1.6}
  .page code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em; background:var(--surface-2); border:1px solid var(--line); border-radius:4px; padding:1px 6px}