:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f7fff0;
  --bg-tertiary: #eefbe5;
  --bg-card: #ffffff;
  --bg-card-hover: #fbfff7;
  --accent: #58cc02;
  --accent-dim: #d7ffb8;
  --accent-glow: rgba(88, 204, 2, 0.18);
  --route-blue: #1cb0f6;
  --route-green: #58cc02;
  --route-yellow: #ffc700;
  --text-primary: #3c3c3c;
  --text-secondary: #4b4b4b;
  --text-muted: #777777;
  --border: #e5e5e5;
  --border-hover: #cfcfcf;
  --success: #58cc02;
  --warning: #ffc700;
  --danger: #ff6b8b;
  --radius: 12px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --shadow: none;
  --shadow-glow: none;
  --transition: all 180ms ease;
  --font-primary: "Nunito Sans", "Varela Round", system-ui, sans-serif;
  --font-mono: "Fredoka", "Baloo 2", system-ui, sans-serif;
}

* {
  letter-spacing: 0;
}

html {
  scrollbar-color: #cbeab7 #ffffff;
}

body {
  background:
    radial-gradient(circle at 12% 180px, rgba(215, 255, 184, 0.72) 0 120px, transparent 121px),
    radial-gradient(circle at 88% 360px, rgba(28, 176, 246, 0.14) 0 110px, transparent 111px),
    linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #f7fff0 100%);
  color: var(--text-primary);
  font-family: var(--font-primary);
  font-weight: 700;
}

