/* Alpine: snow ground, evergreen needle, lichen. Evergreen and lichen are the
   brand palette (the favicon is the earth-ground mark on evergreen). Pure white
   because a tinted ground mutes a saturated accent. Archivo only; there is no serif because the wordmark has none.
   One rule for the whole page: information sits on the surface. No cards. */
:root{
  --sans:'Archivo',system-ui,sans-serif;
  --mono-abundant:ui-monospace,'SFMono-Regular',Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
  --fs-micro:12px;
  --fs-xs:13px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-base:15px;
  --fs-trace:16px;
  --fs-trace-code:14px;
  --fs-lg:20px;
  --fs-xl:30px;
  --fs-2xl:44px;
  --fs-3xl:68px;
  --radius-sm:3px;
  --radius-lg:3px;
  --bg:#ffffff;
  --paper:#ffffff;
  --wash-2:#eef0ee;
  --wash-3:#e4e7e4;
  --rule:#e4e7e4;
  --ink:#1b1e1c;
  --muted:#6e746f;
  --green:#193f35;
  --lime:#d6f08b;
  --focus:#193f35;
  --panel:#1b1e1c;
  --panel-muted:#e4e7e4;
  --alert-rule:#193f35;
  --alert-ink:#1b1e1c;
}
*{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:var(--fs-base)/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
}
a{
  color:inherit;
  text-decoration:none;
}
a:hover{
  color:var(--green);
}
button,
input{
  font:inherit;
  color:inherit;
}
button{
  cursor:pointer;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
}
.skip{
  position:absolute;
  left:-9999px;
}
.skip:focus{
  left:16px;
  top:16px;
  background:var(--paper);
  z-index:5;
  padding:10px;
}
.hidden{
  display:none!important;
}

/* ——— the wordmark, one component, sized by context ——————————————— */
.brand{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
  color:var(--ink);
}
.brand>span:not(.brand-icon):not(.brand-dot){
  font-weight:400;
}
.brand-icon{
  font-size:1.36em;
  margin-right:.4em;
  line-height:1;
}
.brand-dot{
  width:.27em;
  height:.27em;
  background:var(--green);
  border-radius:50%;
  margin-left:.23em;
  align-self:flex-end;
  margin-bottom:.2em;
}
.wordmark-xl{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1;
  margin:0;
  color:var(--ink);
  font-size:var(--fs-3xl);
}
.wordmark-xl>span:not(.brand-icon):not(.brand-dot){
  font-weight:400;
}

/* ——— header ————————————————————————————————————————————————— */
.topbar{
  max-width:1184px;
  margin:auto;
  padding:0 32px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--rule);
}
.brand-stack{
  display:flex;
  align-items:center;
}
.topbar .brand{
  font-size:var(--fs-xl);
}
nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px 24px;
  font-size:var(--fs-sm);
  font-weight:500;
}
nav a{
  color:var(--muted);
}
nav a:hover{
  color:var(--ink);
}
main{
  max-width:1184px;
  padding:0 32px;
  margin:auto;
  min-height:75vh;
}

/* ——— masthead ——————————————————————————————————————————————— */
.masthead{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:56px 0 0;
}
.byline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:var(--fs-sm);
  color:var(--muted);
  margin:18px 0 0;
}
.byline img{
  display:block;
  width:22px;
  height:22px;
}
.byline a{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.byline span{
  font-family:var(--mono-abundant);
  font-size:var(--fs-micro);
  letter-spacing:.04em;
  color:var(--muted);
}
.byline a:hover span{
  color:var(--ink);
}
.standfirst{
  font-size:var(--fs-lg);
  line-height:1.45;
  color:var(--muted);
  margin:20px 0 0;
  max-width:56ch;
}
.facts{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px 64px;
  margin:36px 0 0;
  padding:0;
}
.facts>div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.facts dd{
  margin:0;
  font-size:var(--fs-xl);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  display:flex;
  align-items:baseline;
  gap:3px;
  font-variant-numeric:tabular-nums;
}
.facts dd i{
  font-style:normal;
  font-size:var(--fs-md);
  font-weight:400;
  color:var(--muted);
}
.facts dt{
  font-size:var(--fs-sm);
  color:var(--muted);
}
.masthead-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:32px 0 0;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--ink);
  border-radius:var(--radius-sm);
  padding:11px 18px;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--ink);
  background:var(--paper);
}
.btn:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.btn-primary{
  background:var(--green);
  border-color:var(--green);
  color:var(--paper);
}

