:root {
  --paper: #f6f7f5;
  --surface: #fff;
  --ink: #143644;
  --muted: #53646b;
  --line: #dce2de;
  --soft: #eef1ed;
  --brass: #c0952f;
  --growth: #287d55;
  --growth-soft: #e1efe7;
  --amber: #8a5900;
  --amber-soft: #f5edda;
  --danger: #a13d35;
  --danger-soft: #f8ebe8;
  --stage: #e9eeea;
  --ink-soft: #214753;
  --ink-muted: #c1d3d4;
  --shadow: 0 28px 90px #1436441a;
  --font: "Instrument Sans", sans-serif;
  --display: "Schibsted Grotesk", sans-serif;
  --radius: 12px;
}
.bamboo-symbol.mascot-avatar {background:transparent;border:0;overflow:visible;}
.mascot-avatar img {display:block;width:100%;height:100%;object-fit:contain;}
.ask-welcome .welcome-mascot {display:block;width:130px;height:146px;object-fit:contain;margin:0 auto 8px;}
.ask-welcome .mascot-greeting {font-weight:650;color:var(--ink);font-size:16px;margin:0 0 10px;}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--stage);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: wait;
  opacity: 0.5;
}
button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 4px;
}
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
button {
  background: none;
  border: 0;
}
h1,
h2,
h3,
h4,
p {
  margin: 0;
}
h1,
h2,
h3,
h4,
.number {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}
h1 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -1.1px;
  font-weight: 500;
}
h2 {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.7px;
  font-weight: 500;
}
h3 {
  font-size: 17px;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.35px;
}
h4 {
  font-size: 16px;
  font-weight: 550;
}
.small-label {
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
}
.muted {
  color: var(--muted);
}
.fine {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.4px;
}
.icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm {
  width: 18px;
  height: 18px;
}
.icon-button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  flex-shrink: 0;
}
.icon-button.small {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
}
.arrow-button {
  display: flex;
  gap: 7px;
  align-items: center;
  min-height: 48px;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}
