/* The HDRcue window in its dark theme, laid out at 1344 x 850 like the app's own
   screenshots and scaled as one piece to fit the frame. Colors, sizes and motion follow the
   app's design, so the demo looks and moves like the real window. */
:root {
  --chrome: #1c2029;
  --content: #25282c;
  --card: #2b2b2b;
  --card-hover: #323232;
  --control: rgba(255, 255, 255, 0.055);
  --control-hover: rgba(255, 255, 255, 0.085);
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-2: rgba(255, 255, 255, 0.16);
  --text: #ffffff;
  --text-2: #c8c8c8;
  --text-3: #9a9a9a;
  --accent: #60cdff;
  --accent-hover: #5abbe8;
  --on-accent: #000000;
  --accent-soft: rgba(96, 205, 255, 0.12);
  --subtle: rgba(255, 255, 255, 0.06);
  --ok: #6ccb5f;
  --ok-bg: #393d1b;
  --track: #1c1c1c;
  --plate: #454545;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  /* Fluent 2 durations and curves, the same ones the app uses */
  --fast: 0.1s;
  --norm: 0.18s;
  --slow: 0.28s;
  --decel: cubic-bezier(0.1, 0.9, 0.2, 1);
  --accel: cubic-bezier(0.7, 0, 1, 0.5);
  --move: cubic-bezier(0.55, 0.55, 0, 1);
  --spring: cubic-bezier(0.3, 1.6, 0.5, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--chrome);
}

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

button { font: inherit; color: inherit; }
b { font-weight: 600; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* demo.js sizes the frame to the largest 1344 x 850 box that fits and scales the stage into it */
.frame { position: absolute; container-type: size; }

.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1344px;
  height: 850px;
  overflow: hidden;
  transform-origin: 0 0;
}

.scene { position: absolute; inset: 0; transition: opacity 0.4s var(--move); }
.scene.fading { opacity: 0; }

/* icons are drawn as outlines, like Segoe Fluent Icons */
.i {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i.dots { fill: currentColor; stroke: none; }

/* window */
.win {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--chrome);
}

.tb {
  height: 45px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding-left: 15px;
  font-size: 12px;
  flex: none;
}

.tb .logo { width: 16px; height: 16px; display: block; }
.caps { margin-left: auto; align-self: flex-start; display: flex; }
.caps span { width: 46px; height: 30px; display: grid; place-items: center; }
.caps .i { width: 10px; height: 10px; stroke-width: 1; }

.wbody { flex: 1; display: flex; min-height: 0; }

.wnav {
  position: relative;
  width: 211px;
  padding: 5px 5px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

.wnav a {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 36px;
  padding: 0 12px;
  border-radius: 5px;
}

.wnav a.on { background: var(--subtle); }
.wnav .spacer { flex: 1; }

.navind {
  position: absolute;
  left: 4px;
  top: 15px;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--accent);
}

.wc {
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 26px 67px 34px 33px;
  background: var(--content);
  border-top-left-radius: 8px;
  border-top: 1px solid var(--stroke);
  border-left: 1px solid var(--stroke);
}

.wc h1 { font-size: 28px; font-weight: 600; line-height: 1.32; margin: 0 0 4px; }
.lead { color: var(--text-2); margin: 0 0 20px; }
.sect { font-weight: 600; margin: 22px 0 8px; }
.sect.first { margin-top: 0; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.small { font-size: 12.5px; }
.muted { color: var(--text-2); }

.card {
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 7px;
  padding: 14px 16px;
}

/* controls */
.btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: var(--control);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.btn .i { width: 14px; height: 14px; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; padding: 0 10px; }
.btn.primary[disabled] { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.45); }

.tgl {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid var(--text-2);
  position: relative;
  flex: none;
}

.tgl::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-2);
  top: 3px;
  left: 4px;
}

.tgl.on { background: var(--accent); border-color: var(--accent); }
.tgl.on::after { left: 23px; background: var(--on-accent); }

.iconbtn { width: 32px; height: 32px; border-radius: 5px; display: grid; place-items: center; margin-left: 6px; }

.pill {
  font-size: 12px;
  line-height: 18px;
  padding: 2px 10px 2px 8px;
  border-radius: 11px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  background: var(--subtle);
  color: var(--text-2);
  white-space: nowrap;
  flex: none;
}