/* ——— sections ——————————————————————————————————————————————— */
.section{
  padding:88px 0 0;
  scroll-margin-top:24px;
}
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s cubic-bezier(.2,0,0,1),transform .7s cubic-bezier(.2,0,0,1);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
.reveal .bar,
.reveal .task-track i{
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s cubic-bezier(.2,0,0,1) .2s;
}
.reveal.is-in .bar,
.reveal.is-in .task-track i{
  transform:none;
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:32px;
}
.section-title{
  display:flex;
  align-items:baseline;
  gap:16px;
}
.section h2{
  font-size:var(--fs-xl);
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:0;
}
.section-sub{
  font-size:var(--fs-md);
  color:var(--muted);
  margin:12px 0 0;
  max-width:62ch;
}
.snapshot{
  font-size:var(--fs-sm);
  color:var(--muted);
}
.eyebrow{
  font-size:var(--fs-sm);
  color:var(--muted);
}

/* ——— controls: text, not boxes ————————————————————————————————— */
.segmented{
  display:inline-flex;
  gap:20px;
  flex-shrink:0;
}
.segmented button{
  border:0;
  background:none;
  padding:6px 0;
  font-size:var(--fs-sm);
  font-weight:500;
  color:var(--muted);
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.segmented button:hover{
  color:var(--ink);
}
.segmented button.active{
  color:var(--ink);
  border-bottom-color:var(--green);
}
.segmented[hidden],
.chart-controls[hidden]{
  display:none;
}
.lb-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:16px 40px;
  margin-bottom:28px;
}
#lb-search{
  flex:1;
  min-width:220px;
  border:0;
  border-bottom:1px solid var(--rule);
  background:transparent;
  padding:8px 0;
  font-size:var(--fs-md);
  border-radius:0;
}
#lb-search:focus{
  outline:0;
  border-bottom-color:var(--ink);
}
#lb-search::placeholder{
  color:var(--muted);
}
.chart-controls{
  display:flex;
  gap:10px;
  align-items:center;
}
.dropdown{
  position:relative;
}
.dropdown-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  border-bottom:1px solid var(--rule);
  background:transparent;
  padding:6px 0;
  font-size:var(--fs-sm);
  font-weight:500;
  white-space:nowrap;
}
.dropdown-btn svg{
  color:var(--muted);
  transition:transform .15s;
}
.dropdown-btn[aria-expanded="true"] svg{
  transform:rotate(180deg);
}
.dropdown-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:10;
  min-width:100%;
  margin:0;
  padding:4px 0;
  list-style:none;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius-sm);
}
.dropdown-menu li{
  padding:7px 14px;
  font-size:var(--fs-sm);
  white-space:nowrap;
  cursor:pointer;
  color:var(--muted);
}
.dropdown-menu li:hover,
.dropdown-menu li:focus-visible{
  color:var(--ink);
  background:var(--wash-2);
  outline:0;
}
.dropdown-menu li[aria-selected="true"]{
  color:var(--ink);
  box-shadow:inset 2px 0 var(--green);
}
.mini-label{
  font-size:var(--fs-sm);
  color:var(--muted);
}

