:root {
  color-scheme: light;
  --paper: #f5f5f7;
  --surface: #ffffff;
  --ink: #1d1d1f;
  --muted: #60666d;
  --subtle: #858b91;
  --line: #e1e3e6;
  --blue: #0873e6;
  --coral: #ef8065;
  --mint: #e6f2ed;
  --lime: #d9ee79;
  --lilac: #eef0fa;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 82px;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
}

button {
  color: inherit;
}

.topbar,
main {
  position: relative;
  z-index: 1;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  padding: 0 max(28px, calc((100% - 1340px) / 2));
  border-bottom: 1px solid #e7e8eb;
  background: rgb(250 250 252 / 92%);
  backdrop-filter: blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.brand-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}

.brand-name small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 450;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}

.signal-pill,
.online-pill {
  display: flex;
  align-items: center;
}

.signal-pill {
  gap: 9px;
  color: #515961;
  font-size: 13px;
}

.signal-dot,
.panel-live,
.live-count i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #48ad78;
  box-shadow: 0 0 0 4px rgb(72 173 120 / 13%);
}

.online-pill {
  align-items: baseline;
  gap: 6px;
  color: var(--muted);
}

.online-pill > span {
  color: var(--ink);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.online-pill small {
  font-size: 12px;
}

.admin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: #46525c;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.admin-link span {
  color: var(--blue);
  font-size: 16px;
}

.sound-button {
  border: 1px solid #d8dde3;
  border-radius: 14px;
  background: #fff;
  padding: 5px 10px;
  color: #53606d;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.sound-button[aria-pressed="true"] {
  color: #0869c8;
  background: #edf5ff;
  border-color: #bfD5ef;
}

main {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 0 28px 30px;
}

.welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  min-height: 296px;
  margin-top: 16px;
  overflow: hidden;
  background: var(--surface);
}

.welcome-copy {
  position: relative;
  z-index: 2;
  padding: 35px 0 27px 48px;
}

.welcome-kicker,
.section-eyebrow,
.panel-eyebrow {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.welcome-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
}

.welcome-kicker > span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.welcome h1 {
  margin: 14px 0 12px;
  font-size: 46px;
  font-weight: 730;
  line-height: 1.08;
}

.welcome h1 em {
  color: var(--blue);
  font-style: normal;
}

.welcome-lead {
  max-width: 590px;
  margin: 0;
  color: #444b52;
  font-size: 16px;
  line-height: 1.7;
}

.welcome-note {
  max-width: 590px;
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.hero-button,
.button,
.send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 44px;
  padding: 0 17px;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
  transition: transform 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.hero-button b,
.button b,
.send-button b {
  color: var(--lime);
  font-size: 18px;
  line-height: 1;
}

.hero-button:hover,
.button:hover,
.send-button:hover {
  transform: translateY(-2px);
  background: #34383d;
  box-shadow: 0 8px 18px rgb(29 29 31 / 14%);
}

.welcome-hours {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 13px;
  color: var(--muted);
  font-size: 12px;
}

.welcome-hours > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #61ba83;
}

.hours-dot {
  color: #b6bbc0;
}

.welcome-visual {
  position: relative;
  display: grid;
  min-height: 288px;
  place-items: center;
  isolation: isolate;
}

.welcome-visual::before {
  position: absolute;
  z-index: -1;
  inset: 14px 30px 14px 8px;
  border-radius: 10px;
  background: #eef3f4;
  content: "";
  transform: rotate(-1.5deg);
}

.visual-ring {
  display: none;
}

.welcome-mascot {
  width: min(330px, 88%);
  height: 278px;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgb(36 42 46 / 12%));
  animation: mascot-float 6.4s ease-in-out infinite;
}

.mascot-caption,
.float-word {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e1e5e7;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 5px 16px rgb(29 29 31 / 7%);
  color: #4e5961;
  font-size: 12px;
}

.mascot-caption {
  right: 42px;
  bottom: 26px;
  padding: 8px 11px;
}

.caption-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
}

.float-word {
  top: 28px;
  left: 28px;
  padding: 7px 10px;
  animation: word-drift 5s ease-in-out infinite;
}

.word-two {
  top: 42px;
  right: 25px;
  left: auto;
  border-color: #cde3d5;
  background: var(--mint);
  animation-delay: -2.3s;
}

.visual-spark {
  position: absolute;
  color: var(--blue);
  font-size: 22px;
  animation: spark-pop 2.8s ease-in-out infinite;
}

.spark-one {
  bottom: 37px;
  left: 46px;
  color: var(--coral);
}

.spark-two {
  top: 21px;
  right: 82px;
  color: #8aa52f;
  animation-delay: -1.2s;
}

.notice-bar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 14px 17px;
  border: 1px solid #eedfa6;
  border-left: 4px solid #e0b92f;
  background: #fff9e5;
}

.notice-mark {
  color: #ad8600;
  font-size: 20px;
}

.notice-bar > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.notice-bar strong {
  font-size: 14px;
  font-weight: 700;
}

.notice-bar span:last-child {
  color: #50575e;
  font-size: 14px;
  line-height: 1.6;
}

.ways-in {
  padding: 24px 0 26px;
}

.ways-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}

.ways-heading h2 {
  margin: 3px 0 0;
  font-size: 27px;
  font-weight: 720;
  line-height: 1.2;
}

.ways-heading > p {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.module-card {
  --module-bg: #fff;
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 228px;
  flex-direction: column;
  overflow: hidden;
  padding: 15px 17px 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--module-bg);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 240ms, box-shadow 240ms;
}

.module-chat {
  --module-bg: #f0f6f7;
}

.module-tree {
  --module-bg: #fff3ee;
}

.module-terms {
  --module-bg: #f1f2fa;
}

.module-story {
  --module-bg: #f3f6e9;
}

.module-card:hover {
  transform: translateY(-4px);
  border-color: #bac4ca;
  box-shadow: 0 12px 24px rgb(29 29 31 / 10%);
}

.module-card.active {
  border-color: #7da9d6;
  box-shadow: inset 0 0 0 1px #7da9d6;
}

.module-card:active {
  transform: translateY(-1px) scale(0.995);
}

.module-index {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #59636b;
  font-size: 13px;
  font-weight: 600;
}

.module-index i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9ba3a8;
}

.module-art {
  position: relative;
  display: block;
  height: 76px;
  margin: 6px 0 3px;
  overflow: hidden;
}

.module-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin-top: auto;
}

.module-copy > strong {
  font-size: 19px;
  font-weight: 720;
  line-height: 1.3;
}

.module-copy > small {
  min-height: 21px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.module-action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 650;
}

.module-action b {
  font-size: 16px;
  transition: transform 200ms ease;
}

.module-card:hover .module-action b {
  transform: translate(2px, -2px);
}

.module-count {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #606a71;
  font-size: 12px;
}

.module-count b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.art-chat {
  display: grid;
  place-items: center;
}

.chat-wave {
  position: absolute;
  border: 1px solid #8caebb;
  border-radius: 50%;
  animation: chat-ripple 3.7s ease-out infinite;
}

.wave-a {
  width: 44px;
  height: 44px;
}

.wave-b {
  width: 68px;
  height: 68px;
  animation-delay: 0.7s;
}

.wave-c {
  width: 88px;
  height: 88px;
  animation-delay: 1.4s;
}

.chat-art-dot {
  z-index: 1;
  width: 18px;
  height: 18px;
  border: 1px solid #a6bd4d;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 5px rgb(217 238 121 / 35%);
}

.chat-art-word {
  position: absolute;
  top: 4px;
  left: calc(50% + 42px);
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  font-size: 13px;
  animation: chat-bubble 3s ease-in-out infinite;
}

.art-tree {
  display: grid;
  place-items: center;
  perspective: 400px;
}

.envelope {
  position: relative;
  width: 86px;
  height: 55px;
  border: 1px solid #e7c9c1;
  background: #fff;
  box-shadow: 0 7px 15px rgb(166 70 52 / 12%);
  transform: rotate(-4deg);
  animation: mail-float 4s ease-in-out infinite;
}

.envelope::before,
.envelope::after {
  position: absolute;
  bottom: 0;
  width: 61px;
  height: 61px;
  border-right: 1px solid #e7c9c1;
  border-bottom: 1px solid #e7c9c1;
  background: #fff;
  content: "";
}

.envelope::before {
  left: -1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: rotate(45deg) translate(19px, -19px);
}

.envelope::after {
  right: -1px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: rotate(-45deg) translate(-19px, -19px);
}

.envelope > i {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 31px solid var(--coral);
  border-right: 43px solid transparent;
  border-left: 43px solid transparent;
  transform-origin: top;
  transition: transform 350ms ease;
}

.module-tree:hover .envelope > i {
  transform: rotateX(180deg);
}

