/* fortune.coyotech.app: 「月暈 Halo」. Colours and radii come from tokens.css (apps/fortune/design/tokens.json). */
.fortune {
  --halo: linear-gradient(120deg, var(--fortune-halo-1) 0%, var(--fortune-halo-2) 48%, var(--fortune-halo-3) 100%);
  --display: "Fraunces", "fortune-display-cjk", "fortune-body", serif;
  --body: "fortune-body", system-ui, sans-serif;
  --gutter: 20px;
  --glass-fill: linear-gradient(160deg, rgb(255 255 255 / .075), rgb(255 255 255 / .025));
  --glass-edge: rgb(255 255 255 / .10);
  color-scheme: dark;
}
@media (min-width: 900px) { .fortune { --gutter: 64px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body.fortune {
  margin: 0;
  background: var(--fortune-surface);
  color: var(--fortune-on-surface);
  font: 400 16px/1.85 var(--body);
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
  overflow-x: clip;
  position: relative;
}
/* Grain under the content, scrolling with it: as a fixed layer blended over everything it made the
   compositor re-blend the whole screen on every scrolled frame. */
.fortune::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.fortune a { color: var(--fortune-primary); text-underline-offset: .2em; }
.fortune a:hover { color: var(--fortune-secondary); }
.fortune :focus-visible { outline: 2px solid var(--fortune-tertiary); outline-offset: 3px; border-radius: 8px; }
:where(.fortune) :is(h1, h2, h3) { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: .01em; }
:where(.fortune) p { margin: 0; }
:where(.fortune) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--fortune-tertiary); color: var(--fortune-on-tertiary) !important; text-decoration: none; }
.skip:focus { top: 12px; }

.spark { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* aura orbs behind everything; still, because the glass blurs them: a moving backdrop is re-blurred every frame, forever */
.aura { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; display: block; }
.o1 { width: 900px; height: 900px; left: -380px; top: 120px; background: radial-gradient(closest-side, color-mix(in srgb, var(--fortune-inverse-primary) 60%, transparent), transparent); }
.o2 { width: 820px; height: 820px; right: -340px; top: -80px; background: radial-gradient(closest-side, color-mix(in srgb, var(--fortune-rose) 32%, transparent), transparent); }
.o3 { width: 1000px; height: 1000px; left: 50%; top: 1700px; margin-left: -500px; background: radial-gradient(closest-side, color-mix(in srgb, var(--fortune-inverse-primary) 45%, transparent), transparent); }

/* glass */
.glass { background: var(--glass-fill); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--fortune-surface-container); }
}

/* chips and pills */
.chip { text-wrap: balance; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font: 500 12px/1.5 var(--body); letter-spacing: .08em;
  background: color-mix(in srgb, var(--fortune-primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--fortune-primary) 24%, transparent); color: var(--fortune-primary); }
.chip.gold { background: color-mix(in srgb, var(--fortune-tertiary) 10%, transparent); border-color: color-mix(in srgb, var(--fortune-tertiary) 30%, transparent); color: var(--fortune-tertiary); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: 999px;
  font: 500 15px/1.3 var(--body); letter-spacing: .06em; text-decoration: none; transition: transform .25s cubic-bezier(.2, 0, 0, 1), box-shadow .25s; }
.fortune .pill.halo { background: var(--halo); color: var(--fortune-on-halo); box-shadow: 0 10px 40px -8px color-mix(in srgb, var(--fortune-rose) 55%, transparent); }
.fortune .pill.halo:hover { color: var(--fortune-on-halo); transform: translateY(-2px); box-shadow: 0 14px 48px -8px color-mix(in srgb, var(--fortune-rose) 70%, transparent); }
.fortune .pill.tonal { color: var(--fortune-on-surface); }
.fortune .pill.tonal:hover { color: var(--fortune-on-surface); background: var(--fortune-surface-container-highest); }
.pill.small { min-height: 40px; padding: 8px 18px; font-size: 14px; }
.kicker, .label { font: 500 12px/1.5 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--fortune-tertiary); display: inline-flex; gap: 8px; align-items: center; }