/* ——— leaderboard: rows on the page ——————————————————————————— */
.leaderboard{
  display:flex;
  flex-direction:column;
}
.lb-header,
.lb-row{
  display:grid;
  grid-template-columns:32px minmax(150px,1.1fr) 72px minmax(160px,2fr) 100px 84px;
  gap:20px;
  align-items:center;
}
.lb-header{
  padding:0 0 12px;
  border-bottom:1px solid var(--ink);
  font-size:var(--fs-xs);
  font-weight:500;
  color:var(--muted);
}
.lb-header .r{
  text-align:right;
}
.lb-sort{
  border:0;
  background:none;
  padding:0;
  font:inherit;
  color:inherit;
  display:inline-flex;
  align-items:center;
  gap:4px;
  text-align:left;
}
.lb-sort.r{
  justify-content:flex-end;
}
.lb-sort:hover,
.lb-sort.on{
  color:var(--ink);
}
.lb-sort span{
  opacity:.45;
}
.lb-sort.on span{
  opacity:1;
}
.lb-row{
  padding:18px 0;
  border-bottom:1px solid var(--rule);
}
.lb-empty{
  padding:40px 0;
  font-size:var(--fs-md);
  color:var(--muted);
}
.rank{
  font-size:var(--fs-sm);
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.first .rank,
.first .score{
  color:var(--green);
}
.model-name{
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:-.01em;
}
.model-provider{
  font-size:var(--fs-xs);
  color:var(--muted);
  margin-top:2px;
}
.effort-pill{
  font-size:var(--fs-xs);
  color:var(--muted);
}
.bar-plot{
  position:relative;
  height:8px;
  background:var(--wash-3);
  border-radius:var(--radius-lg);
}
.bar{
  position:absolute;
  left:0;
  top:0;
  height:8px;
  border-radius:var(--radius-lg);
}
.whisker{
  position:absolute;
  top:3.5px;
  height:1px;
  background:var(--ink);
}
.whisker:before,
.whisker:after{
  content:'';
  position:absolute;
  width:1px;
  height:7px;
  top:-3px;
  background:var(--ink);
}
.whisker:before{
  left:0;
}
.whisker:after{
  right:0;
}
.score-point{
  position:absolute;
  top:50%;
  width:11px;
  height:11px;
  border:2px solid var(--ink);
  border-radius:50%;
  background:var(--paper);
  transform:translate(-50%,-50%);
}
.numeric{
  text-align:right;
  font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.score{
  font-size:var(--fs-lg);
  font-weight:700;
  letter-spacing:-.02em;
}
.numeric .pm{
  color:var(--muted);
  margin-left:5px;
  font-size:var(--fs-xs);
}
#ranking-expand:not(:empty){
  margin-top:20px;
}
.chart-note{
  font-size:var(--fs-sm);
  line-height:1.55;
  color:var(--muted);
  margin:20px 0 0;
  max-width:78ch;
}
.chart-note a,
.method-grid a{
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ——— charts ————————————————————————————————————————————————— */
.chart-card{
  min-width:0;
}
.analysis-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:16px;
  margin-bottom:32px;
  border-bottom:1px solid var(--rule);
}
.card-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}
.card-heading h3{
  font-size:var(--fs-md);
  font-weight:600;
  margin:0;
}
.card-heading p{
  font-size:var(--fs-sm);
  color:var(--muted);
  margin:4px 0 0;
}
.chart-svg{
  width:100%;
  height:auto;
  overflow:visible;
  display:block;
}
.chart-svg text{
  font-family:var(--sans);
  font-size:var(--fs-micro);
  fill:var(--muted);
}
.chart-svg .tick{
  fill:var(--muted);
}
.chart-svg .pt-label{
  fill:var(--ink);
  font-size:var(--fs-micro);
  font-weight:500;
}
.chart-svg .gridline{
  stroke:var(--rule);
  stroke-width:1;
}
.resource-explorer{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:48px;
  margin-top:24px;
}
.resource-canvas{
  min-width:0;
}
#resource-plot{
  margin-top:24px;
}
.resource-selector h3{
  margin:0 0 12px;
  font-size:var(--fs-sm);
  color:var(--muted);
}
#resource-models{
  display:flex;
  flex-direction:column;
}
#resource-models button{
  background:transparent;
  border:0;
  border-bottom:1px solid var(--rule);
  padding:12px 0;
  text-align:left;
  font-size:var(--fs-md);
  color:var(--muted);
  cursor:pointer;
}
#resource-models button:hover,
#resource-models button.active{
  color:var(--green);
  border-bottom-color:var(--green);
}
#resource-models button.active{
  font-weight:700;
}
.panel{
  margin:0;
  min-width:0;
}
.panel figcaption{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-lg);
  font-weight:600;
  margin-bottom:8px;
}
.model-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.plot-point{
  fill:var(--paper);
  stroke:var(--muted);
  stroke-width:1.6;
  opacity:.5;
  cursor:pointer;
  transition:r .15s,opacity .2s;
}
.plot-point:hover,
.plot-point:focus{
  r:7;
  outline:none;
  opacity:1;
}
.plot-point.on-frontier{
  fill:var(--lime);
  stroke:var(--green);
  stroke-width:2;
  opacity:1;
}
.timeline-line{
  fill:none;
  stroke:var(--green);
  stroke-width:1.5;
  opacity:.5;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1),opacity .3s;
}
.is-in .timeline-line{
  stroke-dashoffset:0;
}
.tl-stem{
  stroke:var(--green);
  stroke-width:1;
  stroke-dasharray:2 3;
  opacity:.5;
  transition:opacity .3s;
}
.tl-point{
  fill:var(--green);
  stroke:var(--paper);
  stroke-width:2;
  opacity:1;
}
#timeline-chart .plot-point,
#timeline-chart .pt-label{
  transition:opacity .5s,r .15s;
}
#timeline-chart:not(.is-in) .plot-point,
#timeline-chart:not(.is-in) .pt-label{
  opacity:0;
}
#timeline-chart .dim{
  opacity:.12;
}
#timeline-chart .pt-label.dim{
  opacity:0;
}
.frontier-line{
  fill:none;
  stroke:var(--green);
  stroke-width:1.5;
  stroke-dasharray:5 4;
}
.chart-foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--rule);
}
.frontier-kpi{
  font-size:var(--fs-sm);
  color:var(--ink);
}
#tooltip{
  position:fixed;
  z-index:20;
  background:var(--panel);
  color:var(--paper);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:var(--fs-xs);
  pointer-events:none;
  max-width:285px;
}
#tooltip strong{
  display:block;
  margin-bottom:6px;
}
#tooltip span{
  color:var(--panel-muted);
  display:block;
  line-height:1.7;
}