body::before {
  background-image:
    linear-gradient(90deg, rgba(88, 204, 2, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(88, 204, 2, 0.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 70%);
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: #cbeab7;
  border-radius: 999px;
}

.nav-glass {
  padding: 0 24px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 2px solid var(--border);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.nav-glass.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 2px solid var(--border);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}

.nav-inner {
  max-width: 1380px;
  height: 76px;
  gap: 14px;
}

.nav-logo {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  flex: 0 0 auto;
}

.nav-logo .dot {
  width: 34px;
  height: 34px;
  border: 3px solid #3c3c3c;
  background: #58cc02;
  box-shadow: 0 4px 0 #3f8f01;
  position: relative;
  animation: none;
}

.nav-logo .dot::before,
.nav-logo .dot::after {
  content: "";
  position: absolute;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #3c3c3c;
}

.nav-logo .dot::before {
  left: 7px;
}

.nav-logo .dot::after {
  right: 7px;
}

.nav-links {
  gap: 2px;
  flex: 0 0 auto;
  min-width: 0;
}

.nav-link {
  color: var(--text-muted);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  padding: 11px 8px;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  flex: 0 0 auto;
}

.nav-link:hover,
.nav-link.active {
  color: #58cc02;
  background: #e9ffd8;
}

.nav-search,
.lang-toggle,
.mobile-menu-btn {
  background: #ffffff;
  color: var(--text-muted);
  border: 2px solid var(--border);
  box-shadow: 0 3px 0 #d6d6d6;
}

.nav-search {
  width: 224px;
  min-width: 224px;
}

.nav-search:focus-within {
  border-color: #1cb0f6;
  box-shadow: 0 3px 0 #0d8ec9;
}

.global-search-input {
  color: var(--text-primary);
  font-weight: 800;
  width: 100%;
}

.nav-search kbd {
  background: #f4f4f4;
  color: #777777;
  border: 1px solid #e5e5e5;
}

.nav-actions {
  flex: 0 0 auto;
  gap: 10px;
}

.btn-nav,
.btn-primary,
.mini-btn.accent,
.planner-preset-btn:hover,
.map-popup-btn.primary {
  background: #58cc02;
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 5px 0 #3f8f01;
  font-family: var(--font-primary);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-nav {
  min-width: 124px;
  min-height: 56px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-nav:hover,
.btn-primary:hover,
.mini-btn.accent:hover,
.map-popup-btn.primary:hover {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #3f8f01;
}

.btn-nav:active,
.btn-primary:active,
.mini-btn.accent:active,
.map-popup-btn.primary:active {
  transform: translateY(5px);
  box-shadow: none;
}

.btn-ghost,
.mini-btn,
.tool-btn,
.planner-preset-btn,
.map-popup-btn.secondary {
  background: #ffffff;
  color: #1cb0f6;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 4px 0 #d6d6d6;
  font-family: var(--font-primary);
  font-weight: 900;
  text-transform: uppercase;
}

.btn-ghost:hover,
.mini-btn:hover,
.tool-btn:hover,
.planner-preset-btn:hover,
.map-popup-btn.secondary:hover {
  border-color: #1cb0f6;
  background: #f1fbff;
  color: #1cb0f6;
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b9e6fb;
}

.main-content {
  padding-top: 76px;
}

.hero {
  min-height: auto;
  align-items: center;
  justify-content: center;
  padding: 70px 24px 36px;
  background:
    linear-gradient(180deg, rgba(215, 255, 184, 0.5), rgba(255, 255, 255, 0)),
    #ffffff;
  overflow: hidden;
}

.hero.view {
  display: none;
}

.hero.view.active {
  display: flex;
}

.hero::before {
  background:
    linear-gradient(90deg, transparent 0 38px, rgba(88, 204, 2, 0.08) 39px 40px, transparent 41px),
    linear-gradient(180deg, transparent 0 38px, rgba(88, 204, 2, 0.08) 39px 40px, transparent 41px);
  background-size: 40px 40px;
  opacity: 1;
}

.hero::after {
  content: "✦";
  position: absolute;
  right: 7%;
  top: 17%;
  width: auto;
  height: auto;
  background: none;
  color: #ffc700;
  font-size: 54px;
  opacity: 0.9;
}

.hero-inner {
  max-width: 1140px;
  grid-template-columns: minmax(0, 0.94fr) minmax(340px, 0.9fr);
  gap: 36px;
  align-items: center;
}

.hero-badge {
  width: fit-content;
  background: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 999px;
  color: #58cc02;
  box-shadow: 0 4px 0 #d6d6d6;
  font-weight: 900;
}

.hero-badge span:first-child {
  color: #ffc700;
}

.hero-title {
  max-width: 620px;
  color: #3c3c3c;
  font-family: var(--font-mono);
  font-size: 64px;
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: 0;
}

.hero-title .highlight {
  color: #58cc02;
}

.hero-title .highlight::after {
  height: 12px;
  bottom: 3px;
  background: #d7ffb8;
  border-radius: 999px;
  opacity: 1;
  z-index: -1;
}

.hero-subtitle,
.section-desc,
.bento-desc,
.map-panel-desc,
.planner-api-status,
.composer-hint,
.setting-desc,
.asset-desc,
.profile-bio {
  color: #777777;
  font-weight: 700;
}

.hero-subtitle {
  max-width: 540px;
  font-size: 17px;
}

.hero-actions {
  margin-top: 30px;
}

.cartoon-hero-art {
  position: relative;
  min-height: 380px;
  grid-row: span 2;
}

.cartoon-map {
  position: absolute;
  inset: 44px 14px 34px 14px;
  background: #f4fff0;
  border: 4px solid #3c3c3c;
  border-radius: 38px;
  box-shadow: 0 10px 0 #d6d6d6;
  transform: rotate(-2deg);
  overflow: hidden;
}

.cartoon-map::before,
.cartoon-map::after {
  content: "";
  position: absolute;
  background: #d7ffb8;
  border: 3px solid rgba(60, 60, 60, 0.16);
  border-radius: 999px;
}

.cartoon-map::before {
  width: 190px;
  height: 120px;
  left: -38px;
  top: 38px;
}

.cartoon-map::after {
  width: 220px;
  height: 150px;
  right: -42px;
  bottom: -26px;
  background: #d9f3ff;
}

.cartoon-route {
  position: absolute;
  left: 64px;
  right: 72px;
  top: 118px;
  height: 120px;
  border-top: 8px dashed #1cb0f6;
  border-radius: 50%;
  transform: rotate(10deg);
  z-index: 2;
}

.cartoon-pin {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 4px solid #3c3c3c;
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-45deg);
  background: #cc348d;
  z-index: 3;
}

.cartoon-pin::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  left: 8px;
  top: 8px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #3c3c3c;
}

.pin-one {
  left: 64px;
  top: 142px;
}

.pin-two {
  right: 95px;
  top: 98px;
  background: #ffc700;
}

.pin-three {
  right: 140px;
  bottom: 74px;
  background: #a570ff;
}

.cartoon-mascot {
  position: absolute;
  left: 50%;
  bottom: 38px;
  width: 130px;
  height: 150px;
  margin-left: -65px;
  background: #58cc02;
  border: 4px solid #3c3c3c;
  border-radius: 48% 48% 42% 42%;
  box-shadow: 0 8px 0 #3f8f01;
  z-index: 5;
}

.cartoon-mascot::before,
.cartoon-mascot::after {
  content: "";
  position: absolute;
  top: 30px;
  width: 38px;
  height: 54px;
  background: #4ab102;
  border: 4px solid #3c3c3c;
  border-radius: 50%;
  z-index: -1;
}

.cartoon-mascot::before {
  left: -22px;
  transform: rotate(-28deg);
}

.cartoon-mascot::after {
  right: -22px;
  transform: rotate(28deg);
}

.mascot-eye {
  position: absolute;
  top: 43px;
  width: 28px;
  height: 32px;
  background: #ffffff;
  border: 4px solid #3c3c3c;
  border-radius: 50%;
}

.mascot-eye::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3c3c3c;
}

.mascot-eye.left {
  left: 28px;
}

.mascot-eye.right {
  right: 28px;
}

.mascot-beak {
  position: absolute;
  left: 50%;
  top: 82px;
  width: 28px;
  height: 20px;
  margin-left: -14px;
  background: #ffc700;
  border: 4px solid #3c3c3c;
  border-radius: 0 0 16px 16px;
}

.mascot-wing {
  position: absolute;
  left: 24px;
  bottom: 20px;
  width: 82px;
  height: 34px;
  background: #79db2e;
  border: 4px solid #3c3c3c;
  border-radius: 999px;
}

.cartoon-sun {
  position: absolute;
  right: 12px;
  top: 8px;
  width: 82px;
  height: 82px;
  border: 4px solid #3c3c3c;
  border-radius: 50%;
  background: #ffc700;
  box-shadow: 0 6px 0 #dc9f00;
}

.cartoon-cloud {
  position: absolute;
  height: 38px;
  background: #ffffff;
  border: 3px solid #3c3c3c;
  border-radius: 999px;
  box-shadow: 0 4px 0 #d6d6d6;
  z-index: 7;
}

.cartoon-cloud::before,
.cartoon-cloud::after {
  content: "";
  position: absolute;
  bottom: 8px;
  border: 3px solid #3c3c3c;
  border-bottom: 0;
  background: #ffffff;
  border-radius: 999px 999px 0 0;
}

.cartoon-cloud::before {
  left: 18px;
  width: 34px;
  height: 30px;
}

.cartoon-cloud::after {
  right: 20px;
  width: 42px;
  height: 38px;
}

.cloud-one {
  left: 4px;
  top: 22px;
  width: 128px;
}

.cloud-two {
  right: 90px;
  bottom: 8px;
  width: 110px;
}

.cartoon-ticket {
  position: absolute;
  left: 18px;
  bottom: 56px;
  padding: 13px 18px;
  background: #a570ff;
  color: #ffffff;
  border: 4px solid #3c3c3c;
  border-radius: 18px;
  box-shadow: 0 6px 0 #7344c6;
  font-family: var(--font-mono);
  font-size: 32px;
  z-index: 8;
}

.hero-route-index {
  align-self: stretch;
  background: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 6px 0 #d6d6d6;
}

.hero-route-row {
  border-color: #e5e5e5;
  gap: 14px;
}

.hero-route-num {
  color: #1cb0f6;
  font-family: var(--font-mono);
}

.hero-route-copy {
  color: #4b4b4b;
  font-weight: 800;
}

.hero-stats {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 6px 0 #d6d6d6;
}

.hero-stat {
  border-color: #e5e5e5;
}

.hero-stat-value {
  color: #58cc02;
  font-family: var(--font-mono);
}

.hero-stat-label {
  color: #777777;
  font-weight: 900;
}

.section {
  max-width: 1140px;
  padding: 80px 24px;
}

.section-label,
.bento-index,
.guide-meta,
.market-rating,
.map-guide-meta,
.profile-stat-label,
.asset-item-meta,
.workspace-meta,
.feed-time {
  color: #1cb0f6;
  font-weight: 900;
  text-transform: uppercase;
}

.section-title,
.profile-name,
.world-social-title,
.workspace-title,
.asset-title,
.setting-title,
.map-panel-title,
.planner-weight-title,
.saved-itineraries-title,
.feed-username,
.market-title,
.guide-title,
.bento-title {
  color: #3c3c3c;
  font-family: var(--font-mono);
  font-weight: 700;
}

.section-title {
  color: #58cc02;
  font-size: 48px;
  line-height: 1.12;
}

.bento-grid {
  gap: 18px;
}

.bento-card,
.guide-card,
.map-guide-panel,
.map-container,
.ai-form,
.world-social-panel,
.community-workspace,
.post-composer,
.sidebar-card,
.learn-card,
.market-card,
.profile-header,
.asset-panel,
.setting-card,
.saved-itineraries,
.planner-source-card,
.planner-command-card,
.planner-version-card,
.planner-weight-panel,
.planner-preset-panel,
.modal-box,
.feed-item,
.channel-workspace,
.agent-console,
.world-group-list,
.world-group-detail {
  background: #ffffff;
  border: 2px solid #e5e5e5;
  border-radius: 18px;
  box-shadow: 0 6px 0 #d6d6d6;
}

.bento-card:hover,
.guide-card:hover,
.market-card:hover,
.setting-card:hover,
.feed-item:hover,
.map-guide-card:hover,
.map-guide-card.active {
  transform: translateY(2px);
  border-color: #58cc02;
  box-shadow: 0 4px 0 #aeea8a;
}

.bento-card::before,
.guide-card::after,
.bento-visual::after {
  display: none;
}

.bento-visual {
  border-radius: 16px;
  background: #d9f3ff;
  border: 2px solid #e5e5e5;
}

.bento-visual img {
  filter: saturate(1.22) brightness(1.08);
  border-radius: 16px;
}

.bento-icon,
.setting-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d7ffb8;
  border: 3px solid #3c3c3c;
  border-radius: 50%;
  box-shadow: 0 5px 0 #9add73;
  font-size: 32px;
}