/* nav */
.bar { position: sticky; top: 0; z-index: 20; padding: 14px var(--gutter) 0; }
.nav { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 22px; border-radius: 999px;
  background: color-mix(in srgb, var(--fortune-surface) 55%, transparent); }
.brand { display: inline-flex; align-items: center; gap: 10px; margin: 0; text-decoration: none; }
.brand img { border-radius: 9px; }
.word { font: italic 400 30px/1 "Fraunces", serif; letter-spacing: -.01em; white-space: nowrap; color: var(--fortune-on-surface) !important; text-decoration: none; }
.word b { font-weight: 400; background: var(--halo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nav .links { display: none; gap: 30px; font-size: 14px; letter-spacing: .08em; }
.nav .links a { display: inline-block; padding: 8px 2px; color: var(--fortune-on-surface-variant); text-decoration: none; }
.nav .links a:hover { color: var(--fortune-on-surface); }
.nav-end { display: flex; align-items: center; gap: 6px; }
@media (min-width: 900px) { .nav .links { display: flex; } }
@media (max-width: 420px) { .nav .pill.small { display: none; } .nav .word { font-size: 22px; } }
@media (max-width: 340px) { .nav .word { font-size: 18px; } }

/* language switcher */
.lang { position: relative; font: 500 14px/1.4 system-ui, sans-serif; }
.lang summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: 999px; color: var(--fortune-on-surface-variant); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--fortune-on-surface); background: rgb(255 255 255 / .06); }
.lang svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; padding: 8px; border-radius: 22px; background: var(--fortune-surface-container-high); border: 1px solid var(--fortune-outline-variant); box-shadow: 0 24px 60px -20px #000; }
.lang a { display: block; padding: 8px 14px; border-radius: 14px; color: var(--fortune-on-surface); text-decoration: none; }
.lang a:hover { background: rgb(255 255 255 / .06); color: var(--fortune-on-surface); }
.lang a[aria-current] { color: var(--fortune-primary); background: color-mix(in srgb, var(--fortune-primary) 14%, transparent); }

