:root {
  color-scheme: light;
  --bg: #fff8fc;
  --surface: rgba(255, 255, 255, .92);
  --surface-2: #fffafe;
  --surface-3: #f4efff;
  --text: #44354f;
  --muted: #776a83;
  --line: rgba(132, 108, 181, .22);
  --accent: #e865a5;
  --accent-2: #8e73df;
  --positive: #2f9a74;
  --negative: #d95472;
  --warning: #d59a29;
  --shadow: 0 16px 42px rgba(115, 84, 142, .13);
  --radius: 22px;
  --pink-soft: #ffe5f1;
  --purple-soft: #eee8ff;
  --blue-soft: #e5f7ff;
}

body.pastel-theme,
body[data-page="howto"] {
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 182, 216, .42), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(180, 221, 255, .48), transparent 29%),
    radial-gradient(circle at 50% 96%, rgba(205, 187, 255, .32), transparent 34%),
    linear-gradient(180deg, #fffafe 0%, #f9f5ff 48%, #f2fbff 100%);
  color: var(--text);
}

body.pastel-theme::before,
body[data-page="howto"]::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.24), transparent 58%);
  z-index: 0;
}

.site-header,
.container,
footer { position: relative; z-index: 2; }

.site-header {
  border-bottom: 1px solid rgba(232, 101, 165, .2);
  background:
    linear-gradient(118deg, rgba(255, 240, 248, .94), rgba(243, 238, 255, .94) 52%, rgba(234, 249, 255, .94));
  box-shadow: 0 10px 30px rgba(134, 103, 165, .08);
  backdrop-filter: blur(18px);
}

