/* Website presentation only. Halfy's canvas, motion and export colors are preserved. */
:root {
  color-scheme: light;
  font-family: var(--font-body);
  color: var(--color-blue);
  background: var(--color-bg);
  --paper: var(--color-bg);
  --ink: var(--color-blue);
  --blue: var(--color-blue);
  --cobalt: var(--color-indigo);
  --sand: var(--color-gold);
  --muted: var(--color-muted);
  --line: color-mix(in srgb, var(--color-blue) 16%, transparent);
  --panel: color-mix(in srgb, var(--color-white) 65%, var(--color-bg));
}
html, body { min-width: 0; min-height: 0; background: var(--color-bg); }
body, button, input, select { font-family: var(--font-body); }
::selection { color: var(--color-bg); background: var(--color-blue); }
.app-shell { position: relative; height: auto; min-height: 0; overflow: visible; }
.studio-header { display: flex; justify-content: flex-end; height: auto; flex-basis: auto; min-height: 56px; padding: 8px 12px; position: static; background: var(--color-bg); border-color: var(--line); }
.wci-brand, .main-nav { display: none; }
.header-actions { height: auto; padding: 0; gap: 8px; flex-wrap: wrap; }
.local-status { color: var(--muted); }
.local-status i { background: var(--color-blue); box-shadow: none; }
.export-button { position: static; min-width: 126px; height: 42px; padding: 0 16px; border: 1px solid var(--blue); border-radius: 100px; box-shadow: none; background: var(--blue); color: var(--paper); }
.export-frame { background: transparent; color: var(--blue); }
.export-frame:hover { background: color-mix(in srgb, var(--blue) 6%, var(--paper)); }
.studio-body { display: block; flex: auto; }
.workspace { overflow: visible; padding: 12px; background: var(--color-bg); }
.workspace-heading { margin-bottom: 10px; justify-content: flex-end; }
.workspace-heading > div:first-child { display: none; }
.source-meta { color: var(--blue); font-size: 10px; }
.source-meta span, .source-meta small { color: var(--muted); }
.stage-frame { max-width: none; border-color: var(--line); background: var(--panel); border-radius: 12px; overflow: hidden; }
.stage-topline, .stage-readout, .stage-readout > div, .motion-transport, .motion-timeline { border-color: var(--line); }
.stage-topline { color: var(--muted); letter-spacing: .1em; }
.stage-mat { height: clamp(280px, 84vw, 520px); min-height: 280px; max-height: none; padding: 12px; background: var(--color-bg); }
.halftone-stage { box-shadow: 0 10px 36px color-mix(in srgb, var(--blue) 8%, transparent); }
.halftone-stage.is-dragging { box-shadow: 0 0 0 3px var(--blue); }
.transport-play { color: var(--blue); border-color: var(--line); border-radius: 50%; }
.transport-play:hover { color: var(--paper); }
.transport-state strong, .timeline-caption, .stage-readout strong { color: var(--blue); }
.transport-state > span, .frame-note, .timeline-caption > span, .timeline-beats, .stage-readout span { color: var(--muted); }
.stage-readout .warning strong, .stage-readout .strong-warning strong { color: var(--color-text); }
.preset-area { display: block; max-width: none; margin-top: 10px; }
.preset-label { display: none; }
.preset-strip { grid-template-columns: repeat(5, minmax(108px, 1fr)); gap: 7px; padding: 2px; }
.preset-strip button { color: var(--blue); border-color: var(--line); border-radius: 12px; min-height: 62px; }
.preset-strip button small, .preset-strip button.is-active small { color: var(--muted); }
.preset-strip button:hover, .preset-strip button.is-active { color: var(--blue); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 6%, var(--paper)); }
.control-rail { display: block; overflow: visible; border-color: var(--line); background: var(--color-bg); }
.rail-heading { display: none; }
.control-group, .control-group summary { border-color: var(--line); }
.control-group summary { color: var(--blue); min-height: 52px; }
.motion-group summary > span { font-size: 8px; font-weight: inherit; line-height: inherit; }
.control-content, .motion-content, .motion-group { background: var(--panel); }
.control-group summary { background: var(--color-bg); }
.motion-content { max-width: none; }
.control-label > span, .select-field select, .mode-switch label, .color-field, .demo-button, .motion-number, .motion-patterns button, .motion-playback button, .motion-toggles, .motion-interaction { border-color: var(--line); }
.control-label > span, .select-field select, .motion-number { border-radius: 6px; }
.motion-patterns button { border-radius: 12px; }
.motion-playback button, .demo-button, .reset-button, .swap-button, .rail-upload { border-radius: 100px; }
.reset-button, .swap-button { border-color: var(--line); }
.mode-switch label:first-of-type { border-radius: 8px 0 0 8px; }
.mode-switch label:last-of-type { border-radius: 0 8px 8px 0; }
.local-note span { color: var(--blue); }
.video-progress, .export-notice, .error-toast { position: fixed; top: 12px; bottom: auto; left: 12px; max-width: calc(100% - 24px); border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--blue); box-shadow: 0 10px 32px color-mix(in srgb, var(--blue) 10%, transparent); }
.video-progress button, .video-download { border-radius: 100px; }
.video-progress button { border-color: var(--line); color: var(--blue); }
.particle-hint { color: var(--muted); background: color-mix(in srgb, var(--paper) 85%, transparent); }