.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.ok .dot { background: var(--ok); }
.pill.plain { padding: 2px 10px; }

.chip {
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--on-accent);
  letter-spacing: 0.03em;
}

.chip.mute { background: var(--subtle); color: var(--text-3); }

/* rules page */
.head { align-items: center; margin-bottom: 18px; }
.head .lead { margin: 0; }
.now { display: flex; gap: 11px; margin-bottom: 38px; }
.now .card { flex: 1; display: flex; align-items: center; gap: 12px; }
.now .card > .i { width: 22px; height: 22px; color: var(--text-2); stroke-width: 0.9; }
.now .small { margin-top: 1px; }

.rule {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 6px;
}

.rule.off { opacity: 0.62; }

.appic {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.line1 { display: flex; align-items: baseline; gap: 8px; }
.line1 .trigger { color: var(--text-2); }
.line2 { display: flex; gap: 4px; margin-top: 6px; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  line-height: 18px;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--subtle);
  color: var(--text-2);
  white-space: nowrap;
}

.tag .i { width: 12px; height: 12px; }
.tag.change { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* add app steps */
.steps { display: flex; gap: 6px; align-items: center; margin-bottom: 22px; font-size: 13px; }
.steps .s { display: flex; gap: 8px; align-items: center; color: var(--text-3); }

.steps .n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--stroke-2);
  display: grid;
  place-items: center;
  font-size: 11.5px;
}

.steps .n .i { width: 12px; height: 12px; stroke-width: 1.3; }
.steps .s.on { color: var(--text); font-weight: 600; }
.steps .s.on .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.steps .s.done .n { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.steps .line { width: 34px; height: 1px; }

.tabsrow { align-items: flex-end; }

.tabs {
  flex: 1;
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--stroke);
}

.tabs a { padding: 15px 14px 8px; color: var(--text-2); position: relative; }
.tabs a.on { color: var(--text); font-weight: 600; }

.tabs a.on::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 260px;
  height: 33px;
  margin-bottom: 23px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom-color: rgba(255, 255, 255, 0.55);
  background: var(--control);
  color: var(--text-2);
}

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.tile {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 7px;
  border: 1px solid var(--stroke);
  background: var(--card);
  position: relative;
  min-width: 0;
}

.tile.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.tile .name { font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.tile .sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.tile .sub.has { color: var(--accent); font-weight: 600; }
.tile .sub .i { width: 10px; height: 10px; stroke-width: 1.4; }
.tile .run { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }

.browse { margin-top: 12px; }

.wfoot {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--stroke);
}

.map { position: relative; margin: 4px auto 6px; }

.mon {
  position: absolute;
  border-radius: 6px;
  border: 2px solid var(--stroke-2);
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 13px;
}

.mon small { color: var(--text-3); font-size: 11px; }
.mon .chip { position: absolute; top: 6px; right: 6px; }
.mon.sel { border-color: var(--accent); background: var(--accent-soft); }
.mon .badge { position: absolute; left: 6px; top: 6px; font-size: 11px; color: var(--accent); font-weight: 700; }

.box { padding: 0; overflow: hidden; }
.hdrcard { margin-top: 20px; }
.opt { display: flex; align-items: center; gap: 16px; padding: 12px 16px; }
.opt > .i { margin-top: 1px; }
.opt .label { flex: 1; }
.opt .label small { display: block; color: var(--text-2); font-size: 12.5px; }

.seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 1fr);
  position: relative;
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 2px;
  background: var(--track);
}

/* the chosen segment sits on the darker track as a lighter, outlined plate */
.seg::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: calc(2px + var(--i, 0) * (100% - 4px) / var(--n, 1));
  width: calc((100% - 4px) / var(--n, 1));
  border-radius: 4px;
  background: var(--plate);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 0 0 1px var(--stroke-2);
}

.seg button {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  height: 29px;
  padding: 0 16px;
  border-radius: 4px;
}

.seg button.on { color: var(--accent); font-weight: 600; }

.radio {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--stroke);
  border-radius: 7px;
  background: var(--card);
  margin-bottom: 6px;
}

.radio .r { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--text-2); flex: none; }
.radio.on { border-color: var(--accent); }
.radio.on .r { border: 6px solid var(--accent); background: var(--on-accent); }
.radio > .i { width: 20px; height: 20px; color: var(--text-2); stroke-width: 1; }
.radio .small { margin-top: 1px; }