.envelope-note {
  position: absolute;
  z-index: 1;
  top: 8px;
  padding: 5px 8px;
  background: #fff5bd;
  color: #514a42;
  font-size: 12px;
  animation: note-peek 4s ease-in-out infinite;
}

.envelope-spark {
  position: absolute;
  top: 8px;
  right: calc(50% - 70px);
  color: var(--coral);
  font-size: 20px;
  animation: spark-pop 2.4s ease-in-out infinite;
}

.art-terms {
  display: block;
}

.term-chip {
  position: absolute;
  padding: 5px 9px;
  border: 1px solid #d7dfef;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 9px rgb(51 75 137 / 8%);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.chip-city {
  top: 14px;
  left: 5%;
  transform: rotate(-5deg);
}

.chip-mood {
  top: 4px;
  left: 42%;
  border-color: #c9df67;
  background: var(--lime);
  transform: rotate(4deg);
}

.chip-warm {
  top: 48px;
  left: 22%;
  border-color: #ffd5c9;
  background: #fff0eb;
  transform: rotate(3deg);
}

.chip-new {
  top: 48px;
  left: 59%;
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  transform: rotate(-5deg);
}

.module-terms:hover .chip-city {
  transform: translate(-3px, -3px) rotate(-8deg);
}

.module-terms:hover .chip-mood {
  transform: translate(3px, -3px) rotate(7deg);
}

.module-terms:hover .chip-warm {
  transform: translate(-2px, 3px) rotate(6deg);
}

.module-terms:hover .chip-new {
  transform: translate(3px, 2px) rotate(-3deg);
}

.art-story {
  display: grid;
  place-items: center;
}

.story-line {
  position: absolute;
  padding: 5px 9px;
  border-bottom: 1px solid #d6ddc0;
  background: #fff;
  box-shadow: 0 3px 9px rgb(41 49 32 / 7%);
  font-size: 12px;
  white-space: nowrap;
  animation: story-rise 3.5s ease-in-out infinite;
}

.line-a {
  top: 7px;
  left: 8%;
  transform: rotate(-4deg);
}

.line-b {
  top: 29px;
  left: 26%;
  background: #eaf0db;
  transform: rotate(2deg);
  animation-delay: -1.1s;
}

.line-c {
  top: 50px;
  left: 15%;
  transform: rotate(-1deg);
  animation-delay: -2s;
}

.story-pencil {
  position: absolute;
  top: 17px;
  right: 8%;
  color: var(--blue);
  font-size: 27px;
  animation: pencil-bob 2s ease-in-out infinite;
}

.community {
  padding-top: 2px;
}

.board-panel {
  padding: 26px;
  border: 1px solid #e3e5e8;
  border-radius: 7px;
  background: var(--surface);
  animation: panel-in 360ms ease both;
}

.panel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.panel-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
}

.panel-live {
  width: 8px;
  height: 8px;
}

.panel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--coral);
}

.panel-heading h2 {
  margin: 5px 0 0;
  font-size: 29px;
  font-weight: 720;
  line-height: 1.2;
}

.panel-heading h2 > span {
  margin-left: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}

.panel-heading-right {
  display: flex;
  align-items: center;
  gap: 17px;
}

.live-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.live-count i {
  width: 7px;
  height: 7px;
}

.live-count b {
  color: var(--ink);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.quiet-button,
.sort-button,
.alias-button {
  border: 0;
  background: transparent;
  color: #46525c;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.quiet-button span {
  padding-left: 4px;
  color: var(--blue);
  font-size: 16px;
}

.chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 255px;
  gap: 22px;
}

.chat-main {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfbfc;
}

.chat-messages {
  display: flex;
  height: 355px;
  flex-direction: column;
  gap: 13px;
  overflow-y: auto;
  padding: 20px;
  scroll-behavior: smooth;
}

.empty-state {
  display: flex;
  min-height: 160px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.empty-symbol {
  color: var(--coral);
  font-size: 25px;
}

.empty-state strong {
  color: var(--ink);
  font-size: 17px;
}

.empty-state small {
  color: var(--muted);
  font-size: 13px;
}

.chat-message {
  display: grid;
  max-width: 84%;
  grid-template-columns: 34px minmax(0, 1fr);
  align-self: flex-start;
  gap: 9px;
  animation: message-in 260ms ease both;
}

.chat-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: #405b4b;
  font-size: 13px;
  font-weight: 700;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}

.chat-message:nth-child(3n) .chat-avatar {
  background: #fff0eb;
  color: #9a5748;
}

.chat-message:nth-child(3n + 1) .chat-avatar {
  background: var(--lilac);
  color: #4d5a8c;
}

.chat-bubble {
  min-width: 0;
  padding: 9px 12px 10px;
  border: 1px solid #e8e9ec;
  border-radius: 6px;
  background: #fff;
}

.chat-meta {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 3px;
}

.chat-alias {
  color: #47525a;
  font-size: 13px;
  font-weight: 650;
}

.chat-time {
  color: var(--subtle);
  font-size: 12px;
}

.chat-text {
  overflow-wrap: anywhere;
  color: #30373c;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.chat-compose {
  padding: 13px;
  border-top: 1px solid var(--line);
  background: #fff;
}

.compose-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.alias-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.alias-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.char-count,
.form-bottom > span,
.term-field label small {
  color: var(--subtle);
  font-size: 12px;
}

.compose-row {
  display: flex;
  gap: 9px;
}

.compose-row input,
.term-field input,
.comment-form input,
.tree-form textarea,
.story-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dadddf;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
}

.compose-row input,
.term-field input,
.comment-form input {
  height: 44px;
  padding: 0 12px;
}

.compose-row input:focus,
.term-field input:focus,
.comment-form input:focus,
.tree-form textarea:focus,
.story-form textarea:focus {
  border-color: #5c9cde;
  outline: 3px solid rgb(8 115 230 / 12%);
}

.send-button {
  min-width: 92px;
  flex: 0 0 auto;
}

.send-button b {
  font-size: 20px;
}

.chat-aside {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aside-note {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  gap: 10px;
  padding: 15px 14px;
  border: 1px solid #e1e7e5;
  border-radius: 6px;
  background: #f3f8f5;
}

.aside-note-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: #dcece3;
  color: #477255;
  font-size: 14px;
  font-weight: 700;
}

.aside-note p {
  margin: 0;
  color: #57615b;
  font-size: 13px;
  line-height: 1.6;
}

.aside-note b {
  display: block;
  margin-bottom: 4px;
  color: #35433a;
  font-size: 14px;
}

.chat-promise {
  position: relative;
  min-height: 145px;
  overflow: hidden;
  padding: 17px;
  border: 1px solid #e5e6ed;
  border-radius: 6px;
  background: #f4f5fa;
}

.chat-promise::after {
  position: absolute;
  right: -27px;
  bottom: -44px;
  width: 125px;
  height: 125px;
  border: 1px solid #daddE9;
  border-radius: 50%;
  content: "";
}

.chat-promise > span,
.chat-promise > strong,
.chat-promise > small {
  position: relative;
  z-index: 1;
  display: block;
}

.chat-promise > span {
  color: var(--muted);
  font-size: 13px;
}

.chat-promise > strong {
  margin-top: 3px;
  font-size: 21px;
  font-weight: 720;
}

.chat-promise > small {
  max-width: 190px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.tree-compose-band {
  display: grid;
  grid-template-columns: minmax(210px, 0.65fr) minmax(0, 1.35fr);
  gap: 22px;
  align-items: center;
  padding: 22px;
  border-radius: 6px;
  background: #fff3ee;
}

.compose-prompt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.compose-prompt > span {
  color: #915e51;
  font-size: 13px;
  font-weight: 650;
}

.compose-prompt > b {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}

.compose-prompt > small {
  color: #6e625e;
  font-size: 13px;
  line-height: 1.5;
}

.tree-form,
.story-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tree-form textarea,
.story-form textarea {
  min-height: 92px;
  padding: 11px 12px;
  line-height: 1.55;
  resize: vertical;
}

.form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.button {
  min-height: 42px;
}

.button-dark {
  background: var(--ink);
}

.tree-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  padding-top: 18px;
}

.empty-wide {
  grid-column: 1 / -1;
}

.tree-card {
  min-width: 0;
  padding: 17px;
  border: 1px solid #e8e8eb;
  border-left: 3px solid #eda48e;
  border-radius: 5px;
  background: #fff;
  animation: message-in 280ms ease both;
}

.tree-message {
  color: #252a2e;
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.tree-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.comments {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.comment-item {
  padding-left: 10px;
  border-left: 2px solid #d8e6dd;
  color: #48524c;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.comment-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.comment-form input {
  height: 39px;
  font-size: 14px;
}

.comment-form button {
  flex: 0 0 auto;
  padding: 0 13px;
  border: 0;
  border-radius: 5px;
  background: #f0f1f2;
  color: #333a40;
  cursor: pointer;
  font-size: 13px;
  font-weight: 650;
}

.retention-chip {
  padding: 7px 10px;
  border: 1px solid #e5e6e9;
  border-radius: 5px;
  background: #f8f8fa;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.term-sorts {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 6px;
  background: #f0f1f3;
}

.sort-button {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 4px;
  color: var(--muted);
}

.sort-button.active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(29 29 31 / 10%);
}

.terms-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #f4f5fa;
}

