/* Shared brand refinement. Scope: portal, daily tools and Zechu web UI.
   Aceternity-inspired composition; animation ownership belongs to GSAP. */
:root {
  --layout-width: 1200px;
  --layout-radius: 16px;
  --muted: #b7af9c;
  --layout-surface: #24211b;
}
body {
  min-height: 100dvh;
}
.header {
  width: min(var(--layout-width), calc(100% - 64px));
  min-height: 80px;
  padding: 16px 0;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 38px;
  height: 40px;
  font-size: 26px;
}
.brand-name {
  font-size: 23px;
}
.daily-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 3px;
  background: #1c1a16;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.daily-nav a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 68px;
  min-height: 44px;
  padding: 8px 18px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  text-decoration: none;
}
.daily-nav a[aria-current],
.daily-nav a:hover {
  background: #39311f;
  color: var(--gold);
}
.daily-page .header {
  flex-wrap: nowrap;
}
.zechu-page .about-button {
  margin-left: 8px;
  padding: 10px 0;
  min-height: 44px;
}
.zechu-page .about-button span {
  display: none;
}
.primary,
.secondary {
  min-height: 48px;
  border-radius: 10px;
  box-shadow: none;
  font-size: 14px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.footer {
  max-width: var(--layout-width);
  font-size: 12px;
}

/* Four destinations with equal visual weight. */
.portal-page,
.daily-page,
.zechu-page {
  isolation: isolate;
}
.portal-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.portal-ambient-field {
  position: absolute;
  inset: 0;
}
.portal-glow {
  position: absolute;
  /* Multiply diameter by sqrt(2) to double the area of each glow. */
  width: calc(min(65vw, 32vh, 560px) * 1.41421356237);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.portal-glow-gold {
  left: 9%;
  top: 19%;
  background: radial-gradient(
    circle,
    #e3b94f30 0%,
    #e3b94f14 30%,
    #e3b94f05 52%,
    transparent 70%
  );
}
.portal-glow-amber {
  left: 91%;
  top: 81%;
  background: radial-gradient(
    circle,
    #ca8e3533 0%,
    #ca8e3517 28%,
    #ca8e3505 52%,
    transparent 70%
  );
}
.portal-page .header {
  width: min(var(--layout-width), calc(100% - 64px));
}
.portal-main {
  width: min(1264px, 100%);
  padding: 0 32px 24px;
}
.portal-intro {
  position: relative;
  text-align: left;
  padding: 38px 120px 32px 0;
}
.portal-eyebrow {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 2px;
}
.portal-intro h1 {
  margin-top: 12px;
  font-size: clamp(30px, 3.1vw, 43px);
  letter-spacing: 1px;
}
.portal-description {
  font-size: 14px;
  margin-top: 12px;
}
.portal-seal {
  position: absolute;
  right: 12px;
  top: 56px;
  width: 60px;
  height: 60px;
  font-size: 30px;
}
.portal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
}
.portal-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--layout-radius);
  background: var(--paper);
  transition: none;
}
.portal-card > :not(.surface-spotlight, .portal-border-flow) {
  position: relative;
}
.portal-card-active:hover {
  transform: none;
  box-shadow: none;
}
.portal-card-top {
  margin-bottom: 28px;
}
.portal-symbol {
  width: 64px;
  height: 64px;
}
.portal-card h2 {
  font-size: 43px;
  letter-spacing: 4px;
}
.portal-purpose {
  margin: 10px 0 20px -7px;
  font-size: 14px;
}
.portal-card-description {
  font-size: 13px;
  line-height: 1.9;
  margin-bottom: 24px;
}
.portal-card-bottom {
  min-height: 44px;
  padding-top: 14px;
  font-size: 13px;
}
.portal-note {
  text-align: left;
  font-size: 12px;
  margin-top: 22px;
}
.surface-spotlight {
  position: absolute;
  pointer-events: none;
  left: 0;
  top: 0;
  width: 240px;
  height: 240px;
  opacity: 0;
  background: radial-gradient(circle, #e3b94f25, transparent 68%);
}

/* Aceternity-style light stays clipped to the card without clipping controls. */
.motion-light-card {
  position: relative;
}
.motion-card-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
.motion-card-orb {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  background: radial-gradient(
    circle,
    #f5cc5930,
    #e3b94f0c 42%,
    transparent 70%
  );
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .motion-card-light {
    display: none;
  }
}

/* Each homepage module pairs concrete benefits with a labeled output preview. */
.portal-proposals {
  overflow-x: clip;
  overflow-clip-margin: 8px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.portal-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}
.portal-section-heading h2,
.portal-guide h2 {
  margin-top: 10px;
  font: 400 28px/1.5 var(--display);
}
.portal-section-heading > p {
  max-width: 24ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.portal-module {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  padding: 64px 0;
}
.portal-module + .portal-module {
  border-top: 1px solid var(--line);
}
.portal-module-copy,
.portal-module-preview {
  min-width: 0;
}
.portal-topic {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
}
.portal-module h3 {
  margin: 14px 0 18px;
  font: 400 clamp(28px, 2.8vw, 36px) / 1.5 var(--display);
}
.portal-proposal-copy {
  max-width: 38em;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.9;
}
.portal-module-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0;
  padding: 0;
  list-style: none;
}
.portal-module-benefits li {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #211e1780;
  font-size: 13px;
  line-height: 1.8;
}
.portal-module-benefits strong {
  font-weight: 500;
  color: var(--gold);
}
.portal-module-benefits span {
  color: var(--muted);
}
.portal-content-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-height: 44px;
  color: var(--gold);
  text-decoration: none;
}
.portal-content-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.portal-module-preview {
  position: relative;
  margin: 0;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--layout-radius);
  background: linear-gradient(135deg, #30291b, var(--paper) 75%);
}
.portal-card > .portal-border-flow,
.portal-module-preview > .portal-border-flow {
  position: absolute;
  inset: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.portal-border-flow rect {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 12 88;
  filter: drop-shadow(0 0 3px #f5cc5970);
}
.portal-carousel-controls[hidden] {
  display: none;
}
.portal-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.portal-carousel-controls > div {
  display: flex;
  align-items: center;
  gap: 16px;
}
.portal-carousel-controls button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--gold);
  cursor: pointer;
}
.portal-carousel-controls button:disabled {
  opacity: 0.35;
  cursor: default;
}
.portal-carousel-controls button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.portal-carousel-controls output {
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.is-horizontal .portal-carousel-window {
  overflow: hidden;
}
.is-horizontal .portal-modules {
  display: flex;
  align-items: stretch;
}
.is-horizontal .portal-module {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 48px;
  padding: 20px 8px;
  border-top: 0;
}
.is-horizontal .portal-module:nth-child(n) .portal-module-copy,
.is-horizontal .portal-module:nth-child(n) .portal-module-preview {
  order: initial;
}
.is-horizontal .portal-module-preview {
  padding: 24px;
}
.is-horizontal .portal-module-preview figcaption,
.is-horizontal .portal-preview-title {
  margin-bottom: 16px;
}
.is-horizontal .portal-preview-note {
  margin-top: 16px;
}
.is-horizontal .portal-comparison > div {
  padding: 10px 0;
}
.is-horizontal .portal-poem-stage {
  padding: 0 12px 16px;
}
.is-horizontal .portal-poem-sheet {
  padding: 16px;
}
.is-horizontal .portal-poem-sheet p {
  margin-bottom: 12px;
  line-height: 1.8;
}
.is-horizontal .portal-cup-stage {
  padding: 16px 0;
}
.is-horizontal .portal-orbit svg {
  height: 140px;
}
.portal-module-preview figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 12px;
}
.portal-module-preview figcaption > span {
  color: var(--gold);
}
.portal-preview-title {
  margin: 0 0 24px;
  font: 400 24px/1.6 var(--display);
}
.portal-preview-note {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.9;
}
.portal-route {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: var(--gold);
  font: 12px/1.6 var(--display);
  letter-spacing: 2px;
}
.portal-route i {
  flex: 1;
  position: relative;
  height: 1px;
  margin: 0 5px;
  background: var(--line);
}
.portal-route i::before,
.portal-route i::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--paper);
}
.portal-route i::before {
  left: -4px;
  background: var(--gold);
}
.portal-route i::after {
  right: -4px;
}
.portal-comparison {
  margin: 0;
}
.portal-comparison > div {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.portal-comparison dd {
  margin: 0;
  color: var(--muted);
}
.portal-number-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 4px 0;
  color: var(--gold);
  font: 400 clamp(72px, 8vw, 112px) / 1.2 var(--display);
}
/* Homepage samples and daily results share the same decorative digit reels. */
.portal-number-pair > span {
  position: relative;
  line-height: 1.15;
  font-variant-numeric: lining-nums tabular-nums;
}
.portal-number-pair > .number-spinning,
.number-panel .lucky-pair > .number-spinning {
  position: relative;
  color: transparent;
}
.number-reel-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  color: var(--gold);
  pointer-events: none;
}
.number-reel {
  display: block;
  width: 1ch;
  height: 1.15em;
  overflow: hidden;
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.number-reel-track,
.number-reel-cell {
  display: block;
}
.number-reel-cell {
  height: 1.15em;
  line-height: 1.15;
  text-align: center;
}
.portal-number-pair i {
  font-size: 32px;
  font-style: normal;
}
.portal-number-element {
  margin: 12px 0 32px;
  text-align: center;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 2px;
}
.portal-number-origin {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.portal-number-origin strong {
  font-weight: 500;
}
.portal-number-origin p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.9;
}
.portal-deed-sample {
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal-deed-sample li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.portal-sample-check {
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.portal-sample-check svg {
  width: 18px;
  height: 18px;
}
.portal-deed-sample li:first-child .portal-sample-check {
  background: var(--gold);
  color: var(--mist);
  border-color: var(--gold);
}
.portal-deed-sample small {
  color: var(--muted);
  font-size: 12px;
}
.portal-deed-sample strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
}
.portal-sample-progress {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  color: var(--gold);
  font-size: 12px;
}
.portal-sample-progress > span:last-child {
  flex: 1;
  height: 4px;
  background: var(--line);
}
.portal-sample-progress i {
  display: block;
  width: 33.333%;
  height: 100%;
  background: var(--gold);
}
.portal-time-sample {
  margin: 0;
  position: relative;
  padding-left: 24px;
}
.portal-time-sample > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.portal-time-sample dt {
  font: 22px var(--display);
}
.portal-time-sample dd {
  margin: 0;
  color: var(--gold);
  font-size: clamp(16px, 2vw, 24px);
  font-variant-numeric: tabular-nums;
}
.portal-time-key {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
}
.portal-time-key span {
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

/* Aceternity Bento Grid, Timeline and card depth adapted to native HTML.
   Module entrances and dedicated illustrations are controlled by GSAP. */
.portal-module-preview[data-portal-motion] {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px #fff08,
    0 20px 60px #0002;
}
.portal-module-preview[data-portal-motion='reels'] {
  background:
    radial-gradient(ellipse at 50% 35%, #e3b94f16, transparent 65%), #201e18;
}
.portal-module-preview[data-portal-motion='orbit'] {
  background:
    radial-gradient(ellipse at 50% 30%, #716da523, transparent 70%), #1e1d22;
}
.portal-module-preview[data-portal-motion='poem'] {
  background: #201c16;
}
.portal-time-rail {
  position: relative;
}
.portal-time-track {
  position: absolute;
  left: 4px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(transparent, var(--gold), transparent);
}
.portal-time-cursor {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px #e3b94f90;
}
.portal-cup-stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 24px;
  padding: 32px 0 24px;
  background: radial-gradient(ellipse at center, #bc813321, transparent 70%);
}
.portal-cup {
  width: 70px;
  height: 122px;
  fill: #b98142;
  stroke: #e4b873;
  stroke-width: 2;
  filter: drop-shadow(0 10px 8px #0006);
}
.portal-cup-convex {
  fill: #734621;
}
.portal-cup-grain {
  fill: none;
  stroke: #e4b87360;
}
.portal-cup-stage > span,
.portal-orbit > span {
  flex-basis: 100%;
  display: block;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 2px;
}
.portal-orbit {
  margin: -12px 0 20px;
  text-align: center;
}
.portal-orbit svg {
  width: min(100%, 280px);
  height: 180px;
  fill: var(--gold);
}
.portal-orbit-ring {
  fill: none;
  stroke: #c4bcdf55;
  stroke-dasharray: 2 6;
}
.portal-orbit-stars {
  transform-box: view-box;
}
.portal-hexagram-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 24px 0 36px;
}
.portal-hexagram {
  display: grid;
  gap: 10px;
  width: 104px;
  flex-shrink: 0;
}
.portal-hexagram > span {
  display: flex;
  gap: 14px;
  height: 8px;
}
.portal-hexagram i {
  flex: 1;
  background: var(--gold);
}
.portal-hexagram-stage p {
  margin: 0;
}
.portal-hexagram-stage strong,
.portal-hexagram-stage p span,
.portal-hexagram-stage small {
  display: block;
}
.portal-hexagram-stage strong {
  color: var(--gold);
  font: 26px/1.6 var(--display);
}
.portal-hexagram-stage p span,
.portal-hexagram-stage small {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.portal-poem-stage {
  perspective: 800px;
  padding: 8px 12px 24px;
}
.portal-poem-sheet {
  margin: 0 auto;
  max-width: 320px;
  padding: 28px 16px 24px;
  border: 1px solid #b38e4a70;
  background: linear-gradient(110deg, #332a1b, #272117 55%, #332a1b);
  box-shadow: 6px 6px 0 #b38e4a14;
  text-align: center;
}
.portal-poem-sheet p {
  margin: 0 0 20px;
  font: 19px/2.2 var(--display);
  letter-spacing: 3px;
}
.portal-poem-sheet cite {
  color: var(--gold);
  font-style: normal;
  font-size: 12px;
  line-height: 1.9;
}
.portal-poem-sheet cite span {
  color: var(--muted);
}
@media (min-width: 1024px) {
  .portal-module:nth-child(even) .portal-module-copy {
    order: 2;
  }
  .portal-module:nth-child(even) .portal-module-preview {
    order: 1;
  }
}
.portal-guide {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 64px;
  margin-top: 48px;
  padding: 36px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.portal-guide-intro > p:not(.portal-eyebrow) {
  margin: 16px 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}
.portal-privacy-note {
  color: var(--gold);
  font-size: 12px;
}
.portal-questions details + details {
  border-top: 1px solid var(--line);
}
.portal-questions summary {
  position: relative;
  min-height: 56px;
  padding: 16px 32px 16px 0;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
}
.portal-questions summary::-webkit-details-marker {
  display: none;
}
.portal-questions summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 12px;
  color: var(--gold);
  font-size: 20px;
}
.portal-questions details[open] summary::after {
  content: '−';
}
.portal-questions summary:hover {
  color: var(--gold);
}
.portal-questions details > p {
  padding: 0 28px 20px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.95;
}
@media (max-width: 1023px) {
  .portal-module {
    gap: 32px;
  }
  .portal-module-benefits li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .portal-module-benefits {
    grid-template-columns: 1fr;
  }
  .portal-module-preview {
    padding: 24px;
  }
}
@media (max-width: 850px) {
  .portal-module {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .portal-guide {
    gap: 28px;
  }
}
@media (max-width: 767px) {
  .portal-proposals {
    margin-top: 32px;
    padding-top: 24px;
  }
  .portal-section-heading {
    display: block;
    margin-bottom: 0;
  }
  .portal-section-heading > p {
    max-width: none;
    margin-top: 12px;
  }
  .portal-section-heading h2,
  .portal-guide h2 {
    font-size: 24px;
  }
  .portal-module {
    padding: 32px 0;
  }
  .portal-module-preview {
    padding: 20px;
  }
  .portal-preview-title {
    font-size: 22px;
  }
  .portal-comparison > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .portal-guide {
    grid-template-columns: 1fr;
    margin-top: 16px;
    padding: 28px 0;
    gap: 20px;
  }
}

/* Daily tools: readable results and compact, consistent controls. */
.daily-main {
  max-width: 1264px;
  padding: 0 32px;
  margin: 0 auto 48px;
}
.daily-heading {
  padding: 30px 0;
  gap: 24px;
}
.daily-heading h1 {
  font-size: clamp(28px, 3vw, 38px);
  letter-spacing: 0.5px;
  margin: 10px 0;
  text-wrap: balance;
}
.daily-lead {
  font-size: 14px;
  line-height: 1.8;
  max-width: 54ch;
}
.daily-stamp {
  width: 62px;
  height: 62px;
  font-size: 31px;
}
.daily-layout {
  grid-template-columns: 284px minmax(0, 1fr);
  gap: 24px;
}
.daily-sidebar {
  position: sticky;
  top: 24px;
  align-self: start;
}
.daily-panel {
  padding: 28px;
  border-radius: var(--layout-radius);
}
.daily-sidebar .daily-panel {
  padding: 24px;
  background: #1e1c17;
}
.daily-sidebar .daily-panel h2 {
  font: 500 19px/1.5 var(--display);
  margin: 0 0 18px;
}
.daily-fields {
  display: grid;
}
.daily-page .daily-label {
  margin: 16px 0 8px;
  font-size: 14px;
}
.daily-page .daily-label:first-child {
  margin-top: 0;
}
.daily-page .daily-label span {
  font-size: 12px;
}
.daily-help {
  font-size: 12px;
  line-height: 1.85;
}
.daily-form-actions {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}
.daily-submit {
  margin-top: 0;
}
.daily-today {
  margin-top: 0;
  font-size: 13px;
  min-height: 44px;
}
.daily-sidebar-note {
  margin: 16px 8px;
  font-size: 12px;
}
.daily-date {
  font-size: 12px;
  margin-bottom: 12px;
}
.daily-panel h2 {
  font-size: 26px;
  margin: 6px 0 12px;
}
.daily-result-top .daily-eyebrow {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.5px;
}
.daily-explanation,
.daily-method p {
  font-size: 13px;
  line-height: 1.9;
}
.daily-method {
  background: transparent;
  border-color: var(--line);
  padding: 24px;
}
.daily-method summary {
  min-height: 44px;
  display: list-item;
  align-content: center;
  font-size: 15px;
}
.daily-badge {
  font-size: 11px;
}
.number-panel {
  background: linear-gradient(135deg, #2d281c, #211f1a 72%);
}
.lucky-pair {
  margin: 26px 0 12px;
  gap: 44px;
}
.lucky-pair > span {
  font-size: clamp(90px, 9vw, 128px);
  font-variant-numeric: tabular-nums;
}
.daily-number-caption {
  font-size: 13px;
  margin-bottom: 22px;
}
.daily-page .deed-item {
  margin: 0;
  padding: 22px 0;
}
.deed-copy strong {
  font-size: 18px;
}
.deed-copy > span:last-child {
  font-size: 14px;
}
.deed-meta {
  font-size: 12px;
}
.deed-progress {
  font-size: 13px;
}
.daily-tags span {
  font-size: 12px;
}

/* Quji separates the working panels from reference and usage notes. */
.daily-page[data-page='quji'] .daily-sidebar {
  position: static;
}
.daily-page[data-page='quji'] .quji-results > .daily-panel {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.quji-results .deed-panel > h2 {
  margin: 12px 0 8px;
  font: 500 clamp(23px, 2.2vw, 28px) / 1.5 var(--display);
}
.deed-intro {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
}
.quji-results .deed-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 24px;
}
.quji-results .deed-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 22px;
  padding: 24px;
  border: 1px solid #49402d;
  border-radius: 12px;
  background: linear-gradient(115deg, #302a1e, #24211b 72%);
}
.quji-results .deed-item:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.quji-results .deed-item:has(input:checked) {
  border-color: #89703b;
  background: linear-gradient(115deg, #36301f, #27241b 72%);
}
.quji-results .deed-item input {
  appearance: none;
  grid-column: 2;
  grid-row: 1;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 1px solid #8b7d5b;
  border-radius: 50%;
  background: #1c1a15;
  cursor: pointer;
}
.quji-results .deed-item input:checked {
  border-color: var(--gold);
  background: var(--gold)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='m8 14 4 4 8-9' fill='none' stroke='%23211f1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 28px no-repeat;
}
.quji-results .deed-copy {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  gap: 10px;
}
.quji-results .deed-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  font-size: 11px;
  line-height: 1.6;
}
.deed-source {
  color: #d0bc8c;
}
.deed-duration {
  color: var(--muted);
  white-space: nowrap;
}
.quji-results .deed-copy strong {
  font: 500 21px/1.55 var(--display);
  overflow-wrap: anywhere;
}
.quji-results .deed-copy > span:last-child {
  font-size: 13px;
  line-height: 1.85;
}
.quji-results .deed-item input:checked ~ .deed-copy strong {
  color: #d8c9a4;
  text-decoration: none;
}
.quji-results .deed-progress {
  gap: 20px;
  padding-top: 22px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.quji-results .deed-progress progress {
  appearance: none;
  width: clamp(64px, 10vw, 120px);
  height: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #423b2b;
}
.quji-results progress::-webkit-progress-bar {
  background: #423b2b;
}
.quji-results progress::-webkit-progress-value {
  border-radius: 4px;
  background: var(--gold);
}
.quji-results progress::-moz-progress-bar {
  border-radius: 4px;
  background: var(--gold);
}
@media (hover: hover) and (pointer: fine) {
  .quji-results .deed-item:hover {
    border-color: #9c8044;
  }
}
@media (max-width: 600px) {
  .quji-results .deed-item {
    gap: 14px;
    padding: 20px 16px;
  }
  .quji-results .deed-copy strong {
    font-size: 19px;
  }
  .quji-results .deed-list {
    margin-top: 22px;
    gap: 12px;
  }
}
.daily-page[data-page='quji'] .quji-sidebar #daily-form {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.quji-date-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.daily-page[data-page='quji'] .quji-date-controls input {
  flex: 1 1 155px;
  width: 0;
  min-width: 145px;
}
.daily-page[data-page='quji'] .daily-form-actions {
  flex: 1 1 220px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.daily-page[data-page='quji'] .daily-submit {
  gap: 8px;
  padding: 10px;
  min-height: 48px;
  white-space: nowrap;
}
.daily-page[data-page='quji'] .daily-today {
  padding: 6px;
  min-height: 48px;
  white-space: nowrap;
}
.quji-almanac:not(:empty) {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.daily-page[data-page='quji'] .quji-almanac .daily-date {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}
.daily-page[data-page='quji'] .quji-almanac .daily-method {
  padding: 0;
  border: 0;
  background: none;
}
.quji-notes {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.quji-notes h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.quji-notes p {
  margin: 0;
  font-size: 12px;
  line-height: 1.9;
}
.quji-notes p + p {
  margin-top: 10px;
}
@media (min-width: 851px) {
  .daily-page[data-page='quji'] .daily-layout {
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
    align-items: stretch;
    gap: 24px;
  }
  .daily-page[data-page='quji'] .daily-sidebar {
    display: block;
    align-self: stretch;
    min-width: 0;
  }
}

.time-focus-panel {
  background: linear-gradient(130deg, #30291b, #211f1a 75%);
}
.time-focus-value {
  margin: 22px 0 14px;
}
.time-focus-value strong {
  font-size: 46px;
}
.time-focus-caption {
  font-size: 13px;
}
.time-now {
  margin: 16px 0 24px;
  font-size: 13px;
}
.meeting-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.meeting-card {
  padding: 22px;
}
.meeting-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.meeting-card h3 {
  font-size: 28px;
}
.meeting-card p {
  font-size: 13px;
}
.hour-grid {
  gap: 12px;
}
.hour-cell {
  padding: 18px;
}
.hour-clock {
  font-size: 15px;
}
.hour-cell [data-time-status],
.hour-cell small {
  font-size: 12px;
}
.time-row p {
  font-size: 13px;
}
.time-row-heading > strong {
  font-size: 14px;
}

/* Existing form/report keeps its behavior; spacing and hierarchy are refined. */
.zechu-page .home-layout {
  max-width: 1200px;
  grid-template-columns: minmax(0, 1fr) minmax(470px, 540px);
  gap: 56px;
  margin: 36px auto 56px;
  padding: 0 32px;
}
.zechu-page .intro {
  padding: 16px 0 0;
}
.zechu-page .intro h1 {
  font-size: 44px;
  margin-top: 18px;
}
.zechu-page .intro h1 em {
  font-size: 54px;
}
.zechu-page .intro-description {
  font-size: 15px;
  margin-top: 18px;
}
.zechu-page .form-card {
  padding: 30px;
  border-radius: var(--layout-radius);
  background: var(--layout-surface);
  box-shadow: none;
}
.zechu-page .form-description {
  font-size: 14px;
}
.zechu-page .field-help,
.zechu-page .info-note,
.zechu-page .score-note,
.zechu-page .calculation-note,
.zechu-page .current-note {
  font-size: 12px;
}
.zechu-page .report {
  max-width: 1200px;
  padding: 0 32px;
}
.zechu-page .report-layout {
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
}
.zechu-page .report-heading {
  margin-bottom: 26px;
}
.zechu-page .city-card,
.zechu-page .industry-card {
  border-radius: var(--layout-radius);
  padding: 24px;
}
.zechu-page .current-city-factor p {
  font-size: 13px;
}
.zechu-page .result-tabs button,
.zechu-page .text-button {
  min-height: 44px;
}
.zechu-page .city-bottom .text-button {
  font-size: 13px;
}
.zechu-page .city-bottom > span,
.zechu-page .city-region,
.zechu-page .tags span {
  font-size: 12px;
}
.zechu-page .report-aside {
  min-width: 0;
}
.zechu-page .result-section-heading h2 {
  font-size: 24px;
}

@media (max-width: 1023px) {
  .zechu-page .home-layout {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 1.1fr);
  }
  .zechu-page .intro h1 {
    font-size: 35px;
  }
  .zechu-page .compass-scene {
    transform: scale(0.86);
    transform-origin: left top;
    margin-left: 0;
  }
  .daily-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 20px;
  }
  .daily-panel {
    padding: 24px;
  }
  .portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .portal-card {
    padding: 24px;
  }
}
@media (max-width: 850px) {
  .zechu-page .home-layout,
  .zechu-page .report-layout {
    grid-template-columns: 1fr;
  }
  .zechu-page .home-layout {
    max-width: 700px;
    gap: 22px;
  }
  .zechu-page .intro {
    padding: 0;
  }
  .zechu-page .intro h1 {
    font-size: 32px;
  }
  .zechu-page .intro h1 em {
    font-size: 36px;
  }
  .zechu-page .report {
    max-width: 700px;
  }
  .daily-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .daily-sidebar {
    position: static;
  }
  .daily-sidebar .daily-panel {
    padding: 22px;
  }
  .daily-main {
    max-width: 740px;
  }
  .daily-form-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
  }
  .daily-today {
    padding: 8px 12px;
  }
  .daily-sidebar-note {
    margin: 12px 4px 0;
  }
  .daily-sidebar-note br {
    display: none;
  }
  .daily-sidebar-note > span {
    display: none;
  }
  .daily-fields {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .header,
  .portal-page .header {
    width: calc(100% - 40px);
    min-height: 72px;
    gap: 12px;
  }
  .daily-page .header,
  .zechu-page .header {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 14px 0 12px;
    gap: 14px;
  }
  .daily-nav,
  .daily-page .daily-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    border: 1px solid var(--line);
  }
  .daily-nav a {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    font-size: 14px;
  }
  .zechu-page .about-button {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .portal-header-note,
  .portal-page .header-caption {
    display: none;
  }
  .portal-main {
    padding: 0 20px 24px;
  }
  .portal-intro {
    padding: 26px 0 24px;
  }
  .portal-intro h1 {
    font-size: 30px;
    margin: 10px 0;
    line-height: 1.5;
  }
  .portal-intro h1 em {
    display: block;
  }
  .portal-seal {
    display: none;
  }
  .portal-description {
    font-size: 13px;
    max-width: 30ch;
  }
  .portal-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 12px;
  }
  .portal-grid .portal-card {
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 22px;
    gap: 0 14px;
  }
  .portal-grid .portal-card-top {
    grid-column: 2;
    grid-row: 1 / 3;
    margin: 0;
  }
  .portal-grid .portal-symbol {
    width: 46px;
    height: 46px;
  }
  .portal-grid .portal-card h2 {
    grid-column: 1;
    font-size: 31px;
  }
  .portal-grid .portal-purpose {
    margin: 8px 0 10px -7px;
    font-size: 14px;
  }
  .portal-grid .portal-card-description {
    grid-column: 1 / -1;
    margin: 0 0 12px;
    font-size: 13px;
  }
  .portal-grid .portal-card-description br {
    display: none;
  }
  .portal-grid .portal-card-bottom {
    grid-column: 1 / -1;
    min-height: 36px;
    padding-top: 10px;
  }
  .portal-note {
    font-size: 12px;
    line-height: 1.8;
  }
  .daily-main {
    padding: 0 20px;
  }
  .daily-heading {
    padding: 24px 0;
  }
  .daily-heading h1 {
    font-size: 28px;
    line-height: 1.5;
  }
  .daily-heading .daily-eyebrow {
    font-size: 12px;
  }
  .daily-stamp {
    display: none;
  }
  .daily-lead {
    font-size: 13px;
  }
  .daily-sidebar .daily-panel {
    padding: 20px;
  }
  .daily-sidebar .daily-panel h2 {
    font-size: 18px;
    margin-bottom: 14px;
  }
  .daily-page .daily-label {
    margin-top: 14px;
  }
  .daily-page input[type='date'],
  .daily-page select {
    min-height: 48px;
    font-size: 16px;
  }
  .daily-page .daily-label span {
    display: inline;
    margin-left: 8px;
  }
  .daily-panel {
    padding: 22px;
  }
  .daily-panel h2 {
    font-size: 24px;
  }
  .daily-result > .daily-panel + .daily-panel {
    margin-top: 16px;
  }
  .daily-method {
    padding: 20px;
  }
  .daily-method p,
  .daily-explanation {
    font-size: 13px;
  }
  .lucky-pair {
    gap: 28px;
  }
  .lucky-pair > span {
    font-size: 92px;
  }
  .meeting-list {
    grid-template-columns: 1fr;
  }
  .hour-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .hour-cell {
    padding: 13px 10px;
  }
  .hour-clock {
    font-size: 13px;
  }
  .hour-cell [data-time-status],
  .hour-cell small {
    font-size: 11px;
  }
  .time-focus-value strong {
    font-size: 38px;
  }
  .time-focus-value > span {
    font-size: 30px;
  }
  .time-now {
    margin-bottom: 18px;
  }
  .time-now time {
    display: block;
    margin: 6px 0 0;
  }
  .deed-copy strong {
    font-size: 17px;
  }
  .deed-copy > span:last-child {
    font-size: 13px;
  }
  .deed-meta {
    font-size: 11px;
  }
  .deed-progress {
    flex-wrap: wrap;
  }
  .zechu-page .home-layout {
    margin: 24px auto 40px;
    padding: 0 20px;
  }
  .zechu-page .form-card {
    padding: 24px 20px;
  }
  .zechu-page .form-card h2 {
    font-size: 25px;
  }
  .zechu-page .intro h1 {
    font-size: 29px;
  }
  .zechu-page .intro-description {
    font-size: 13px;
    margin-top: 10px;
  }
  .zechu-page .report {
    padding: 0 20px;
  }
  .zechu-page .report-heading h1 {
    font-size: 30px;
  }
  .zechu-page .city-card,
  .zechu-page .industry-card {
    padding: 20px 16px;
  }
  .zechu-page .current-city-factors {
    grid-template-columns: 1fr;
  }
  .zechu-page .result-section-heading {
    align-items: flex-start;
  }
  .zechu-page .result-section-heading h2 {
    font-size: 22px;
  }
  .zechu-page .result-count {
    font-size: 11px;
    white-space: nowrap;
  }
  .zechu-page .city-bottom {
    gap: 10px;
    flex-wrap: wrap;
  }
  .zechu-page .result-tabs {
    top: 0;
  }
  .zechu-page .result-tabs button {
    font-size: 13px;
  }
  .footer {
    font-size: 11px;
  }
}
@media (max-width: 359px) {
  .daily-form-actions {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .zechu-page .result-section-heading {
    flex-direction: column;
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-glow {
    will-change: auto;
  }
  .portal-card,
  .daily-page button,
  .daily-nav a {
    transition: none;
  }
  .surface-spotlight {
    display: none;
  }
}

/* Eight entry points form two equal rows on desktop. */
@media (min-width: 1200px) {
  .portal-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .portal-grid .portal-card {
    padding: 24px 20px;
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .portal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tool pages: native Aceternity Bento, Timeline, Tabs and card composition. */
[data-tool-motion]
  :is(
    .daily-panel,
    .form-card,
    .zhibo-setup,
    .zhibo-play,
    .gua-tray,
    .gua-ledger,
    .qian-draw,
    .fortune-card
  ) {
  box-shadow:
    inset 0 1px #ffffff07,
    0 18px 48px #0002;
}
.zechu-page .steps {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #24211b;
}
.zechu-page .current-city-factors {
  gap: 12px;
}
.zechu-page .current-city-factor {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #211e17;
}
.zechu-page .result-tabs {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #24211bf5;
}
.daily-page[data-page='nacai'] .number-focus {
  position: relative;
  margin: 20px 0;
  padding: 32px 16px;
  border: 1px solid #e3b94f2b;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 45%, #e3b94f18, transparent 70%), #201d17;
}
.daily-page[data-page='nacai'] .number-origin {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #211f19;
}
.quji-results .deed-item {
  position: relative;
}
.deed-completion-ring {
  grid-column: 2;
  grid-row: 1;
  width: 44px;
  height: 44px;
  margin-left: -8px;
  pointer-events: none;
  overflow: visible;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  transform: rotate(-90deg);
}
.deed-completion-ring circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.deed-item:has(input:checked) .deed-completion-ring circle {
  stroke-dashoffset: 0;
}
.quji-results .deed-progress {
  padding: 18px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #252118;
}
.time-day-rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 22px 0 28px;
  padding-top: 20px;
  color: var(--muted);
  font-size: 10px;
  border-top: 1px solid #e3b94f55;
  background: repeating-linear-gradient(
      90deg,
      #e3b94f35 0 1px,
      transparent 1px calc(100% / 12)
    )
    left top / 100% 6px no-repeat;
}
.time-day-marker {
  position: absolute;
  top: -7px;
  left: clamp(0%, var(--day-position, 0%), calc(100% - 3px));
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 14px #e3b94f80;
}
.daily-page[data-page='shichen'] .time-focus-panel {
  background: linear-gradient(130deg, #30281b, #201e18 75%);
}
.daily-page[data-page='shichen'] .hour-cell {
  border-radius: 12px;
}
.zhibo-page .zhibo-rule-grid {
  gap: 12px;
}
.zhibo-page .zhibo-rule-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #252118;
}
.zhibo-page #zhibo-history-list {
  padding-left: 18px;
  border-left: 1px solid #e3b94f45;
}
.zhibo-page #zhibo-history-list li {
  position: relative;
}
.zhibo-page #zhibo-history-list li::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
[data-tool-motion='zodiac'] .fortune-card:first-child {
  grid-column: 1 / -1;
  background: linear-gradient(125deg, #302b3b, #242126 70%);
  border-color: #91825b;
}
[data-tool-motion='zodiac'] .fortune-card:last-child {
  grid-column: auto;
}
.fortune-stars i {
  font-style: normal;
}
[data-tool-motion='zodiac'] .fortune-action {
  padding: 16px;
  background: #ffffff04;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.qiangua-page .gua-ledger {
  background: linear-gradient(145deg, #2c281f, #211f1a);
}
.qiangua-page .gua-line-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.qiangua-page .gua-change {
  padding: 24px;
  border: 1px solid #e3b94f40;
  border-left: 3px solid var(--gold);
  border-radius: 0 14px 14px 0;
  background: #2b261b;
}
.qiangua-page .gua-direction .gua-basis {
  margin: 12px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.qian-page .qian-poem-card {
  padding: 30px;
  border-radius: 6px 18px 18px 6px;
  border-left: 4px solid #b38e4a;
  background: linear-gradient(105deg, #332b1c, #242018 60%);
}
.qian-page .qian-poem {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 18px 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.9;
}
.qian-page .qian-direction:first-child {
  grid-column: 1 / -1;
  padding: 26px;
}
@media (min-width: 1024px) {
  .zechu-page .result-tabs {
    position: sticky;
    top: 16px;
    z-index: 3;
  }
  [data-tool-motion='zodiac'] .zodiac-sidebar {
    position: sticky;
    top: 24px;
  }
}
@media (max-width: 600px) {
  .zechu-page .steps {
    padding: 12px 8px;
  }
  .daily-page[data-page='nacai'] .number-focus {
    padding: 24px 10px;
  }
  .qian-page .qian-poem-card {
    padding: 22px 18px;
  }
  .zhibo-page .zhibo-rule-grid article {
    padding: 18px;
  }
}