:root{--font-fell:'IM Fell English';--font-instrument:'Instrument Sans';--font-caveat:'Caveat'}
/* The site's own layout. Every colour, radius, duration and curve comes from
   the tokens, so picking a theme repaints the whole site with nothing here
   to override. */

body{
  margin:0;
  background:var(--ds-color-bg);
  color:var(--ds-color-text);
  font-family:var(--ds-font-sans);
  font-size:var(--ds-type-body-size);
  line-height:var(--ds-type-body-leading);
  font-variant-numeric:tabular-nums;
  transition:background-color var(--ds-duration-base) var(--ds-ease-out),color var(--ds-duration-base) var(--ds-ease-out);
}

a{color:inherit}
code{font-family:inherit;font-size:.92em;color:var(--ds-color-text-dim);overflow-wrap:anywhere}
p{margin:0}

.skip{
  position:absolute;left:var(--ds-space-md);top:-100px;z-index:var(--ds-z-toast);
  padding:var(--ds-space-xs) var(--ds-space-sm);
  background:var(--ds-color-accent);color:var(--ds-color-accent-contrast);
  border-radius:var(--ds-radius-sm);
}
.skip:focus{top:var(--ds-space-xs)}

/* Top bar ------------------------------------------------------------- */
.bar{
  position:sticky;top:0;z-index:var(--ds-z-nav);
  display:flex;align-items:center;gap:var(--ds-space-sm);
  padding:var(--ds-space-sm) var(--ds-gutter);
  background:color-mix(in srgb,var(--ds-color-bg) 90%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:var(--ds-border-hairline) solid var(--ds-color-border-subtle);
}
.wordmark{
  font-family:var(--ds-font-display);
  font-size:var(--ds-type-h3-size);
  font-weight:var(--ds-weight-bold);
  letter-spacing:var(--ds-tracking-tight);
  line-height:1;
  text-decoration:none;
}
.version{font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted)}
.bar-end{margin-left:auto;display:flex;align-items:center;gap:var(--ds-space-xs);min-width:0}

.theme-pick{display:flex;align-items:center;gap:var(--ds-space-xs);min-width:0}
.theme-pick select{max-width:100%;min-width:0}
.theme-pick-label{font-size:var(--ds-type-label-size);font-weight:var(--ds-type-label-weight);color:var(--ds-color-text-muted)}
.theme-pick select,
.menu-btn,
.demo-btn{
  font:inherit;
  font-size:var(--ds-type-label-size);
  font-weight:var(--ds-type-label-weight);
  line-height:var(--ds-type-label-leading);
  min-height:var(--ds-control-height-sm);
  padding:0 var(--ds-control-pad-x-sm);
  color:var(--ds-color-text);
  background:var(--ds-color-surface);
  border:var(--ds-border-hairline) solid var(--ds-color-border-strong);
  border-radius:var(--ds-radius-sm);
  cursor:pointer;
  transition:border-color var(--ds-duration-fast) ease,color var(--ds-duration-fast) ease;
}
.theme-pick select:hover,.menu-btn:hover,.demo-btn:hover{border-color:var(--ds-color-accent)}
.menu-btn{display:none}

/* Shell --------------------------------------------------------------- */
.shell{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:var(--ds-space-2xl);
  max-width:var(--ds-container);
  margin:0 auto;
  padding:0 var(--ds-gutter);
}
.nav{
  position:sticky;top:64px;align-self:start;
  max-height:calc(100vh - 64px);overflow-y:auto;
  padding-block:var(--ds-space-xl) var(--ds-space-2xl);
}
.nav-group + .nav-group{margin-top:var(--ds-space-lg)}
.nav-head{
  font-size:var(--ds-type-label-size);
  font-weight:var(--ds-type-label-weight);
  line-height:var(--ds-type-label-leading);
  color:var(--ds-color-text-muted);
  margin-bottom:var(--ds-space-2xs);
}
.nav ul{list-style:none;margin:0;padding:0}
.nav a{
  display:block;
  padding:var(--ds-space-3xs) 0;
  font-size:var(--ds-type-ui-size);
  line-height:var(--ds-type-ui-leading);
  color:var(--ds-color-text-dim);
  text-decoration:none;
  transition:color var(--ds-duration-fast) ease;
}
.nav a:hover{color:var(--ds-color-text)}
.nav a[aria-current="page"]{color:var(--ds-color-accent);font-weight:var(--ds-weight-medium)}

