/*
  The site wears the app's theme. Every color below is named after, and equal to,
  one in src/Flyback.Ui/Controls/Colors.cs; the code colors are Flyback.xshd's.
  The app has no light theme, so neither does this.
*/

:root {
  color-scheme: dark;

  /* surfaces, darkest first */
  --edge: #101114;
  --outline: #141518;
  --window: #16181B;
  --canvas: #1A1C20;
  --panel: #1C1E22;
  --toolbar: #22252A;
  --grid: #24272C;
  --grid-major: #2C3036;
  --node: #2A2D34;
  --node-selected: #32363E;
  --separator: #3A3E46;

  /* text */
  --bright: #E9ECF1;
  --label: #C8CCD4;
  --value: #8A92A0;
  --muted: #8A909A;
  --normalled: #6C7482;

  /* the one color that means "look here" */
  --attention: #FFB040;

  /* module families, borrowed to color a heading or a card's edge */
  --sink: #E05A5A;
  --source: #4A9EDE;
  --oscillator: #4FC387;
  --sequencer: #D8B04A;
  --maths: #7E8694;
  --space: #B484E0;
  --pattern: #E0A84A;
  --tint: #E06AB8;
  --feedback: #3FC8C8;
  --form: #7A8CE8;
  --note: #A8CE52;
  --shaping: #D87A48;
  --echo: #3EA0B0;
  --reading: #92A8C8;
  --routing: #C09C88;

  --beam-core: #FFF3DC;

  --sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", Consolas, Menlo, "DejaVu Sans Mono", ui-monospace, monospace;

  --radius: 6px;
  --gutter: 16px;
  --measure: 46rem;
}

* { box-sizing: border-box; }

html { scroll-padding-top: 76px; }

body {
  margin: 0;
  background: var(--window);
  color: var(--label);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, svg { max-width: 100%; }

a { color: var(--attention); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--beam-core); }
:focus-visible { outline: 2px solid var(--attention); outline-offset: 3px; border-radius: 3px; }

strong { color: var(--bright); font-weight: 650; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* ---- the toolbar ------------------------------------------------------- */

.toolbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--toolbar);
  border-bottom: 1px solid var(--edge);
}
.toolbar .wrap { display: flex; align-items: center; gap: 10px; height: 60px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--bright); text-decoration: none; font-weight: 650; font-size: 17px;
  margin-right: auto;
}
.brand img { width: 30px; height: 30px; display: block; flex: none; }
.brand:hover { color: var(--bright); }

.toolbar nav { display: flex; align-items: center; gap: 6px; }
.toolbar nav a {
  color: var(--label); text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: 4px; border: 1px solid transparent;
}
.toolbar nav a:hover { background: var(--node); color: var(--bright); }
.toolbar nav a[aria-current="page"] { background: var(--node-selected); color: var(--bright); border-color: var(--separator); }
.toolbar .sep { width: 1px; height: 24px; background: var(--separator); margin: 0 4px; }
@media (max-width: 640px) {
  .toolbar nav a.optional, .toolbar .sep { display: none; }
  .toolbar nav a { padding: 7px 8px; }
  .brand span { display: none; }
}
@media (max-width: 400px) {
  .toolbar nav { gap: 2px; }
  .toolbar nav a { padding: 7px 4px; font-size: 13.5px; }
}

/* ---- buttons, drawn like the toolbar's own ------------------------------ */

