/* ------------------------------------------------------------------ base */
/* Palette values are written by js/theme.js so the 3D scene and the page
   always agree. These are the dark defaults, used before the script runs. */
:root{
  --bg:#080b14;
  --bg-panel:#0e1322;
  --bg-float:rgba(10,14,24,.93);
  --line:#1e2739;
  --ink:#e8ecf5;
  --ink-dim:#8b98b4;
  --ink-faint:#5a6782;
  --accent:#f2a03c;
  --accent-2:#4fb8e8;
  --shadow:0 8px 28px rgba(0,0,0,.55);
  --radius:7px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.5;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background .25s,color .25s;
}
button,select,input{font:inherit;color:inherit}
h1,h2{font-weight:600;letter-spacing:-.01em}

/* --------------------------------------------------------------- loading */
#loading{
  position:fixed;inset:0;display:grid;place-content:center;gap:1.25rem;
  justify-items:center;background:var(--bg);z-index:100;color:var(--ink-dim);
}
#loading.done{opacity:0;pointer-events:none;transition:opacity .5s}
.spinner{
  width:30px;height:30px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- layout */
#app{display:flex;height:100%;width:100%}
#stage{position:relative;flex:1;min-width:0}
#scene{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#scene:active{cursor:grabbing}

#panel{
  width:322px;flex:0 0 322px;height:100%;overflow-y:auto;
  background:var(--bg-panel);border-left:1px solid var(--line);
  padding:1.25rem;transition:margin-right .28s ease;
}
#app.collapsed #panel{margin-right:-322px}
#panel::-webkit-scrollbar{width:9px}
#panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

.block{padding-bottom:.9rem;margin-bottom:.9rem;border-bottom:1px solid var(--line)}
.block:last-child{border:0;margin-bottom:0}
.block h2{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-faint);margin-bottom:.65rem;
}
.note{font-size:12.5px;color:var(--ink-dim);margin-top:.5rem;line-height:1.45}

/* --------------------------------------------------------------- overlay */
#stage-top{position:absolute;top:22px;left:26px;pointer-events:none;max-width:52%}
#stage-top h1{font-size:23px;line-height:1.15}
#stage-top .sub{font-size:13px;color:var(--ink-dim);margin-top:2px}

#hint{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  font-size:11.5px;color:var(--ink-faint);pointer-events:none;
  white-space:nowrap;transition:opacity .2s;
}
/* Step aside while the readout is up rather than competing with it. */
#stage:has(#inspector:not([hidden])) #hint{opacity:0}

/* tool buttons, top right of the stage */
#stage-tools{position:absolute;top:20px;right:20px;display:flex;gap:7px;z-index:6}
#stage-tools button{
  width:34px;height:34px;display:grid;place-content:center;gap:4px;
  background:var(--bg-float);border:1px solid var(--line);
  border-radius:var(--radius);cursor:pointer;color:var(--ink-dim);
  backdrop-filter:blur(6px);transition:.15s;
}
#stage-tools button:hover{color:var(--ink);border-color:var(--ink-faint)}

/* Camera angles live with the camera now, not in the panel. They sit in the
   same cluster as the page tools but fenced off, because they are used far
   more often and mean something different. */
#stage-tools .views{display:flex;gap:5px}
#stage-tools .views button{width:30px;height:30px;align-self:center}
#stage-tools .views button span{display:none}   /* the glyph is the label */
#stage-tools .views button[aria-pressed=true]{
  background:var(--accent);border-color:var(--accent);color:var(--bg-panel);
}
.tools-rule{
  align-self:center;width:1px;height:20px;background:var(--line);margin:0 3px;
}
/* Seven buttons and a title do not both fit across a phone, so on narrow
   screens the cluster drops below the title and wraps to two rows. */
@media (max-width:820px){
  #stage-tools{
    top:96px;right:14px;
    flex-wrap:wrap;justify-content:flex-end;max-width:152px;
  }
  .tools-rule{display:none}
}
.viewglyph{width:18px;height:18px;display:block}
#panel-toggle span{display:block;width:15px;height:1.5px;background:currentColor}
#app:not(.collapsed) #panel-toggle{display:none}
[data-theme=light] #theme-toggle svg{transform:rotate(180deg)}

