:root {
  color-scheme: light;
  --background: #eeedf5;
  --surface: #fffefe;
  --ink: #242344;
  --muted: #4e4b68;
  --border: #c3bfd8;
  --accent: #51459e;
  --field: #8278b1;
  --wash: #ebe6fa;
  --stage: #f1eff7;
  font: 16px/1.53 "Instrument Sans", Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; color: var(--ink); background: var(--background); }
a { color: var(--accent); text-underline-offset: .22em; }
.wrap { width: min(1160px, calc(100% - 3rem)); margin-inline: auto; }
.mast { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 62px; border-bottom: 1px solid var(--border); }
.brand { color: var(--ink); text-decoration: none; font-weight: 800; }
.intro { padding: 3rem 0 1.65rem; }
h1 { font: 700 clamp(2.75rem, 7vw, 5.35rem)/.99 "Instrument Serif", Georgia, serif; letter-spacing: -.055em; margin: 0; }
.intro p { color: var(--muted); max-width: 43rem; font-size: 1.1rem; margin: .75rem 0 0; }
h2 { margin: 0; font-size: clamp(1.35rem, 3.3vw, 1.84rem); letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; }
.panel { min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: clamp(.95rem, 2.6vw, 1.6rem); background: var(--surface); }
.workspace { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.44fr); gap: .85rem; align-items: start; }
.head { display: flex; justify-content: space-between; align-items: start; gap: .65rem; flex-wrap: wrap; }
label { display: block; margin: .56rem 0 .2rem; font-size: .91rem; font-weight: 750; }
small, .muted { color: var(--muted); font-weight: 450; }
.muted { font-size: .87rem; margin: .48rem 0 .3rem; }
input, select, textarea { min-width: 0; width: 100%; min-height: 40px; border: 1px solid var(--field); border-radius: 5px; padding: .45rem .55rem; color: var(--ink); background: white; font: inherit; }
textarea { display: block; resize: vertical; }
.check { display: flex; align-items: center; gap: .48rem; }
input[type="checkbox"] { width: 1.14rem; min-height: 1.14rem; accent-color: var(--accent); }
button { min-height: 41px; white-space: nowrap; background: var(--accent); color: white; border: 1px solid var(--accent); border-radius: 5px; padding: .42rem .72rem; font: inherit; font-weight: 750; cursor: pointer; }
button:not(:disabled):hover { filter: brightness(.9); }
button:disabled { opacity: .48; cursor: default; }
.secondary { background: transparent; color: var(--accent); }
.compact { min-height: 32px; font-size: .78rem; padding: .24rem .44rem; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.subheading { margin-top: 1.2rem; }
.joined { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .45rem; }
#save { margin-top: .58rem; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin: .75rem 0; }
.metrics > div { background: var(--wash); border-radius: 5px; padding: .5rem .55rem; overflow-wrap: anywhere; }
dt { color: var(--muted); font-size: .76rem; font-weight: 700; }
dd { margin: .12rem 0 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.scroll { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .85rem; }
caption { text-align: left; margin-bottom: .3rem; font-weight: 750; }
th,td { padding: .38rem .42rem; border: 1px solid var(--border); text-align: left; white-space: nowrap; }
th { background: var(--wash); }
td:nth-child(5) { white-space: normal; overflow-wrap: anywhere; min-width: 8rem; }
.guide { max-width: 48rem; padding: 2.4rem 0 3rem; color: var(--muted); }
.guide h2 { color: var(--ink); }
@media (max-width: 800px) {
  .wrap { width: calc(100% - 1.5rem); }
  .intro { padding-top: 2rem; }
  .workspace { grid-template-columns: 1fr; }
}

h1 { font-family: "Instrument Sans", Inter, system-ui, sans-serif; }
.files { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-top: .5rem; }
.files input { margin-top: .25rem; }
.files small { display: block; overflow-wrap: anywhere; margin-top: .2rem; }
.threshold { max-width: 350px; margin-top: .75rem; }
.threshold label { display: flex; justify-content: space-between; }
.threshold output { font-variant-numeric: tabular-nums; }
input[type="range"] { padding: 0; border: 0; accent-color: var(--accent); min-height: 36px; }
.result { margin-top: .85rem; }
.views { display: flex; flex-wrap: wrap; gap: .35rem; }
.views button { background: transparent; color: var(--accent); }
.views button[aria-pressed="true"] { background: var(--accent); color: white; }
.canvas-wrap { display: grid; place-items: center; background: var(--stage); border: 1px solid var(--border); border-radius: 6px; padding: .6rem; margin-top: .6rem; }
canvas { display: block; max-width: 100%; height: auto; outline: 1px solid var(--border); }
@media(max-width: 650px) { .files { grid-template-columns: 1fr; gap: .25rem; } }