/* hero */
.hero { position: relative; z-index: 1; text-align: center; padding: 72px var(--gutter) 0; overflow: hidden; }
.horizon { position: relative; z-index: 0; max-width: 760px; margin: 40px auto 0; }
.hero .copy { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; }
.hero h2 { margin-top: 26px; font-size: clamp(40px, 7.4vw, 88px); line-height: 1.16; text-wrap: balance; text-shadow: 0 4px 40px color-mix(in srgb, var(--fortune-surface) 90%, transparent); }
.hero h2 .g { background: var(--halo); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.fortune:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .hero h2 { font-size: clamp(38px, 6.4vw, 80px); line-height: 1.08; letter-spacing: -.015em; }
.fortune:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .hero h2 .g { font-style: italic; padding-right: .06em; }
.hero .lede { max-width: 620px; margin: 24px auto 0; font-size: 17px; line-height: 1.95; text-shadow: 0 2px 20px var(--fortune-surface); }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.hero-pair { display: block; width: 100%; height: auto; animation: pair-in .9s cubic-bezier(.05, .7, .1, 1) both; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(transparent, var(--fortune-surface)); z-index: 1; pointer-events: none; }
@keyframes pair-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.star { position: absolute; color: var(--fortune-tertiary); z-index: 1; animation: twinkle 4s ease-in-out infinite alternate; }
.s1 { left: 12%; top: 200px; font-size: 26px; }
.s2 { right: 16%; top: 120px; font-size: 15px; opacity: .7; animation-delay: 1.2s; }
.s3 { right: 10%; top: 54%; font-size: 21px; animation-delay: 2s; }
@keyframes twinkle { from { opacity: .35; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.rise { animation: rise .4s cubic-bezier(.05, .7, .1, 1) both; }
.copy .rise:nth-child(2) { animation-delay: .05s; } .copy .rise:nth-child(3) { animation-delay: .1s; }
.copy .rise:nth-child(4) { animation-delay: .15s; } .copy .rise:nth-child(5) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* wheel and bodygraph drawing (classes emitted by build.py) */
.wheel-house { stroke: color-mix(in srgb, var(--fortune-primary) 22%, transparent); stroke-width: 1; }
.wheel-tense { stroke: var(--fortune-tense); stroke-opacity: .85; stroke-width: 1; }
.wheel-harmonious { stroke: var(--fortune-primary); stroke-opacity: .85; stroke-width: 1; }
.wheel-planet-halo { fill: var(--fortune-primary); opacity: .16; }
.wheel-planet-dot { fill: var(--fortune-on-surface); }
.bg-silhouette { fill: color-mix(in srgb, var(--fortune-primary) 7%, transparent); }
.bg-channel { stroke: color-mix(in srgb, var(--fortune-primary) 25%, transparent); stroke-width: 5; stroke-linecap: round; }
.bg-channel.on { stroke-width: 3; }
.bg-channel.on.tense { stroke: var(--fortune-tense); }
.bg-channel.on.light { stroke: var(--fortune-on-surface); }
.bg-centre { fill: rgb(255 255 255 / .06); stroke: color-mix(in srgb, var(--fortune-on-surface) 35%, transparent); stroke-width: 1; }
.bg-centre.on { stroke: none; }
.pair-thread { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1 5; }
.pair-spark { fill: var(--fortune-tertiary); }

/* sections */
.features, .screens, .beta, .faq { position: relative; z-index: 1; max-width: 1312px; margin: 0 auto; padding: 0 var(--gutter); }
.features { padding-top: 24px; padding-bottom: 96px; }
.head { text-align: center; margin-bottom: 44px; }
.head h2 { margin-top: 12px; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.3; text-wrap: balance; }
.cards { display: grid; gap: 20px; }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.card { border-radius: var(--fortune-radius-extra-large); padding: 22px 22px 28px; display: flex; flex-direction: column; }
@media (min-width: 900px) { .card { padding: 30px; } }
.ill { height: 290px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 24px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--fortune-primary) 18%, transparent), transparent 65%); }
.card-wheel { width: 250px; height: 250px; animation: spin 120s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.bodygraph { width: 190px; height: 276px; }
.chat { display: grid; gap: 12px; width: 100%; padding: 0 6px; text-align: start; }
.bub-u { justify-self: end; max-width: 86%; padding: 12px 18px; border-radius: 24px 24px 6px 24px; background: var(--halo); color: var(--fortune-on-halo); font-size: 14px; font-weight: 500; line-height: 1.6; }
.bub-a { padding: 14px 18px; border-radius: 6px 26px 26px 26px; font-size: 13.5px; line-height: 1.75; }
.bub-a .from { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--fortune-tertiary); font-size: 12px; font-weight: 500; letter-spacing: .1em; }
.card .n { font: italic 300 21px/1.4 "Fraunces", var(--display); color: var(--fortune-tertiary); }
.card h3 { margin: 4px 0 14px; font-size: 30px; line-height: 1.3; }
.stars li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 15px; line-height: 1.85; color: var(--fortune-on-surface-variant); }
.stars li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; background: var(--fortune-rose);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0Z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 0C11 7 13 9 20 10 13 11 11 13 10 20 9 13 7 11 0 10 7 9 9 7 10 0Z'/></svg>") center / contain no-repeat; }
.aside { max-width: 720px; margin: 36px auto 0; text-align: center; font-size: 16px; }
.note { max-width: 720px; margin: 14px auto 0; text-align: center; font-size: 13px; color: var(--fortune-on-surface-variant); }

.screens { padding-bottom: 110px; }
.screens .head { display: grid; gap: 14px; text-align: start; }
@media (min-width: 1000px) {
  .screens .head { text-align: center; }
  .screens .phones { overflow: visible; margin: 0; padding: 0; }
}
.screens h2 { font: italic 300 clamp(40px, 5vw, 60px)/1.1 "Fraunces", var(--display); }
.fortune:is(:lang(zh), :lang(ja), :lang(ko)) .screens h2 { font-style: normal; font-weight: 400; font-size: clamp(30px, 4vw, 48px); }
.phones { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 14px 16px 24px; margin: 0 calc(-1 * var(--gutter)); justify-content: safe center; }
.phone-fig { margin: 0; flex: none; width: min(300px, 74vw); scroll-snap-align: center; }
.phone { border-radius: 40px; overflow: hidden; background: var(--fortune-surface-container-lowest);
  box-shadow: 0 0 0 1px rgb(255 255 255 / .14), 0 0 0 9px var(--fortune-surface-container-lowest), 0 0 0 10px rgb(255 255 255 / .08), 0 40px 120px -30px color-mix(in srgb, var(--fortune-primary) 35%, transparent); }