.menu-wrap{position:relative}
#snap-menu{
  position:absolute;top:40px;right:0;min-width:236px;padding:6px;
  background:var(--bg-float);border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--shadow);backdrop-filter:blur(10px);
}
.menu-head{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-faint);padding:6px 9px 7px;
}
#snap-menu button{
  width:100%;height:auto;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:.45rem .6rem;background:none;border:0;border-radius:5px;
  color:var(--ink);font-size:13.5px;cursor:pointer;text-align:left;
}
#snap-menu button:hover{background:var(--line)}
#snap-menu kbd{
  font-family:var(--font);font-size:11.5px;color:var(--ink-faint);
}

#toast{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  padding:.5rem .9rem;background:var(--bg-float);border:1px solid var(--line);
  border-radius:var(--radius);font-size:13px;box-shadow:var(--shadow);
  backdrop-filter:blur(8px);z-index:8;
}

/* 3D-projected axis labels */
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#labels div{
  position:absolute;font-size:11px;font-family:var(--mono);
  color:var(--ink-faint);white-space:nowrap;transform:translate(-50%,-50%);
  text-shadow:0 0 5px var(--bg),0 0 5px var(--bg),0 0 5px var(--bg);
}
#labels div.axis-title{
  font-family:var(--font);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;
}
#labels div.era{color:var(--ink-dim);font-family:var(--font);font-size:11px}
/* Sits at the end of the maturity crosshair line, so it takes the ink color
   rather than the dimmed one the axis furniture uses. */
#labels div.hist-label{
  color:var(--ink);font-family:var(--font);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;transform:translate(0,-50%);
}

/* Data freshness. The date is the last trading day in the file, not the time
   the file was written: a build timestamp would change on every run and defeat
   the pipeline's "commit only when the data changed" rule. */
.freshness{
  display:flex;gap:.5em;align-items:baseline;flex-wrap:wrap;
  /* Same hairline the .block rule uses between sections, so the freshness
     line reads as its own thing rather than as a footnote to Jump to. */
  border-top:1px solid var(--line);margin-top:.9rem;padding-top:.9rem;
}
.freshness button{
  background:none;border:0;padding:0;font:inherit;color:var(--accent,#c8963c);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.freshness button:hover{opacity:.8}
.freshness button[disabled]{cursor:default;opacity:.5;text-decoration:none}
#data-status a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------- inspector */
/* Legend keeps the bottom-left corner. The readout sits opposite it, because
   the bottom of the yield axis lands on the left and the panel was covering
   the 0-2% labels, which are the ones that matter during ZIRP. */
#corner{
  position:absolute;left:22px;bottom:22px;z-index:5;
  display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  max-height:calc(100% - 44px);
}
#inspector{
  position:absolute;right:22px;bottom:22px;z-index:5;
  width:262px;padding:.7rem .8rem;
  background:var(--bg-float);border:1px solid var(--line);border-radius:9px;
  box-shadow:var(--shadow);backdrop-filter:blur(10px);
  font-size:12px;pointer-events:none;
}

#legend-box{
  width:262px;background:var(--bg-float);border:1px solid var(--line);
  border-radius:9px;box-shadow:var(--shadow);backdrop-filter:blur(10px);
  overflow:hidden;
}
#legend-toggle{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  gap:.5rem;padding:.5rem .8rem;background:none;border:0;cursor:pointer;
  color:var(--ink-faint);font-size:11px;text-transform:uppercase;
  letter-spacing:.09em;
}
#legend-toggle:hover{color:var(--ink)}
#legend-toggle svg{transition:transform .18s;flex:0 0 auto}
#legend-box.closed #legend-toggle svg{transform:rotate(-90deg)}
#legend-box.closed #legend-body{display:none}
#legend-body{padding:0 .8rem .7rem}
#legend-recon{
  display:flex;align-items:center;gap:.4rem;
  margin-top:.5rem;font-size:10.5px;color:var(--ink-faint);
}
#legend-keys{list-style:none;margin:.5rem 0 0;padding:.5rem 0 0;border-top:1px solid var(--line)}
#legend-keys li{
  display:flex;align-items:center;gap:.45rem;
  font-size:10.5px;color:var(--ink-faint);padding:1px 0;
}
#legend-keys .k{width:16px;height:9px;border-radius:3px;flex:0 0 16px}
#legend-keys .k.line{height:2px;border-radius:2px}