.button {
  min-height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 99px;
  padding: 12px 22px;
  font-weight: 550;
  font-size: 15px;
  border: 1px solid var(--ink);
}
.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.button.white {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}
.button.block {
  width: 100%;
}
.link-button {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  min-height: 44px;
  padding: 8px 0;
  font-size: 14px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--soft);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 550;
}
.pill.positive {
  background: var(--growth-soft);
  color: var(--growth);
}
.pill.attention {
  background: var(--amber-soft);
  color: var(--amber);
}
.dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.section-heading h2 {
  font-size: 20px;
}
.section-heading button {
  font-size: 13px;
  min-height: 44px;
  font-weight: 550;
  padding: 0 0 0 8px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.stack {
  display: flex;
  flex-direction: column;
}
.divider {
  height: 1px;
  background: var(--line);
  margin: 24px 0;
}
.ledger-rule {
  height: 3px;
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--brass);
}
#stage {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr 440px 1fr;
  gap: clamp(30px, 5vw, 100px);
  max-width: 1440px;
  margin: auto;
  padding: 40px 54px;
  align-items: center;
}
.device {
  width: 440px;
  height: min(910px, calc(100dvh - 80px));
  min-height: 720px;
  background: var(--paper);
  border: 7px solid var(--ink);
  border-radius: 46px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.device-top {
  height: 36px;
  flex-shrink: 0;
  padding: 8px 26px 0;
  font: 600 12px var(--display);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.phone-status {
  font-size: 12px;
}
.stage-note {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 0;
}
.wordmark {
  display: flex;
  align-items: center;
  font: 600 29px var(--display);
  letter-spacing: -1.3px;
  gap: 10px;
}
.wordmark-dot {
  color: var(--brass);
  margin-left: -8px;
}
.brand-mark {
  width: 26px;
  height: 32px;
  display: inline-block;
  position: relative;
  border-right: 3px solid currentColor;
  transform: rotate(8deg);
}
.brand-mark:before,
.brand-mark:after {
  content: "";
  position: absolute;
  background: currentColor;
  width: 15px;
  height: 8px;
  border-radius: 16px 0 16px 0;
  right: 3px;
  top: 7px;
  transform: rotate(35deg);
}
.brand-mark:after {
  top: 20px;
  width: 13px;
  right: -15px;
  transform: rotate(135deg);
}
.stage-copy .small-label {
  font-size: 14px;
}
.stage-copy h1 {
  font-size: clamp(35px, 3.4vw, 50px);
  line-height: 1.13;
  letter-spacing: -2.1px;
  margin: 22px 0 25px;
}
.stage-copy h1 em {
  font-style: normal;
  color: var(--growth);
}
.stage-copy p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
}
.stage-line {
  width: 45px;
  height: 2px;
  background: var(--brass);
  margin: 28px 0;
}
.stage-copy p.stage-fine {
  font-size: 13px;
  line-height: 1.65;
}
.stage-bottom {
  font-size: 12px;
  color: var(--muted);
}
.stage-guide {
  max-width: 245px;
}
.stage-guide h2 {
  margin: 14px 0 26px;
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.8px;
}
.stage-guide > button {
  display: block;
  text-align: left;
  border-top: 1px solid var(--line);
  width: 100%;
  padding: 18px 0;
  font: 400 18px/1.45 var(--display);
  letter-spacing: -0.4px;
  transition: padding 0.15s;
}
.stage-guide > button:hover {
  padding-left: 8px;
}
.stage-guide > button span {
  display: block;
  font: 12px var(--font);
  letter-spacing: 0;
  color: var(--muted);
  margin-top: 10px;
}
.stage-guide > p {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 20px;
}
#app {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  position: relative;
}
#app::-webkit-scrollbar {
  display: none;
}
.page {
  padding: 22px 22px 28px;
  animation: arrive 0.2s ease;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 23px;
}
.page-header .small-label {
  display: block;
  margin-bottom: 6px;
}
.page-header h1 {
  font-size: 25px;
}
.avatar {
  border: 1px solid var(--line);
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface);
}
.hello-header {
  margin-bottom: 24px;
}
.hello-header h1 {
  font-size: 25px;
}
.hello-header .small-label {
  font-size: 13px;
}
#nav {
  height: 79px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 8px 10px 11px;
  z-index: 5;
}
#nav button {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  min-height: 48px;
}
#nav button .nav-icon {
  padding: 4px 14px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  height: 31px;
}
#nav button[aria-current="page"] {
  font-weight: 650;
  color: var(--ink);
}
#nav button[aria-current="page"] .nav-icon {
  background: var(--soft);
}
.hero {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 23px 23px 20px;
  position: relative;
  overflow: hidden;
}
.hero .pill {
  background: var(--ink-soft);
  color: var(--ink-muted);
  font-size: 12px;
  padding: 5px 10px;
}
.hero-label {
  font-size: 14px;
  color: var(--ink-muted);
  margin-top: 23px;
}
.hero-value {
  font: 500 64px/1.08 var(--display);
  letter-spacing: -3.5px;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.hero-value .currency {
  font-size: 38px;
  vertical-align: 11px;
  margin-right: 2px;
  letter-spacing: -2px;
}
.hero-caption {
  font-size: 14px;
  color: var(--ink-muted);
  margin-top: 6px;
}
.hero-art {
  position: absolute;
  right: 20px;
  top: 57px;
  width: 75px;
  height: 115px;
  color: var(--brass);
  opacity: 0.7;
  pointer-events: none;
}
.hero-footer {
  margin-top: 25px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hero-footer span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--ink-muted);
}
.hero-footer button {
  color: var(--paper);
  font-size: 12px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
}
.hero-footer .icon {
  width: 15px;
  height: 15px;
}
.bamboo-insight {
  display: grid;
  grid-template-columns: 35px 1fr;
  gap: 12px;
  margin: 24px 0 17px;
}
.bamboo-symbol {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
}
.bamboo-symbol .icon {
  width: 19px;
  height: 19px;
}
.bamboo-insight .insight-label {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
}
.bamboo-insight p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.bamboo-insight button {
  min-height: 36px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  font-weight: 600;
}
.list {
  border-top: 1px solid var(--line);
}
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
}
.list-icon {
  width: 38px;
  height: 38px;
  background: var(--soft);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.list-icon .icon {
  width: 19px;
  height: 19px;
}
.list-row .row-copy {
  flex: 1;
  min-width: 0;
}
.list-row .row-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 550;
}
.list-row .row-copy small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
.list-row .row-value {
  font: 500 16px var(--display);
  text-align: right;
  white-space: nowrap;
}
.row-value small {
  display: block;
  font: 12px var(--font);
  color: var(--muted);
  margin-top: 4px;
}
.positive-text {
  color: var(--growth);
}
.goal-teaser {
  display: flex;
  gap: 16px;
  padding: 18px 0 3px;
  align-items: center;
}
.goal-thumbnail {
  width: 59px;
  height: 59px;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--growth-soft);
  color: var(--growth);
}
.goal-thumbnail .icon {
  width: 29px;
  height: 29px;
}
.goal-teaser .goal-text {
  flex: 1;
}
.goal-teaser h3 {
  font-size: 15px;
  margin-bottom: 5px;
}
.goal-teaser p {
  font-size: 12px;
  color: var(--muted);
}
.progress-track {
  height: 5px;
  background: var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.progress-track > span {
  height: 100%;
  display: block;
  background: var(--growth);
  border-radius: 10px;
}
.goal-text .progress-track {
  margin-top: 10px;
}
.demo-note {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  padding: 25px 0 0;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line);
  margin: 0 -22px 25px;
  padding: 0 22px;
  gap: 20px;
}
.tabs button {
  height: 48px;
  font-size: 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  padding: 0;
}
.tabs button[aria-selected="true"] {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}
.plan-heading {
  margin-bottom: 24px;
}
.plan-heading .small-label {
  margin-bottom: 5px;
  display: block;
}
.plan-heading .number {
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -1.5px;
}
.plan-heading p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.allocation-bar {
  display: flex;
  height: 13px;
  border-radius: 4px;
  overflow: hidden;
  gap: 3px;
  margin: 24px 0 8px;
}
.allocation-bar span {
  display: block;
  background: var(--ink);
}
.allocation-bar .everyday {
  opacity: 0.65;
}
.allocation-bar .buffer {
  background: var(--brass);
}
.allocation-bar .flexible {
  background: var(--growth);
}
.allocation-bar .goal {
  background: var(--growth);
  opacity: 0.5;
}
.allocation-bar .debt {
  background: var(--brass);
  opacity: 0.6;
}
.allocation-row {
  border-bottom: 1px solid var(--line);
  padding: 17px 0;
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 11px;
  align-items: center;
}
.allocation-row .category-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.allocation-row h3 {
  font-size: 15px;
}
.allocation-row p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.allocation-row .number {
  font-size: 18px;
}
.help-banner {
  margin: 23px 0;
  padding: 17px;
  background: var(--soft);
  border-radius: var(--radius);
  display: flex;
  gap: 13px;
}
.help-banner h3 {
  font-size: 14px;
}
.help-banner p {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.55;
}
.help-banner .icon {
  margin-top: 3px;
}
.quiet-action {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
}
.month-label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 22px;
  margin-bottom: 10px;
}
.debt-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--surface);
  margin-bottom: 23px;
}
.debt-card .debt-amount {
  font-size: 39px;
  letter-spacing: -1.6px;
  margin: 20px 0 3px;
}
.debt-card .row {
  align-items: flex-start;
}
.debt-card .debt-details {
  border-top: 1px solid var(--line);
  padding-top: 17px;
  margin-top: 21px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.debt-details small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 5px;
}
.debt-details strong {
  font: 500 18px var(--display);
}
.compare-section h2 {
  font-size: 20px;
}
.compare-section > p {
  font-size: 14px;
  color: var(--muted);
  margin: 9px 0 16px;
}
.amount-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 14px;
}
.amount-input > span {
  font: 500 22px var(--display);
}
.amount-input input {
  border: 0;
  background: transparent;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font: 500 22px var(--display);
  outline: 0;
}
.amount-input small {
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
.compare-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 18px;
}
.compare-controls .button {
  padding: 10px 17px;
}
.empty-inline {
  font-size: 13px;
  color: var(--muted);
  padding: 15px 0;
}
.grow-intro {
  font-size: 14px;
  color: var(--muted);
  margin-top: -10px;
  margin-bottom: 24px;
  max-width: 280px;
}
.goal-feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.house-art {
  height: 135px;
  background: var(--growth-soft);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--growth);
}
.house-art > svg {
  height: 130px;
  width: 240px;
  position: absolute;
  bottom: 0;
}
.house-art .pill {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--surface);
  color: var(--growth);
  font-size: 11px;
}
.goal-feature-body {
  padding: 21px;
}
.goal-feature h2 {
  font-size: 22px;
}
.goal-feature .goal-amount {
  margin: 20px 0 11px;
  font-size: 28px;
  letter-spacing: -1px;
}
.goal-amount span {
  font: 13px var(--font);
  color: var(--muted);
  margin-left: 3px;
  letter-spacing: 0;
}
.goal-feature .fine {
  margin: 11px 0 18px;
}
.goal-feature .button {
  min-height: 46px;
  font-size: 14px;
}
.goal-secondary {
  padding: 22px 0;
}
.goal-secondary .row {
  margin-bottom: 12px;
}
.goal-secondary p {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.goal-secondary .number {
  font-size: 18px;
}
.future-section {
  margin-top: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.future-section h2 {
  margin: 12px 0 10px;
  font-size: 23px;
}
.future-section > p {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 15px;
}
.future-section button {
  font-size: 14px;
}
.lesson-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 16px 0;
  text-align: left;
  width: 100%;
}
.lesson-row .lesson-num {
  font: 500 14px var(--display);
  color: var(--muted);
}
.lesson-row span:nth-child(2) {
  flex: 1;
  font-size: 14px;
}
.ask-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  background: var(--surface);
}
.ask-header {
  padding: 15px 22px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  background: var(--paper);
}
.ask-header h1 {
  font-size: 21px;
  letter-spacing: -0.6px;
}
.ask-header .fine {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
}
.ask-header .fine .dot {
  color: var(--growth);
}
.conversation {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 24px 22px 18px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.ask-welcome {
  padding: 8px 0 4px;
}
.ask-welcome > .bamboo-symbol {
  width: 45px;
  height: 45px;
  background: var(--paper);
  margin-bottom: 24px;
}
.ask-welcome h2 {
  font-size: 29px;
  line-height: 1.18;
  letter-spacing: -1.2px;
  font-weight: 500;
  max-width: 280px;
}
.ask-welcome > p {
  font-size: 14px;
  color: var(--muted);
  margin: 14px 0 24px;
  line-height: 1.6;
  max-width: 300px;
}
.starter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.starter {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px;
  text-align: left;
  min-height: 109px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.4;
}
.starter .icon {
  width: 20px;
  height: 20px;
}
.starter:hover {
  border-color: var(--ink);
}
.welcome-note {
  margin-top: 21px;
  display: flex;
  gap: 8px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  align-items: flex-start;
}
.welcome-note .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}
.composer-wrap {
  padding: 10px 14px 11px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface);
}
.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px 7px 6px 14px;
  background: var(--paper);
}
.composer:focus-within {
  border-color: var(--ink);
}
.composer textarea {
  resize: none;
  border: 0;
  outline: none;
  max-height: 112px;
  min-height: 38px;
  height: 38px;
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  padding: 9px 0 6px;
}
.composer textarea:focus-visible {
  outline: none;
}
.composer button {
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.composer .icon {
  width: 19px;
  height: 19px;
}
.composer-note {
  text-align: center;
  font-size: 10px;
  color: var(--muted);
  padding-top: 7px;
}
.message {
  margin-bottom: 27px;
}
.message.user {
  padding: 0 0 18px;
  border-bottom: 1px solid var(--line);
}
.message.user .author {
  font-size: 11px;
  color: var(--muted);
  font-weight: 550;
  margin-bottom: 7px;
}
.message.user p {
  font: 500 18px/1.45 var(--display);
  letter-spacing: -0.4px;
}
.message.assistant .author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
}
.message.assistant .author .bamboo-symbol {
  width: 25px;
  height: 25px;
}
.message.assistant .author .icon {
  width: 16px;
  height: 16px;
}
.message.assistant .answer {
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.message.assistant.failed .answer {
  color: var(--danger);
}
.tool-trace {
  font-size: 11px;
  color: var(--muted);
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}
.tool-trace summary {
  cursor: pointer;
  min-height: 28px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tool-trace div {
  padding: 3px 0 3px 20px;
}
.thinking {
  padding: 5px 0 14px;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 37px;
}
.thinking .thinking-dots {
  display: flex;
  gap: 3px;
}
.thinking i {
  width: 4px;
  height: 4px;
  background: var(--ink);
  border-radius: 50%;
  animation: breathe 1.4s ease-in-out infinite;
}
.thinking i:nth-child(2) {
  animation-delay: 0.2s;
}
.thinking i:nth-child(3) {
  animation-delay: 0.4s;
}
.response-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 17px;
  margin: 15px 0;
}
.response-card h3 {
  font-size: 16px;
  margin-bottom: 8px;
}
.response-card > p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 12px;
}
.response-card .card-row {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 12px;
  align-items: baseline;
}
.card-row > span {
  flex: 1;
  color: var(--muted);
}
.card-row strong {
  font: 500 14px var(--display);
  text-align: right;
  max-width: 60%;
  overflow-wrap: anywhere;
}
.card-row small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.card-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 14px 0 8px;
}
.card-metrics .number {
  font-size: 24px;
  line-height: 1.2;
  display: block;
}
.card-metrics .fine {
  font-size: 11px;
  margin-top: 5px;
}
.response-card .proposal-actions {
  margin-top: 15px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.proposal-actions .button {
  font-size: 13px;
  min-height: 43px;
  flex: 1;
  padding: 9px 15px;
}
.proposal-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 550;
  color: var(--growth);
  padding: 12px 0 0;
}
.response-card.purchase {
  border-top: 3px solid var(--growth);
}
.response-card.proposal {
  border-top: 3px solid var(--brass);
}
.mini-chart {
  width: 100%;
  height: 70px;
  margin: 10px 0;
  color: var(--growth);
}
.prompt-followups {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.prompt-followups button {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 12px;
  min-height: 38px;
}
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: #0c181d80;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(3px);
  animation: arrive 0.15s;
}
.sheet {
  width: 420px;
  max-height: min(84dvh, 780px);
  overflow: auto;
  background: var(--paper);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 10px 24px 26px;
  animation: sheetin 0.2s ease;
}
.sheet-handle {
  width: 32px;
  height: 4px;
  background: var(--line);
  border-radius: 9px;
  margin: 2px auto 7px;
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 19px;
}
.sheet-header h2 {
  font-size: 23px;
}
.sheet p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.sheet .math-total {
  padding-top: 17px;
  margin: 15px 0 19px;
}
.math-total strong {
  font: 500 30px var(--display);
}
.math-row {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.math-row strong {
  font: 500 16px var(--display);
}
.sheet .button.block {
  margin-top: 20px;
}
.sheet .sheet-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 22px 0 7px;
}
.sheet .sheet-input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.sheet .sheet-list {
  margin: 16px 0;
  padding: 0;
  list-style: none;
}
.sheet-list li {
  border-top: 1px solid var(--line);
  padding: 15px 0;
  font-size: 14px;
}
.sheet-list li strong {
  display: block;
  margin-bottom: 5px;
}
.sheet-list li p {
  font-size: 12px;
}
.sheet .response-card {
  background: var(--surface);
}
.sheet .receipt {
  padding: 17px;
  background: var(--growth-soft);
  border-radius: var(--radius);
  color: var(--growth);
  margin: 15px 0;
}
.receipt .icon {
  margin-bottom: 8px;
}
.receipt h3 {
  margin-bottom: 8px;
}
.receipt p {
  color: var(--growth);
  font-size: 13px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
  font-size: 14px;
}
.setting-hint {
  font-size: 12px;
  color: var(--muted);
}
.theme-switch {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 6px 13px;
  font-size: 12px;
}
.error-banner {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  margin: 12px 0;
}
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink-muted);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
  z-index: 100;
  max-width: 90vw;
  box-shadow: var(--shadow);
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.loading-page {
  padding: 40px 24px;
  font-size: 14px;
  color: var(--muted);
}
.projection-form label {
  display: block;
  font-size: 12px;
  margin: 16px 0 7px;
  color: var(--muted);
}
.projection-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
.empty-state {
  padding: 22px 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}