.summary { margin-top: 20px; padding: 15px 18px; }
.sentence { font-size: 17px; line-height: 1.6; }
.sentence .k { color: var(--accent); font-weight: 600; }
.summary .small { margin-top: 6px; }

/* motion: entrances run once when a node is inserted, and the patcher keeps nodes alive */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes slideX { from { opacity: 0; transform: translateX(var(--dx, 28px)); } }
@keyframes listIn { from { opacity: 0; transform: translateY(8px); } }
@keyframes popIn { from { opacity: 0; transform: scale(0.5); } }
@keyframes tileIn { from { opacity: 0; transform: scale(0.94); } }

.wc { animation: fadeIn var(--norm) var(--decel) backwards; }
.stepbody { animation: slideX var(--slow) var(--decel) backwards; }
.rule { animation: listIn var(--slow) var(--decel) backwards; animation-delay: calc(var(--d, 0) * 40ms); }
.now .card { animation: listIn var(--slow) var(--decel) backwards; }
.now .card + .card { animation-delay: 40ms; }
.tile { animation: tileIn var(--norm) var(--decel) backwards; animation-delay: calc(var(--d, 0) * 18ms); }
.radio { animation: listIn var(--slow) var(--decel) backwards; }
.mon .badge, .steps .n .i { animation: popIn var(--norm) var(--spring) backwards; }
.fadein { animation: fadeIn var(--norm) var(--decel) backwards; }

/* motion: state changes */
.btn {
  transition: background-color var(--fast), color var(--fast), opacity var(--norm),
    transform var(--fast) var(--decel);
}

.tile {
  transition: border-color var(--fast), background-color var(--fast), box-shadow var(--fast),
    transform var(--fast) var(--decel);
}

.seg::before { transition: left var(--slow) var(--move); }
.seg button { transition: color var(--norm), background-color var(--fast), transform var(--fast) var(--decel); }
.steps .s { transition: color var(--norm); }
.steps .n { transition: background-color var(--norm), color var(--norm), border-color var(--norm); }

.steps .line {
  background: linear-gradient(var(--accent), var(--accent)) left / 0% 100% no-repeat, var(--stroke-2);
  transition: background-size var(--slow) var(--move);
}

.steps .line.done { background-size: 100% 100%; }
.mon { transition: border-color var(--norm), background-color var(--norm); }

/* the demo pointer stands in for the mouse, so hover and press are classes, not :hover */
.btn.is-hover { background: var(--control-hover); }
.btn.primary.is-hover { background: var(--accent-hover); }
.btn.is-press { transform: scale(0.96); }
.tile.is-hover { border-color: var(--stroke-2); }
.tile.sel.is-hover { border-color: var(--accent); }
.tile.is-press { transform: scale(0.98); }
.seg button.is-hover:not(.on) { background: var(--subtle); }
.seg button.is-press { transform: scale(0.96); }

/* the pointer, drawn like the Windows arrow; its tip is the point it clicks */
.pointer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 21px;
  height: 30px;
  margin: -1px 0 0 -1px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.pointer svg { display: block; width: 100%; height: 100%; transform-origin: 1px 1px; transition: transform var(--fast) var(--decel); }
.pointer.down svg { transform: scale(0.88); }

.ripple {
  position: absolute;
  z-index: 19;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}

@keyframes ripple {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(1.3); opacity: 0; }
}

/* the step caption is not scaled with the window, so it stays readable in a small frame */
.bubble {
  position: absolute;
  left: 50%;
  bottom: 5.5%;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.7em;
  width: max-content;
  max-width: min(88%, 38em);
  margin: 0;
  padding: 0.55em 1.1em 0.55em 0.55em;
  border-radius: 0.75em;
  border: 1px solid rgba(96, 205, 255, 0.45);
  background: rgba(8, 12, 30, 0.9);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  font-size: clamp(11px, 1.6cqw, 18px);
  font-weight: 600;
  line-height: 1.4;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--move);
}

.bubble.show { opacity: 1; animation: bubbleIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes bubbleIn {
  from { opacity: 0; transform: translate(-50%, 12px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.bubble-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 50%;
  color: #001a33;
  background: var(--accent);
}

/* reduced motion: everything lands on its end state at once */
[data-motion=off] *,
[data-motion=off] *::before,
[data-motion=off] *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}