.terms-intro-symbol {
  color: var(--blue);
  font-size: 23px;
}

.terms-intro p {
  flex: 1;
  margin: 0;
  color: #4e5860;
  font-size: 14px;
  line-height: 1.55;
}

.terms-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding-left: 15px;
  border-left: 1px solid #d8dce0;
}

.terms-count b {
  font-size: 21px;
  font-variant-numeric: tabular-nums;
}

.terms-count small {
  color: var(--muted);
  font-size: 12px;
}

.term-form {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.1fr) auto;
  gap: 10px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.term-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.term-field label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: #414a51;
  font-size: 13px;
  font-weight: 650;
}

.term-field input {
  height: 42px;
}

.term-form > .button {
  white-space: nowrap;
}

.term-cloud {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-top: 17px;
}

.term-card {
  display: flex;
  min-width: 0;
  min-height: 143px;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  border: 1px solid #e4e5e9;
  border-radius: 5px;
  background: #fff;
  animation: message-in 280ms ease both;
}

.term-card-title {
  color: #22272b;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.term-card-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.term-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 13px;
}

.term-card-foot small {
  color: var(--muted);
  font-size: 12px;
}

.like-term {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid #e6e8eb;
  border-radius: 5px;
  background: #f7f8fa;
  color: #4b565e;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.like-term:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: #c4d8ed;
  background: #eff6fc;
}

.like-term[aria-pressed="true"] {
  border-color: #d5e8a0;
  background: #f2f8df;
  color: #4f6425;
}

.story-intro {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 19px;
  background: #f2f5e9;
}

.story-stamp {
  display: flex;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #cbd5a8;
  border-radius: 50%;
  background: #fff;
  color: #5c673f;
  font-size: 11px;
  font-weight: 650;
}

.story-stamp b {
  color: var(--ink);
  font-size: 23px;
  line-height: 1;
}

.story-intro > div:nth-child(2) > span {
  color: #66714b;
  font-size: 13px;
  font-weight: 650;
}

.story-intro h3 {
  margin: 2px 0 0;
  font-size: 19px;
  font-weight: 700;
}

.story-arrow {
  margin-left: auto;
  color: #6f8b37;
  font-size: 25px;
}

.story-text {
  max-height: 390px;
  overflow-y: auto;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  scroll-behavior: smooth;
}

.story-fragment {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #eff0f1;
  animation: message-in 280ms ease both;
}

.story-fragment:last-child {
  border-bottom: 0;
}

.story-fragment-index {
  padding-top: 3px;
  color: #899378;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.story-fragment-text {
  color: #30373b;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.story-fragment.seed .story-fragment-text {
  color: #565f45;
  font-weight: 650;
}

.story-form {
  padding: 17px 0 0;
}

.story-form label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.story-form label span {
  font-size: 15px;
  font-weight: 700;
}

.story-form label small {
  color: var(--muted);
  font-size: 13px;
}

.site-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 19px 0 4px;
  border-top: 1px solid #dedfe3;
  color: var(--muted);
  font-size: 13px;
}

.site-footer > span:nth-child(2) {
  margin-left: auto;
}

.site-footer i {
  color: #b1b6bb;
  font-style: normal;
}

.site-footer button {
  padding: 5px 0 5px 9px;
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.rules-dialog {
  position: fixed;
  width: min(520px, calc(100% - 30px));
  max-height: min(88vh, 680px);
  padding: 30px 32px 27px;
  border: 1px solid #e2e4e7;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 22px 70px rgb(20 25 31 / 24%);
}

.rules-dialog::backdrop {
  background: rgb(29 29 31 / 42%);
  backdrop-filter: blur(3px);
}

.dialog-close {
  position: absolute;
  top: 14px;
  right: 15px;
  width: 34px;
  height: 34px;
  border: 1px solid #e5e6e9;
  border-radius: 50%;
  background: #f6f7f8;
  color: #576168;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
}

.dialog-mark {
  color: var(--coral);
  font-size: 24px;
}

.dialog-kicker {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.rules-dialog h2 {
  margin: 7px 0 16px;
  font-size: 29px;
  font-weight: 720;
  line-height: 1.25;
}

.rules-dialog h2 em {
  color: var(--blue);
  font-style: normal;
}

.rules-dialog ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.65;
}

.rules-dialog li::marker {
  color: var(--coral);
}

.rules-dialog > p {
  margin: 15px 0 19px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.dialog-accept {
  min-height: 44px;
}

.toast {
  position: fixed;
  z-index: 20;
  bottom: 22px;
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  transform: translate(-50%, 12px);
  border-radius: 6px;
  background: #1d1d1f;
  box-shadow: 0 7px 22px rgb(29 29 31 / 18%);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #5e97d4;
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

@keyframes mascot-float {
  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-7px) rotate(1deg);
  }
}

@keyframes word-drift {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -4px;
  }
}

@keyframes spark-pop {
  0%,
  100% {
    transform: scale(0.9) rotate(-7deg);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.08) rotate(8deg);
    opacity: 1;
  }
}

@keyframes chat-ripple {
  0% {
    transform: scale(0.65);
    opacity: 0.65;
  }

  90%,
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

@keyframes chat-bubble {
  0%,
  100% {
    translate: 0 0;
    rotate: -3deg;
  }

  50% {
    translate: 0 -4px;
    rotate: 2deg;
  }
}

@keyframes mail-float {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }

  50% {
    transform: translateY(-4px) rotate(-1deg);
  }
}

@keyframes note-peek {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -5px;
  }
}

@keyframes story-rise {
  0%,
  100% {
    translate: 0 2px;
  }

  50% {
    translate: 0 -3px;
  }
}