.header-inner { align-items: center; }
.eyebrow { color: #ca4f8f; }
h1 {
  color: #493b59;
  background: linear-gradient(105deg, #d94e92 5%, #8b6ed9 58%, #4eaed7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.subtitle { color: #71657c; }
.header-meta { gap: 11px; color: #776a83; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.site-nav a {
  padding: 8px 12px;
  border: 1px solid rgba(142, 115, 223, .2);
  border-radius: 999px;
  color: #6a5c77;
  background: rgba(255,255,255,.7);
  text-decoration: none;
  font-size: .8rem;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.site-nav a:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(126, 93, 157, .12); }
.site-nav a.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ef79b2, #9a7ce6 56%, #69bfe3);
}

.panel,
.stat-card,
.analysis-summary-card {
  border-color: var(--line);
  background: rgba(255,255,255,.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.panel { overflow: visible; }
.tabs-panel,
.table-wrap,
.chart-panel { overflow: hidden; }

.stat-card {
  position: relative;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,247,252,.94));
}
.stat-card::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  right: -18px;
  top: -18px;
  border-radius: 50%;
  background: rgba(232,101,165,.09);
}
.stat-card.new { background: linear-gradient(145deg, #fff, #f1fff8); }
.stat-card.out { background: linear-gradient(145deg, #fff, #fff1f4); }
.stat-card.cosmos { background: linear-gradient(145deg, #fff, #fff0f8 55%, #f5f0ff); }
.stat-card span { color: #7b6d87; }
.stat-card strong { color: #4b3d58; }
.stat-card.cosmos strong { color: #d95094; }

.controls-panel,
.analysis-controls { background: rgba(255,255,255,.92); }
.control-group label { color: #695c75; }
input,
select {
  color: #45374f;
  background: #fff;
  border-color: rgba(130, 105, 176, .25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
input::placeholder { color: #a496ae; }
input:focus,
select:focus {
  border-color: #d968a4;
  box-shadow: 0 0 0 4px rgba(232, 101, 165, .13);
}

.button {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #ec73ad, #9275df 60%, #62bae0);
  box-shadow: 0 8px 18px rgba(134, 99, 178, .16);
  font-weight: 800;
}
.button:hover { filter: brightness(1.02); transform: translateY(-1px); }
.button.secondary {
  color: #5b4d68;
  border-color: rgba(135, 109, 181, .24);
  background: rgba(255,255,255,.86);
  box-shadow: none;
}

.tabs { background: linear-gradient(90deg, rgba(255,235,246,.58), rgba(240,235,255,.58), rgba(230,248,255,.58)); }
.tab { color: #766a81; }
.tab.active {
  color: #5a4265;
  background: rgba(255,255,255,.92);
  box-shadow: 0 -3px 12px rgba(133, 103, 163, .08);
}
.cosmos-tab { color: #d95094; }
.cosmos-tab.active { color: #fff; background: linear-gradient(135deg, #ec71ad, #9a77df); }
.table-toolbar { background: rgba(255,255,255,.78); }

.table-wrap { border-color: var(--line); }
table { color: #4a3c56; }
th,
td { border-bottom-color: rgba(139,115,180,.14); }
th {
  color: #5e4f6b;
  background: linear-gradient(180deg, #f5efff, #eef8ff);
}
tbody tr:nth-child(even) { background: rgba(252,247,255,.62); }
tbody tr:hover { background: rgba(255, 226, 241, .52); }
.code-link { color: #b94b88; }
.positive { color: #238562; }
.negative { color: #cc4665; }

#resultTable th:nth-child(1),
#resultTable td:nth-child(1) {
  position: sticky;
  left: 0;
  min-width: 88px;
  z-index: 4;
  background: #fff;
}
#resultTable th:nth-child(2),
#resultTable td:nth-child(2) {
  position: sticky;
  left: 88px;
  min-width: 180px;
  z-index: 4;
  background: #fff;
  box-shadow: 6px 0 13px rgba(107, 82, 133, .06);
}
#resultTable thead th:nth-child(1),
#resultTable thead th:nth-child(2) { z-index: 7; background: linear-gradient(180deg, #f5efff, #eef8ff); }
#resultTable tbody tr:nth-child(even) td:nth-child(-n+2) { background: #fdf9ff; }
#resultTable tbody tr:hover td:nth-child(-n+2) { background: #fff0f7; }

.badge.neutral { color: #675873; background: rgba(255,255,255,.72); }
.badge.new { color: #fff; background: #43ae83; }
.badge.out { color: #fff; background: #dc6179; }
.badge.continue { color: #fff; background: #62b7dc; }
.badge.cosmos-focus { color: #7c2c59; background: linear-gradient(135deg, #ffe0ee, #f7c7e3 55%, #e8dcff); }
.cosmos-focus-row { background: linear-gradient(90deg, rgba(255,220,238,.52), transparent 55%); }

.analysis-guide,
.analysis-disclosure,
.rsi-explanation {
  color: #6f627b;
  background: linear-gradient(120deg, rgba(255,244,249,.9), rgba(245,241,255,.92), rgba(238,249,255,.92));
}
.analysis-guide strong { color: #d55797; }
.filter-group summary { color: #594a66; background: linear-gradient(90deg, rgba(255,238,247,.55), rgba(240,237,255,.55)); }
.filter-group summary::marker { color: #d65b9b; }
.analysis-summary-card {
  color: #4a3b55;
  background: linear-gradient(145deg, #fff, #fff7fb 45%, #f5f1ff);
}
.analysis-summary-card:hover,
.analysis-summary-card.active { border-color: #df69a4; }
.analysis-summary-card.active { box-shadow: 0 0 0 4px rgba(231,104,165,.12), var(--shadow); }
.bucket-card,
.portfolio-card,
.event-card,
.column-settings-panel,
.column-toggle,
.character-speech { background: rgba(255,255,255,.9); }
.performance-chart { background: #fff; }
.chart-grid { stroke: rgba(132,108,181,.18); }
.chart-label,
.chart-legend,
.chart-empty { fill: #776a83; }

.character-guide {
  border-color: rgba(225, 102, 163, .25);
  background:
    radial-gradient(circle at 6% 12%, rgba(255, 164, 205, .2), transparent 28%),
    radial-gradient(circle at 96% 88%, rgba(151, 114, 255, .16), transparent 30%),
    rgba(255,255,255,.9);
}
.character-speech { border-color: rgba(139,115,180,.2); }
.character-speech::before { border-color: rgba(139,115,180,.2); background: #fff; }
.character-guide[data-active-character="cosmos"] .character-speech-heading strong { color: #d64f94; }
.character-guide[data-active-character="lumo"] .character-speech-heading strong { color: #3e9fcf; }
.character-guide[data-active-character="aile"] .character-speech-heading strong { color: #8266d3; }

.quickstart-banner {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-color: rgba(222, 91, 154, .25);
  background:
    linear-gradient(115deg, rgba(255,235,245,.92), rgba(244,239,255,.92) 55%, rgba(231,248,255,.92));
}
.quickstart-banner strong { display: block; margin: 6px 0 5px; font-size: 1.08rem; }
.quickstart-banner p { margin: 0; color: #75687f; line-height: 1.65; }
.quickstart-label {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  color: #b83f7d;
  background: rgba(255,255,255,.72);
  font-size: .72rem;
  font-weight: 900;
}
.quickstart-button { flex: 0 0 auto; }

.petal-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.petal-layer span {
  position: absolute;
  top: -12vh;
  left: calc((var(--petal-index) * 7.35%));
  width: calc(11px + (var(--petal-index) % 4) * 3px);
  height: calc(17px + (var(--petal-index) % 3) * 4px);
  border-radius: 75% 20% 70% 30%;
  opacity: .28;
  background: linear-gradient(145deg, #fff, #f58abd 70%, #d96ea9);
  box-shadow: 0 4px 9px rgba(200, 85, 143, .13);
  animation: petal-fall calc(13s + (var(--petal-index) % 6) * 2s) linear infinite;
  animation-delay: calc(var(--petal-index) * -1.7s);
}
@keyframes petal-fall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  38% { transform: translate3d(38px, 38vh, 0) rotate(170deg); }
  72% { transform: translate3d(-26px, 78vh, 0) rotate(310deg); }
  100% { transform: translate3d(28px, 116vh, 0) rotate(480deg); }
}

.howto-container { max-width: 1180px; }
.howto-hero {
  padding: clamp(24px, 5vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, .8fr);
  gap: 28px;
  align-items: center;
  background:
    radial-gradient(circle at 90% 18%, rgba(118,194,232,.24), transparent 30%),
    radial-gradient(circle at 8% 90%, rgba(236,115,174,.2), transparent 33%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(249,240,255,.94));
}
.howto-hero h2 { font-size: clamp(1.7rem, 4vw, 2.65rem); line-height: 1.35; }
.howto-hero p { color: #6f627a; line-height: 1.9; }
.howto-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.howto-hero-visual {
  min-height: 230px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
  padding: 18px;
  border: 1px solid rgba(135,109,181,.18);
  border-radius: 24px;
  background: linear-gradient(180deg, #eefaff, #fff2f8 65%, #f5eeff);
}
.howto-character {
  min-height: 170px;
  border-radius: 18px;
  background-image: url("cosmos-trio.webp");
  background-repeat: no-repeat;
  background-size: 300% 100%;
  filter: drop-shadow(0 9px 12px rgba(96,72,123,.16));
}
.howto-character.cosmos { background-position: 0 50%; }
.howto-character.lumo { background-position: 50% 50%; transform: translateY(-12px); }
.howto-character.aile { background-position: 100% 50%; }

.howto-section { padding: 26px; }
.howto-section-heading { margin-bottom: 20px; }
.howto-section-heading .eyebrow { margin-bottom: 6px; }
.howto-section-heading h2 { font-size: 1.55rem; }
.howto-section-heading p { margin: 0; color: #74677e; line-height: 1.8; }
.journey-grid,
.term-grid,
.recipe-grid,
.reading-grid,
.check-grid {
  display: grid;
  gap: 14px;
}
.journey-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.term-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.recipe-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.journey-card,
.term-card,
.recipe-card,
.reading-card,
.check-card {
  padding: 18px;
  border: 1px solid rgba(135,109,181,.18);
  border-radius: 17px;
  background: rgba(255,255,255,.82);
}
.journey-card { position: relative; padding-top: 54px; }
.step-number {
  position: absolute;
  top: 16px;
  left: 17px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #eb6eaa, #8d72dc);
  font-weight: 900;
}
.journey-card h3,
.recipe-card h3,
.reading-card h3,
.check-card h3 { margin: 0 0 9px; font-size: 1.02rem; }
.journey-card p,
.term-card p,
.recipe-card p,
.reading-card p,
.check-card p { margin: 0; color: #75687f; line-height: 1.75; font-size: .9rem; }
.journey-card a { display: inline-flex; margin-top: 12px; color: #c14784; font-weight: 800; text-decoration: none; }
.term-card strong { display: block; margin-bottom: 8px; color: #a73d78; }
.term-card:nth-child(2n) strong { color: #735ac2; }
.term-card:nth-child(3n) strong { color: #368db5; }
.recipe-card ul,
.reading-card ul,
.check-card ul { margin: 12px 0 0; padding-left: 1.2em; color: #695c74; line-height: 1.8; font-size: .88rem; }
.recipe-label {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #a73d78;
  background: #fff0f7;
  font-size: .7rem;
  font-weight: 900;
}
.flow-list { display: grid; gap: 12px; counter-reset: flow; }
.flow-item {
  position: relative;
  padding: 18px 18px 18px 58px;
  border: 1px solid rgba(135,109,181,.18);
  border-radius: 16px;
  background: rgba(255,255,255,.82);
}
.flow-item::before {
  counter-increment: flow;
  content: counter(flow);
  position: absolute;
  left: 17px;
  top: 18px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg, #6dbde1, #8f74dd);
  font-weight: 900;
}
.flow-item strong { display: block; margin-bottom: 5px; }
.flow-item p { margin: 0; color: #74677e; line-height: 1.75; }
.analysis-rule {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
}
.analysis-rule-card {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(135,109,181,.18);
  background: rgba(255,255,255,.86);
}
.analysis-rule-card strong { color: #9b3e75; }
.analysis-rule-card:last-child strong { color: #5369b9; }
.analysis-rule-card p { margin: 8px 0 0; color: #74677e; line-height: 1.75; }
.analysis-arrow { display: grid; place-items: center; color: #9b81d9; font-size: 1.6rem; }
.faq-list details { border-top: 1px solid rgba(135,109,181,.16); }
.faq-list details:first-child { border-top: 0; }
.faq-list summary { padding: 16px 4px; cursor: pointer; color: #584a65; font-weight: 850; }
.faq-list p { padding: 0 4px 16px; margin: 0; color: #74677e; line-height: 1.8; }
.howto-note {
  padding: 18px;
  border: 1px solid rgba(218, 154, 41, .25);
  border-radius: 16px;
  color: #675a69;
  background: rgba(255,248,224,.78);
  line-height: 1.8;
}

@media (max-width: 1100px) {
  .term-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .journey-grid,
  .recipe-grid,
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .site-nav { justify-content: flex-start; }
  .site-nav a { flex: 1 1 auto; text-align: center; }
  .quickstart-banner { align-items: flex-start; flex-direction: column; }
  .quickstart-button { width: 100%; }
  #resultTable th:nth-child(2),
  #resultTable td:nth-child(2) { left: 82px; min-width: 150px; }
  #resultTable th:nth-child(1),
  #resultTable td:nth-child(1) { min-width: 82px; }
  .howto-hero { grid-template-columns: 1fr; padding: 22px; }
  .howto-hero-visual { min-height: 190px; }
  .howto-character { min-height: 138px; }
  .howto-section { padding: 19px 16px; }
  .journey-grid,
  .term-grid,
  .recipe-grid,
  .reading-grid,
  .check-grid { grid-template-columns: 1fr; }
  .analysis-rule { grid-template-columns: 1fr; }
  .analysis-arrow { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  .petal-layer { display: none; }
  .site-nav a,
  .button { transition: none; }
}