#legend-recon .chip{
  width:16px;height:9px;border-radius:3px;flex:0 0 16px;
  background:linear-gradient(90deg,#7f8794,#9aa2ae);
}
.ins-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.5rem}
.ins-date{font-weight:600;font-size:13px}
.ins-pin{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}
.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px 12px}
.ins-cell{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.ins-m{color:var(--ink-faint);font-size:11px}
.ins-v{font-family:var(--mono);font-size:12px}
.ins-cell.filled .ins-v,.ins-cell.filled .ins-m{opacity:.45;font-style:italic}
.ins-note{font-size:10.5px;color:var(--ink-faint);margin-top:.45rem;line-height:1.35}
.ins-extra{
  display:grid;grid-template-columns:auto 1fr;gap:1px 10px;
  margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--line);
}
.ins-extra dt{color:var(--ink-faint);font-size:11px}
.ins-extra dd{font-family:var(--mono);font-size:11.5px;text-align:right}
.ins-event{
  margin-top:.55rem;padding-top:.5rem;border-top:1px solid var(--line);
}
.ins-event b{display:block;font-size:12px;color:var(--accent);margin-bottom:2px}
.ins-event span{color:var(--ink-dim);font-size:11px;line-height:1.4}
.ins-hint{margin-top:.5rem;font-size:10px;color:var(--ink-faint)}

/* -------------------------------------------------------------- controls */
.presets{display:flex;flex-wrap:wrap;gap:5px}
.presets button{
  padding:.32rem .58rem;font-size:12px;background:transparent;
  border:1px solid var(--line);border-radius:5px;color:var(--ink-dim);
  cursor:pointer;transition:.14s;
}
.presets button:hover{border-color:var(--ink-faint);color:var(--ink)}
.presets button[aria-pressed=true]{
  background:var(--accent);border-color:var(--accent);color:var(--bg-panel);font-weight:600;
}

.slider{position:relative;height:26px;margin:.55rem 0 .3rem}
.slider .track,.slider .fill{position:absolute;border-radius:4px}
.slider .track{left:0;right:0;top:11px;height:4px;background:var(--line)}
/* The fill is a control, not decoration: grabbing it slides the whole range.
   It is taller than the track so there is something to actually take hold of. */
.slider .fill{
  top:7px;height:12px;background:var(--accent);border:0;padding:0;
  cursor:grab;touch-action:none;min-width:6px;
}
.slider .fill:active{cursor:grabbing}
.slider .fill:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.slider .handle{
  position:absolute;top:2px;width:16px;height:22px;margin-left:-8px;
  background:var(--ink);border:0;border-radius:4px;cursor:ew-resize;
  box-shadow:0 1px 5px rgba(0,0,0,.45);touch-action:none;
}
.slider .handle:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.range-readout{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:12px;color:var(--ink-dim);
}
#range-span{font-family:var(--font);font-size:11px;color:var(--ink-faint)}

select{
  width:100%;padding:.42rem .55rem;background:var(--bg);
  border:1px solid var(--line);border-radius:5px;cursor:pointer;font-size:13px;
}
.check{display:flex;align-items:center;gap:.5rem;font-size:13px;
  color:var(--ink-dim);cursor:pointer;padding:.16rem 0}
