@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300&family=Nunito+Sans:ital,wght@0,300;0,400;0,600;1,300&display=swap');

/* Light, not screens.
   The ground is warm and nearly black. The only light on the page is the sound itself, drawn
   on the canvas. Nothing here glows, nothing is boxed, nothing is framed, and while the sound
   plays the words step back so the page can sit beside a bed at night. */
:root {
  --ground: #0b0907;
  --sheet: #17120c;
  --ink: #efe3d0;
  --ink-2: rgba(239, 227, 208, 0.74);
  --ink-3: rgba(239, 227, 208, 0.5);
  --amber: 255, 176, 0;
  --amber-ink: #ffcf6e;
  --danger: #d8785f;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Without this the engine assumes a light page and paints every NATIVE control white - the
     date picker, the time picker and the number fields. */
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* A long value must never push the page sideways - a pasted licence key can do it on a tablet too. */
html, body { overflow-x: hidden; }

body {
  background: var(--ground);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.page { min-height: 100vh; padding-bottom: 64px; }

/* ================= HEADER ================= */
.lab-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 720px; margin: 0 auto; padding: 28px 24px 0 24px;
}
.header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.title-block h1 {
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink-2);
}
.subtitle {
  font-family: var(--serif); font-style: italic; font-size: 16px; font-weight: 300;
  color: var(--ink-3); margin-top: 2px;
}
.sys-status { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); white-space: nowrap; }
.sys-status a { color: var(--amber-ink); text-decoration: none; }
.sys-status a:hover { text-decoration: underline; }
.lamp { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--amber), 0.85); }
.lamp-off { background: rgba(239, 227, 208, 0.18); }

.note-strip { max-width: 720px; margin: 10px auto 0 auto; padding: 8px 24px; font-size: 14px; color: var(--ink-3); }
.note-strip strong { color: var(--ink-2); font-weight: 600; }

/* ================= THE LIGHT ================= */
.visualizer-section { margin: 4px 0 0 0; padding: 0; }
.visualizer-panel { position: relative; }
.visualizer-canvas {
  display: block; width: 100%; height: 46vh; min-height: 260px; max-height: 520px;
  background: var(--ground);
}

/* ================= LAYOUT ================= */
.lab-grid {
  max-width: 720px; margin: 8px auto 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr; gap: 64px;
}
.panel { padding: 0; }
.panel-kicker {
  font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(var(--amber), 0.72);
}
.panel-title {
  margin: 10px 0 10px 0; font-family: var(--serif); font-size: 32px; font-weight: 300;
  line-height: 1.15; color: var(--ink); letter-spacing: 0;
}
.panel-copy { margin: 0 0 26px 0; font-size: 16px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }

.catalog-price { margin: 0 0 26px 0; }
.catalog-price-label { font-size: 14px; color: var(--ink-3); margin-bottom: 4px; }
.catalog-price-amount {
  font-family: var(--serif); font-size: 46px; font-weight: 300; line-height: 1.05; color: var(--amber-ink);
}
.catalog-price-terms { margin-top: 6px; font-size: 14px; color: var(--ink-3); }