.phone img { display: block; width: 100%; height: auto; }
.phone-fig figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; font-size: 14px; color: var(--fortune-on-surface-variant); }
@media (min-width: 900px) { .phones { gap: 40px; } .phone-fig:nth-child(2) { margin-top: 72px; } }

.beta { padding-bottom: 96px; }
.beta-card { max-width: 980px; margin: 0 auto; border-radius: var(--fortune-radius-extra-large); padding: 32px 22px; text-align: center; position: relative; overflow: hidden; }
.beta-card::before { content: ""; position: absolute; width: 520px; height: 520px; right: -200px; top: -260px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--fortune-halo-1) 35%, transparent), transparent); pointer-events: none; }
@media (min-width: 900px) { .beta-card { padding: 56px 64px; } }
.beta h2 { margin-top: 10px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.3; }
.steps { display: grid; gap: 16px; margin-top: 32px; text-align: start; }
@media (min-width: 900px) { .steps { grid-template-columns: 1fr 1fr; gap: 24px; } }
.steps li { display: flex; gap: 16px; padding: 20px 22px; border-radius: var(--fortune-radius-medium); background: color-mix(in srgb, var(--fortune-surface-container-high) 70%, transparent); border: 1px solid var(--fortune-outline-variant); }
.steps .num { font: italic 300 30px/1 "Fraunces", serif; color: var(--fortune-tertiary); min-width: 1.4em; }
.steps p { font-size: 15px; }
.fine { margin-top: 20px; font-size: 13px; color: var(--fortune-on-surface-variant); }

.faq { max-width: 860px; padding-bottom: 110px; }
.faq h2 { text-align: center; font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 28px; }
.faq details { border-radius: var(--fortune-radius-medium); margin-bottom: 12px; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 500; font-size: 16px; line-height: 1.6; border-radius: var(--fortune-radius-medium); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 1.5px solid var(--fortune-tertiary); border-bottom: 1.5px solid var(--fortune-tertiary); rotate: 45deg; translate: 0 -3px; transition: rotate .25s; }
.faq details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq details p { padding: 0 22px 20px; font-size: 15px; color: var(--fortune-on-surface-variant); }

.foot { position: relative; z-index: 1; border-top: 1px solid var(--fortune-outline-variant); padding: 40px var(--gutter) 48px; text-align: center; font-size: 14px; color: var(--fortune-on-surface-variant); display: grid; gap: 16px; justify-items: center; }
.foot .word { font-size: 26px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; }
.foot-links a, .langs a { display: inline-block; padding: 4px 2px; }
.langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font: 13px/1.6 system-ui, sans-serif; }
.langs a { color: var(--fortune-on-surface-variant); text-decoration: none; }
.langs a[aria-current] { color: var(--fortune-primary); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fortune *, .fortune *::before, .fortune *::after { animation: none !important; transition: none !important; }
}
/* Noto Sans TC carries the Latin-script locales; pwid keeps its quotes and dashes proportional there. */
.fortune:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) { font-feature-settings: "pwid"; }
@media (max-width: 700px) { .star { display: none; } }
.fortune:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
.fortune:lang(ko) { word-break: keep-all; }
.fortune:lang(ja) .hero h2 { font-size: clamp(34px, 6vw, 76px); }
.uinote { font-size: 13px; color: var(--fortune-on-surface-variant); }
.fortune:lang(ja) .chip { word-break: auto-phrase; }
.pill.soon { cursor: default; color: var(--fortune-on-surface-variant) !important; }