.content{min-width:0;padding-block:var(--ds-space-xl) var(--ds-space-3xl);max-width:820px}

/* Page type ----------------------------------------------------------- */
.page-head{margin-bottom:var(--ds-space-fluid-l)}
.page-head h1{
  margin:0;
  font-family:var(--ds-font-display);
  font-size:var(--ds-type-h2-size);
  line-height:var(--ds-type-h2-leading);
  letter-spacing:var(--ds-type-h2-tracking);
  font-weight:var(--ds-type-h2-weight);
}
.lead{
  margin-top:var(--ds-space-md);
  font-size:var(--ds-type-lead-size);
  line-height:var(--ds-type-lead-leading);
  color:var(--ds-color-text-dim);
  max-width:var(--ds-measure);
}
.sec{margin-top:var(--ds-space-fluid-l);display:flex;flex-direction:column;gap:var(--ds-space-md)}
.sec h2{
  margin:0;
  font-family:var(--ds-font-display);
  font-size:var(--ds-type-h3-size);
  line-height:var(--ds-type-h3-leading);
  letter-spacing:var(--ds-type-h3-tracking);
  font-weight:var(--ds-type-h3-weight);
}
.sec p{max-width:var(--ds-measure);color:var(--ds-color-text-dim)}
.note{font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted)}

/* Code ---------------------------------------------------------------- */
.code{
  position:relative;
  background:var(--ds-color-surface);
  border:var(--ds-border-hairline) solid var(--ds-color-border);
  border-radius:var(--ds-radius-md);
}
.code pre{
  margin:0;
  padding:var(--ds-space-md);
  padding-right:76px;
  overflow-x:auto;
  font-size:var(--ds-type-label-size);
  line-height:1.7;
  font-family:var(--ds-font-sans);
}
.code code{color:var(--ds-color-text-dim);font-size:inherit;overflow-wrap:normal}
.copy{
  position:absolute;top:var(--ds-space-xs);right:var(--ds-space-xs);
  font:inherit;font-size:var(--ds-type-label-size);
  padding:var(--ds-space-2xs) var(--ds-space-xs);
  color:var(--ds-color-text-muted);
  background:var(--ds-color-surface-raised);
  border:var(--ds-border-hairline) solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  cursor:pointer;
}
.copy:hover{color:var(--ds-color-text)}