.map-section {
  padding: 80px 24px;
  background: #ffffff;
}

.map-layout {
  max-width: 1140px;
  gap: 22px;
}

.map-container {
  overflow: hidden;
  background: #d9f3ff;
}

.map-overlay {
  background: #ffffff;
  border: 2px solid #e5e5e5;
  color: #3c3c3c;
  box-shadow: 0 5px 0 #d6d6d6;
}

.map-overlay h3 {
  color: #58cc02;
  font-family: var(--font-mono);
}

.leaflet-container {
  font-family: var(--font-primary);
}

.leaflet-tile-pane {
  filter: saturate(1.1) brightness(1.05);
}

.map-panel-section,
.map-itinerary-card,
.map-signal-card,
.map-workspace-shell,
.map-workspace-day,
.map-repair-lab,
.map-repair-strategy,
.map-guide-card,
.map-editor-card,
.map-stop-row,
.map-library-card,
.agent-review-board,
.agent-review-stat,
.agent-review-item,
.agent-review-day,
.review-fix-item {
  background: #fbfff7;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
}

.map-guide-city,
.map-itinerary-title,
.map-signal-title,
.map-stop-title,
.agent-review-title {
  color: #3c3c3c;
  font-weight: 900;
}

.map-guide-score,
.map-trust-chip,
.map-day-chip,
.market-tag,
.market-status,
.feed-action,
.feed-toolbar-badge,
.world-feed-hint,
.planner-command-status,
.planner-version-count,
.saved-count,
.asset-count {
  background: #e9ffd8;
  color: #58cc02;
  border: 1px solid #bff09f;
  border-radius: 999px;
  font-weight: 900;
}