body.dark {
  --paper: #0c181d;
  --surface: #122229;
  --ink: #edf3f1;
  --muted: #b0c1c4;
  --line: #2e454c;
  --soft: #1d343d;
  --growth: #84c9a1;
  --growth-soft: #1a3b2f;
  --brass: #d2b467;
  --amber: #e6c278;
  --amber-soft: #403724;
  --danger: #f0b2a8;
  --danger-soft: #462925;
  --stage: #091418;
  --ink-soft: #30515b;
  --ink-muted: #bdd1d4;
}
body.dark .hero {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
body.dark .hero-footer button {
  color: var(--ink);
}
body.dark .hero .pill {
  color: var(--ink);
}
body.dark .device {
  border-color: var(--line);
}
body.dark .button.white {
  background: var(--ink);
  color: var(--paper);
}
body.dark .hero-art {
  color: var(--brass);
}
@keyframes arrive {
  from {
    opacity: 0.65;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes sheetin {
  from {
    transform: translateY(15px);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes breathe {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}
@media (min-width: 1600px) {
  #stage {
    max-width: 1550px;
    grid-template-columns: 1fr 460px 1fr;
    gap: 120px;
  }
  .device {
    width: 460px;
  }
}
@media (max-width: 1150px) {
  #stage {
    grid-template-columns: 1fr 430px;
    gap: 50px;
    padding: 30px 45px;
    max-width: 1000px;
  }
  .device {
    width: 430px;
    height: calc(100dvh - 60px);
  }
  .stage-guide {
    display: none;
  }
}
@media (max-width: 760px) {
  body {
    background: var(--paper);
  }
  #stage {
    display: block;
    padding: 0;
    min-height: 100dvh;
    max-width: 500px;
  }
  .stage-note,
  .stage-guide {
    display: none;
  }
  .device {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .device-top {
    display: none;
  }
  #nav {
    height: calc(74px + env(safe-area-inset-bottom));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .page {
    padding-top: 24px;
  }
  .overlay-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .sheet {
    width: 100%;
    max-width: 500px;
    max-height: 91dvh;
    border-radius: 24px 24px 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
  #toast {
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100vw - 32px);
  }
  .ask-header {
    padding-top: 20px;
  }
  .hero {
    padding: 24px;
  }
  .hero-value {
    font-size: 66px;
  }
  .hero-footer {
    margin-top: 27px;
  }
  .hero-art {
    right: 24px;
    top: 60px;
  }
}
@media (max-width: 359px) {
  .page {
    padding-left: 17px;
    padding-right: 17px;
  }
  .hero {
    padding: 20px;
  }
  .hero-footer span {
    font-size: 10px;
  }
  .hero-footer button {
    font-size: 11px;
  }
  .hero-art {
    width: 60px;
    right: 20px;
  }
  .conversation {
    padding-left: 17px;
    padding-right: 17px;
  }
  .starter {
    padding: 12px;
    font-size: 12px;
  }
  .card-metrics .number {
    font-size: 21px;
  }
  .tabs {
    margin-left: -17px;
    margin-right: -17px;
    padding-left: 17px;
    padding-right: 17px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.page {
  animation: none;
}
.hero .pill {
  gap: 7px;
}
.hero .pill .icon {
  width: 14px;
  height: 14px;
}
.stage-copy h1 em {
  color: inherit;
}
.lesson-num {
  display: none;
}

.icon-button.small {
  width: 48px;
  height: 48px;
}
.hero-footer button {
  min-height: 48px;
}
.bamboo-insight button {
  min-height: 48px;
}
.section-heading button,
.link-button,
.theme-switch {
  min-height: 48px;
}
.proposal-actions .button {
  min-height: 48px;
}
.composer button {
  width: 48px;
  height: 48px;
}
.prompt-followups button {
  min-height: 48px;
}

/* Agency surfaces follow the accepted Bamboo Ink hierarchy. */
.provenance { display:flex; align-items:center; gap:7px; min-height:48px; width:100%; padding:4px 1px; text-align:left; color:var(--muted); font-size:11px; }
.provenance > span { flex:1; }
.task-strip { display:flex; gap:9px; align-items:center; width:100%; min-height:48px; text-align:left; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font-size:12px; background:var(--surface); }
.task-strip > span { flex:1; }
.task-strip + .bamboo-insight { margin-top:18px; }
.provenance + .bamboo-insight { margin-top:6px; }
.composer-tools { display:flex; align-items:center; gap:4px; justify-content:space-between; }
.composer-tools button { min-width:48px; min-height:48px; padding:6px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:12px; color:var(--muted); border-radius:8px; }
.composer-tools button:hover { background:var(--soft); }
.composer-note { overflow-wrap:anywhere; }
.attached-sources { display:flex; gap:5px; overflow-x:auto; padding:4px 0; }
.attached-sources button { display:flex; align-items:center; gap:5px; min-height:48px; white-space:nowrap; font-size:11px; background:var(--soft); border-radius:8px; padding:5px 8px; }
.source-list { margin:20px 0 10px; }
.source-item { display:flex; align-items:center; gap:5px; border-top:1px solid var(--line); }
.source-main { display:flex; gap:10px; align-items:center; text-align:left; padding:15px 0; flex:1; min-width:0; }
.source-main > span:last-child { min-width:0; flex:1; }
.source-main strong { font-size:14px; display:block; overflow-wrap:anywhere; }
.source-main small { display:block; font-size:11px; color:var(--muted); line-height:1.45; margin-top:3px; overflow-wrap:anywhere; }
.source-toggle { flex-shrink:0; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; }
.source-toggle.selected { color:var(--ink); background:var(--soft); }
.citation-row { display:flex; flex-wrap:wrap; gap:3px 8px; margin-top:12px; border-top:1px solid var(--line); padding-top:4px; }
.source-citation { display:inline-flex; align-items:center; gap:5px; font-size:11px; padding:5px 0; min-height:48px; text-align:left; color:var(--muted); }
.source-excerpt { white-space:pre-wrap; overflow-wrap:anywhere; border-left:2px solid var(--brass); padding:12px 14px; font-size:13px; background:var(--soft); margin:18px 0; max-height:260px; overflow-y:auto; }
.sheet-intro { margin:18px 0; }
.sheet-footnote { margin-top:18px; }
.sheet { max-width:100%; overflow-wrap:anywhere; padding-bottom:calc(24px + env(safe-area-inset-bottom)); }
.sheet .settings-row { width:100%; gap:12px; min-height:56px; text-align:left; }
.settings-row > span { min-width:0; }
.settings-row strong { font-size:14px; font-weight:550; }
.settings-row small { display:block; color:var(--muted); font-size:12px; line-height:1.5; margin:5px 0; }
.settings-row .icon { flex-shrink:0; }
.sheet .button { min-height:48px; }
.upload-target { display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 12px; border:1px dashed var(--muted); border-radius:12px; cursor:pointer; margin:22px 0 10px; text-align:center; }
.upload-target strong { font-size:15px; }
.upload-target span { font-size:12px; color:var(--muted); }
#source-file { font-size:12px; max-width:100%; min-height:48px; }
.import-options { margin-top:20px; }
.status-label { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:8px; }
.data-figure { margin:18px 0; }
.data-figure figcaption { font-size:13px; font-weight:550; margin-bottom:14px; }
.chart-bars { display:grid; gap:13px; margin:14px 0; }
.chart-bar-row { display:grid; grid-template-columns:minmax(64px,1fr) minmax(48px,1.5fr) auto; align-items:center; gap:8px; font-size:11px; }
.chart-bar-row > span { overflow-wrap:anywhere; }
.chart-bar-row strong { font:500 12px var(--display); font-variant-numeric:tabular-nums; }
.chart-bar-track { background:var(--soft); height:9px; border-radius:3px; overflow:hidden; }
.chart-bar-track > span { display:block; height:100%; background:var(--ink); border-radius:3px; }
.chart-bar-row:last-child .chart-bar-track > span { background:var(--brass); }
.saved-plan { border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:16px; margin-bottom:24px; display:grid; grid-template-columns:1fr auto; gap:5px; }
.saved-plan > strong { font-size:15px; font-weight:550; }
.saved-plan .status-label,.saved-plan > strong,.saved-plan > .fine { grid-column:1; }
.saved-plan > button { grid-column:2; grid-row:1/4; font-size:12px; }
.routine-row { display:flex; gap:12px; align-items:center; text-align:left; width:100%; min-height:70px; border-top:1px solid var(--line); padding:15px 0; }
.routine-row > span { flex:1; }
.routine-row strong { display:block; font-size:14px; }
.routine-row small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.receipt-list li > strong { display:block; }
.receipt-list small { overflow-wrap:anywhere; display:block; margin-top:8px; }
.glasses-preview { background:var(--ink); color:var(--paper); border:1px solid var(--ink-soft); border-radius:16px; padding:24px; margin-top:18px; min-height:210px; }
.glasses-wordmark { font:500 13px var(--display); color:var(--ink-muted); display:block; margin-bottom:20px; }
.glasses-preview h3 { color:var(--paper); font-size:15px; margin-bottom:10px; }
.glasses-headline { font-size:34px; letter-spacing:-1.3px; line-height:1.2; margin-bottom:14px; }
.glasses-preview p { color:var(--ink-muted); font-size:13px; margin-top:5px; }
.hud-bars { display:grid; gap:12px; margin-top:22px; }
.hud-bars > div { display:grid; grid-template-columns:85px 1fr; gap:12px; align-items:center; }
.hud-bars span { font-size:11px; color:var(--ink-muted); }
.hud-bars > div > div { height:7px; background:var(--ink-soft); border-radius:3px; overflow:hidden; }
.hud-bars i { display:block; height:100%; background:var(--brass); }
.response-card,.card-metrics,.card-row { min-width:0; }
.card-row > span { min-width:0; overflow-wrap:anywhere; }
.card-row > strong { overflow-wrap:anywhere; max-width:60%; text-align:right; }
.dark .glasses-preview { background:var(--soft); border-color:var(--line); color:var(--ink); }
.dark .glasses-preview h3,.dark .glasses-preview p,.dark .glasses-wordmark,.dark .hud-bars span { color:var(--ink); }
@media (max-width:359px) { .composer-tools button { font-size:11px; gap:4px; } .source-main .list-icon { width:32px; height:32px; } .source-toggle { width:48px; } .chart-bar-row { gap:6px; grid-template-columns:minmax(58px,1fr) minmax(38px,1fr) auto; } }

.comparison-chart { width:100%; height:auto; display:block; }
.comparison-chart text { font:11px var(--font); }
.chart-legend { display:flex; gap:14px; flex-wrap:wrap; margin:6px 0 12px; font-size:11px; }
.chart-legend > span { display:flex; align-items:center; gap:5px; }
.chart-legend i { width:15px; height:3px; display:inline-block; }
.chart-data { margin-top:10px; font-size:12px; }
.chart-data summary,.presenter-manual summary { min-height:48px; cursor:pointer; padding:12px 0; }
.chart-data h4 { font-size:13px; margin-top:14px; }
.presenter-manual { margin:14px 0; }

.hero-value.compact-money { font-size:46px; letter-spacing:-2px; white-space:nowrap; }
.hero-value.compact-money .currency { font-size:28px; vertical-align:6px; letter-spacing:-1px; }
.hero:has(.compact-money) .hero-art { opacity:.14; }
@media (max-width:359px) { .hero-value.compact-money { font-size:38px; } .hero-value.compact-money .currency { font-size:25px; vertical-align:4px; } }

.hud-line { display:block; width:100%; height:auto; margin-top:16px; }
.hud-line line { stroke:var(--ink-soft); }
.hud-line polyline { fill:none; stroke:var(--brass); stroke-width:2.5; }
.hud-line text { fill:var(--ink-muted); font:11px var(--font); }

/* Weekly check-in: the same quiet ledger language as Today and Plan. */
.weekly-teaser { width:100%; display:flex; align-items:center; gap:14px; padding:18px 0; margin:4px 0 10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; color:var(--ink); }
.weekly-mark { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border:1px solid var(--line); border-radius:12px; color:var(--brass); }
.weekly-teaser>span:nth-child(2) { flex:1; min-width:0; }
.weekly-teaser strong,.weekly-teaser small { display:block; }
.weekly-teaser strong { font-size:14px; margin:5px 0; }
.weekly-teaser small { color:var(--muted); font-size:12px; }
.review-period { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 22px; }
.review-period>div { text-align:center; }
.review-period strong { display:block; font-size:15px; margin-top:5px; }
.review-summary { display:flex; align-items:center; gap:14px; padding:18px 0; border-top:2px solid var(--brass); border-bottom:1px solid var(--line); }
.review-summary>.number { font-size:38px; }
.review-summary>span:nth-child(2) { flex:1; font-size:14px; }
.review-summary small { display:block; color:var(--muted); margin-top:4px; font-size:12px; }
.review-ledger { margin-bottom:22px; }
.review-entry { padding:20px 0; border-bottom:1px solid var(--line); }
.review-entry-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; margin-bottom:10px; }
.review-entry h3 { font-size:17px; line-height:1.4; margin:0 0 8px; overflow-wrap:anywhere; }
.review-entry p { font-size:13px; line-height:1.6; margin:0 0 14px; overflow-wrap:anywhere; }
.review-entry-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.review-entry-footer>.fine { font-size:11px; }
.review-undo { min-height:44px; font-size:12px; height:auto; white-space:normal; text-align:left; }
.review-entry .review-reason { margin:12px 0 0; font-size:11px; color:var(--muted); }
.review-empty { padding:28px 0 10px; }
.review-empty h3 { margin-top:18px; }
.review-done { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
@media(max-width:360px) { .review-entry-footer { align-items:stretch; flex-direction:column; } }

.review-period>button:first-child .icon { transform:rotate(180deg); }

.prototype-switch{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:center;gap:24px;padding:12px 16px;background:#143644;color:#fafaf5;font:600 11px 'Instrument Sans',sans-serif;letter-spacing:.04em}.prototype-switch a{color:#c8eccb;text-decoration:none}.prototype-identity{padding:9px 16px;text-align:center;font-size:11px;background:var(--paper,#f7f7f1);color:var(--ink,#143644)}.prototype-identity a{color:inherit}#stage{padding-top:60px}#voice-transcript{box-sizing:border-box;width:100%;padding:14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:var(--paper,#fff);color:inherit}.composer-tools{flex-wrap:wrap}@media(max-width:600px){#stage{padding-top:40px}.device{height:calc(100dvh - 40px)!important;min-height:0!important}.prototype-switch{height:40px;box-sizing:border-box;padding:12px 8px;gap:18px}.device-top{display:none}}

/* Keep voice, playback and activity controls in two clear rows. */
.composer-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 6px; }
.composer-tools button { justify-content:center; min-height:32px; }