/* Tables -------------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:var(--ds-border-hairline) solid var(--ds-color-border);border-radius:var(--ds-radius-md)}
table{width:100%;border-collapse:collapse;font-size:var(--ds-type-label-size);line-height:var(--ds-type-label-leading)}
th,td{text-align:left;padding:var(--ds-space-xs) var(--ds-space-sm);border-top:var(--ds-border-hairline) solid var(--ds-color-border-subtle);vertical-align:middle}
thead th{border-top:0;color:var(--ds-color-text-muted);font-weight:var(--ds-type-label-weight);background:var(--ds-color-bg-alt)}
tbody th{font-weight:var(--ds-weight-regular)}
tbody th code{color:var(--ds-color-text)}
td{color:var(--ds-color-text-dim)}

.matrix td{text-align:center}
.chip-swatch{
  display:inline-block;width:28px;height:20px;vertical-align:middle;
  border-radius:var(--ds-radius-xs);
  box-shadow:inset 0 0 0 1px var(--ds-color-border);
}

/* Theme cards --------------------------------------------------------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--ds-space-sm)}
.theme-card{
  display:flex;flex-direction:column;gap:var(--ds-space-xs);
  padding:var(--ds-space-md);
  background:var(--ds-color-bg);
  color:var(--ds-color-text);
  font-family:var(--ds-font-sans);
  border:var(--ds-border-hairline) solid var(--ds-color-border-strong);
  border-radius:var(--ds-radius-lg);
  text-decoration:none;
  transition:border-color var(--ds-duration-fast) ease;
}
.theme-card:hover{border-color:var(--ds-color-accent)}
.theme-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--ds-space-xs)}
.theme-icon svg{width:28px;height:28px}
.theme-card-app,.theme-card-faces{font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted)}
.theme-card-name{
  font-family:var(--ds-font-display);
  font-size:var(--ds-type-h3-size);
  line-height:var(--ds-type-h3-leading);
  font-weight:var(--ds-type-h3-weight);
  letter-spacing:var(--ds-type-h3-tracking);
}
.theme-card-strip{display:flex;height:16px;border-radius:var(--ds-radius-xs);overflow:hidden;box-shadow:inset 0 0 0 1px var(--ds-color-border)}
.theme-card-strip span{flex:1}

/* Stage: a block painted in a theme ------------------------------------ */
.stage{
  display:flex;flex-direction:column;gap:var(--ds-space-sm);
  padding:var(--ds-space-fluid-m);
  background:var(--ds-color-bg);
  color:var(--ds-color-text);
  font-family:var(--ds-font-sans);
  border:var(--ds-border-hairline) solid var(--ds-color-border-strong);
  border-radius:var(--ds-radius-lg);
  overflow:hidden;
}
.stage-icon svg{width:40px;height:40px}
.stage-app{font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted)}
.stage-h{
  font-family:var(--ds-font-display);
  font-size:var(--ds-type-h2-size);
  line-height:var(--ds-type-h2-leading);
  letter-spacing:var(--ds-type-h2-tracking);
  font-weight:var(--ds-type-h2-weight);
}
.stage-body{color:var(--ds-color-text-dim);max-width:var(--ds-measure)}
.stage-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-xs);margin-top:var(--ds-space-xs)}
.theme-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-sm);margin-bottom:var(--ds-space-md)}

.stage--demo{min-height:180px;justify-content:center}
.demo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ds-space-md)}

/* A block of swatches painted in a theme other than the site's. */
.scoped{font-family:var(--ds-font-sans);color:var(--ds-color-text)}

/* Swatches ------------------------------------------------------------ */
.swatch-group{display:flex;flex-direction:column;gap:var(--ds-space-xs)}
.swatch-group + .swatch-group{margin-top:var(--ds-space-md)}
.group-name{font-size:var(--ds-type-label-size);font-weight:var(--ds-type-label-weight);color:var(--ds-color-text-muted)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--ds-space-xs)}
.swatch{
  border:var(--ds-border-hairline) solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  overflow:hidden;
  background:var(--ds-color-surface);
}
/* Linked to from other sites by token name, e.g. /tokens/colour#ds-color-accent */
.swatch:target{border-color:var(--ds-color-accent);box-shadow:0 0 0 var(--ds-border-hairline) var(--ds-color-accent)}
.swatch,.run-row{scroll-margin-top:var(--ds-space-2xl)}
.swatch-fill{display:block;height:48px;box-shadow:inset 0 -1px 0 var(--ds-color-border-subtle)}
.swatch-cap{display:flex;flex-direction:column;gap:2px;padding:var(--ds-space-xs) var(--ds-space-xs)}
.swatch-name{font-size:var(--ds-type-label-size);color:var(--ds-color-text)}
.swatch-val{font-size:var(--ds-text-micro);color:var(--ds-color-text-muted);overflow-wrap:anywhere}

