/* The typeface, served from here (4.11). It used to come from Google, which
   meant every visitor's browser announced itself to Google before a word of
   the page was read — a thing the Privacy page would then have had to admit.
   Four files, 58 KB in total, under the SIL Open Font License (fonts/OFL.txt). */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-ext-600.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/ibm-plex-mono-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* `hidden` means hidden. The browser's own rule for it loses to any class that
   sets a display, so a hidden button stayed on screen; this makes it win. */
[hidden]{display:none !important}

/* main/static/main/elixonic.css
   The palette is lifted from ui-pages/Elixonic Studio.dc.html, which 3.1 makes
   authoritative for Timeline's look (4.5; the page was called Studio then). One copy, so pages cannot drift apart —
   program.html previously carried a subset and referenced two tokens it did
   not define, which silently removed a border. */

:root{
  /* Light sand, 21 Sept 2026 — the clay it replaces was a third of the scale
     darker than this palette was built for, and every token had to be bent
     around it. This is near-paper again and warm, so the ink ramp can breathe
     and panels can sit above the page rather than glare off it. The hue is the
     clay's own, kept so the two themes are the same room at two times of day. */
  --bg: #F3E4D8;                            /* oklch(0.925 0.028 63) */

  --chrome: oklch(0.975 0.014 60);
  --chrome-2: oklch(0.955 0.018 62);
  --sunken: oklch(0.895 0.026 60);
  --avatar: oklch(0.865 0.032 55);
  --avatar-line: oklch(0.80 0.03 55);

  --line-strong: oklch(0.775 0.03 58);
  --line-3: oklch(0.845 0.024 58);
  --line: oklch(0.855 0.022 58);
  --line-2: oklch(0.865 0.022 58);
  --line-4: oklch(0.885 0.02 58);

  --slider-track: oklch(0.745 0.03 58);
  --ruler-line: oklch(0.80 0.026 58);
  --tick: oklch(0.72 0.03 58);
  --tick-2: oklch(0.68 0.032 58);
  --track: oklch(0.83 0.024 58);

  --ink: oklch(0.22 0.018 50);
  --ink-1: oklch(0.24 0.018 50);
  --ink-2: oklch(0.255 0.018 50);
  --ink-3: oklch(0.30 0.018 50);
  --ink-4: oklch(0.35 0.018 50);
  --ink-5: oklch(0.40 0.018 50);
  --ink-6: oklch(0.42 0.018 50);
  --ink-7: oklch(0.45 0.018 50);
  --ink-8: oklch(0.49 0.018 50);
  --ink-9: oklch(0.53 0.018 50);
  --ink-10: oklch(0.56 0.018 50);
  --ink-11: oklch(0.59 0.018 50);
  --ink-readout: oklch(0.35 0.018 50);

  --accent: oklch(0.56 0.105 205);
  --accent-2: oklch(0.48 0.095 205);
  --accent-2-fade: oklch(0.48 0.095 205 / 0.3);
  --accent-soft: oklch(0.905 0.04 200);
  --accent-soft-2: oklch(0.78 0.055 200);
  --select: oklch(0.86 0.045 200);
  --link: oklch(0.48 0.11 205);
  --link-hover: oklch(0.38 0.11 205);
  --accent-solid: oklch(0.55 0.105 205);
  --on-accent: #fff;
  --on-accent-solid: #fff;

  --good: oklch(0.45 0.11 150);
  --warn: oklch(0.50 0.14 38);
  --playhead: oklch(0.47 0.19 27);
  --curve: oklch(0.52 0.14 255);
  /* Record button: dark red when armed, bright while a take is running. */
  --rec: oklch(0.42 0.14 27);
  --rec-live: oklch(0.58 0.21 27);

  /* The header's own three: the row under it, the tab you are on, and the size
     of type that does not want full contrast. */
  --navbar: oklch(0.862 0.032 58);          /* darkest of the three */
  --subnav: oklch(0.898 0.026 58);          /* between the bar and the page */
  --subnav-ink: oklch(0.40 0.02 52);
  --nav-on: oklch(0.815 0.036 56);
  --display: oklch(0.55 0.06 48);

  --overlay: oklch(0.18 0.02 50 / 0.40);
  --zoom-off: oklch(0.99 0.008 60);
  --tab-on: oklch(0.99 0.008 60);
  --tab-on-ink: oklch(0.25 0.018 50);
  --phase-tab-ink: #fff;
  --modal: oklch(0.985 0.01 60);
  --modal-border: oklch(0.88 0.02 58);
  --shadow: oklch(0.25 0.03 50 / 0.18);
}
html[data-theme="dark"]{
  color-scheme: dark;
  /* Re-pitched around the ground, 20 Sept 2026. #1B1200 is the masthead's black
     and it is warm — hue 86, chroma 0.039 — where the palette above it was all
     but neutral at chroma 0.008. Left alone, every panel and line read as cool
     grey laid on brown. The lightnesses are near enough what they were; what
     changed is that the whole theme now shares the ground's warmth. */
  --bg: #1B1200;                            /* oklch(0.189 0.039 86.5) */

  --chrome: oklch(0.245 0.022 75);
  --chrome-2: oklch(0.22 0.022 78);
  --sunken: oklch(0.225 0.02 78);
  --avatar: oklch(0.33 0.025 70);
  --avatar-line: oklch(0.35 0.022 70);

  --line: oklch(0.30 0.018 75);
  --line-2: oklch(0.31 0.018 75);
  --line-3: oklch(0.31 0.018 75);
  --line-4: oklch(0.32 0.018 75);
  --line-strong: oklch(0.35 0.02 75);

  --slider-track: oklch(0.47 0.02 72);
  --ruler-line: oklch(0.31 0.018 75);
  --tick: oklch(0.41 0.02 72);
  --tick-2: oklch(0.43 0.02 72);
  --track: oklch(0.39 0.02 72);

  --ink: oklch(0.94 0.012 80);
  --ink-1: oklch(0.80 0.014 78);
  --ink-2: oklch(0.90 0.013 80);
  --ink-3: oklch(0.86 0.014 78);
  --ink-4: oklch(0.82 0.015 78);
  --ink-5: oklch(0.76 0.016 76);
  --ink-6: oklch(0.74 0.016 76);
  --ink-7: oklch(0.70 0.017 75);
  --ink-8: oklch(0.66 0.018 74);
  --ink-9: oklch(0.62 0.018 74);
  --ink-10: oklch(0.60 0.018 74);
  --ink-11: oklch(0.58 0.02 73);
  --ink-readout: oklch(0.96 0.012 80);

  /* The teal is left where it was: against a warm ground it is the one cool
     thing on the page, which is what an accent is for. */
  --accent: oklch(0.72 0.10 200);
  --accent-2: oklch(0.76 0.09 200);
  --accent-2-fade: oklch(0.76 0.09 200 / 0.3);
  --accent-soft: oklch(0.305 0.05 200);
  --accent-soft-2: oklch(0.42 0.06 200);
  --select: oklch(0.42 0.07 200);
  --link: oklch(0.76 0.09 200);
  --link-hover: oklch(0.86 0.07 200);
  --accent-solid: oklch(0.42 0.08 200);
  --on-accent: oklch(0.17 0.03 200);
  --on-accent-solid: oklch(0.95 0.02 200);

  --good: oklch(0.80 0.13 150);
  --warn: oklch(0.74 0.13 45);
  --playhead: oklch(0.66 0.20 25);
  --curve: oklch(0.74 0.13 252);
  --rec: oklch(0.42 0.12 27);
  --rec-live: oklch(0.62 0.21 27);

  --overlay: oklch(0.08 0.02 80 / 0.66);
  --navbar: oklch(0.288 0.024 75);          /* lightest of the three */
  --subnav: oklch(0.248 0.022 77);          /* between the bar and the page */
  --subnav-ink: oklch(0.70 0.018 75);
  /* Between the page and the row it sits in: dark enough to read as cut into
     the bar, light enough not to read as a hole in the screen. */
  --nav-on: oklch(0.215 0.03 80);
  --display: oklch(0.72 0.045 72);           /* large type: bright, not white */
  --zoom-off: oklch(0.22 0.022 78);
  --tab-on: oklch(0.33 0.025 70);
  --tab-on-ink: oklch(0.94 0.012 80);
  --phase-tab-ink: oklch(0.96 0.014 78);
  --modal: oklch(0.245 0.022 75);
  --modal-border: oklch(0.32 0.02 75);
  --shadow: oklch(0 0 0 / 0.55);
}
html[data-theme="dark"] ::-webkit-scrollbar{width:10px;height:10px}
html[data-theme="dark"] ::-webkit-scrollbar-track{background:oklch(0.165 0.008 60)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:oklch(0.33 0.01 60);border-radius:5px;border:2px solid oklch(0.165 0.008 60)}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:oklch(0.42 0.01 60)}
body{background:var(--bg);margin:0;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--select)}
@keyframes stalePulse{0%,100%{opacity:1}50%{opacity:0.45}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes titleIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ---- shared chrome ---------------------------------------------------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}