/* ================= BUTTONS ================= */
.btn {
  font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0.01em;
  color: var(--ink-2); background: rgba(var(--amber), 0.07); border: 0; border-radius: 14px;
  padding: 13px 22px; cursor: pointer; transition: background 0.3s ease, color 0.3s ease;
}
.btn:hover:not(:disabled) { background: rgba(var(--amber), 0.13); color: var(--ink); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-quiet { background: transparent; color: var(--ink-3); padding: 8px 12px; }
.btn-quiet:hover:not(:disabled) { background: rgba(var(--amber), 0.07); }
.btn-primary {
  width: 100%; background: rgba(var(--amber), 0.15); color: var(--amber-ink); font-weight: 600;
  padding: 16px 20px; border-radius: 16px;
}
.btn-primary:hover:not(:disabled) { background: rgba(var(--amber), 0.24); color: #ffe0a0; }

.macro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; }
.btn-macro {
  text-align: left; background: transparent; border: 0; border-radius: 16px;
  padding: 18px 18px 16px 18px; color: var(--ink);
  font-family: var(--serif); font-size: 24px; font-weight: 300; line-height: 1.1;
  cursor: pointer; transition: background 0.4s ease, color 0.4s ease;
}
.btn-macro:hover:not(.macro-locked) { background: rgba(var(--amber), 0.06); }
.btn-macro.active { color: var(--amber-ink); background: rgba(var(--amber), 0.11); }
.btn-macro-note,
.btn-routing-note {
  display: block; margin-top: 6px; font-family: var(--sans); font-size: 13px; font-weight: 300;
  line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
.btn-macro.active .btn-macro-note,
.btn-routing.active .btn-routing-note { color: rgba(255, 207, 110, 0.72); }
.btn-macro.macro-locked,
.btn-routing.macro-locked { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

.studio-routing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.btn-routing {
  text-align: left; background: transparent; border: 0; border-radius: 16px; padding: 16px 18px;
  color: var(--ink); font-family: var(--sans); font-size: 17px; font-weight: 400;
  cursor: pointer; transition: background 0.4s ease, color 0.4s ease;
}
.btn-routing:hover:not(.macro-locked) { background: rgba(var(--amber), 0.06); }
.btn-routing.active { color: var(--amber-ink); background: rgba(var(--amber), 0.11); }
.btn-routing-kicker {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(var(--amber), 0.6); margin-bottom: 4px;
}

.status-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 4px 0 22px 0;
}
.status-text { font-size: 15px; color: var(--ink-3); }
.status-text span { color: var(--ink-2); }
.btn-stop {
  background: transparent; border: 0; border-radius: 999px; padding: 10px 16px; color: var(--ink-3);
  font-family: var(--sans); font-size: 15px; cursor: pointer; transition: color 0.3s ease, background 0.3s ease;
}
.btn-stop:hover:not(:disabled) { color: var(--ink); background: rgba(216, 120, 95, 0.12); }
.btn-stop:disabled { opacity: 0.3; cursor: default; }
.btn-toggle {
  background: rgba(var(--amber), 0.05); border: 0; border-radius: 999px; padding: 10px 18px;
  color: var(--ink-3); font-family: var(--sans); font-size: 15px; cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn-toggle:hover { color: var(--ink-2); background: rgba(var(--amber), 0.09); }
.btn-toggle.active { background: rgba(var(--amber), 0.15); color: var(--amber-ink); }
.toggle-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px 0; }

/* ================= FORM INPUTS ================= */
.field-row { display: grid; gap: 14px; margin-bottom: 16px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 7px; }
.field span { font-size: 14px; color: var(--ink-3); }

input[type="text"], input[type="email"], input[type="date"], input[type="time"],
input[type="number"], select {
  width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 12px;
  background: rgba(239, 227, 208, 0.06); border: 0; color: var(--ink);
  font-family: var(--sans); font-size: 16px; outline: none; transition: background 0.25s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="date"]:focus,
input[type="time"]:focus, input[type="number"]:focus, select:focus {
  background: rgba(var(--amber), 0.1); outline: 2px solid rgba(var(--amber), 0.45); outline-offset: 1px;
}
input::placeholder { color: var(--ink-3); }
select option { background: var(--sheet); color: var(--ink); }

.consent { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; margin-bottom: 8px; }
.consent input[type="checkbox"] {
  accent-color: #ffb000; width: 18px; height: 18px; margin-top: 3px; cursor: pointer; flex: 0 0 18px;
}
.consent span { font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--ink-2); }
.consent a { color: var(--amber-ink); }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: rgba(var(--amber), 0.22); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -8.5px;
  border-radius: 50%; background: #ffb000; border: 0;
}
input[type="range"]::-moz-range-track { height: 3px; border-radius: 999px; background: rgba(var(--amber), 0.22); }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; border: 0; background: #ffb000; }

.blend-container { margin: 6px 0 0 0; }
.blend-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.blend-header span { font-size: 15px; color: var(--ink-2); }
.blend-val { color: var(--ink-3); }
.blend-ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }

