/* Tidalytic dark visual system, based on the site's charcoal/white/blue palette.
   Styles are presentational only; model and inputs live in physics.js/app.js. */
:root {
  color-scheme: dark;
  --ink: #f7f8fa;
  --muted: #bec6ce;
  --teal: #8eb6dd;
  --paper: #28292b;
  --line: #4b4e52;
  --sand: #a49b89;
  --spilling: #73b5cd;
  --plunging: #d9ae7b;
  --surging: #c3a1c2;
  --font: 'Avenir Next', 'Century Gothic', 'Segoe UI', Arial, sans-serif;
  --panel: #313336;
  --panel-raised: #383a3e;
  --panel-hover: #42454a;
  --subtext: #b9c2cc;
  --faint: #9da9b5;
  --blue-tint: #8eb6dd24;
}
html {background: var(--paper)}
body {background:var(--paper); color:var(--ink); font-family:var(--font)}
:focus-visible {outline-color:var(--teal)!important}
::selection {background:#8eb6dd67; color:white}
.site-header {border-color:#ffffff20; padding-top:23px; padding-bottom:23px}
.brand {font-size:13px; letter-spacing:.3px; text-transform:none}
.brand svg {stroke:var(--teal); width:31px}
.brand-light {color:#c7cdd3; font-weight:400}
.experiment-label {color:var(--faint)}
.tidalytic-back {color:var(--teal);font-size:11px}
.text-button {color:#eaf1f8; font-weight:500}
.text-button span {color:var(--teal)}
.intro {padding:45px 0 34px}
.eyebrow {color:var(--teal); font-weight:600}
.little-line {background:var(--teal)}
h1 {font-family:var(--font); font-weight:600; letter-spacing:-1.7px; line-height:1.12}
h1 em {font-weight:600; color:var(--teal)}
.intro-copy p {color:#e3e6eb; font-size:15px; line-height:1.75}
.intro-note {color:var(--subtext)}
.live-dot {background:#85c5d9;box-shadow:0 0 0 3px #8eb6dd15}
.presets-label {color:var(--subtext)}
.presets-label strong {color:#f7f8fa}
.preset {background:var(--panel);border-color:var(--line);border-radius:13px;transition:background .18s,border-color .18s,box-shadow .18s}
.preset:hover {background:var(--panel-hover); border-color:#7d9ab7}
.preset.active {background:#374655; border-color:var(--teal); box-shadow:inset 0 0 0 1px #8eb6dd44}
.preset svg {stroke:#cfb69b}
.preset svg .mini-water {stroke:var(--teal)}
.preset strong {color:#f2f4f6;font-size:11px}
.preset small {color:var(--subtext);font-size:9px}
.preset-arrow {color:var(--teal)}
.profile-panel,.controls,.regime-card,.lens-card,.metrics {background:var(--panel);border-color:var(--line);border-radius:13px}
.panel-top,.stage-footer,.controls-heading {color:#f3f6fa}
.panel-top {padding-top:18px;padding-bottom:18px}
.section-number {border-color:#747e89;color:#b8c6d4}
h2 {font-weight:650}
.check-control {color:var(--subtext);font-size:10px}
.check-control input {accent-color:var(--teal)}
.small-button {background:#3b4046;border-color:#59606a;color:#f1f5fa;border-radius:7px}
.small-button:hover {background:#4a525b}
.small-button.selected {background:var(--blue-tint);border-color:#719cc5}
.canvas-wrap {background:#242d35}
.canvas-badge {background:#222a32ec;border-color:#8eb6dd50;color:#eaf3fc;font-size:9px}
.canvas-badge .live-dot {box-shadow:none}
.drag-tip {background:#32383de9;border-color:#777f8680;color:#f5f6f8;font-size:10px}
.hover-readout {background:#161d24f0;border:1px solid #719cc599;color:#fff}
.stage-footer {background:var(--panel);border-top:1px solid var(--line)}
.icon-button {background:#42484f;border-color:#616d7b;color:#ebf2fa}
.icon-button:hover {background:#506171}
.icon-button svg {stroke:#f5f8ff;fill:#f5f8ff}
.playback select,.step-button {color:#e1e7ee}
.plot-legend {color:var(--subtext);font-size:9px}
.water-key {background:#5babc4}
.bed-key {background:#b8a999}
.break-key {background:#d9ae7b}
.controls {background:var(--panel)}
.reset-button {color:var(--teal)}
.control-heading label {font-size:11px;font-weight:600}
.control-heading sub {color:#a8b5c2}
.control-heading output {font-family:var(--font);color:#fff;font-weight:600}
.control-heading output small {color:#c1ccd7}
input[type=range] {background:linear-gradient(to right,var(--teal) var(--fill,30%),#5b626a var(--fill,30%));height:4px}
input[type=range]::-webkit-slider-thumb {background:var(--teal);border-color:var(--panel);box-shadow:0 0 0 1px #9fc7f0}
input[type=range]::-moz-range-thumb {background:var(--teal);border-color:var(--panel);box-shadow:0 0 0 1px #9fc7f0}
.range-ends,.control-help,.profile-status {color:var(--subtext)}
.control-help {font-size:10px}
.profile-mode {background:var(--blue-tint);color:#c4e0fb}
.coordinates-button {color:var(--teal);font-size:10px}
.advanced summary {color:var(--subtext);font-size:10px}
.model-warning {background:#4a392d;color:#ffe4c2;border-color:#986c47}
.regime-card .eyebrow {color:var(--teal)}
.regime-card h2,.metric strong {font-family:var(--font);color:#fff}
.regime-card h2 span {color:var(--teal)}
.regime-description {color:#cad3dc;font-size:11px}
.xi-heading span,.meter-labels,.meter-footnote {color:var(--subtext)}
.meter-labels small {color:#9eafbe}
.xi-pointer {background:#f9fbfd;box-shadow:0 0 0 2px var(--panel)}
.lens-card {background:#282f36}
.lens-heading span {color:var(--teal)}
.lens-card>p {color:#bbc7d2;font-size:9px}
.metric>span {color:#bdc8d3;font-size:10px}
.metric>span sub,.metric>small,.metric strong small {color:#a7b5c4}
.insight-icon {background:#8eb6dd28;color:var(--teal)}
.insight strong {color:#f6f8fa}
.insight p {color:var(--subtext);font-size:11px}
.page-footer {color:#aeb8c3}
.model-dialog,.profile-dialog {background:#303236;border:1px solid #60636b;color:#f4f7fa;box-shadow:0 30px 110px #0009}
.model-dialog::backdrop,.profile-dialog::backdrop {background:#090e13b8}
.dialog-header h2 {font-family:var(--font)}
.dialog-header .eyebrow {color:var(--teal)}
.dialog-close {background:#474c53;color:#fff}
.dialog-tabs button {color:#b4c1cd}
.dialog-tabs button.active {color:var(--teal);border-bottom-color:var(--teal)}
.formula-row>span {color:var(--teal)}
.formula-row p,.model-limits p,.profile-dialog>p {color:#c0cad4}
.formula-row code {color:#dceeff;background:#202831}
.source-note {color:#b4bec8}
.source-note a,.code-toolbar a {color:var(--teal)}
.code-toolbar {color:var(--subtext)}
.code-panel pre {background:#1c232b;color:#dce8f2}
.profile-dialog th {color:#c7d6e4}
.profile-dialog td {border-top-color:var(--line)}
.profile-dialog td:first-child {color:#b4c0cd}
.profile-dialog input[type=number] {background:#252a30;border:1px solid #69717b;color:#fff}
.primary-button {background:var(--teal);color:#1c2732;border-radius:22px;font-weight:600}
.primary-button:hover {background:#a5c9eb}
.coordinate-error {color:#ffd3a0!important}
.view-select {background:#262e36ed;border:1px solid #7893ac80;color:#f2f6fa;font-size:10px}
select option {color:#fff;background:#272d33}
/* Inside the Squarespace iframe, Squarespace already supplies the brand/navigation. */
html.is-embedded .site-header {display:none}
html.is-embedded .intro {padding-top:23px}
html.is-embedded .page-footer {padding-bottom:20px}
@media(max-width:680px) {
  .site-header {padding:16px 18px}
  .intro {padding:28px 0 23px}
  html.is-embedded .intro {padding-top:18px}
  h1 {font-size:clamp(31px,9vw,41px);letter-spacing:-1.3px}
  .intro-copy p {font-size:12px}
  .preset small {font-size:9px}
  .control-heading label {font-size:10px}
  .control-help {font-size:9px}
  .range-ends {font-size:8px}
  .metric>span {white-space:normal}
}