.form-input,
.form-select,
textarea,
.map-annotation-textarea {
  background-color: #ffffff;
  color: #3c3c3c;
  border: 2px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: inset 0 -3px 0 #f1f1f1;
  font-family: var(--font-primary);
  font-weight: 800;
}

.form-input:focus,
.form-select:focus,
textarea:focus,
.map-annotation-textarea:focus {
  border-color: #1cb0f6;
  box-shadow: 0 0 0 4px rgba(28, 176, 246, 0.14), inset 0 -3px 0 #d9f3ff;
}

.form-label {
  color: #4b4b4b;
  font-weight: 900;
  text-transform: uppercase;
}

.planner-advanced-toggle {
  background: #f7fff0;
  color: #58cc02;
  border: 2px solid #bff09f;
  border-radius: 14px;
  font-weight: 900;
}

.planner-advanced-panel {
  background: #fbfff7;
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  padding: 18px;
}

.planner-weight-range {
  accent-color: #58cc02;
}

.ai-result,
.planner-visual,
.planner-execution,
.saved-trip-card,
.planner-scenario-card,
.planner-preview-shell {
  background: #fbfff7;
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  color: #3c3c3c;
}

.world-group-list,
.world-group-detail,
.channel-workspace,
.agent-console {
  box-shadow: none;
}

.world-group-item,
.world-channel-tab,
.channel-state-card,
.agent-card,
.quest-item,
.signal-item,
.buddy-item,
.feed-thread-panel,
.feed-thread-item {
  background: #fbfff7;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
}

.world-group-item.active,
.world-channel-tab.active,
.channel-state-card.active {
  background: #e9ffd8;
  border-color: #58cc02;
}

.post-composer textarea,
.feed-thread-reply textarea {
  min-height: 120px;
}

.feed-avatar,
.profile-avatar-lg,
.map-author-avatar {
  background: #58cc02;
  color: #ffffff;
  border: 3px solid #3c3c3c;
  box-shadow: 0 4px 0 #3f8f01;
  font-family: var(--font-mono);
}