@media (min-width: 621px) {
  .control-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .motion-group, .local-note { grid-column: 1 / -1; }
  .motion-content { max-width: 560px; margin: 0 auto; }
  .stage-mat { height: clamp(360px, 52vw, 560px); min-height: 360px; padding: 16px; }
}
@media (min-width: 901px) {
  html, body { height: 100%; overflow: hidden; }
  .app-shell { height: 100vh; height: 100dvh; overflow: hidden; }
  /* Keep exports over the control rail so the canvas starts at the viewport edge. */
  .studio-header { position: absolute; top: 0; right: 0; width: 320px; min-height: 58px; padding: 8px 12px; border-left: 1px solid var(--line); }
  .header-actions { width: 100%; flex-wrap: nowrap; }
  .local-status { display: none; }
  .header-actions .export-button { flex: 1; min-width: 0; height: 40px; padding-inline: 10px; }
  .studio-body { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; }
  .control-rail { display: block; min-height: 0; max-height: none; overflow-y: auto; border-top: 0; padding-top: 58px; }
  .workspace { display: flex; flex-direction: column; min-height: 0; gap: 10px; padding: 10px; overflow: auto; }
  .workspace-heading { flex: none; width: 100%; max-width: none; min-height: 24px; margin: 0; }
  .stage-frame { display: flex; flex: 1; flex-direction: column; min-height: 340px; width: 100%; margin: 0; }
  .stage-topline { flex: none; height: 28px; }
  .stage-mat { flex: 1; height: auto; min-height: 160px; max-height: none; padding: 12px; }
  .motion-transport { flex: none; min-height: 44px; padding: 6px 12px; }
  .motion-timeline { flex: none; padding: 8px 12px 6px; }
  .stage-readout { flex: none; min-height: 42px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stage-readout > div { padding: 7px 10px; }
  .stage-readout > div:nth-child(-n+2) { border-bottom: 0; }
  .stage-readout > div:nth-child(2) { border-right: 1px solid var(--line); }
  .preset-area { flex: none; width: 100%; margin: 0; }
  .preset-strip button { min-height: 48px; }
}
@media (max-width: 620px) {
  .studio-header { padding: 8px 12px; }
  .header-actions { width: 100%; justify-content: flex-end; }
  .header-actions .export-button { min-height: 40px; padding-inline: 14px; }
  .stage-topline { padding-inline: 10px; font-size: 6px; }
  .source-meta { display: none; }
}