.check input{accent-color:var(--accent);cursor:pointer}
.check.all{font-weight:600;color:var(--ink);margin-bottom:.35rem}
.tenors{
  display:grid;grid-template-columns:1fr 1fr;gap:0 .6rem;
  padding-left:.2rem;border-left:2px solid var(--line);
}
.tenors .check{font-size:12px;padding:.1rem 0}
.sw{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.sw-qe{background:linear-gradient(90deg,#3aa8e0,#e05a5a)}
.sw-rec{background:currentColor;opacity:.35}
.sw-ev{background:var(--accent)}
.sw-infl{background:#4bd0e0;opacity:.6}
.sw-ff{background:var(--accent)}


/* Three groups and a footer. The labels are the only new chrome, and they buy
   a panel you navigate by category rather than by scanning eleven equal rows. */
.group{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin:.8rem 0 .4rem;
}
.group:first-child{margin-top:0}
.panel-foot{
  border-top:2px solid var(--line);margin-top:.9rem;padding-top:.3rem;
}
.panel-foot .block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
/* The disclaimer stays open, so it gets quieter type rather than a drawer. */
.disclaimer p{font-size:11.5px;color:var(--ink-dim);line-height:1.5;margin:.45rem 0 0}

/* A heading with an affordance on the right. */
#panel .head{display:flex;align-items:center;gap:.5em}
#panel .head h2{margin:0}
.info{
  margin-left:auto;flex:0 0 auto;width:15px;height:15px;padding:0;
  font-family:var(--font);font-size:10px;font-style:italic;line-height:13px;
  background:transparent;border:1px solid var(--line);border-radius:50%;
  color:var(--ink-faint);cursor:pointer;
}
.info:hover{border-color:var(--ink-faint);color:var(--ink-dim)}
.info[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}

/* Collapsible sections. The summary keeps the heading and adds what is
   currently chosen, so a closed section still answers "where am I". */
#panel details > summary{
  display:flex;align-items:baseline;gap:.5em;cursor:pointer;list-style:none;
}
#panel details > summary::-webkit-details-marker{display:none}
#panel details > summary::before{
  content:"";flex:0 0 auto;width:0;height:0;
  border-left:5px solid var(--accent);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
  transform:translateY(-1px);transition:transform .15s ease;
}
#panel details[open] > summary::before{transform:translateY(-1px) rotate(90deg)}
#panel details > summary h2{margin:0}
#panel details > summary > span{
  font-size:11px;color:var(--ink-dim);margin-left:auto;text-align:right;
}
#panel details[open] > summary > span{opacity:.55}

/* ---------------------------------------------------------------- events */
#events-count{
  float:right;font-variant-numeric:tabular-nums;letter-spacing:0;
  color:var(--ink-faint);
}
/* Long ranges can carry twenty markers; keep the list from pushing the rest
   of the panel off the bottom. */
#events-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:196px;overflow-y:auto;
}
#events-list::-webkit-scrollbar{width:7px}
#events-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:7px}
#events-list button{
  display:block;width:100%;text-align:left;background:none;border:0;
  padding:.3rem .4rem;border-radius:5px;cursor:pointer;color:var(--ink-dim);
  font-size:12px;line-height:1.35;
}
#events-list button:hover{background:var(--line);color:var(--ink)}
#events-list b{display:block;font-weight:500;color:var(--ink)}
#events-list time{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint)}
#events-list .empty{font-size:12.5px;color:var(--ink-faint);padding:.2rem 0}

#legend-bar{height:9px;border-radius:5px}
#legend-ticks{
  display:flex;justify-content:space-between;margin-top:4px;
  font-family:var(--mono);font-size:11px;color:var(--ink-faint);
}

.credits p{font-size:12.5px;color:var(--ink-dim);margin-bottom:.6rem;line-height:1.5}
.credits strong{color:var(--ink)}
.credits .src{font-size:11.5px;color:var(--ink-faint)}
.disclaimer p{font-size:11.5px;color:var(--ink-faint);line-height:1.5;margin-bottom:.55rem}
.disclaimer strong{color:var(--ink-dim)}
.credits a{color:var(--ink-dim);text-decoration:underline;text-underline-offset:2px}
.credits a:hover{color:var(--accent)}