/* ——— tasks ————————————————————————————————————————————————— */
.tasks-intro{
  display:none;
}
.task-table{
  width:100%;
  border-collapse:collapse;
}
.task-table th{
  font-size:var(--fs-xs);
  font-weight:500;
  color:var(--muted);
  text-align:left;
  padding:0 16px 12px 0;
  border-bottom:1px solid var(--ink);
}
.task-table td{
  padding:18px 16px 18px 0;
  border-bottom:1px solid var(--rule);
  font-size:var(--fs-sm);
}
.task-table td:first-child,
.task-table th:first-child{
  width:40px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.task-name{
  font-size:var(--fs-md);
  font-weight:600;
  letter-spacing:-.01em;
}
.task-table tr:hover .task-name{
  color:var(--green);
}
.task-system{
  color:var(--muted);
}
.task-score{
  display:flex;
  gap:12px;
  align-items:center;
  font-variant-numeric:tabular-nums;
}
.task-track{
  width:96px;
  height:6px;
  background:var(--wash-3);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.task-track i{
  display:block;
  height:100%;
  background:var(--green);
}

/* ——— methodology ————————————————————————————————————————————— */
.method-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px 64px;
}
.method-grid h3{
  font-size:var(--fs-md);
  font-weight:600;
  margin:0 0 8px;
}
.method-grid p{
  font-size:var(--fs-md);
  color:var(--muted);
  margin:0;
  line-height:1.6;
}
.method-full{
  grid-column:1/-1;
}
.pricing-wrap{
  margin-top:12px;
}
.pricing-table{
  border-collapse:collapse;
  width:100%;
  font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums;
}
.pricing-table td,
.pricing-table th{
  padding:10px 8px;
  border-bottom:1px solid var(--rule);
  text-align:right;
}
.pricing-table td:first-child,
.pricing-table th:first-child{
  text-align:left;
  padding-left:0;
}
.pricing-table th{
  font-weight:500;
  color:var(--muted);
}
.audit-strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px 32px;
  margin-top:48px;
  padding-top:20px;
  border-top:1px solid var(--rule);
  font-size:var(--fs-sm);
  color:var(--muted);
}
.audit-strip b{
  color:var(--ink);
  font-weight:600;
}
.audit-strip a{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ——— footer ————————————————————————————————————————————————— */
footer{
  max-width:1184px;
  margin:112px auto 0;
  padding:40px 32px 64px;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px 48px;
  font-size:var(--fs-sm);
  color:var(--muted);
}
footer .brand{
  font-size:var(--fs-lg);
}
.footer-note{
  margin-top:10px;
}
.footer-note a{
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-links{
  display:flex;
  gap:24px;
}
.footer-links a{
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer-notice{
  flex-basis:100%;
  margin:0;
  font-size:var(--fs-xs);
}
.fatal{
  margin:40px 0;
  padding:24px 0;
  border-top:2px solid var(--alert-rule);
  color:var(--alert-ink);
}

/* ——— task detail ———————————————————————————————————————————— */
.detail-top{
  padding:64px 0 24px;
}
.back-link{
  font-size:var(--fs-sm);
  color:var(--muted);
}
.detail-eyebrow{
  margin-top:40px;
}
.detail-top h1{
  font-size:var(--fs-2xl);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.05;
  margin:12px 0 16px;
}
.detail-meta{
  display:flex;
  gap:20px;
  font-size:var(--fs-sm);
  color:var(--muted);
  align-items:center;
  flex-wrap:wrap;
}
.instruction-card{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--rule);
  margin:24px 0 64px;
}
.filebar{
  padding:12px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:var(--fs-xs);
  color:var(--muted);
  border-bottom:1px solid var(--rule);
}
.instruction{
  padding:28px 0;
  font-size:var(--fs-md);
  line-height:1.8;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:80ch;
}
.instruction code{
  font-size:var(--fs-sm);
  background:var(--wash-2);
  padding:2px 5px;
  border-radius:var(--radius-sm);
}
.detail-h2{
  font-size:var(--fs-xl);
  font-weight:700;
  letter-spacing:-.02em;
  margin:0;
}
.qa-badge{
  font-size:var(--fs-xs);
  color:var(--green);
  font-weight:500;
  white-space:nowrap;
}
.qa-badge.pending{
  color:var(--muted);
}
.qa-panel{
  border-left:2px solid var(--green);
  padding:4px 0 4px 24px;
  margin:24px 0 40px;
}
.qa-panel h3{
  font-size:var(--fs-md);
  font-weight:600;
  margin:0 0 8px;
}
.qa-panel p{
  font-size:var(--fs-md);
  line-height:1.7;
  margin:0;
  color:var(--muted);
}
.qa-panel details{
  font-size:var(--fs-sm);
  margin-top:16px;
}
.qa-panel .evidence{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:14px;
}
.trace-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:24px 0 8px;
}
.text-button{
  background:none;
  border:0;
  padding:0;
  font-size:var(--fs-sm);
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:3px;
}
.text-button+.text-button,
.text-button+a{
  margin-left:16px;
}
.quiet{
  color:var(--muted);
}
/* Conversation trace: agent narration followed by each call and its result. */
.trajectory{
  max-width:1000px;
  margin:28px auto 0;
}
.trace-turn{
  position:relative;
  border-left:2px solid var(--rule);
  padding:0 0 36px 26px;
  margin-left:8px;
}
.trace-turn:last-child{
  padding-bottom:8px;
}
.trace-turn-heading,
.trace-context>summary{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.trace-turn-heading:before{
  content:'';
  position:absolute;
  left:-6px;
  top:7px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--green);
}
.trace-role{
  color:var(--green);
  font-size:var(--fs-trace);
  font-weight:600;
}
.trace-step-number,
.trace-size,
.trace-kind{
  color:var(--muted);
  font-size:var(--fs-trace-code);
  font-weight:400;
}
.trace-step-number{
  margin-left:auto;
  font-variant-numeric:tabular-nums;
}
.trace-message{
  margin-bottom:18px;
}
.trace-prose{
  font-size:var(--fs-trace);
  line-height:1.75;
  overflow-wrap:anywhere;
  max-width:80ch;
}
.trace-prose p{
  margin:0 0 14px;
}
.trace-prose p:last-child{
  margin-bottom:0;
}
.trace-prose ul{
  margin:0 0 14px;
  padding-left:24px;
}
.trace-prose code{
  font-size:var(--fs-trace-code);
  background:var(--wash-2);
  padding:2px 4px;
}
.trace-tool{
  margin:14px 0;
  border:1px solid var(--rule);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.trace-tool-heading{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--wash-2);
  padding:11px 16px;
}
.trace-tool-heading h4{
  font-size:var(--fs-trace-code);
  font-weight:600;
  margin:0;
  overflow-wrap:anywhere;
  min-width:0;
}
.trace-tool-icon{
  font-family:var(--mono-abundant);
  color:var(--green);
  font-weight:600;
}
.trace-kind{
  margin-left:auto;
  white-space:nowrap;
}
.trace-input{
  padding:16px;
}
.trace-description{
  color:var(--muted);
  font-size:var(--fs-trace-code);
  margin:0 0 12px;
}
.trace-code,
.trace-preview{
  font:var(--fs-trace-code)/1.65 var(--mono-abundant);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0;
}
.trace-code{
  max-height:480px;
  overflow:auto;
  tab-size:2;
}
.trace-fold>summary{
  display:grid;
  grid-template-columns:1fr auto 16px;
  gap:6px 12px;
  cursor:pointer;
  list-style:none;
  align-items:center;
}
.trace-fold>summary::-webkit-details-marker,
.trace-context>summary::-webkit-details-marker{
  display:none;
}
.trace-fold>summary:after,
.trace-context>summary:after{
  content:'+';
  color:var(--green);
  font-size:var(--fs-lg);
  grid-column:3;
  grid-row:1;
}
.trace-fold[open]>summary:after,
.trace-context[open]>summary:after{
  content:'−';
}
.trace-fold-label{
  font-size:var(--fs-trace-code);
  font-weight:500;
}
.trace-preview{
  grid-column:1 / -1;
  color:var(--muted);
  margin-top:4px;
}
.trace-fold[open]>summary .trace-preview{
  display:none;
}
.trace-fold[open]>summary{
  margin-bottom:14px;
}
.trace-output{
  border-top:1px solid var(--rule);
  padding:14px 16px;
  background:var(--wash-2);
}
.trace-output>summary .trace-fold-label{
  color:var(--green);
}
.trace-input>.trace-fold+.trace-fold{
  margin-top:16px;
}
.trace-no-output{
  margin:0;
  padding:10px 16px;
  color:var(--muted);
  font-size:var(--fs-trace-code);
}
.trace-context{
  margin:0 0 24px 8px;
  padding:16px 0;
  border-bottom:1px solid var(--rule);
}
.trace-context>summary{
  list-style:none;
  cursor:pointer;
  margin:0;
}
.trace-context .trace-role{
  color:var(--muted);
}
.trace-context-body{
  padding-top:18px;
}
.trace-context .trace-prose{
  max-height:480px;
  overflow:auto;
}
.trace-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
}
.trace-actions .text-button{
  margin-left:0;
  font-size:var(--fs-trace-code);
}
@media(max-width:640px){
  .trace-toolbar{
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }
  .trace-turn{
    padding-left:16px;
    margin-left:4px;
  }
  .trace-tool-heading,
  .trace-input,
  .trace-output{
    padding:12px;
  }
  .trace-kind{
    display:none;
  }
}
.task-pagination{
  display:flex;
  justify-content:space-between;
  margin:48px 0 16px;
  font-size:var(--fs-sm);
}

