:root {
  --paper: #f5f0e6;
  --ink: #2d2d2d;
  --accent: #d4a574;
}

body {
  background: var(--paper);
  overflow-x: hidden; /* Prevent horizontal overflow on tiny devices */
}

/* Thought.Wave responsive width */
.tw-wrap{
  width: 33vw;          /* ~1/3 screen on desktop */
  max-width: 920px;     /* safety cap for huge screens */
  min-width: 520px;     /* stops it getting too skinny on mid screens */
  margin: 0 auto;
}

@media (max-width: 992px){
  .tw-wrap{
    width: 70vw;
    min-width: 0;
  }
}

@media (max-width: 576px){
  body { padding: 18px 12px; }
  h1 { font-size: 3.2rem !important; }

  .tw-wrap{
    width: 90vw;        /* ~90% on mobile */
  }
}

.tw-card {
  width: 100%;
  background: #f5f0e6;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.tw-card.primary {
  box-shadow: 0 6px 26px rgba(0,0,0,0.10);
}

.tw-action{
  background: transparent;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.95rem;
  color: #5a5a5a;
}

.tw-action:hover{
  border-color: rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

.tw-action:active{
  transform: translateY(0px);
}

.tw-action{
  background: transparent;
  border: 1px solid rgba(0,0,0,0.10);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.95rem;
  color: #5a5a5a;
  cursor: pointer;
}

.tw-action:hover{
  border-color: rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

.tw-action:active{
  transform: translateY(0px);
}
.tw-card.highlight {
  outline: 2px solid #d4a574;
}