/* ------------------------------------------------------------------ embed */
/* ?embed=1 strips the page back to the chart so a publisher can put it in an
   iframe. The view still comes from the URL, so an embedder picks the period
   and the reader can rotate and read it, but not wander off the story. */
#embed-credit{display:none}
[data-embed] #panel,
[data-embed] #panel-toggle{display:none!important}
[data-embed] #app{display:block}
[data-embed] #stage{width:100%;height:100%}
[data-embed] #stage-top h1{font-size:17px}
[data-embed] #stage-top .sub{font-size:11.5px}
[data-embed] #hint{font-size:10.5px}
[data-embed] #embed-credit{
  position:absolute;right:16px;bottom:14px;display:flex;align-items:center;
  gap:4px;font-size:11px;color:var(--ink-faint);text-decoration:none;
  padding:.25rem .45rem;border-radius:5px;transition:.15s;z-index:6;
}
[data-embed] #embed-credit:hover{color:var(--ink);background:var(--line)}
/* Short frames cannot spare the room for the title and the hint. */
@media (max-height:420px){
  [data-embed] #stage-top .sub,[data-embed] #hint{display:none}
  [data-embed] #stage-top h1{font-size:15px}
}

/* ----------------------------------------------------------------- print */
#print-host{display:none}
@media print{
  body{overflow:visible;background:#fff}
  #app,#loading,#toast{display:none!important}
  #print-host{display:block}
  #print-host img{width:100%;height:auto}
  @page{margin:12mm;size:landscape}
}

/* --------------------------------------------------------------- mobile */
@media (max-width:820px){
  #app{flex-direction:column}
  #stage{flex:1 1 52%;min-height:0}
  #panel{
    width:100%;flex:1 1 48%;border-left:0;border-top:1px solid var(--line);
    padding:1rem;
  }
  #app.collapsed #panel{margin-right:0;display:none}
  #stage-top h1{font-size:18px}
  #stage-top .sub{font-size:12px}
  #hint{display:none}
  #corner{left:10px;bottom:10px;gap:6px}
  #legend-box{width:210px;font-size:11px}
  .tenors{grid-template-columns:1fr 1fr 1fr}

  /* On a phone the readout is the widest thing on screen, so lay it along the
     bottom rather than stacking it into a tall column that buries the chart. */
  #inspector{
    left:10px;right:10px;bottom:10px;width:auto;
    font-size:11px;padding:.55rem .65rem;
    max-height:54%;overflow-y:auto;
  }
  /* Both want the bottom of a small screen. The readout is the thing you
     asked for by tapping, so it wins while it is up. */
  #stage:has(#inspector:not([hidden])) #corner{opacity:0;pointer-events:none}
  .ins-grid{grid-template-columns:repeat(3,1fr);gap:1px 10px}
  .ins-m{font-size:10px}
  .ins-v{font-size:11px}
  .ins-extra{grid-template-columns:auto 1fr;gap:0 8px}
  .ins-extra dt,.ins-extra dd{font-size:10.5px}
  .ins-note,.ins-hint{display:none}
  .ins-event span{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------------- tour */
/* No dimmed backdrop: the chart is the lesson, so it has to stay visible. */
#tour{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:min(430px,calc(100% - 32px));padding:.85rem 1rem .75rem;
  background:var(--bg-float);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow);backdrop-filter:blur(12px);z-index:12;
}
.tour-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tour-head b{font-size:14px;letter-spacing:-.01em}
.tour-head button{
  background:none;border:0;color:var(--ink-faint);font-size:20px;line-height:1;
  cursor:pointer;padding:0 .15rem;
}
.tour-head button:hover{color:var(--ink)}
#tour p{font-size:13px;color:var(--ink-dim);margin:.4rem 0 .7rem;line-height:1.5}
.tour-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.tour-dots{display:flex;gap:5px}
.tour-dots span{
  width:5px;height:5px;border-radius:50%;background:var(--line);transition:.2s;
}
.tour-dots span.on{background:var(--accent);transform:scale(1.3)}
.tour-btns{display:flex;gap:6px}
.tour-btns button{
  padding:.34rem .8rem;font-size:12.5px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink-dim);
}
.tour-btns .ghost:hover{color:var(--ink);border-color:var(--ink-faint)}
.tour-btns .go{
  background:var(--accent);border-color:var(--accent);
  color:var(--bg-panel);font-weight:600;
}
/* Ring the control a step is talking about. */
.tour-spot{
  outline:2px solid var(--accent);outline-offset:6px;border-radius:6px;
  animation:tourPulse 1.6s ease-in-out infinite;
}
@keyframes tourPulse{50%{outline-color:transparent}}

