:root {
  --cream: #FFF8EE;
  --paper: #FFFDF8;
  --ink: #5B4636;
  --muted: #7A6A55;
  --orange: #E08A2B;
  --green: #3DA17A;
  --dash: #F0C98A;
  --font: 'Segoe UI Rounded', 'Comic Sans MS', 'Nunito', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font); line-height: 1.6;
}
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--paper);
  border-bottom: 2px dashed var(--dash); position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; color: var(--orange); font-size: 18px; }
.nav-toggle {
  display: none; /* desktop: ladder is always visible, so no toggle needed */
  font-size: 20px; background: none; border: none; cursor: pointer; color: var(--ink);
}
.layout { display: flex; align-items: flex-start; }
.ladder {
  flex: 0 0 220px; padding: 16px; position: sticky; top: 60px;
}
.ladder button {
  display: block; width: 100%; text-align: left; margin: 6px 0; padding: 10px 14px;
  border: 2px dashed var(--dash); border-radius: 14px; background: var(--paper);
  color: var(--ink); font-family: inherit; font-size: 14px; cursor: pointer;
}
.ladder button.active { border-style: solid; border-color: var(--orange); color: var(--orange); font-weight: 700; }
.ladder button .check { color: var(--green); margin-left: 6px; }
.content { flex: 1; padding: 24px; max-width: 760px; margin: 0 auto; }
.content h1 { color: var(--orange); }
.card {
  background: var(--paper); border: 2px dashed var(--dash);
  border-radius: 18px; padding: 18px; margin: 18px 0;
}
canvas { width: 100%; height: auto; background: var(--paper); border-radius: 14px; }
.slider-row { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.slider-row label { min-width: 96px; font-weight: 700; color: var(--muted); }
.slider-row output { font-weight: 700; color: var(--orange); min-width: 64px; }
input[type=range] { flex: 1; accent-color: var(--orange); }
.meter { height: 14px; border-radius: 8px; background: var(--dash); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--green); transition: width .1s; }
button.action {
  background: var(--orange); color: #fff; border: none; border-radius: 14px;
  padding: 10px 18px; font-family: inherit; font-weight: 700; cursor: pointer;
}
button.toggle { border: 2px dashed var(--dash); background: var(--paper); border-radius: 12px; padding: 8px 14px; cursor: pointer; font-family: inherit; }
button.toggle.on { border-style: solid; border-color: var(--green); color: var(--green); font-weight: 700; }
@media (max-width: 720px) {
  .nav-toggle { display: block; } /* mobile: ladder is hidden, so show the toggle */
  .ladder { position: fixed; top: 56px; left: 0; right: 0; bottom: 0;
    background: var(--cream); z-index: 9; display: none; flex: none; width: 100%; }
  .ladder.open { display: block; }
  .content { padding: 16px; }
}