/* Everything in the bar paints above the row beneath it. The sub-row is a
   later sibling pulled up by a negative margin, so by default it covered the
   bottom of whatever it crossed — which is how the theme switch ended up
   half behind it. The children are raised rather than the header itself: the
   header's own ground must stay below, or it would hide the row it overlaps. */
.elixonic-header > *{position:relative;z-index:3}
/* Where a sub-row exists, the two rows are one block 54px tall and the
   controls belong to the block, not to the bar: centred on the bar alone
   they ride six pixels high of everything beside them. */
.elixonic-header.with-sub > .theme-toggle,
.elixonic-header.with-sub > .avatar{top:6px}
.elixonic-header{display:flex;align-items:center;gap:24px;padding:0 34px 0 20px;height:42px;
     border-bottom:1px solid var(--line);background:var(--navbar);flex:none}
/* Two marks, one per ground: the bright outline burns out on a pale page and
   the burnt one disappears into a dark one. Both are in the markup so the
   switch costs no request when the theme changes. */
.elixonic-header .wordmark{height:18px;width:auto;display:block;flex:none}
.elixonic-header .wordmark.on-dark{display:none}
html[data-theme="dark"] .elixonic-header .wordmark.on-dark{display:block}
html[data-theme="dark"] .elixonic-header .wordmark.on-light{display:none}
/* Where you are, and the way up: the label names the section, the arrow
   leaves it for the level above (§4). */