/* Type specimens ------------------------------------------------------ */
.specimens{display:flex;flex-direction:column}
.spec{padding-block:var(--ds-space-md);border-top:var(--ds-border-hairline) solid var(--ds-color-border-subtle)}
.spec:first-child{border-top:0;padding-top:0}
.spec-meta{font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted);margin-bottom:var(--ds-space-2xs)}
.spec-meta span:first-child{color:var(--ds-color-text)}
.spec-sample{margin:0;color:var(--ds-color-text);overflow-wrap:break-word;max-width:none}

/* Scales -------------------------------------------------------------- */
.scale{display:flex;flex-direction:column;gap:var(--ds-space-2xs)}
.scale-row{display:grid;grid-template-columns:150px auto 1fr;align-items:center;gap:var(--ds-space-sm)}
.scale-key{font-size:var(--ds-type-label-size)}
.scale-bar{height:12px;background:var(--ds-color-accent);border-radius:var(--ds-radius-xs);max-width:100%}
.scale-val{font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted)}
.control-demo{display:inline-block;width:72px;background:var(--ds-color-surface-raised);border:var(--ds-border-hairline) solid var(--ds-color-border-strong);border-radius:var(--ds-radius-sm);vertical-align:middle}

.radii{display:flex;flex-wrap:wrap;gap:var(--ds-space-md);align-items:flex-end}
.radius{display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-2xs)}
.radius-box{width:72px;height:72px;background:var(--ds-color-surface-raised);border:var(--ds-border-hairline) solid var(--ds-color-border-strong)}
.radius-key{font-size:var(--ds-type-label-size)}
.radius-val{font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted)}
.radius-mini{display:inline-block;width:36px;height:24px;background:var(--ds-color-surface-raised);border:var(--ds-border-hairline) solid var(--ds-color-border-strong);vertical-align:middle}

/* Motion runs --------------------------------------------------------- */
.runs{display:flex;flex-direction:column;gap:var(--ds-space-xs)}
.run-row{display:grid;grid-template-columns:200px 1fr;gap:var(--ds-space-sm);align-items:center}
.run-row:target .run-key{color:var(--ds-color-accent)}
.run-key{font-size:var(--ds-type-label-size)}
.run-val{color:var(--ds-color-text-muted)}
.track{
  position:relative;height:16px;
  background:var(--ds-color-surface-raised);
  border:var(--ds-border-hairline) solid var(--ds-color-border);
  border-radius:var(--ds-radius-full);
  container-type:inline-size;
}
.puck{
  position:absolute;top:50%;left:2px;width:10px;height:10px;margin-top:-5px;
  border-radius:var(--ds-radius-full);background:var(--ds-color-accent);
}
.is-running .puck{transform:translateX(calc(100cqw - 100% - 6px))}
.sec > .demo-btn{align-self:flex-start}

/* Shadows ------------------------------------------------------------- */
.shadows{display:flex;flex-wrap:wrap;gap:var(--ds-space-lg)}
.shadow-item{display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-xs);font-size:var(--ds-type-label-size)}
.shadow-box{width:96px;height:72px;background:var(--ds-color-surface);border-radius:var(--ds-radius-md)}

/* Component list ------------------------------------------------------ */
.comp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.comp-list li{padding-block:var(--ds-space-md);border-top:var(--ds-border-hairline) solid var(--ds-color-border-subtle)}
.comp-list li:first-child{border-top:0;padding-top:0}
.comp-list p{margin-top:var(--ds-space-2xs);color:var(--ds-color-text-dim);max-width:var(--ds-measure)}
.comp-name{font-weight:var(--ds-weight-medium)}
.comp-list code{margin-left:var(--ds-space-2xs);font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted)}