.live-indicator {
  color: #cc348d;
}

.live-dot {
  background: #cc348d;
  box-shadow: none;
}

.sidebar-card [style*="linear-gradient"] {
  background: #d9f3ff !important;
  color: #1cb0f6;
}

.learn-grid,
.market-grid,
.guide-grid,
.settings-grid,
.profile-assets {
  gap: 18px;
}

.learn-card,
.market-card,
.setting-card {
  overflow: hidden;
}

.market-img {
  background:
    linear-gradient(135deg, #d7ffb8 0 48%, #d9f3ff 49% 100%);
  color: #3c3c3c;
  border-bottom: 2px solid #e5e5e5;
  font-size: 54px;
}

.market-price-tag {
  background: #ffc700;
  color: #3c3c3c;
  border: 3px solid #3c3c3c;
  border-radius: 999px;
  box-shadow: 0 4px 0 #dc9f00;
  font-weight: 900;
}

.guide-img {
  background:
    linear-gradient(135deg, #d7ffb8, #d9f3ff 52%, #fff1b8);
  border-radius: 16px 16px 0 0;
  filter: saturate(1.15);
}

.guide-img::after {
  content: "✈";
  position: absolute;
  right: 18px;
  top: 14px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 3px solid #3c3c3c;
  border-radius: 50%;
  box-shadow: 0 4px 0 #d6d6d6;
  color: #1cb0f6;
  font-size: 24px;
}

.guide-body,
.market-body {
  color: #4b4b4b;
}

.profile-header {
  background:
    linear-gradient(135deg, #ffffff 0 58%, #f7fff0 59% 100%);
}

.profile-stat {
  background: #fbfff7;
  border: 2px solid #e5e5e5;
  border-radius: 14px;
}

.profile-stat-val {
  color: #58cc02;
  font-family: var(--font-mono);
}

.footer {
  background: #ffffff;
  border-top: 2px solid #e5e5e5;
  color: #777777;
}

.footer-brand {
  color: #58cc02;
  font-family: var(--font-mono);
}

.modal-overlay {
  background: rgba(60, 60, 60, 0.32);
  backdrop-filter: blur(4px);
}

.modal-close {
  background: #ffffff;
  color: #1cb0f6;
  border: 2px solid #e5e5e5;
  box-shadow: 0 3px 0 #d6d6d6;
  border-radius: 50%;
}

.toast-message {
  background: #ffffff;
  color: #3c3c3c;
  border: 2px solid #e5e5e5;
  box-shadow: 0 5px 0 #d6d6d6;
  border-radius: 14px;
}

@media (max-width: 1120px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .mobile-drawer {
    background: #ffffff;
    border: 2px solid #e5e5e5;
    box-shadow: 0 6px 0 #d6d6d6;
  }
}

@media (max-width: 900px) {
  .hero {
    padding-top: 44px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .cartoon-hero-art {
    grid-row: auto;
    min-height: 330px;
    order: -1;
  }

  .hero-route-index {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-title {
    font-size: 48px;
  }

  .section-title {
    font-size: 40px;
  }
}

@media (max-width: 640px) {
  .nav-glass {
    padding: 0 14px;
  }

  .nav-inner {
    height: 68px;
  }

  .nav-logo {
    font-size: 20px;
  }

  .nav-search,
  .btn-nav {
    display: none;
  }

  .main-content {
    padding-top: 68px;
  }

  .hero {
    padding: 30px 16px 24px;
  }

  .hero-title {
    font-size: 38px;
  }

  .hero-subtitle {
    font-size: 15px;
  }

  .hero-actions,
  .planner-request-row,
  .composer-actions,
  .map-panel-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cartoon-hero-art {
    min-height: 260px;
  }

  .cartoon-map {
    inset: 38px 0 28px;
    border-radius: 28px;
  }

  .cartoon-mascot {
    width: 104px;
    height: 122px;
    margin-left: -52px;
  }

  .cartoon-sun {
    width: 62px;
    height: 62px;
  }

  .cloud-two {
    display: none;
  }

  .hero-route-index {
    grid-template-columns: 1fr;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }

  .section,
  .map-section {
    padding: 56px 16px;
  }

  .section-title {
    font-size: 32px;
  }

  .bento-card,
  .guide-card,
  .ai-form,
  .world-social-panel,
  .community-workspace,
  .post-composer,
  .sidebar-card,
  .market-card,
  .setting-card,
  .profile-header,
  .asset-panel {
    border-radius: 14px;
  }
}