/* ================= TUNE ================= */
.tune { margin-top: 26px; }
.tune summary {
  list-style: none; cursor: pointer; font-size: 16px; color: var(--ink-2); padding: 10px 0;
  display: flex; align-items: center; gap: 10px;
}
.tune summary::-webkit-details-marker { display: none; }
.tune summary::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--amber), 0.6);
  flex: 0 0 6px; transition: transform 0.3s ease;
}
.tune[open] summary::before { transform: scale(1.5); }
.tune-body { padding: 2px 0 6px 0; }
.tune-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 4px 0; }
.tune-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.tune-actions .control-note { margin: 0; }
.lab-row { margin-top: 10px; }
.control-note.err { color: var(--danger); }

/* ================= READOUTS (kept for the engine, not shown) ================= */
.readout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.readout { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-3); }
.readout.wide { grid-column: 1 / -1; }
.ro-label { color: var(--ink-3); }
.ro-value { color: var(--ink-2); }
#roChecksum { word-break: break-all; max-width: 60%; text-align: right; }

#profileCard { margin: 10px 0 0 0; }
#profileCard .ro-label { display: block; font-size: 14px; }
#profileCardName { display: block; font-family: var(--serif); font-size: 22px; font-weight: 300; color: var(--ink); margin: 2px 0 10px 0; }
#profileCard .btn { background: rgba(var(--amber), 0.1); color: var(--amber-ink); padding: 10px 16px; font-size: 14px; }
#profileCard .btn:hover { background: rgba(var(--amber), 0.18); color: #ffe0a0; }