.elixonic-header .where{display:flex;align-items:center;gap:6px;padding-right:20px;
     border-right:1px solid var(--line-2);flex:none}
.elixonic-header .up{display:flex;align-items:center;justify-content:center;width:24px;height:24px;
     margin-left:-4px;border-radius:6px;font-size:15px;line-height:1;color:var(--ink-11);text-decoration:none}
.elixonic-header .up:hover{background:var(--sunken);color:var(--ink)}
.elixonic-header .up:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.elixonic-header .here{font-size:13px;font-weight:600;color:var(--ink-5)}
.elixonic-header nav{display:flex;gap:20px}
.elixonic-header nav a,.elixonic-header nav span{font-size:13px;color:var(--ink-11);
     text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.elixonic-header nav .on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.elixonic-header .spacer{flex:1}
.elixonic-header .avatar{width:28px;height:28px;border-radius:50%;background:var(--avatar);
     border:1px solid var(--avatar-line);display:flex;align-items:center;justify-content:center;
     font-size:11px;font-weight:600;color:var(--ink-5);cursor:pointer;flex:none;text-decoration:none}
.elixonic-header .avatar:hover{border-color:var(--line-strong);color:var(--ink-2)}
.theme-toggle{display:flex;align-items:center;gap:2px;padding:2px;border-radius:7px;
     background:var(--sunken);border:1px solid var(--line-3);flex:none}
.theme-toggle button{width:26px;height:22px;border-radius:5px;border:none;cursor:pointer;
     display:flex;align-items:center;justify-content:center;background:transparent;color:var(--ink-9)}
.theme-toggle button.on{background:var(--chrome);color:var(--ink-3);box-shadow:0 1px 2px var(--shadow)}

/* Timeline is a fixed-height editor: it owns its scrolling, so the shell must not.
   Program is an ordinary document — `flow` lets the window scroll, which keeps the
   scrollbar at the window edge instead of inside a centred column. */
.elixonic-shell{display:flex;flex-direction:column;height:100dvh;min-height:0;overflow:hidden}
.elixonic-shell.flow{height:auto;min-height:100dvh;overflow:visible}

/* The action bar: one component and one revision guard (3.14) across the editing
   pages. Deliberately not a page boundary — no rule across the width, no filled
   ground, so it reads as a row of controls rather than the end of the document. */
.elixonic-header .home{display:flex;align-items:center;flex:none;line-height:0}
.elixonic-header .home:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.elixonic-header .elsewhere{font-size:13px;color:var(--ink-8);text-decoration:none;padding:4px 10px;
     border-radius:7px}
.elixonic-header .elsewhere:hover{background:var(--chrome);color:var(--ink-2)}

.elixonic-actionbar{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:14px;
     padding:10px 34px 14px 20px;background:transparent;pointer-events:none;
     position:relative;z-index:1}
/* The bar is pulled up to sit beside the page's last control (4.3, 4.4), so its
   empty width must not swallow clicks meant for what is behind it — and it has
   to sit above that control, or a positioned one (Program's pacing curve) paints
   over the Save button and takes the click that was meant for it. */
.elixonic-actionbar > *{pointer-events:auto}
.elixonic-actionbar .status{font-size:12.5px;color:var(--ink-8)}
/* Back is a button too, outlined so the step forward stays the one that leads. */
.elixonic-actionbar .back{margin-right:auto;padding:7px 17px;border:1px solid var(--line-3);border-radius:8px;
      background:transparent;color:var(--ink);font-size:13px;font-weight:600;text-decoration:none}
.elixonic-actionbar .back:hover{border-color:var(--line-strong);background:var(--chrome)}
/* Save and stay: outlined beside the step forward, which stays the one that leads. */
.elixonic-actionbar button.stay{padding:7px 17px;border:1px solid var(--line-3);background:transparent;color:var(--ink)}
.elixonic-actionbar button.stay:hover{border-color:var(--line-strong);background:var(--chrome)}
.elixonic-actionbar .status.err{color:var(--warn)}
.elixonic-actionbar .status.ok{color:var(--good)}
.elixonic-actionbar button{padding:8px 18px;border:none;border-radius:8px;background:var(--accent-solid);
     color:var(--on-accent-solid);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.elixonic-actionbar button:disabled{opacity:.45;cursor:default}

input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
     background:var(--track);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
     border-radius:50%;background:currentColor;cursor:pointer;border:2px solid var(--chrome)}
textarea{font-family:inherit}

/* 4.11: the site's small print, on pages that are read rather than worked in. */
.elixonic-footer{border-top:1px solid var(--line-4);padding:22px 20px 30px;margin-top:auto}
.elixonic-footer nav{max-width:980px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.elixonic-footer a{font-size:12.5px;color:var(--ink-8);text-decoration:none}
.elixonic-footer a:hover{color:var(--ink-2);text-decoration:underline}

/* 4.12: two levels. The site across the top, the Studio's steps beneath it
   when inside a program. */
.elixonic-header nav.top{display:flex;gap:4px;margin-left:10px}
.elixonic-header nav.top a{font-size:13px;color:var(--ink-8);text-decoration:none;padding:0 5px;
     border-radius:5px;border-bottom:none}
.elixonic-header nav.top a:hover{background:var(--sunken);color:var(--ink-2)}
.elixonic-header nav.top a.on{color:var(--ink);font-weight:600;background:var(--nav-on)}
/* The Studio's steps: part of the header — same ground, no line between —
   centred beneath the Studio tab and styled like the tabs above them. */
.elixonic-header.with-sub{border-bottom:none}
/* The divide between the two rows falls below the tabs' own top, so the step
   you are on bridges them — the row reads as attached to the bar above rather
   than stacked under it. No rule at the foot: the change of ground is the
   boundary, and a line as well says it twice. */
.elixonic-subnav{position:relative;height:26px;margin-top:-14px;flex:none;
     background:linear-gradient(to bottom, transparent 5px, var(--subnav) 5px)}
.elixonic-subnav .tabs{position:absolute;top:6px;left:20px;display:flex;gap:0;white-space:nowrap}
.elixonic-subnav a,.elixonic-subnav span{font-size:13px;color:var(--subnav-ink);text-decoration:none;
     padding:0 5px;border-radius:5px}
/* Outside the Studio: present, so the header keeps its shape, but quiet. */
.elixonic-subnav.away .tabs{opacity:.6;transition:opacity .15s}
.elixonic-subnav.away .tabs:hover,.elixonic-subnav.away .tabs:focus-within{opacity:1}
.elixonic-subnav a:hover{background:var(--sunken);color:var(--ink-2)}
.elixonic-subnav .on{color:var(--ink);font-weight:600;background:var(--nav-on)}
@media (max-width:720px){
  .elixonic-header nav.top a{padding:1px 5px}
  .elixonic-subnav a,.elixonic-subnav span{padding:1px 4px}
}