/*
  Palette, radius scale, and font lifted from app.spokenote.com's compiled
  CSS (--primary, --action*, --gray-*, --radius-* custom properties, and
  the Mazzard Soft typeface, self-hosted below from /fonts/mazzard).
*/
@font-face{
  font-family: 'Mazzard';
  src: url('fonts/mazzard/MazzardSoftM-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face{
  font-family: 'Mazzard';
  src: url('fonts/mazzard/MazzardSoftM-Medium.woff') format('woff');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face{
  font-family: 'Mazzard';
  src: url('fonts/mazzard/MazzardSoftM-SemiBold.woff') format('woff');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face{
  font-family: 'Mazzard';
  src: url('fonts/mazzard/MazzardSoftM-Bold.woff') format('woff');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }
img{ max-width: 100%; }
:root{
  /* Colors */
  --primary: #005677;
  --action: #0094ce;
  --action-tint: #ecf7fb;
  --action-hov: #007bab;
  --teal: #6eaeb4;
  --teal-tint: #e5f6f4;
  --yellow: #f7d131;
  --yellow-tint: #fff2ba;
  --yellow-ink: #8a6d0a;
  --red: #e1244b;
  --red-tint: #fdf4f6;
  --red-hov: #850729;
  --green: #00bc81;
  --green-tint: #d9f5ec;
  --white: #ffffff;
  --gray-5: #f4f6f8;
  --gray-10: #e9edf1;
  --gray-20: #d2d6db;
  --gray-30: #bbbfc5;
  --gray-40: #a4a8af;
  --gray-50: #8d9199;
  --gray-60: #757a83;
  --gray-70: #5e636d;
  --gray-80: #474c57;
  --gray-90: #303541;
  --gray-100: #191e2b;
  --gray-5-opacity: rgb(from var(--gray-100) r g b / 0.05);
  --gray-10-opacity: rgb(from var(--gray-100) r g b / 0.1);
  --gray-20-opacity: rgb(from var(--gray-100) r g b / 0.2);
  --gray-30-opacity: rgb(from var(--gray-100) r g b / 0.3);
  --gray-40-opacity: rgb(from var(--gray-100) r g b / 0.4);
  --gray-50-opacity: rgb(from var(--gray-100) r g b / 0.5);
  --gray-60-opacity: rgb(from var(--gray-100) r g b / 0.6);
  --gray-70-opacity: rgb(from var(--gray-100) r g b / 0.7);
  --gray-80-opacity: rgb(from var(--gray-100) r g b / 0.8);
  --gray-90-opacity: rgb(from var(--gray-100) r g b / 0.9);
  --black: #000000;

  /* Border Radii */
  --radius-s: 6px;
  --radius-m: 12px;
  --radius-l: 26px;
  --radius-xl: 36px;

  /* Font Sizes */
  --font-size-xs: 12px;
  --font-size-s: 14px;
  --font-size-m: 16px;
  --font-size-l: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 26px;

  /* Font Weights */
  --font-weight-s: 400;
  --font-weight-m: 500;
  --font-weight-l: 600;
  --font-weight-xl: 700;

  /* Line Heights */
  --line-height-s: 1.1em;
  --line-height-m: 1.2em;
  --line-height-l: 1.3em;
  --line-height-xl: 1.5em;

  /* Spacing */
  --space-s: 5px;
  --space-m: 10px;
  --space-l: 20px;
  --space-xl: 40px;

  --code-tag: var(--primary);
  --code-attr: #2f7d84;
  --code-str: var(--gray-70);
  --merge-bg: var(--action-tint);
  --merge-delim: var(--gray-60);
  --merge-var: var(--action-hov);
}

body{
  background: var(--gray-5);
  color: var(--gray-100);
  font-family: 'Mazzard', system-ui, -apple-system, sans-serif;
  font-size: 17.5px;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

.wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 28px 90px;
}

.site-footer{
  margin-top: 28px;
  font-size: 15px;
  color: var(--gray-60);
  text-align: center;
}
.site-footer a{ color: var(--gray-60); text-decoration: underline; }
.site-footer a:hover{ color: var(--action); }

header.masthead{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 24px;
  margin-bottom: 28px;
}
.wordmark{ display: block; }
.wordmark svg{
  display: block;
  height: 30px;
  width: auto;
}
.wordmark svg path{ fill: var(--primary); transition: fill 0.15s; }
.wordmark:hover svg path{ fill: var(--action); }
.tagline{
  margin-top: 4px;
  font-size: 24px;
  letter-spacing: 0.01em;
  color: var(--gray-60);
  font-weight: 600;
  line-height: 1.2;
}
main.grid{
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
}
main.grid > *{ min-width: 0; }

.panel{
  background: var(--white);
  border: 1px solid var(--gray-10);
  border-radius: var(--radius-m);
}

.sidebar{ padding: 20px; overflow-x: hidden; overflow-y: auto; position: sticky; top: 20px; max-height: calc(100dvh - 40px); }
.step{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}
.step:not(:first-child){ margin: 22px -20px 0; padding: 22px 20px 0; border-top: 1px solid var(--gray-10); }
.step-title{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--action);
}
.step-accordion{
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.step-accordion .caret{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gray-50);
  transition: transform 0.15s ease;
}
.step-accordion[aria-expanded="true"] .caret{ transform: rotate(180deg); }
.step-accordion:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--action-tint), 0 0 0 3px var(--action); border-radius: 4px; }
.accordion-panel[hidden]{ display: none; }