.button {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 15px/1 var(--sans);
  padding: 13px 18px; border-radius: 5px;
  text-decoration: none; border: 1px solid var(--edge);
  background: var(--node); color: var(--bright);
}
.button:hover { background: var(--node-selected); color: var(--bright); }
.button.primary { background: var(--attention); color: #16181B; border-color: #C98A2E; }
.button.primary:hover { background: #FFC266; color: #16181B; }
.button svg { width: 17px; height: 17px; flex: none; }

/* ---- the canvas: a grid every so often, brighter every tenth ------------- */

.canvas {
  background-color: var(--canvas);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 240px 240px, 240px 240px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}

/* ---- the sawtooth rule: one cycle of the retrace the program is named for */

.saw { display: block; width: 100%; height: 10px; margin: 0; }

/* ---- type ---------------------------------------------------------------- */

h1, h2, h3, h4 { color: var(--bright); font-family: var(--sans); text-wrap: balance; }

h1 { font-size: clamp(38px, 6.4vw, 64px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 750; margin: 0; }
h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
h3 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; margin: 36px 0 0; }
h4 { font-size: 15.5px; font-weight: 650; margin: 0; }

p { margin: 14px 0 0; text-wrap: pretty; }

.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--attention); margin: 0 0 14px;
}

.lede { font-size: clamp(18px, 2vw, 21px); line-height: 1.55; color: var(--label); max-width: 40rem; }
.quiet { color: var(--muted); }

code, kbd {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--node); color: var(--label);
  padding: 1.5px 6px; border-radius: 4px;
}
kbd {
  border: 1px solid var(--separator); border-bottom-width: 2px;
  color: var(--bright); font-size: 0.82em; padding: 1px 6px; white-space: nowrap;
}

pre {
  font-family: var(--mono); font-size: 14px; line-height: 1.6;
  background: var(--canvas); color: var(--label);
  border: 1px solid var(--edge); border-radius: var(--radius);
  padding: 16px 18px; margin: 18px 0 0; overflow-x: auto;
  tab-size: 4;
}
pre code { background: none; padding: 0; font-size: inherit; color: inherit; border-radius: 0; }