/* On anything but a wide screen the tour card and the corner panels compete
   for the same strip along the bottom. The card wins while it is up. */
@media (max-width:1180px){
  #stage:has(#tour) #corner,
  #stage:has(#tour) #inspector{opacity:0;pointer-events:none}
}
@media (max-width:820px){
  #tour{bottom:10px;width:calc(100% - 20px);padding:.7rem .8rem .65rem}
  #tour p{font-size:12.5px}
}


/* ------------------------------------------------------- play and jump */
#play-row{display:flex;gap:8px;align-items:center;margin:.55rem 0 .2rem}

/* Icon only, and square, so it reads as a transport control rather than as a
   fourth word in the row. */
#play-toggle{
  flex:0 0 auto;width:30px;height:30px;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:5px;
  color:var(--ink-dim);cursor:pointer;
}
#play-toggle:hover{border-color:var(--ink-faint);color:var(--ink)}
#play-toggle[aria-pressed=true]{
  background:var(--accent);border-color:var(--accent);color:var(--bg-panel);
}
#play-toggle svg{display:block}

/* One control with hairline dividers rather than three pills with gaps: the
   three speeds are a single choice, and spacing them apart said otherwise. */
.speeds{
  flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;
}
.speeds button{
  padding:0;min-height:30px;font-size:12px;font-variant-numeric:tabular-nums;
  background:transparent;border:0;border-left:1px solid var(--line);
  color:var(--ink-dim);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.speeds button:first-child{border-left:0}
/* Sized down from 21px to sit on the same optical line as the 12px numeral
   beside them. Stroke, not fill, so currentColor still does the tinting. */
.speeds svg{width:17px;height:17px;display:block;
  fill:none;stroke:currentColor;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.speeds button:hover{color:var(--ink)}
.speeds button[aria-pressed=true]{
  background:var(--accent);color:var(--bg-panel);font-weight:600;
}
#jump-date{
  margin-left:auto;flex:0 0 auto;width:9.2em;font-size:11px;
  font-family:var(--mono);padding:.25rem .35rem;
  background:var(--bg-float);color:var(--ink-dim);
  border:1px solid var(--line);border-radius:5px;
  color-scheme:light dark;                 /* darkens the native picker too */
}
#jump-date:hover,#jump-date:focus{border-color:var(--ink-faint);color:var(--ink)}
#jump-date::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.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;
}
/* The panel is gone in an embed, so these go with it. */
[data-embed] #play-row{display:none}

/* --------------------------------------------------- the day, in 2D */
.ins-slice{
  display:block;width:100%;height:auto;margin:0 0 .5rem;overflow:visible;
}
.ins-slice .curve{fill:none;stroke:var(--accent);stroke-width:1.4;
  stroke-linejoin:round;stroke-linecap:round}
.ins-slice circle{fill:var(--accent)}
.ins-slice circle.filled{opacity:.4}
.ins-slice .zero{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:2 3}
.ins-slice .tick{fill:var(--ink-faint);font-size:9px;letter-spacing:.02em}
/* On a phone the inspector is a sheet over the chart; the slice shrinks so the
   numbers stay on screen rather than being pushed below the fold. */
@media (max-width:760px){
  .ins-slice{max-height:52px}
}