.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;
}
.info-tip{
  position: relative;
  display: inline-flex;
  align-self: center;
}
.info-icon{
  display: inline-flex;
  padding: 0;
  border: none;
  background: none;
  color: var(--gray-40);
  cursor: pointer;
}
.info-icon svg{ width: 16px; height: 16px; }
.info-icon:hover, .info-icon:focus-visible{ color: var(--action); }
.info-icon:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--action-tint), 0 0 0 3px var(--action); border-radius: 50%; }
.tooltip-bubble{
  position: fixed;
  z-index: 30;
  width: 250px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  background: var(--white);
  border: 1px solid var(--gray-10);
  box-shadow: 0 10px 28px rgba(25,30,43,0.14), 0 2px 8px rgba(25,30,43,0.08);
  font-size: 13.75px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-70);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  pointer-events: none;
}
.tooltip-bubble code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.2px;
  background: var(--gray-5);
  padding: 1px 4px;
  border-radius: 4px;
  color: var(--gray-80);
}
.info-icon:hover + .tooltip-bubble,
.info-icon:focus-visible + .tooltip-bubble,
.tooltip-bubble:hover{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown{ position: relative; }
.dropdown-trigger{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  border: 1px solid var(--gray-20);
  background: var(--white);
  color: var(--gray-100);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: all .15s linear;
}
.dropdown-trigger:hover{ border-color: var(--action); }
.dropdown-trigger[aria-expanded="true"]{ border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.dropdown-trigger .dt-label{ font-size: 16.88px; font-weight: 600; flex-shrink: 0; }
.dropdown-trigger .chevron{
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--gray-50);
  transition: transform 0.15s ease;
}
.dropdown-trigger[aria-expanded="true"] .chevron{ transform: rotate(180deg); }

.dropdown-panel{
  position: fixed;
  z-index: 30;
  background: var(--white);
  border: 1px solid var(--gray-10);
  border-radius: var(--radius-m);
  box-shadow: 0 10px 28px rgba(25,30,43,0.14), 0 2px 8px rgba(25,30,43,0.08);
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.dropdown-panel[hidden]{ display: none; }

#platformList{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.platform-btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  text-align: left;
  padding: 8px 10px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray-100);
  font: inherit;
  cursor: pointer;
}
.p-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.p-logo{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--gray-10);
  background: var(--gray-5);
  object-fit: cover;
}
.platform-btn:hover{ background: var(--gray-5); }
.platform-btn:focus-visible{ outline: none; box-shadow: 0 0 0 1px var(--action); }
.platform-btn .p-label{ font-size: 16.88px; font-weight: 500; }
.platform-btn .p-token{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.75px;
  color: var(--gray-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.platform-btn[aria-selected="true"]{
  background: var(--action-tint);
  border-color: var(--action);
}
.platform-btn[aria-selected="true"] .p-label{ color: var(--action-hov); font-weight: 600; }
.platform-btn[aria-selected="true"] .p-token{ color: var(--action-hov); opacity: 0.85; }

.field{ margin-top: 10px; }
.field label{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16.25px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--gray-100);
}
#fallbackModeLabel{ display: block; font-weight: 400; }
.field input{
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  border: 1px solid var(--gray-20);
  background: var(--white);
  color: var(--gray-100);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  transition: all .15s linear;
}
.field input:hover{ border-color: var(--action); }
.field input:focus-visible{ outline: none; box-shadow: 0 0 0 1px var(--action); border-color: var(--action); }
.field input.input-error{ border-color: var(--red); background: var(--red-tint); }
.field input.input-error:hover{ border-color: var(--red); }
.field input.input-error:focus-visible{ box-shadow: 0 0 0 1px var(--red); border-color: var(--red); }

/* varInput shows platform delimiters in gray and the variable name in black. Native
   inputs can't style part of their text, so the real input sits transparent on top
   (visible caret and selection only) while this div underneath renders the colors. */
.var-input-wrap{ position: relative; }
.var-input-display{
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  border: 1px solid var(--gray-20);
  background: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  white-space: pre;
  overflow: hidden;
  box-sizing: border-box;
  transition: all .15s linear;
}
.var-input-display .var-affix{ color: var(--gray-40); }
.var-input-display .var-core{ color: var(--gray-100); }
.var-input-wrap:hover .var-input-display{ border-color: var(--action); }
.var-input-wrap:focus-within .var-input-display{ border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.field input.var-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: transparent;
  caret-color: var(--gray-100);
}
.field input.var-input:focus-visible{ outline: none; box-shadow: none; border-color: transparent; }

.toggle-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.toggle-row[hidden]{ display: none; }
.toggle-label{
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-100);
  cursor: pointer;
}
.switch{
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.switch input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch-track{
  position: absolute;
  inset: 0;
  background: var(--gray-20);
  border-radius: 999px;
  transition: background 0.15s ease;
}
.switch-track::after{
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(25,30,43,0.25);
  transition: transform 0.15s ease;
}
.switch input:checked + .switch-track{ background: var(--action); }
.switch input:checked + .switch-track::after{ transform: translateX(16px); }
.switch input:focus-visible + .switch-track{ box-shadow: 0 0 0 2px var(--action-tint), 0 0 0 3px var(--action); }

.segmented{
  display: flex;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.segment{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border: none;
  border-right: 1px solid var(--gray-20);
  background: var(--white);
  color: var(--gray-50);
  font-family: 'Mazzard', system-ui, -apple-system, sans-serif;
  cursor: pointer;
}
.segment:last-child{ border-right: none; }
.segment svg{ width: 18px; height: 18px; }
.segment:hover{ background: var(--gray-5); }
.segment:focus-visible{ outline: none; box-shadow: inset 0 0 0 2px var(--action); }
.segment[aria-pressed="true"]{ background: var(--action-tint); color: var(--action-hov); }
.segment-text{
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

.content-col{ display:flex; flex-direction: column; gap: 20px; }

.preview-panel{ padding: 22px; transition: height 0.15s ease; }
.preview-head{
  margin-bottom: 14px;
}
.preview-head h2{
  margin: 0;
  font-size: 21.25px;
  font-weight: 700;
  line-height: 1.2;
}

.code-window{
  border: 1px solid var(--gray-10);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.code-window-head{
  padding: 9px 18px;
  background: var(--gray-10);
  border-bottom: 1px solid var(--gray-10);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gray-60);
}
.code-window-body{ display: flex; background: var(--gray-5); }
pre.code-gutter{
  flex-shrink: 0;
  margin: 0;
  padding: 18px 12px 18px 16px;
  border-right: 1px solid var(--gray-10);
  text-align: right;
  color: var(--gray-30);
  user-select: none;
}
pre.code{
  flex: 1;
  margin: 0;
  padding: 18px 18px;
  background: var(--gray-5);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.8px;
  line-height: 1.7;
  tab-size: 2;
}
pre.code-gutter{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.8px;
  line-height: 1.7;
}
pre.code .tag{ color: var(--code-tag); }
pre.code .attr{ color: var(--code-attr); }
pre.code .str{ color: var(--code-str); }
.merge{
  background: var(--merge-bg);
  border-radius: 4px;
  padding: 0 2px;
  transition: background 0.15s ease;
}
.merge .mdelim{ color: var(--merge-delim); transition: color 0.15s ease; }
.merge .mvar{ color: var(--merge-var); font-weight: 600; transition: color 0.15s ease; }
#codeBlock[data-focus="variable"] .merge{ background: var(--action-hov); }
#codeBlock[data-focus="variable"] .merge .mdelim,
#codeBlock[data-focus="variable"] .merge .mvar{ color: var(--white); }

.value-hl{
  background: var(--teal-tint);
  color: var(--code-attr);
  border-radius: 4px;
  padding: 0 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
#codeBlock[data-focus="align"] .value-hl[data-field="align"],
#codeBlock[data-focus="alt"] .value-hl[data-field="alt"],
#codeBlock[data-focus="width"] .value-hl[data-field="width"],
#codeBlock[data-focus="fallback"] .value-hl[data-field="fallback"]{
  background: var(--code-attr);
  color: var(--white);
}

.copy-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 14px;
}
.copy-callout{
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.copy-callout.fading{ opacity: 0; }
.copy-callout[hidden]{ display: none; }
.copy-callout svg{ width: 16px; height: 16px; flex-shrink: 0; }
#copyCalloutText{ min-width: 0; }
.copy-callout.warning{ background: var(--yellow-tint); color: var(--yellow-ink); }
.copy-callout.success{ background: var(--green-tint); color: var(--green); }
.copy-callout.error{ background: var(--red-tint); color: var(--red); }
button.copy-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--action);
  background: var(--action);
  color: var(--white);
  font: inherit;
  font-weight: 600;
  font-size: 16.88px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button.copy-btn:hover{ background: var(--action-hov); border-color: var(--action-hov); }
button.copy-btn:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--action); }
button.copy-btn.copied{
  background: var(--green-tint);
  border-color: var(--green);
  color: var(--green);
}
button.copy-btn svg{ width: 20px; height: 20px; flex-shrink: 0; }