/* Demos --------------------------------------------------------------- */
.demo-form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:var(--ds-space-md)}
.demo-display{
  font-family:var(--ds-font-display);
  font-size:var(--ds-type-h2-size);line-height:var(--ds-type-h2-leading);
  letter-spacing:var(--ds-type-h2-tracking);font-weight:var(--ds-type-h2-weight);
}
.demo-inline{display:inline-flex;align-items:center;gap:var(--ds-space-xs);font-size:var(--ds-type-ui-size);color:var(--ds-color-text-dim)}
.demo-chips{display:flex;flex-wrap:wrap;gap:var(--ds-space-2xs);font-size:var(--ds-type-ui-size)}
.demo-reveal{display:flex;flex-direction:column;gap:var(--ds-space-2xs);min-width:220px}
.demo-reveal .ob-reveal{
  padding:var(--ds-space-xs) var(--ds-space-sm);
  background:var(--ds-color-surface);
  border:var(--ds-border-hairline) solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
}
.demo-stagger{min-width:240px}
.demo-stagger p{margin:0;font-weight:var(--ds-weight-medium)}
.demo-stagger p + p{font-weight:var(--ds-weight-regular);color:var(--ds-color-text-dim)}

/* Footer -------------------------------------------------------------- */
.foot{
  max-width:var(--ds-container);margin:0 auto;
  padding:var(--ds-space-lg) var(--ds-gutter) var(--ds-space-2xl);
  border-top:var(--ds-border-hairline) solid var(--ds-color-border-subtle);
  font-size:var(--ds-type-label-size);color:var(--ds-color-text-muted);
}

/* Phones -------------------------------------------------------------- */
/* Skills -------------------------------------------------------------- */
.skill-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.skill{padding-block:var(--ds-space-lg);border-top:var(--ds-border-hairline) solid var(--ds-color-border-subtle);display:flex;flex-direction:column;gap:var(--ds-space-xs)}
.skill:first-child{border-top:0;padding-top:0}
.skill-name{margin:0;font-family:var(--ds-font-display);font-size:var(--ds-type-h3-size);line-height:var(--ds-type-h3-leading);font-weight:var(--ds-type-h3-weight)}
.skill p{max-width:var(--ds-measure)}
.skill-meta{font-size:var(--ds-type-label-size);line-height:var(--ds-type-label-leading);color:var(--ds-color-text-dim)}
.skill-get{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ds-space-sm);margin-top:var(--ds-space-2xs)}
.skill-lock{
  display:inline-flex;align-items:center;gap:var(--ds-space-xs);
  font:inherit;font-size:var(--ds-type-label-size);font-weight:var(--ds-type-label-weight);
  min-height:var(--ds-control-tap-min);
  padding:0 var(--ds-control-pad-x-sm);
  color:var(--ds-color-text-muted);
  background:var(--ds-color-bg-alt);
  border:var(--ds-border-hairline) solid var(--ds-color-border);
  border-radius:var(--ds-radius-sm);
  cursor:not-allowed;
}
.skill-lock.is-nudged{animation:skill-nudge var(--ds-duration-base) var(--ds-ease-out)}
@keyframes skill-nudge{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.skill-lock.is-nudged{animation:none}}

@media (max-width:860px){
  .shell{display:block}
  .menu-btn{display:inline-block}
  .theme-pick-label{display:none}
  .nav{
    display:none;position:static;max-height:none;
    padding-block:var(--ds-space-md);
    border-bottom:var(--ds-border-hairline) solid var(--ds-color-border-subtle);
  }
  .nav.is-open{display:block}
  .nav.is-open{columns:2;column-gap:var(--ds-space-lg)}
  .nav-group{break-inside:avoid;margin-bottom:var(--ds-space-md)}
  .nav-group + .nav-group{margin-top:0}
  .content{padding-top:var(--ds-space-lg)}
  .scale-row{grid-template-columns:120px auto 1fr}
  .run-row{grid-template-columns:1fr}
  .version{display:none}
}
.matrix tbody th code{white-space:nowrap}

/* The confetti rises above its button, so its demo needs the headroom. */
.stage--demo:has(.ob-confetti){padding-top:240px;padding-left:160px;overflow:visible}