.console { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.console .err { color: var(--danger); }

.deliverables-list { list-style: none; padding: 0; margin: 0 0 22px 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.deliverables-list li { padding-left: 18px; position: relative; }
.deliverables-list li::before {
  content: ''; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(var(--amber), 0.7);
}

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.compare h3 { font-family: var(--serif); font-size: 20px; font-weight: 300; color: var(--ink); margin-bottom: 8px; }
.compare p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* ================= LEGAL FOOTER ================= */
.legal-footer { max-width: 720px; margin: 56px auto 0 auto; padding: 0 24px; }
.legal-footer p { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--ink-3); text-wrap: pretty; }
.legal-footer .fine-print { margin-top: 10px; }
.legal-footer a { color: var(--ink-2); }

/* ================= OVERLAYS & MODALS =================
   No align-items:center and no fixed height: a modal taller than the viewport top-aligns and
   the backdrop scrolls, so the last checkbox and the Accept button can always be reached. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: flex;
  justify-content: center; padding: 24px; background: rgba(11, 9, 7, 0.88);
  animation: fadeIn 0.4s ease both;
  overflow-y: auto;
}
.modal-content {
  width: 100%; max-width: 440px; border-radius: 22px; padding: 30px 28px 26px 28px;
  background: var(--sheet); margin: auto; animation: floatIn 0.5s ease both;
}
@media (max-height: 700px) {
  .modal-content { padding: 20px 20px 18px 20px; }
}
.modal-copy { font-size: 14px; line-height: 1.6; color: var(--ink-2); text-align: left; margin-bottom: 14px; }
.modal-copy p { margin: 0 0 8px 0; }
.modal-copy strong { color: var(--ink); font-weight: 600; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }
.modal-actions .btn-primary { flex: 1.5; width: auto; }

.dots-container { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 22px; }
.dot { width: 18px; height: 3px; border-radius: 2px; background: rgba(239, 227, 208, 0.14); transition: background 0.4s ease; }
.dot.active { background: rgba(var(--amber), 0.85); }
.dot.done { background: rgba(var(--amber), 0.4); }

.wizard-title-block { text-align: center; margin-bottom: 22px; }
.wizard-kicker { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--amber), 0.7); }
.wizard-title { margin: 8px 0 6px 0; font-family: var(--serif); font-size: 26px; font-weight: 300; color: var(--ink); }
.wizard-sub { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.wizard-actions { display: flex; gap: 10px; margin-top: 26px; }

.compile-overlay {
  position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: var(--ground);
}
.compile-content { width: 100%; max-width: 380px; text-align: center; animation: floatIn 0.5s ease both; }
.compile-title { font-family: var(--serif); font-size: 26px; font-weight: 300; color: var(--ink); margin-bottom: 8px; }
.compile-status-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
.progress-track { height: 3px; border-radius: 2px; background: rgba(var(--amber), 0.12); overflow: hidden; }
.progress-fill { height: 100%; width: 0%; border-radius: 2px; background: rgba(var(--amber), 0.75); transition: width 0.25s ease; }
.compile-hash { margin-top: 14px; font-size: 13px; color: var(--ink-3); word-break: break-all; }

/* ================= CONTROL NOTES ================= */
.control-note { margin-top: 10px; font-size: 14px; font-weight: 300; line-height: 1.6; color: var(--ink-3); }
.control-note.lead { margin: 0 0 14px 0; }
.control-note strong { color: var(--ink-2); font-weight: 600; }

.restore-line { font-size: 15px; color: var(--ink-3); }
.restore-line a { color: var(--amber-ink); text-decoration: none; font-weight: 600; }
.restore-line a:hover { text-decoration: underline; }
.restore-line.restore-top { margin: 0 0 22px 0; }

/* ================= THE QUIET SURFACE =================
   While the sound plays and nothing is touched, the words step back and the light stays. Any
   touch, key or movement brings them back (a parked mouse does not - hover alone keeps nothing
   lit). Nothing is removed from the page - it only dims - so every control keeps its place, its
   size and its keyboard focus. */
.surface { transition: opacity 1.8s ease; }
body.is-playing.is-resting .surface { opacity: 0.06; }
body.is-playing.is-resting .surface:focus-within { opacity: 1; transition-duration: 0.35s; }
/* A person who asked their device for more contrast never gets a dimmed control. */
@media (prefers-contrast: more) {
  body.is-playing.is-resting .surface { opacity: 1; }
}

/* ================= KEYFRAMES ================= */
@keyframes floatIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================= TOUCH TARGETS (coarse pointers only) =================
   Every control gets a real finger-sized hit area on a touch screen. Scoped so the desktop
   design is unchanged. */
@media (pointer: coarse) {
  button, .btn, .btn-stop, .btn-toggle, .btn-routing,
  select, input[type="text"], input[type="email"], input[type="date"],
  input[type="time"], input[type="number"], a.btn {
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 176, 0, 0.14);
  }

  .btn-stop, .btn-toggle { padding-top: 15px; padding-bottom: 15px; }

  .consent { min-height: 48px; align-items: center; }
  .consent input[type="checkbox"] { width: 24px; height: 24px; margin-top: 0; flex: 0 0 24px; }

  input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 48px; background: transparent;
    touch-action: none; cursor: pointer;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px; background: rgba(255, 176, 0, 0.22);
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 28px; height: 28px; margin-top: -12px; border-radius: 50%;
    background: #ffb000; border: 0;
  }
  input[type="range"]::-moz-range-track {
    height: 4px; border-radius: 999px; background: rgba(255, 176, 0, 0.22);
  }
  input[type="range"]::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%; border: 0; background: #ffb000;
  }

  .btn-macro { touch-action: manipulation; }
}

/* Respect the operating system's reduce-motion setting: this is a calm product, and a person
   who asked their device for less motion gets less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================= SMALL PHONE =================
   Two columns of words do not fit a phone. Nothing here changes the desktop design. */
@media (max-width: 560px) {
  .field-row.two,
  .readout-grid,
  .studio-routing-grid,
  .compare { grid-template-columns: 1fr; }

  /* Inline flex rows must be allowed to wrap: at 360px a wrapped row beats a cut-off word. */
  [style*="display: flex"],
  [style*="display:flex"] { flex-wrap: wrap; }

  /* The header wraps HERE and not in the base rule: brand and status cannot both fit a phone,
     but at desktop width they sit on one row and line up. */
  .lab-header { flex-wrap: wrap; }

  .lab-header,
  .lab-grid,
  .legal-footer { padding-left: 18px; padding-right: 18px; }

  .panel-title { font-size: 28px; }
}