.notes-panel{ padding: 22px; }
.notes-accordion-item[hidden]{ display: none; }
.notes-accordion-item:not([hidden]) ~ .notes-accordion-item:not([hidden]){ border-top: 1px solid var(--gray-10); }
.notes-accordion-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 16.88px;
  font-weight: 500;
  color: var(--gray-100);
  text-align: left;
  cursor: pointer;
}
.notes-accordion-trigger .caret{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--gray-50);
  transition: transform 0.15s ease;
}
.notes-accordion-trigger[aria-expanded="true"] .caret{ transform: rotate(180deg); }
.notes-accordion-trigger:hover{ color: var(--action); }
.notes-accordion-trigger:hover .caret{ color: var(--action); }
.notes-accordion-trigger:focus-visible{ outline: none; box-shadow: 0 0 0 2px var(--action-tint), 0 0 0 3px var(--action); border-radius: 4px; }
.notes-accordion-body{
  margin: 0;
  padding: 0 0 14px;
  font-size: 16.88px;
  color: var(--gray-70);
  line-height: 1.6;
}
.notes-accordion-body[hidden]{ display: none; }
.notes-accordion-body p{ margin: 0 0 10px; }
.notes-accordion-body p:last-child{ margin-bottom: 0; }
.notes-accordion-body ul{ margin: 0; padding-left: 20px; }
.notes-accordion-body li + li{ margin-top: 8px; }
.notes-accordion-body strong{ font-weight: 600; }
.notes-accordion-body code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--gray-5);
  padding: 1px 4px;
  border-radius: 4px;
  color: var(--gray-80);
}
.doc-links{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.doc-link{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--action);
  text-decoration: none;
}
.doc-link svg{ width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.doc-link span{
  font-size: 13.5px;
  overflow-wrap: anywhere;
}
.doc-link:hover span{ text-decoration: underline; }
.doc-link:hover, .doc-link:hover svg{ color: var(--action-hov); }

@media (max-width: 860px){
  main.grid{ grid-template-columns: 1fr; }
  .sidebar{ position: static; max-height: none; overflow: visible; }
}

@media (max-width: 640px){
  .wrap{ padding-left: 0; padding-right: 0; padding-top: 20px; }
  header.masthead{ padding-left: 20px; padding-right: 20px; padding-bottom: 12px; margin-bottom: 14px; }
  .panel{ border-radius: 0; }
  .copy-row{ flex-direction: column-reverse; align-items: flex-start; }
  button.copy-btn{ margin-left: 0; }
  .copy-callout{ width: 100%; }
}