@keyframes pencil-bob {
  0%,
  100% {
    translate: 0 0;
    rotate: -13deg;
  }

  50% {
    translate: 1px -5px;
    rotate: -6deg;
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    translate: 0 7px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes message-in {
  from {
    opacity: 0;
    translate: 0 5px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@media (max-width: 1080px) {
  main {
    padding-right: 22px;
    padding-left: 22px;
  }

  .welcome {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  }

  .welcome-copy {
    padding-left: 34px;
  }

  .welcome h1 {
    font-size: 42px;
  }

  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-card {
    min-height: 218px;
  }

  .term-cloud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .topbar {
    height: 62px;
    padding: 0 18px;
  }

  .topbar-right {
    gap: 15px;
  }

  main {
    padding-right: 18px;
    padding-left: 18px;
  }

  .welcome {
    grid-template-columns: minmax(0, 1fr) 250px;
  }

  .welcome-copy {
    padding: 28px 0 24px 25px;
  }

  .welcome h1 {
    font-size: 36px;
  }

  .welcome-lead {
    font-size: 14px;
  }

  .welcome-note {
    font-size: 12px;
  }

  .welcome-visual {
    min-height: 270px;
  }

  .welcome-visual::before {
    right: 12px;
    left: 0;
  }

  .welcome-mascot {
    width: 260px;
    height: 250px;
  }

  .float-word {
    top: 24px;
    left: 8px;
    font-size: 11px;
  }

  .word-two {
    top: 35px;
    right: 8px;
    left: auto;
  }

  .mascot-caption {
    right: 14px;
    bottom: 18px;
    font-size: 11px;
  }

  .spark-one {
    left: 13px;
    bottom: 31px;
  }

  .spark-two {
    top: 12px;
    right: 58px;
  }

  .ways-in {
    padding-top: 21px;
  }

  .ways-heading h2 {
    font-size: 24px;
  }

  .ways-heading > p {
    font-size: 12px;
  }

  .module-card {
    min-height: 205px;
    padding: 14px;
  }

  .module-art {
    height: 68px;
  }

  .module-copy > strong {
    font-size: 17px;
  }

  .module-copy > small,
  .module-action {
    font-size: 12px;
  }

  .module-count,
  .module-index {
    font-size: 11px;
  }

  .board-panel {
    padding: 20px;
  }

  .panel-heading h2 {
    font-size: 25px;
  }

  .chat-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .chat-aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-messages {
    height: 330px;
  }

  .tree-compose-band {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
    padding: 17px;
  }

  .term-cloud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .term-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .term-form > .button {
    grid-column: 2;
    justify-self: end;
  }

  .site-footer {
    flex-wrap: wrap;
  }
}

@media (max-width: 520px) {
  .topbar-right {
    gap: 9px;
  }

  .signal-pill {
    display: none;
  }

  .sound-button {
    padding: 4px 8px;
    font-size: 11px;
  }
  .topbar {
    padding: 0 12px;
  }

  .brand {
    gap: 7px;
  }

  .brand-mark {
    width: 30px;
    height: 30px;
  }

  .brand-name {
    font-size: 13px;
  }

  .brand-name small {
    font-size: 11px;
  }

  .topbar-right {
    gap: 11px;
  }

  .signal-pill {
    gap: 7px;
    font-size: 11px;
  }

  .online-pill {
    gap: 0;
  }

  .online-pill > span {
    font-size: 15px;
  }

  .online-pill small {
    display: none;
  }

  .admin-link {
    gap: 3px;
    font-size: 11px;
  }

  main {
    padding: 0 12px 20px;
  }

  .welcome {
    display: flex;
    flex-direction: column;
    margin-top: 9px;
  }

  .welcome-copy {
    padding: 24px 21px 22px;
  }

  .welcome-kicker {
    font-size: 12px;
  }

  .welcome h1 {
    margin: 12px 0 10px;
    font-size: 38px;
  }

  .welcome-lead {
    font-size: 15px;
    line-height: 1.65;
  }

  .welcome-note {
    display: none;
  }

  .hero-button {
    min-height: 42px;
    font-size: 13px;
  }

  .welcome-hours {
    gap: 7px;
    margin-top: 11px;
    font-size: 11px;
  }

  .welcome-visual {
    display: none;
  }

  .welcome-visual::before {
    inset: 9px 22px;
  }

  .welcome-mascot {
    width: min(250px, 74vw);
    height: 215px;
  }

  .mascot-caption {
    right: 22px;
    bottom: 14px;
    padding: 6px 8px;
    font-size: 11px;
  }

  .float-word {
    top: 17px;
    left: 18px;
    padding: 5px 8px;
    font-size: 11px;
  }

  .word-two {
    top: 26px;
    right: 15px;
    left: auto;
  }

  .spark-one {
    left: 27px;
    bottom: 18px;
  }

  .spark-two {
    top: 10px;
    right: 61px;
    font-size: 19px;
  }

  .notice-bar {
    padding: 12px;
  }

  .notice-bar strong,
  .notice-bar span:last-child {
    font-size: 13px;
  }

  .ways-in {
    padding: 20px 0 17px;
  }

  .ways-heading {
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 11px;
  }

  .section-eyebrow {
    font-size: 12px;
  }

  .ways-heading h2 {
    font-size: 22px;
  }

  .ways-heading > p {
    max-width: 125px;
    font-size: 11px;
  }

  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .module-card {
    min-height: 194px;
    padding: 11px 10px 10px;
  }

  .module-index {
    gap: 5px;
    font-size: 10px;
  }

  .module-count {
    top: 10px;
    right: 9px;
    gap: 3px;
    font-size: 10px;
  }

  .module-art {
    height: 64px;
    margin: 7px 0 2px;
  }

  .module-copy > strong {
    font-size: 15px;
    line-height: 1.35;
  }

  .module-copy > small {
    min-height: 34px;
    font-size: 11px;
    line-height: 1.45;
  }

  .module-action {
    gap: 5px;
    font-size: 11px;
  }

  .chat-art-word {
    left: calc(50% + 27px);
    font-size: 11px;
  }

  .envelope {
    transform: scale(0.78) rotate(-4deg);
  }

  .envelope-note {
    font-size: 10px;
  }

  .term-chip {
    padding: 4px 6px;
    font-size: 10px;
  }

  .chip-city {
    left: 0;
  }

  .chip-mood {
    left: 41%;
  }

  .chip-warm {
    left: 15%;
  }

  .chip-new {
    left: 57%;
  }

  .story-line {
    padding: 4px 6px;
    font-size: 10px;
  }

  .line-a {
    left: 1%;
  }

  .line-b {
    left: 22%;
  }

  .line-c {
    left: 12%;
  }

  .story-pencil {
    right: 3%;
    font-size: 22px;
  }

  .community {
    padding-top: 0;
  }

  .board-panel {
    padding: 16px 13px;
  }

  .panel-heading {
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 15px;
  }

  .panel-eyebrow {
    font-size: 12px;
  }

  .panel-heading h2 {
    font-size: 21px;
  }

  .panel-heading h2 > span {
    display: block;
    margin: 3px 0 0;
    font-size: 12px;
  }

  .panel-heading-right {
    align-items: flex-end;
    flex-direction: column;
    gap: 5px;
  }

  .live-count,
  .quiet-button {
    font-size: 11px;
  }

  .quiet-button {
    white-space: nowrap;
  }

  .chat-messages {
    height: 295px;
    padding: 13px 11px;
  }

  .chat-message {
    max-width: 96%;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
  }

  .chat-avatar {
    width: 27px;
    height: 27px;
    font-size: 12px;
  }

  .chat-bubble {
    padding: 8px 9px;
  }

  .chat-alias,
  .chat-time {
    font-size: 11px;
  }

  .chat-text {
    font-size: 14px;
  }

  .chat-compose {
    padding: 10px;
  }

  .compose-row input {
    height: 42px;
    font-size: 14px;
  }

  .send-button {
    min-width: 76px;
    padding: 0 11px;
    font-size: 13px;
  }

  .chat-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .aside-note {
    padding: 12px;
  }

  .aside-note p {
    font-size: 12px;
  }

  .aside-note b {
    font-size: 13px;
  }

  .chat-promise {
    min-height: 130px;
    padding: 13px;
  }

  .chat-promise > strong {
    font-size: 19px;
  }

  .chat-promise > small {
    font-size: 12px;
  }

  .tree-compose-band {
    gap: 12px;
    padding: 13px;
  }

  .compose-prompt > b {
    font-size: 19px;
  }

  .compose-prompt > small,
  .compose-prompt > span {
    font-size: 12px;
  }

  .tree-form textarea,
  .story-form textarea {
    min-height: 86px;
    font-size: 14px;
  }

  .tree-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .tree-card {
    padding: 13px;
  }

  .tree-message {
    font-size: 15px;
  }

  .tree-card-meta {
    font-size: 11px;
  }

  .comment-form input {
    height: 38px;
    font-size: 13px;
  }

  .comment-form button {
    padding: 0 10px;
    font-size: 12px;
  }

  .retention-chip {
    padding: 5px 7px;
    font-size: 11px;
  }

  .term-sorts {
    flex: 0 0 auto;
  }

  .sort-button {
    min-height: 32px;
    padding: 0 8px;
    font-size: 11px;
  }

  .terms-intro {
    align-items: flex-start;
    gap: 9px;
    padding: 11px;
  }

  .terms-intro-symbol {
    font-size: 19px;
  }

  .terms-intro p {
    font-size: 12px;
    line-height: 1.5;
  }

  .terms-count {
    gap: 4px;
    padding-left: 8px;
  }

  .terms-count b {
    font-size: 17px;
  }

  .terms-count small {
    font-size: 11px;
  }

  .term-form {
    gap: 8px;
  }

  .term-field label {
    font-size: 12px;
  }

  .term-field label small {
    font-size: 11px;
  }

  .term-field input {
    height: 39px;
    padding: 0 8px;
    font-size: 13px;
  }

  .term-form > .button {
    min-height: 38px;
    padding: 0 10px;
    font-size: 12px;
  }

  .term-cloud {
    gap: 7px;
    padding-top: 12px;
  }

  .term-card {
    min-height: 138px;
    padding: 10px;
  }

  .term-card-title {
    font-size: 14px;
  }

  .term-card-note {
    font-size: 12px;
  }

  .term-card-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
    margin-top: 10px;
  }

  .term-card-foot small {
    font-size: 11px;
  }

  .like-term {
    padding: 5px 7px;
    font-size: 11px;
  }

  .story-intro {
    gap: 10px;
    padding: 12px;
  }

  .story-stamp {
    width: 49px;
    height: 49px;
    font-size: 10px;
  }

  .story-stamp b {
    font-size: 20px;
  }

  .story-intro h3 {
    font-size: 16px;
  }

  .story-intro > div:nth-child(2) > span {
    font-size: 11px;
  }

  .story-text {
    max-height: 340px;
    padding: 10px 11px;
  }

  .story-fragment {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 8px;
    padding: 8px 0;
  }

  .story-fragment-index {
    font-size: 12px;
  }

  .story-fragment-text {
    font-size: 15px;
  }

  .story-form {
    gap: 9px;
    padding-top: 13px;
  }

  .story-form label {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .story-form label span {
    font-size: 14px;
  }

  .story-form label small {
    font-size: 12px;
  }

  .site-footer {
    gap: 7px 12px;
    padding-top: 14px;
    font-size: 11px;
  }

  .site-footer > span:nth-child(2) {
    margin-left: 0;
  }

  .site-footer button {
    margin-left: auto;
    font-size: 11px;
  }

  .rules-dialog {
    padding: 25px 20px 20px;
  }

  .rules-dialog h2 {
    font-size: 25px;
  }

  .rules-dialog ul {
    font-size: 13px;
  }

  .rules-dialog > p {
    font-size: 12px;
  }
}

@media (max-width: 360px) {
  .topbar-right {
    gap: 8px;
  }

  .signal-pill {
    max-width: 88px;
    font-size: 10px;
  }

  .module-count {
    font-size: 9px;
  }

  .module-card {
    min-height: 201px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .module-copy > strong {
    font-size: 14px;
  }

  .module-copy > small {
    font-size: 10px;
  }

  .term-chip {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Keep the playful artwork while letting the page breathe like a polished product. */
body{background:#fbfcfb}
:root{--ink:#203740;--muted:#6f7f82}
.brand-name,.welcome h1,.ways-heading h2,.module-copy strong,.knowledge-card h2,.contact-card h2{color:#203740}
.brand-name small,.welcome-lead,.ways-heading p,.module-copy small,.knowledge-card p,.contact-card p{color:#687b7d}
.welcome-kicker,.hero-secondary,.module-action,.site-footer button{color:#387f78}
.welcome-kicker i{color:#28725f;background:#e4f5eb}
.welcome h1{font-size:68px}
.welcome h1>span{color:#edae45}
.hero-button{background:#147b83;box-shadow:0 10px 22px #147b832e}
.hero-button:hover{box-shadow:0 17px 26px #147b8338}
.hero-secondary span{color:#f17d70}
.ways-heading h2 span{color:#f17d70}
.section-eyebrow{color:#338578}
.module-chat{--card-halo:#e4f5fb}
.module-tree{--card-halo:#fff1df}
.module-story{--card-halo:#eaf7eb}
.module-terms{--card-halo:#fff2cf}
.module-action{color:#347b70}
.art-terms .chip-city{color:#337e72}
.art-terms .chip-mood{background:#ef7c71}
.art-terms .chip-warm{background:#8ad9c1}
.kind-reminder{background:#fff8e8;border-color:#ffedc2}
.board-panel{box-shadow:0 20px 52px #293d4514}
.games-arena{background:linear-gradient(132deg,#175b6a,#167d7d 58%,#319580)}
.games-arena:before{background-image:radial-gradient(#ffffff20 1px,transparent 1px)}
.arcade-kicker{color:#c3f0dc}
.games-heading h2{font-size:58px}
.games-heading p{color:#dcf0e9}
.arcade-orbit{border-color:#d3f5e680}
.controller-plus{color:#3e695f}
.knowledge-card{background:linear-gradient(135deg,#effcf8,#fff)}
.contact-card button{background:#ed7f73}
.rules-dialog h2 em{color:#e97970}
.consent-label input{accent-color:#16827d}
.policy-text{background:#eef8f3;color:#4f7172}
.toast{background:#245e65}
.site-footer{color:#6b7b7e}
@media(max-width:760px){
  .welcome h1{font-size:48px}
  .games-heading h2{font-size:42px}
}

/* Cartoon playground refresh */
:root{--ink:#29264e;--muted:#77748e;--line:#ece9f6;--ease:cubic-bezier(.2,.82,.22,1)}
html{scroll-behavior:smooth;scroll-padding-top:84px}body{background:radial-gradient(ellipse at 80% 7%,#f7eaff 0,transparent 30%),radial-gradient(ellipse at 8% 25%,#e9f8ff 0,transparent 29%),#fcfbff;color:var(--ink);overflow-x:hidden}
.topbar{height:76px;padding-inline:max(4vw,24px);background:#ffffffc9;border-color:#e9e4f2;backdrop-filter:blur(20px)}.brand-mark{border-radius:13px;box-shadow:0 5px 14px #6754a122}.brand-name{color:#2c2c55}.brand-name small{color:#88869c}.signal-pill,.online-pill{background:#fff;border:1px solid #ebe8f3;border-radius:999px;padding:8px 13px;box-shadow:0 3px 12px #493d6810}.sound-button,.admin-link{border-radius:999px;transition:transform .22s var(--ease)}.sound-button:hover,.admin-link:hover{transform:translateY(-2px)}
body .welcome{max-width:1320px;min-height:625px;padding:58px 7vw 46px;margin:auto;grid-template-columns:.95fr 1.05fr;gap:3vw;align-items:center}.welcome-copy{position:relative;z-index:2;padding-block:16px}.welcome-kicker{display:flex;align-items:center;gap:10px;color:#7568a5;font-weight:750}.welcome-kicker>span{color:#ff9e43;font-size:20px;animation:twinkle 2.4s ease-in-out infinite}.welcome-kicker i{font-style:normal;font-size:11px;font-weight:750;color:#6552ad;background:#ede8ff;border-radius:999px;padding:7px 11px}.welcome h1{margin:22px 0 18px;color:#29264e;font-size:clamp(50px,6vw,82px);line-height:1.07;font-weight:850}.welcome h1 em{font-style:normal;color:#ff796c;position:relative;white-space:nowrap}.welcome h1 em:after{position:absolute;content:"";height:11px;border-radius:99px;background:#ffdc74;z-index:-1;left:2px;right:2px;bottom:2px;transform:rotate(-1.5deg)}.welcome h1>span{color:#8b78dc;font-size:.48em;vertical-align:top;margin-left:12px;display:inline-block;animation:spinSlow 12s linear infinite}.welcome-lead{font-size:18px;line-height:1.9;color:#65637f;max-width:520px}.hero-actions{display:flex;align-items:center;gap:20px;margin-top:29px}.hero-button{border:0;background:#322d60;color:#fff;border-radius:17px;padding:15px 19px 15px 23px;min-height:54px;font-weight:750;box-shadow:0 10px 22px #312b5a30;transition:transform .22s var(--ease),box-shadow .22s}.hero-button:hover{transform:translateY(-4px) rotate(-1deg);box-shadow:0 17px 26px #312b5a38}.hero-button b{margin-left:14px;font-size:19px}.hero-secondary{font-weight:750;color:#62558c;text-decoration:none;padding:13px 0}.hero-secondary span{color:#ff796c;margin-left:7px;display:inline-block;transition:transform .2s}.hero-secondary:hover span{transform:translateX(5px)}.welcome-hours{margin-top:28px;color:#88869c;font-size:13px}.welcome-hours i,.signal-dot{background:#54c69a;box-shadow:0 0 0 4px #54c69a22}
.welcome-visual{height:510px;position:relative;display:grid;place-items:center;isolation:isolate;transform:translate(var(--pointer-x,0),var(--pointer-y,0));transition:transform .3s ease}.planet-halo{position:absolute;width:min(85%,450px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffefaf 0 43%,#ffe5c9 43.4% 59%,transparent 59.5%);animation:haloBreathe 5s ease-in-out infinite}.orbit{position:absolute;border:1px dashed #d5c8ff;border-radius:50%;width:94%;height:42%;transform:rotate(-23deg);animation:orbitSpin 40s linear infinite}.orbit-inner{width:76%;height:34%;transform:rotate(28deg);border-color:#b6ddec;animation-direction:reverse}.planet-stage{position:absolute;width:64%;height:50%;bottom:17%;border-radius:50%;background:linear-gradient(150deg,#ffb8a4,#f57d8e 48%,#d987dc);box-shadow:inset -20px -19px 0 #d96b9470,0 28px 45px #e97e8d45;transform:rotate(-7deg);overflow:hidden}.planet-stage:after,.planet-stage:before{content:"";position:absolute;background:#ff9eb0;border-radius:50%;width:31%;height:18%;left:17%;top:23%;transform:rotate(-25deg);box-shadow:86px 106px 0 -5px #ffa5b5}.planet-stage:before{width:17%;height:8%;left:56%;top:20%;background:#ffd5a2;box-shadow:-170px 112px 0 -6px #ffd5a2}.planet-base{position:absolute;width:100%;height:39%;bottom:0;background:linear-gradient(170deg,#f9a1aa,#e67290);border-radius:50% 50% 0 0}.planet-shadow{position:absolute;width:80%;height:32%;left:9%;top:16%;border-radius:50%;background:#ffffff26}.mascot{position:absolute;width:220px;height:270px;left:calc(50% - 94px);top:22%;z-index:3;animation:mascotFloat 4s ease-in-out infinite}.mascot-body{position:absolute;inset:26px 5px 35px;border-radius:48% 48% 42% 42%;background:linear-gradient(148deg,#fffdf4,#fff2cc 57%,#ffd987);box-shadow:inset -13px -12px 0 #f3c56675,0 19px 30px #8961a447;transform:rotate(-4deg)}.mascot-top{position:absolute;width:49px;height:49px;left:88px;top:1px;border-radius:55% 50% 50% 12%;background:#ffde72;z-index:4;transform:rotate(36deg);box-shadow:inset -5px -6px #f4bd5d}.mascot-face{position:absolute;left:0;right:0;top:89px;height:80px}.eye{position:absolute;top:13px;width:10px;height:14px;border-radius:50%;background:#373357}.eye-left{left:72px}.eye-right{right:70px}.cheek{position:absolute;top:39px;width:23px;height:12px;border-radius:50%;background:#ff9e9c80}.cheek-left{left:45px}.cheek-right{right:42px}.mascot-mouth{position:absolute;width:18px;height:10px;top:42px;left:calc(50% - 9px);border:2.5px solid #56506e;border-top:0;border-radius:0 0 60% 60%}.mascot-shine{position:absolute;top:48px;left:31px;width:18px;height:44px;border-radius:50%;background:#fff9;transform:rotate(23deg)}.mascot-star{position:absolute;right:32px;top:73px;color:#ff9a55;font-size:19px}.mascot-hand{position:absolute;width:55px;height:24px;border:12px solid #f9d37f;border-bottom:0;border-radius:50% 50% 0 0;top:132px;z-index:-1}.hand-left{left:-37px;transform:rotate(-48deg)}.hand-right{right:-43px;transform:rotate(43deg)}.mascot-foot{position:absolute;bottom:23px;width:45px;height:29px;border-radius:50%;background:#edab69;box-shadow:inset 0 -5px #d38d61}.foot-left{left:45px}.foot-right{right:38px}.mini-creature{position:absolute;right:13%;bottom:26%;width:77px;height:62px;border-radius:48% 52% 45% 48%;background:linear-gradient(140deg,#b8a0ff,#8975de);box-shadow:inset -8px -7px #6552ac45,0 12px 18px #5943a333;z-index:4;animation:creatureBounce 2.8s ease-in-out infinite}.mini-creature>span{position:absolute;top:21px;width:7px;height:10px;border-radius:50%;background:#373357}.mini-creature>span:first-child{left:23px}.mini-creature>span:nth-child(2){right:22px}.mini-creature>b{position:absolute;left:34px;top:31px;font-size:13px}.floating-sticker{position:absolute;z-index:6;border:2px solid #fff;background:#fff;padding:11px 15px;border-radius:14px;font-size:13px;font-weight:800;box-shadow:0 9px 20px #6150841b;animation:stickerBob 3.6s ease-in-out infinite}.sticker-hi{top:13%;left:5%;transform:rotate(-8deg);color:#725cb8}.sticker-hi span{color:#ffa34e}.sticker-energy{bottom:19%;left:7%;transform:rotate(5deg);color:#578e7b;animation-delay:-1.8s}.sticker-energy i{font-style:normal;color:#ff7a6e}.floating-doodle{position:absolute;color:#ff846f;animation:stickerBob 3s ease-in-out infinite}.doodle-heart{right:11%;top:16%;font-size:29px}.doodle-plus{top:33%;left:18%;font-size:25px;color:#ffae3e}.doodle-star{right:10%;bottom:36%;font-size:25px;color:#927ada}.doodle-dot{width:12px;height:12px;background:#74d2bd;border-radius:50%;right:23%;top:24%}.visual-caption{position:absolute;bottom:2%;color:#85809c;font-size:13px}.planet-halo{z-index:-1}
body .ways-in{max-width:1320px;padding:36px 5vw 75px;margin:auto}.ways-heading{align-items:end;margin-bottom:25px}.section-eyebrow{color:#8d79cb;font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}.section-eyebrow span{color:#f5a741}.ways-heading h2{color:#29264e;font-size:38px;margin:8px 0}.ways-heading h2 span{color:#ff7b68}.ways-heading p{color:#77748e;font-size:14px;line-height:1.8}.module-grid{gap:17px;grid-template-columns:repeat(4,minmax(0,1fr))}.module-card{position:relative;min-width:0;border:1px solid #ece9f5;border-radius:22px;background:#fff;min-height:355px;padding:20px 20px 19px;box-shadow:0 9px 24px #5648840c;overflow:hidden;transition:transform .32s var(--ease),box-shadow .32s,border-color .32s;text-align:left}.module-card:before{position:absolute;content:"";width:190px;height:190px;right:-65px;top:63px;border-radius:50%;background:var(--card-halo,#f3edff);transition:transform .4s var(--ease);opacity:.85}.module-card:hover,.module-card:focus-visible{transform:translateY(-9px) rotate(-.6deg);box-shadow:0 24px 44px #56488422;border-color:#d7cef2;outline:none}.module-card:hover:before{transform:scale(1.22)}.module-chat{--card-halo:#e9f3ff}.module-tree{--card-halo:#fff0df}.module-story{--card-halo:#efeaff}.module-terms{--card-halo:#e2f8f2}.module-index{position:relative;z-index:2;color:#77748c;font-size:11px;font-weight:800}.card-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:#ff9877;margin-left:6px}.module-art{height:170px;display:block;position:relative;z-index:1;margin:9px -5px 0;overflow:hidden}.module-copy{position:relative;z-index:2;display:flex;flex-direction:column;gap:7px}.module-copy strong{color:#2c2a4d;font-size:19px;font-weight:850}.module-copy small{font-size:12px;line-height:1.6;color:#85829a;min-height:36px}.module-action{font-size:12px;color:#6b5db0;font-weight:800;margin-top:3px}.module-action b{margin-left:6px;transition:transform .2s}.module-card:hover .module-action b{display:inline-block;transform:translate(3px,-2px)}.module-count{position:absolute;bottom:20px;right:18px;z-index:3;font-size:10px;color:#9894aa}.module-count b{color:#696187;font-size:12px}.bubble-character{position:absolute;width:95px;height:78px;border-radius:28px;background:#fff;box-shadow:0 10px 26px #43407720}.bubble-character:after{position:absolute;content:"";bottom:-9px;left:23px;border-width:10px 11px 0 0;border-style:solid;border-color:#fff transparent transparent}.bubble-character i{position:absolute;top:29px;width:7px;height:10px;border-radius:50%;background:#444064}.bubble-character i:first-child{left:31px}.bubble-character i:nth-child(2){right:31px}.bubble-character b{position:absolute;left:43px;top:42px;font-size:12px}.bubble-back{left:36%;top:22px;transform:rotate(8deg);background:#d6c9ff}.bubble-back:after{border-top-color:#d6c9ff}.bubble-back i{background:#6556a5}.bubble-front{left:14%;top:59px;transform:rotate(-8deg);animation:cardFloat 3s ease-in-out infinite}.mini-caption{position:absolute;right:2%;bottom:9px;background:#fff;border:1px solid #eee9f5;border-radius:999px;padding:8px 11px;color:#686083;font-weight:700;font-size:10px;box-shadow:0 6px 14px #55447c13;transform:rotate(-5deg)}.art-spark{position:absolute;right:17%;top:12%;color:#ff9a42;font-size:25px;animation:twinkle 2s infinite}.note-character{position:absolute;left:24%;top:21px;width:125px;height:119px;background:#fff;border-radius:10px 10px 24px 12px;box-shadow:0 12px 25px #4d3d6220;transform:rotate(6deg);padding:22px 13px}.note-eyes{display:flex;justify-content:center;gap:29px;margin:2px auto 9px}.note-eyes i{width:6px;height:8px;border-radius:50%;background:#4b446a}.note-character>b{display:block;text-align:center;font-size:11px;color:#807397}.note-line{display:block;width:78%;height:4px;border-radius:9px;background:#ded8ef;margin:8px auto 0}.note-line.short{width:48%;margin-top:5px}.note-heart{position:absolute;right:8px;top:8px;color:#ff8076;font-size:15px}.sticker-tape{position:absolute;width:53px;height:16px;left:37%;top:11px;background:#ffe27c99;transform:rotate(-28deg);z-index:2}.story-book{position:absolute;left:23%;top:20px;width:140px;height:112px;filter:drop-shadow(0 12px 12px #42377425);transform:rotate(-5deg);animation:cardFloat 3.5s ease-in-out infinite}.book-page{position:absolute;top:4px;width:70px;height:100px;background:#fff9ea}.page-left{left:0;border-radius:14px 0 0 14px;transform:skewY(5deg);background:#ffd879}.page-right{right:0;border-radius:0 14px 14px 0;transform:skewY(-5deg)}.book-face{position:absolute;left:49px;top:37px;width:42px;height:36px;background:#fa9d83;border-radius:44%}.book-face i{position:absolute;top:11px;width:4px;height:6px;background:#4b446a;border-radius:50%}.book-face i:first-child{left:12px}.book-face i:nth-child(2){right:12px}.book-face b{position:absolute;left:18px;top:20px;font-size:8px}.story-pencil{position:absolute;right:18%;top:33px;font-size:42px;color:#f18774;transform:rotate(22deg)}.meme-face{position:absolute;left:34%;top:30px;width:75px;height:73px;background:#ffdb71;border-radius:50%;box-shadow:inset -7px -8px #e9b85666,0 10px 20px #52407925;transform:rotate(8deg);animation:creatureBounce 2.9s infinite}.meme-face i{position:absolute;top:28px;width:6px;height:9px;background:#46405e;border-radius:50%}.meme-face i:first-child{left:23px}.meme-face i:nth-child(2){right:22px}.meme-face b{position:absolute;top:41px;left:33px;font-size:11px}.term-chip{position:absolute;z-index:1;padding:8px 12px;border-radius:12px;background:#fff;font-size:11px;font-weight:850;box-shadow:0 8px 20px #45386e18;animation:chipDrift 4s ease-in-out infinite}.chip-city{left:10%;top:26px;transform:rotate(-8deg);color:#735dad}.chip-city i{color:#ff9867}.chip-mood{right:7%;top:46px;transform:rotate(8deg);background:#ff8878;color:#fff;animation-delay:-1.1s}.chip-warm{left:8%;bottom:17px;transform:rotate(3deg);background:#8ad9c1;color:#284b47;animation-delay:-2.3s}
.kind-reminder{max-width:820px;margin:24px auto 0;display:flex;align-items:center;gap:13px;padding:15px 19px;border-radius:18px;background:#fff7e8;color:#766344;border:1px solid #ffefca;font-size:13px;line-height:1.7}.kind-reminder>span{font-size:24px;color:#ff8777}.kind-reminder p{margin:0}.kind-reminder b{color:#8d644f}.board-panel{background:#fff;border:1px solid #eeebf5;border-radius:26px;padding:34px;box-shadow:0 22px 60px #4335781f;animation:panelPop .46s var(--ease) both}.board-panel[hidden]{display:none}.chat-messages{border-radius:20px;background:linear-gradient(150deg,#f9f8ff,#f1f4ff);border:1px solid #eceafa}.chat-compose,.tree-compose-band,.terms-intro,.story-intro,.story-form{border-radius:18px;background:#faf9ff;border-color:#ece8f6}.send-button,.button-dark{border-radius:13px;transition:transform .2s var(--ease),box-shadow .2s}.send-button:hover,.button-dark:hover{transform:translateY(-2px);box-shadow:0 9px 17px #3933672c}.tree-form textarea,.story-form textarea,.term-field input,.chat-compose input{border-radius:13px;border-color:#e7e3f1;background:#fff}.category-label{display:flex;align-items:center;gap:10px;color:#716d89;font-weight:750;font-size:13px;margin-bottom:11px}.category-label select{appearance:none;border:1px solid #dfd9ef;background:#fff;color:#544d79;border-radius:999px;padding:8px 31px 8px 12px;font:inherit;cursor:pointer}.tree-card,.term-card{border-radius:18px;border-color:#ece8f4;box-shadow:0 7px 18px #473d6908}.story-text{border-radius:18px;background:#fffaf1;border:1px solid #f2e6cd}
.games-arena{background:linear-gradient(132deg,#342c68,#504293 58%,#634c9a);color:white;padding:78px max(7vw,24px) 84px;position:relative;overflow:hidden}.games-arena:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#ffffff1c 1px,transparent 1px);background-size:23px 23px;mask-image:linear-gradient(to bottom,black,transparent 90%);pointer-events:none}.games-heading{max-width:1190px;margin:auto;display:grid;grid-template-columns:1fr .8fr;align-items:center;min-height:350px;position:relative}.arcade-kicker{font-size:12px;font-weight:850;letter-spacing:.13em;color:#c2b6ff}.arcade-kicker i{font-style:normal;color:#ffdc70;margin:0 5px}.games-heading h2{font-size:clamp(44px,6vw,72px);line-height:1.1;margin:17px 0;color:white;font-weight:850}.games-heading h2 span{color:#ffdc70}.games-heading p{color:#d3cef0;line-height:1.9;font-size:15px}.arcade-art{height:310px;position:relative;display:grid;place-items:center}.arcade-orbit{position:absolute;width:310px;height:190px;border:1px dashed #c9baff88;border-radius:50%;transform:rotate(-24deg);animation:orbitSpin 35s linear infinite}.controller{width:235px;height:159px;border-radius:51px 51px 60px 60px;background:linear-gradient(140deg,#ffda71,#ffad62);box-shadow:inset -14px -15px #e38b6166,0 23px 34px #15102e66;transform:rotate(-9deg);position:relative;animation:controllerFloat 3.5s ease-in-out infinite}.controller:before,.controller:after{content:"";position:absolute;width:75px;height:68px;border-radius:50%;bottom:-15px;background:#f8ba64;z-index:-1}.controller:before{left:6px}.controller:after{right:6px}.controller-plus{position:absolute;left:40px;top:44px;font-size:34px;color:#5d4b91}.controller-button{position:absolute;width:19px;height:19px;border-radius:50%;background:#f6786d;box-shadow:inset -3px -4px #c9546055}.controller-button.one{right:48px;top:42px}.controller-button.two{right:24px;top:70px;background:#88d6bd}.controller-smile{position:absolute;bottom:25px;left:calc(50% - 8px);color:#a76d52;font-size:23px}.arcade-sticker{position:absolute;bottom:21px;right:7%;background:#a4e3cc;color:#326353;border:3px solid #fff;padding:9px 13px;border-radius:9px;transform:rotate(-7deg);font-size:10px;font-weight:900}.arcade-star{position:absolute;right:9%;top:32px;color:#ffd766;font-size:32px;animation:twinkle 1.5s infinite}.games-hub{position:relative;max-width:1190px;margin:0 auto;color:var(--ink)}.game-loading{color:#ded6ff}
.little-extras{max-width:1190px;margin:0 auto;padding:72px 30px;display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.knowledge-card,.contact-card{position:relative;border:1px solid #ece8f4;border-radius:22px;padding:27px;background:#fff;box-shadow:0 11px 30px #4537740c}.knowledge-card{display:flex;gap:20px;align-items:flex-start;background:linear-gradient(135deg,#effcf8,#fff)}.knowledge-icon{width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;border-radius:17px;background:#85dcc0;color:#34705e;font-size:25px;animation:twinkle 2s infinite}.knowledge-card h2,.contact-card h2{margin:10px 0;color:#302d53;font-size:24px}.knowledge-card p,.contact-card p{font-size:14px;color:#77748e;line-height:1.8}.round-button{flex:0 0 43px;width:43px;height:43px;margin-left:auto;border:1px solid #e6e1f2;border-radius:50%;background:#fff;color:#7565b5;font-size:24px;cursor:pointer;transition:transform .35s}.round-button:hover{transform:rotate(90deg)}.contact-card{background:linear-gradient(145deg,#fff6f2,#fff)}.contact-card-top{display:flex;gap:10px;align-items:center;color:#f17e73}.contact-card-top>span{font-size:24px}.contact-card-top i{font-style:normal;color:#8b7c89;font-size:12px}.contact-card button{border:0;border-radius:12px;background:#fa8174;color:#fff;padding:12px 15px;font-weight:750;cursor:pointer}.community-disclaimer{max-width:1120px;margin:0 auto 30px;padding:20px 25px;display:flex;gap:15px;border-radius:17px;background:#fff9e8;border:1px solid #faedc7;color:#706449}.disclaimer-flower{font-size:25px;color:#e9ad44}.community-disclaimer strong{font-size:13px}.community-disclaimer p{margin:6px 0 0;font-size:12px;line-height:1.75;color:#81775f}.site-footer{max-width:1120px;margin:auto}.site-footer button{color:#7263aa}
.rules-dialog{border:1px solid #eee7f3;border-radius:25px;padding:38px;box-shadow:0 30px 100px #2119404d;max-width:min(560px,calc(100vw - 28px));color:#353052}.rules-dialog::backdrop{background:#241d46a6;backdrop-filter:blur(7px)}.rules-dialog h2{font-size:31px;line-height:1.3;color:#302b54}.rules-dialog h2 em{color:#f17d74;font-style:normal}.rules-dialog ul{padding-left:20px;line-height:1.85;color:#69657d}.rules-scroll{max-height:43vh;overflow:auto}.rules-scroll p,.contact-dialog>p,.policy-text{font-size:12px;color:#77738b;line-height:1.75}.policy-text{padding:12px;background:#f6f3ff;border-radius:12px}.consent-label{display:flex;gap:11px;align-items:flex-start;padding:13px;margin:14px 0;background:#fff8e8;border-radius:12px;color:#665a43;font-size:13px;line-height:1.6}.consent-label input{width:19px;height:19px;accent-color:#6354a4;flex:0 0 19px;margin:0}.dialog-accept{width:100%;min-height:48px}.dialog-accept:disabled{opacity:.45;cursor:not-allowed}.contact-dialog form{display:grid;gap:10px}.contact-dialog form label{font-size:13px;font-weight:750;color:#625d7c}.contact-dialog form label small{font-weight:400;color:#999}.contact-dialog textarea,.contact-dialog input{border:1px solid #e4e0ed;border-radius:12px;padding:12px;font:inherit;resize:vertical}.contact-dialog form button{margin-top:7px}.toast{border-radius:14px;background:#332e5f;box-shadow:0 14px 30px #352d6555}
.reveal-on-scroll{opacity:0;translate:0 18px;transition:opacity .6s ease,translate .65s var(--ease);transition-delay:var(--reveal-delay,0ms)}.reveal-on-scroll.in-view{opacity:1;translate:0 0}.module-card.pressing{scale:.975}
@keyframes mascotFloat{0%,100%{translate:0 0;rotate:-2deg}50%{translate:0 -14px;rotate:2deg}}@keyframes creatureBounce{0%,100%{translate:0 0;rotate:0}40%{translate:0 -8px;rotate:-6deg}65%{translate:0 -3px;rotate:4deg}}@keyframes stickerBob{0%,100%{translate:0 0}50%{translate:0 -9px}}@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}@keyframes chipDrift{0%,100%{translate:0 0}50%{translate:4px -7px}}@keyframes orbitSpin{to{rotate:360deg}}@keyframes spinSlow{to{rotate:360deg}}@keyframes twinkle{0%,100%{scale:1;opacity:1}50%{scale:.82;opacity:.68}}@keyframes haloBreathe{0%,100%{scale:1;opacity:.9}50%{scale:1.04;opacity:1}}@keyframes controllerFloat{0%,100%{translate:0 0;rotate:-9deg}50%{translate:0 -12px;rotate:-4deg}}@keyframes panelPop{from{opacity:0;translate:0 12px;scale:.99}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:1000px){.module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.module-card{min-height:335px}body .welcome{padding-inline:5vw;min-height:580px}.welcome-visual{height:430px}.mascot{scale:.86}.planet-stage{width:72%}.little-extras{padding-inline:5vw}.community-disclaimer{margin-inline:5vw}}
@media(max-width:680px){.topbar{height:64px;padding-inline:15px}.brand-mark{width:35px;height:35px}.brand-name{font-size:13px}.brand-name small{font-size:10px}.signal-pill{display:none}.topbar-right{gap:8px}.online-pill{padding:7px 9px;font-size:11px}.sound-button{font-size:10px;padding:7px 9px}.admin-link{font-size:11px;padding:7px 9px}body .welcome{display:flex;flex-direction:column;align-items:stretch;padding:37px 22px 20px;min-height:unset;gap:0}.welcome-copy{padding:0}.welcome h1{font-size:49px;margin:19px 0 15px}.welcome-lead{font-size:15px;line-height:1.8}.hero-actions{margin-top:21px;gap:16px}.hero-button{padding:13px 16px 13px 18px;min-height:48px}.welcome-hours{margin-top:16px;font-size:11px}.welcome-visual{width:100%;height:315px;margin-top:0;overflow:visible}.planet-stage{width:72%;height:57%;bottom:14%}.planet-halo{width:83%}.mascot{scale:.68;left:calc(50% - 80px);top:2%}.mini-creature{right:10%;bottom:18%;scale:.76}.sticker-hi{left:0;top:4%;scale:.85}.sticker-energy{left:0;bottom:12%;scale:.8}.doodle-heart{right:6%;top:8%}.visual-caption{bottom:0;font-size:10px}.ways-in{padding:36px 18px 46px}.ways-heading{display:block;margin-bottom:18px}.ways-heading h2{font-size:28px}.ways-heading p{margin:7px 0;font-size:12px}.module-grid{gap:11px}.module-card{min-height:300px;padding:14px 12px;border-radius:18px}.module-index{font-size:9px}.module-art{height:137px;margin:4px -3px 0}.bubble-character{scale:.75}.bubble-front{left:8%;top:50px}.bubble-back{left:34%;top:14px}.mini-caption{font-size:8px;padding:6px 8px;bottom:5px}.note-character{left:14%;scale:.82;transform-origin:top left}.story-book{left:12%;scale:.82;transform-origin:top left}.story-pencil{right:10%;top:25px;font-size:33px}.term-chip{font-size:9px;padding:7px 9px}.chip-city{left:1%;top:24px}.chip-mood{right:0;top:42px}.chip-warm{left:0;bottom:14px}.meme-face{left:33%;scale:.82;transform-origin:top left}.module-copy strong{font-size:15px}.module-copy small{font-size:10px;min-height:34px}.module-action{font-size:10px}.module-count{font-size:9px;bottom:13px;right:11px}.module-count b{font-size:10px}.kind-reminder{margin-top:17px;padding:12px;font-size:11px;align-items:flex-start}.community{padding:0 13px 44px}.board-panel{padding:18px 13px;border-radius:20px}.panel-heading{display:block}.panel-heading h2{font-size:22px}.panel-heading h2 span{display:block;margin-top:6px}.panel-heading-right{margin-top:12px;justify-content:space-between}.chat-layout{display:block}.chat-aside{display:none}.chat-messages{min-height:250px}.compose-row{gap:7px}.send-button{padding:0 11px}.tree-compose-band{padding:14px}.tree-form textarea,.story-form textarea{min-height:100px}.games-arena{padding:55px 20px 55px}.games-heading{grid-template-columns:1fr;min-height:unset}.games-heading h2{font-size:46px}.games-heading p{font-size:13px}.arcade-art{height:230px}.controller{scale:.78}.arcade-orbit{scale:.75}.arcade-sticker{right:4%;bottom:12px}.little-extras{grid-template-columns:1fr;padding:45px 16px;gap:12px}.knowledge-card,.contact-card{padding:19px;border-radius:18px}.knowledge-card{gap:12px}.knowledge-icon{width:40px;height:40px;flex-basis:40px}.knowledge-card h2,.contact-card h2{font-size:19px}.knowledge-card p,.contact-card p{font-size:12px}.community-disclaimer{margin:0 15px 22px;padding:15px;gap:10px}.community-disclaimer p{font-size:10px}.site-footer{padding-inline:17px;flex-wrap:wrap;gap:7px;font-size:10px}.rules-dialog{padding:27px 20px}.rules-dialog h2{font-size:27px}.rules-scroll{max-height:40vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal-on-scroll{opacity:1;translate:0 0}}
/* Color balance and fixed type scale for a clearer, friendlier playground. */
body{background:#fbfcfb}
:root{--ink:#203740;--muted:#6f7f82;--line:#e5ecea}
.brand-name,.welcome h1,.ways-heading h2,.module-copy strong,.knowledge-card h2,.contact-card h2{color:#203740}
.brand-name small,.welcome-lead,.ways-heading p,.module-copy small,.knowledge-card p,.contact-card p{color:#687b7d}
.welcome-kicker,.hero-secondary,.module-action,.site-footer button{color:#387f78}
.welcome-kicker i{color:#28725f;background:#e4f5eb}
.welcome h1{font-size:68px}
.welcome h1>span{color:#edae45}
.hero-button{background:#147b83;box-shadow:0 10px 22px #147b832e}
.hero-button:hover{box-shadow:0 17px 26px #147b8338}
.hero-secondary span,.ways-heading h2 span{color:#ed796c}
.section-eyebrow{color:#338578}
.module-chat{--card-halo:#e4f5fb}
.module-tree{--card-halo:#fff1df}
.module-story{--card-halo:#eaf7eb}
.module-terms{--card-halo:#fff2cf}
.module-action,.art-terms .chip-city{color:#347b70}
.art-terms .chip-mood{background:#ef7c71}
.art-terms .chip-warm{background:#8ad9c1}
.games-arena{background:linear-gradient(132deg,#175b6a,#167d7d 58%,#319580)}
.games-heading h2{font-size:58px}
.games-heading p{color:#dcf0e9}
.arcade-orbit{border-color:#d3f5e680}
.controller-plus{color:#3e695f}
.rules-dialog h2 em{color:#e97970}
.consent-label input{accent-color:#16827d}
.policy-text{background:#eef8f3;color:#4f7172}
.toast{background:#245e65}
@media(max-width:760px){.welcome h1{font-size:48px}.games-heading h2{font-size:42px}}
.rules-dialog{max-height:min(90dvh,820px);overflow:auto;overscroll-behavior:contain}
.policy-text{max-height:20vh;overflow:auto}
.rules-scroll{max-height:34vh}
@media(max-width:760px){.rules-dialog{padding:18px 19px 15px}.rules-scroll{max-height:20vh}.rules-scroll ul{line-height:1.45}}
.rules-dialog[open]{display:flex;flex-direction:column;height:min(90dvh,820px)}
.rules-scroll{flex:1 1 auto;min-height:90px;overflow:auto}
.consent-label,.dialog-accept{flex:0 0 auto}
.dialog-kicker{margin-top:5px}
.rules-dialog h2{margin:5px 0 9px;font-size:27px}
.rules-dialog>.policy-text{margin:6px 0 8px;padding:8px}
.rules-scroll ul{gap:5px;font-size:13px;line-height:1.45}
.rules-scroll p{margin:7px 0 9px;font-size:12px;line-height:1.5}
.consent-label{margin:8px 0;padding:9px}