/* The text view's colors, from Flyback.xshd. */
.t-com { color: #6C7482; font-style: italic; }
.t-key { color: #3FC8C8; font-weight: 700; }
.t-pipe { color: #E06AB8; font-weight: 700; }
.t-sink { color: #E05A5A; }
.t-dom { color: #4A9EDE; }
.t-sock { color: #A8CE52; }
.t-mod { color: #B484E0; }
.t-num { color: #E0A84A; }
.t-str { color: #4FC387; }

/* C# and XML, in the same palette: keywords cyan, strings green, comments quiet. */
.k { color: #3FC8C8; }
.s { color: #4FC387; }
.c { color: #6C7482; font-style: italic; }

ul, ol { margin: 14px 0 0; padding-left: 22px; }
li { margin: 7px 0; }
li::marker { color: var(--normalled); }

/*
  ---- cards ----------------------------------------------------------------

  A module is shown by a picture of one, taken by PatchShotTests or
  SkinShotTests. Nothing here draws a module, a socket or a wire, and nothing
  here should start to: the canvas is the only thing that knows what one looks
  like, and a second drawing of it goes stale the moment a module changes.
*/

.card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-top: 2px solid var(--accent, var(--separator));
  border-radius: var(--radius);
  padding: 16px 18px 18px;
}
.card > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  color: var(--bright); font-size: 15.5px; font-weight: 650; margin-bottom: 8px;
}
.card > header small { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.card > .body > p:first-child { margin-top: 0; }
.card p { font-size: 15px; line-height: 1.6; }

/* ---- windows: a screenshot framed as the app's own title bar ------------- */

figure { margin: 28px 0 0; }
figcaption { font-size: 13.5px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.clip iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: var(--window); }

.window {
  border: 1px solid var(--edge);
  border-radius: 8px;
  overflow: hidden;
  background: var(--window);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.window > .titlebar {
  display: flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  background: #1F1F1F; color: var(--label); font-size: 12px;
  border-bottom: 1px solid var(--edge);
}
.window > .titlebar img { width: 14px; height: 14px; }
.window > .titlebar .controls { margin-left: auto; display: flex; gap: 18px; color: var(--muted); letter-spacing: 0.1em; }
.window > img, .window > video, .window > .zoom > img { display: block; width: 100%; height: auto; }

.shot { border: 1px solid var(--edge); border-radius: var(--radius); display: block; width: 100%; height: auto; }

/*
  A screenshot of the whole window is unreadable once a phone has shrunk it, so
  each one is a link to the file itself, where the browser can zoom and pan.
*/
.zoom { display: block; position: relative; }
.zoom::after {
  content: "";
  position: absolute; right: 10px; bottom: 10px;
  width: 30px; height: 30px; border-radius: 5px;
  border: 1px solid var(--separator);
  background: rgba(16, 17, 20, 0.86)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23E9ECF1' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.6'/%3E%3Cpath d='M12.6 12.6 17.2 17.2M6.2 8.5h4.6M8.5 6.2v4.6'/%3E%3C/svg%3E")
    center / 16px 16px no-repeat;
  opacity: 0; transition: opacity 0.15s ease;
}
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; }
@media (hover: none) { .zoom::after { opacity: 1; } }

/* ---- the picture overlay (site.js) --------------------------------------- */

.lb-open, .lb-open body { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: rgba(10, 11, 13, 0.97);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox[hidden] { display: none; }
.lb-stage {
  position: relative; overflow: hidden; touch-action: none;
  margin: 56px 12px 0; cursor: zoom-out;
}
.lb-img {
  position: absolute; left: 0; top: 0; max-width: none;
  transform-origin: 0 0; user-select: none; -webkit-user-select: none;
  border-radius: 4px; box-shadow: 0 20px 60px -20px #000; cursor: zoom-in;
}
.lb-img.lb-animate { transition: transform 0.18s ease-out; }
.lb-zoomed .lb-img { cursor: grab; border-radius: 0; }
.lb-zoomed .lb-img:active { cursor: grabbing; }
.lb-bar {
  display: flex; align-items: baseline; gap: 16px;
  max-width: 60rem; width: 100%; margin: 0 auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
}
.lb-caption {
  flex: 1; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--label);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lb-count { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-button {
  position: absolute; width: 44px; height: 44px; border-radius: 6px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(34, 37, 42, 0.9); color: var(--bright); border: 1px solid var(--separator);
}
.lb-button:hover { background: var(--node-selected); }
.lb-button svg { width: 20px; height: 20px; }
.lb-button[hidden] { display: none; }
.lb-close { top: 8px; right: 12px; }
.lb-prev, .lb-next { top: calc(50% - 22px); }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
.lb-hint {
  display: none; position: absolute; top: 18px; left: 16px; margin: 0;
  font-size: 12.5px; color: var(--muted);
}
@media (hover: none) { .lb-hint { display: block; } }
.lb-zoomed .lb-hint { display: none; }
.lb-zoomed .lb-prev, .lb-zoomed .lb-next { opacity: 0; pointer-events: none; }
/* On a phone the arrows would sit on the picture; a swipe does their job. */
@media (hover: none) and (max-width: 720px) { .lb-prev, .lb-next { display: none; } }

/* ---- notes ---------------------------------------------------------------- */

.note {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-left: 3px solid var(--attention);
  border-radius: 5px;
  padding: 14px 18px;
  margin: 24px 0 0;
  font-size: 15.5px;
}
.note > :first-child { margin-top: 0; }
.note .tag {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--attention);
}

/* ---- tables --------------------------------------------------------------- */

.scroll { overflow-x: auto; margin: 22px 0 0; }
table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 460px; }
caption { text-align: left; font-size: 13px; color: var(--muted); padding-bottom: 10px; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--grid-major); vertical-align: top; }
th { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--separator); }
td code { font-size: 12.8px; white-space: nowrap; }

/* ---- the tutorials, one card each, at the top of the tutorials page ------ */

.tutorials { display: grid; gap: 14px; margin-top: 28px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tutorials a.card { display: block; color: inherit; text-decoration: none; transition: border-color 120ms, background 120ms; }
.tutorials a.card:hover { background: var(--node); border-color: var(--separator); }
.tutorials a.card > header { font-size: 15px; }
.tutorials a.card p { margin-bottom: 0; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }

/* ---- docs layout: contents on the left, a column of prose ---------------- */

.doc-head { padding: 64px 0 36px; }
.doc-head .lede { margin-top: 18px; }

.doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; padding: 40px 0 96px; }
@media (min-width: 1000px) {
  .doc { grid-template-columns: 220px minmax(0, 1fr); gap: 64px; }
  .doc nav.toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; }
}

nav.toc { font-size: 14px; line-height: 1.45; }
nav.toc p { font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
nav.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
nav.toc li { margin: 0; }
nav.toc a {
  display: block; color: var(--label); text-decoration: none;
  padding: 5px 10px; border-left: 2px solid var(--separator);
}
nav.toc a:hover { color: var(--bright); border-left-color: var(--attention); background: var(--panel); }

.doc main { min-width: 0; max-width: var(--measure); }
.doc section { padding-top: 8px; }
.doc section + section { margin-top: 56px; }
.doc section h2 .num {
  display: block; margin-bottom: 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--attention);
  font-variant-numeric: tabular-nums;
}
.doc section h2 + p { margin-top: 16px; }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 42px; margin: 18px 0; }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--node); border: 1px solid var(--separator);
  color: var(--bright); font-size: 13px; font-weight: 650;
  display: grid; place-items: center;
}

/* ---- skins: the backgrounds a plugin may give its own module ------------
   Pictures of real modules, drawn by the canvas — see SkinShotTests. */

/* Capped at the shots' own width, so a module is never drawn larger than the
   canvas drew it. */
.skins { display: grid; gap: 18px 16px; margin: 24px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(240px, 294px)); }
.skins figure { margin: 0; }
.skins img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.skins figcaption { margin-top: 8px; font-size: 13.5px; }
.skins figcaption strong { color: var(--bright); }

.tiers { display: grid; gap: 14px; margin: 24px 0 0; }
@media (min-width: 720px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
.tiers .where { display: block; margin-top: 10px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---- footer --------------------------------------------------------------- */

.site-foot { background: var(--toolbar); border-top: 1px solid var(--edge); padding: 28px 0 36px; font-size: 14px; color: var(--muted); }
.site-foot .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.site-foot a { color: var(--label); text-decoration: none; }
.site-foot a:hover { color: var(--attention); }
.site-foot .brand-foot { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--label); }
.site-foot .brand-foot img { width: 22px; height: 22px; }

/* The address is shown whole and copied by clicking the code: retyping one is how money goes nowhere. */
.site-foot .donate { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--edge); gap: 16px; align-items: center; }
.site-foot .donate .ask { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.site-foot .donate code { user-select: all; overflow-wrap: anywhere; }
.site-foot .donate .said { color: var(--muted); min-height: 1em; }
.site-foot .qr { padding: 0; line-height: 0; cursor: pointer; background: none; border: 0; border-radius: 6px; }
.site-foot .qr:hover, .site-foot .qr:focus-visible { outline: 2px solid var(--attention); outline-offset: 3px; }
.site-foot .qr img { display: block; border-radius: 6px; }

/* ---- the audio player: a toolbar button beside the track's waveform ---- */

.player.ready { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 12px; align-items: center; }
.player.ready audio { display: none; }
.player .play {
  grid-row: 1 / span 2;
  width: 40px; height: 40px; border-radius: 5px;
  display: grid; place-items: center;
  background: var(--toolbar); color: var(--bright);
  border: 1px solid var(--edge); cursor: pointer;
}
.player .play:hover { background: var(--node-selected); }
.player .play svg { width: 16px; height: 16px; }
.player .wave { display: block; width: 100%; height: 40px; cursor: pointer; touch-action: none; }
.player .wave rect { fill: var(--separator); }
.player .wave rect.done { fill: var(--accent, var(--attention)); }
.player .time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; justify-content: space-between; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}