/* ——— responsive ————————————————————————————————————————————— */
@media(max-width:1000px){
  .lb-header,
  .lb-row{
    grid-template-columns:28px minmax(130px,1fr) 64px minmax(120px,1.6fr) 92px 76px;
    gap:14px;
  }
}
@media(max-width:760px){
  .topbar{
    height:auto;
    min-height:64px;
    padding:14px 20px;
    flex-wrap:wrap;
    gap:12px;
  }
  .topbar .brand{
    font-size:var(--fs-lg);
  }
  nav{
    order:3;
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:12px;
  }
  main{
    padding:0 20px;
  }
  .masthead{
    padding:56px 0 0;
  }
  .wordmark-xl{
    font-size:var(--fs-2xl);
  }
  .standfirst{
    font-size:var(--fs-md);
  }
  .facts{
    gap:24px 40px;
    margin-top:40px;
  }
  .facts dd{
    font-size:var(--fs-xl);
  }
  .section{
    padding:72px 0 0;
  }
  .section-heading{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .lb-header,
  .lb-row{
    grid-template-columns:22px minmax(0,1fr) 52px 88px;
    gap:10px;
  }
  .lb-header>*:nth-child(4),
  .lb-row>*:nth-child(4),
  .lb-header>*:last-child,
  .lb-row>*:last-child{
    display:none;
  }
  .resource-explorer{
    grid-template-columns:1fr;
    gap:28px;
  }
  .resource-selector{
    order:-1;
  }
  #resource-models{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:20px;
  }
  #resource-models button{
    font-size:var(--fs-sm);
  }
  .method-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .method-full{
    grid-column:auto;
  }
  .pricing-wrap{
    overflow-x:auto;
  }
  .pricing-table{
    min-width:460px;
  }
  footer{
    margin-top:72px;
    padding:32px 20px 48px;
  }
  .detail-top h1{
    font-size:var(--fs-xl);
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }
  *{
    transition:none!important;
  }
  .reveal,
  .reveal .bar,
  .reveal .task-track i,
  #timeline-chart:not(.is-in) .plot-point,
  #timeline-chart:not(.is-in) .pt-label{
    opacity:1;
    transform:none;
  }
  .timeline-line{
    stroke-dasharray:none;
  }
}