@font-face{font-family:"TE CJK";src:url(/assets/fonts/cjk.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+2E80-9FFF,U+F900-FAFF,U+FF00-FFEF}
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:swap}
:root{
  --paper:#f6f1e7;--paper-2:#efe7d8;--card:#fffdf8;--ink:#1c2128;--ink-2:#454b54;--muted:#5c6067;
  --night:#141c27;--night-2:#1d2836;--night-ink:#efe8da;--night-mute:#b9b3a6;
  --cinnabar:#a3402c;--cinnabar-d:#86331f;--gold:#a8844c;--gold-l:#d8bf8e;--line:rgba(28,33,40,.13);
  --serif:"Fraunces","TE CJK",ui-serif,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"TE CJK",sans-serif;
  --r:14px;--w:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--sans);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--cinnabar-d);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--cinnabar)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em;font-variation-settings:"opsz" 96}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem)}
h3{font-size:1.25rem;font-variation-settings:"opsz" 24}
p{margin:0 0 1em}
.wrap{max-width:var(--w);margin:0 auto;padding:0 22px}
.narrow{max-width:740px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.skip:focus{left:10px;top:10px}
.eyebrow{font:600 .74rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.muted{color:var(--muted)}
.small{font-size:.88rem}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(246,241,231,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:22px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font:500 1.3rem/1 var(--serif);color:var(--ink);text-decoration:none;letter-spacing:.01em}
.brand img{width:34px;height:34px;border-radius:50%;background:var(--night);padding:3px}
.brand span{color:var(--cinnabar)}
.nav{display:flex;gap:20px;margin-left:auto}
.nav a{color:var(--ink-2);text-decoration:none;font-size:.95rem}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);text-decoration:underline}
.head-cta{margin-left:6px;border-color:var(--ink);color:var(--ink)!important;text-decoration:none!important}
.head-cta:hover{background:var(--ink);color:#fff!important}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;font-size:.9rem;color:var(--ink)}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:6px 22px 16px}
  .nav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:1.02rem}
  .nav.open{display:flex}
  .head-cta{display:none}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:12px 22px;border-radius:999px;font:600 1rem/1.2 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,transform .15s}
.btn-primary{background:var(--cinnabar);color:#fff}
.btn-primary:hover{background:var(--cinnabar-d);color:#fff;transform:translateY(-1px)}
.btn-ghost{border-color:currentColor;color:var(--ink);background:transparent}
.btn-ghost:hover{background:rgba(28,33,40,.05);color:var(--ink)}
.on-night .btn-ghost{color:var(--night-ink)}
.on-night .btn-ghost:hover{background:rgba(255,255,255,.07);color:#fff}
.btn-sm{min-height:40px;padding:8px 16px;font-size:.92rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.micro{font-size:.85rem;color:var(--muted);margin-top:.9rem}
.on-night .micro{color:var(--night-mute)}

/* hero */
.hero{background:radial-gradient(120% 90% at 78% 30%,#24344a 0%,var(--night) 58%) var(--night);color:var(--night-ink);overflow:hidden;position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,191,142,.5),transparent)}
.hero-in{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;padding:72px 22px 80px}
.hero h1{color:#fbf7ef}
.hero h1 em{font-style:normal;color:var(--gold-l)}
.hero .lede{font-size:1.12rem;color:#ddd5c5;max-width:36em}
.hero ul.ticks{list-style:none;padding:0;margin:1.4rem 0 1.8rem;display:grid;gap:.55rem}
.ticks li{position:relative;padding-left:1.6em;color:#e7e0d1}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.62em;height:.62em;border:1.5px solid var(--gold-l);transform:rotate(45deg)}
.crane-stage{position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:center}
.crane-stage svg.ring{position:absolute;inset:0;width:100%;height:100%;color:var(--gold-l);opacity:.55}
.crane-stage .moon{position:absolute;inset:16%;border-radius:50%;background:radial-gradient(circle at 45% 40%,rgba(246,236,214,.16),rgba(246,236,214,.03) 62%,transparent 70%)}
.crane-stage img.crane{position:absolute;left:11%;top:9%;width:78%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));animation:drift 9s ease-in-out infinite}
@keyframes drift{50%{transform:translateY(-8px)}}
.crane-credit{position:absolute;bottom:-5%;left:0;right:0;text-align:center;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--night-mute)}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;padding:34px 22px 56px;gap:8px}
  .crane-stage{order:-1;max-width:300px}
}

/* sections */
section.band{padding:84px 0}
section.band.alt{background:var(--paper-2)}
section.band.night{background:var(--night);color:var(--night-ink)}
.night h2,.night h3{color:#fbf7ef}
.sec-head{max-width:720px;margin-bottom:42px}
.sec-head p{color:var(--ink-2);font-size:1.06rem}
.night .sec-head p{color:var(--night-mute)}
.grid{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:780px){.g3,.g2,.g4{grid-template-columns:1fr}section.band{padding:60px 0}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px}
.step{position:relative;padding-top:56px}
.step .n{position:absolute;top:22px;left:26px;font:500 1.6rem/1 var(--serif);color:var(--cinnabar)}
.step h3{margin-bottom:.35em}
.step p{color:var(--ink-2);margin:0}

/* what you get + report mock */
.get{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:900px){.get{grid-template-columns:1fr}}
.deliv{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.deliv li{position:relative;padding-left:1.7em;color:var(--ink-2)}
.deliv li::before{content:"";position:absolute;left:.2em;top:.55em;width:.6em;height:.6em;background:var(--cinnabar);transform:rotate(45deg)}
.deliv strong{color:var(--ink)}
.deliv .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--night);color:var(--gold-l);font:500 1rem/1 var(--serif)}
.deliv b{display:block;font-weight:600}
.deliv span{color:var(--ink-2)}
.sheet{background:#fffefa;border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.03),0 30px 60px -30px rgba(20,28,39,.35);padding:30px 30px 26px;position:relative}
.sheet::before{content:"";position:absolute;inset:8px;border:1px solid rgba(168,132,76,.25);border-radius:3px;pointer-events:none}
.sheet .tag{font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--cinnabar)}
.sheet h3{margin:.6rem 0 1rem}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 18px;text-align:center}
.pillars .p{border:1px solid var(--line);border-radius:8px;padding:10px 4px 8px;background:var(--paper)}
.pillars .p.dm{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.pillars .lab{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pillars .dm .lab{color:var(--gold-l)}
.pillars .ch{font:500 1.9rem/1.15 "Songti SC","Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC",serif;display:block;margin:4px 0 2px}
.pillars .sub{font-size:.72rem;color:var(--muted);display:block;line-height:1.3}
.pillars .dm .sub{color:var(--night-mute)}
.sheet blockquote{margin:16px 0 0;padding:0 0 0 14px;border-left:2px solid var(--gold);font:400 1.06rem/1.55 var(--serif);color:var(--ink-2)}
.fict{display:inline-block;margin-top:14px;font-size:.78rem;color:var(--muted);border:1px dashed var(--line);padding:4px 9px;border-radius:6px}

/* pricing */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
@media (max-width:1020px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.ladder{grid-template-columns:1fr}}
.tier{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px}
.tier.feat{border:2px solid var(--cinnabar);box-shadow:0 26px 50px -30px rgba(163,64,44,.45);position:relative}
.tier.feat .badge{position:absolute;top:-12px;left:22px;background:var(--cinnabar);color:#fff;font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.tier .name{font:500 1.25rem/1.2 var(--serif)}
.tier .price{font:500 2.4rem/1 var(--serif);margin:14px 0 4px}
.tier .price small{font:400 .9rem var(--sans);color:var(--muted)}
.tier .for{color:var(--ink-2);font-size:.95rem;min-height:3em}
.tier ul{list-style:none;padding:0;margin:14px 0 22px;display:grid;gap:8px;font-size:.94rem}
.tier li{padding-left:1.3em;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:.6em;width:.5em;height:.5em;background:var(--gold);transform:rotate(45deg)}
.tier .btn{margin-top:auto;width:100%}
.tier .del{font-size:.83rem;color:var(--muted);margin:10px 0 0}
.guarantee{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;margin-top:34px;padding:24px 26px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.seal{width:62px;height:62px;border-radius:10px;background:var(--cinnabar);color:#fff;display:grid;place-items:center;font:500 1.05rem/1.05 var(--serif);text-align:center}
@media (max-width:600px){.guarantee{grid-template-columns:1fr}}

/* principles */
.nots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 40px;list-style:none;padding:0;margin:0}
.nots li{padding:16px 0;border-top:1px solid rgba(239,232,218,.18)}
.nots b{display:block;font:500 1.15rem/1.3 var(--serif);color:#fbf7ef;margin-bottom:4px}
.nots span{color:var(--night-mute)}
@media (max-width:700px){.nots{grid-template-columns:1fr}}

/* faq */
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font:500 1.12rem/1.35 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:300 1.6rem/1 var(--sans);color:var(--cinnabar)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 18px;color:var(--ink-2);max-width:62em}

/* final cta */
section.final{background:radial-gradient(90% 120% at 85% 50%,#24344a 0%,var(--night) 60%) var(--night);color:var(--night-ink);padding:80px 0}
.final h2{color:#fbf7ef}
.final p{color:#ddd5c5;max-width:34em}
.final-in{display:grid;grid-template-columns:1fr 260px;gap:40px;align-items:center}
.small-crane{width:260px;height:auto;filter:drop-shadow(0 18px 36px rgba(0,0,0,.5))}
.btn-ghost.on-night{color:var(--night-ink)}
.btn-ghost.on-night:hover{background:rgba(255,255,255,.07);color:#fff}
@media (max-width:700px){.final-in{grid-template-columns:1fr}.small-crane{width:150px;order:-1}section.final{padding:56px 0}}

/* page heads & prose */
.page-head{padding:64px 0 34px;border-bottom:1px solid var(--line)}
.page-head .lede{font-size:1.12rem;color:var(--ink-2);max-width:40em}
.prose{padding:46px 0 70px}
.prose h2{font-size:1.65rem;margin-top:2em}
.prose h3{margin-top:1.6em}
.prose li{margin-bottom:.45em}
.prose table{border-collapse:collapse;width:100%;margin:1.4em 0;font-size:.95rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--paper-2)}
.prose blockquote{margin:1.5em 0;padding:4px 0 4px 18px;border-left:3px solid var(--gold);color:var(--ink-2);font-family:var(--serif);font-size:1.1rem}
.prose figure{margin:2em 0}
.prose figure img{border-radius:10px;border:1px solid var(--line);background:#0e141c}
.prose figcaption{font-size:.85rem;color:var(--muted);margin-top:.5em}
.note{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:10px;padding:16px 18px;margin:1.4em 0}
.toc{font-size:.95rem}

/* blog */
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:760px){.posts{grid-template-columns:1fr}}
.post-card{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;transition:border-color .15s,transform .15s}
.post-card:hover{border-color:var(--gold);transform:translateY(-2px);color:inherit}
.post-card h2{font-size:1.24rem;margin:.35em 0 .45em}
.post-card p{color:var(--ink-2);font-size:.95rem;margin:0}
.post-card .meta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.post-meta{color:var(--muted);font-size:.9rem;margin-top:.4rem}
.post-end{margin:3em 0 0;padding:26px;border-radius:var(--r);background:var(--night);color:var(--night-ink)}
.post-end h2{color:#fbf7ef;font-size:1.4rem;margin-top:0}
.post-end p{color:var(--night-mute)}

/* forms + tool */
.tool{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 30px 60px -40px rgba(20,28,39,.4)}
label{display:block;font-weight:600;font-size:.95rem;margin:0 0 6px}
.hint{font-weight:400;color:var(--muted);font-size:.85rem}
input[type=date],input[type=time],input[type=email],input[type=text],select,textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid rgba(28,33,40,.28);border-radius:10px;background:#fff;font:inherit;color:var(--ink)}
textarea{min-height:110px}
input:focus,select:focus,textarea:focus{border-color:var(--gold);outline:2px solid rgba(168,132,76,.35)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:600px){.row{grid-template-columns:1fr}}
.hp{position:absolute!important;left:-5000px!important;width:1px;height:1px;overflow:hidden}
.status{margin-top:12px;padding:12px 14px;border-radius:10px;font-size:.95rem;display:none}
.status.show{display:block}
.status.ok{background:#e7f1e4;color:#1f4a1c;border:1px solid #b9d6b2}
.status.err{background:#f8e6e2;color:#6e2414;border:1px solid #e3b9ae}
.status.wait{background:var(--paper-2);color:var(--ink-2);border:1px solid var(--line)}
.result{margin-top:26px;display:none}
.result.show{display:block}
.dm-card{display:grid;grid-template-columns:120px 1fr;gap:22px;align-items:center;background:var(--night);color:var(--night-ink);border-radius:16px;padding:24px}
.dm-card .glyph{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;font:500 3.6rem/1 "Songti SC","Noto Serif CJK SC","Noto Serif SC",serif;color:#fbf7ef;border:1px solid rgba(216,191,142,.55);background:radial-gradient(circle,rgba(216,191,142,.16),transparent 70%)}
.dm-card h2{color:#fbf7ef;margin:.1em 0 .3em;font-size:1.8rem}
.dm-card p{color:#ddd5c5;margin:0}
@media (max-width:560px){.dm-card{grid-template-columns:1fr;text-align:center}.dm-card .glyph{margin:0 auto}}
.caveat{font-size:.9rem;color:var(--ink-2);background:#fff7e6;border:1px solid #ecd9ae;border-radius:10px;padding:12px 14px;margin-top:14px}
.hr{height:1px;background:var(--line);margin:28px 0}

/* footer */
.site-foot{background:var(--night);color:var(--night-mute);padding:56px 0 34px;font-size:.92rem}
.site-foot a{color:var(--night-ink);text-decoration:none}
.site-foot a:hover{text-decoration:underline;color:#fff}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:30px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h2{font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);margin:0 0 14px}
.foot-grid ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.disclaimer{border-top:1px solid rgba(239,232,218,.14);margin-top:36px;padding-top:22px;font-size:.84rem;line-height:1.6}

/* misc */
ol.steps{list-style:none;padding:0;margin:0}
.crumbs{color:var(--muted);margin:0 0 1.2rem}
.crumbs a{color:var(--ink-2)}
.night-panel{background:radial-gradient(circle at 50% 45%,#24344a 0%,var(--night) 70%);border-radius:22px;padding:24px;max-width:460px;margin:0 auto;color:var(--night-ink)}
.night-panel .crane-stage{max-width:none}
.post .prose>p:first-child{font-size:1.1rem}
.eyebrow{color:#7a5c2c}
.site-foot .brand span{color:#e08a6f}
.site-foot p.small a{text-decoration:underline;text-underline-offset:2px}

/* =====================================================================
   TangoEra v2 layer — ink · cinnabar · rice paper, night-sky accent.
   Tokens documented in DECISIONS.md (v2). Base content works without JS;
   motion is progressive (scroll-driven CSS where supported, IO fallback).
   ===================================================================== */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-italic.woff2) format("woff2");font-weight:300 600;font-style:italic;font-display:swap}
:root{
  --paper:#f4efe5;--paper-2:#ebe3d2;--card:#fffcf6;--ink:#15181c;--ink-2:#3b4149;--muted:#575c63;
  --night:#0c121c;--night-2:#141d2b;--night-3:#1e2b3f;--night-ink:#f0e9db;--night-mute:#b9b3a6;
  --cinnabar:#b23a23;--cinnabar-d:#8f2c19;--gold:#9c7b45;--gold-t:#7a5c2c;--gold-l:#dcc38f;
  --line:rgba(21,24,28,.12);--line-2:rgba(21,24,28,.22);
  --wood:#3d7a54;--fire:#c2452c;--earth:#a67a2a;--metal:#6f7a87;--water:#2b5c8f;
  --cjk:"TE CJK","Songti SC","Noto Serif CJK SC","Noto Serif SC","Source Han Serif SC",serif;
  --fs-hero:clamp(2.45rem,1.3rem + 4.4vw,4.75rem);--fs-h2:clamp(1.8rem,1.15rem + 2.3vw,2.9rem);
  --r:18px;--w:1200px;--ease:cubic-bezier(.2,.7,.2,1);
  interpolate-size:allow-keywords;
}
body{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2{letter-spacing:-.022em}
h2{font-size:var(--fs-h2)}
h1 em,h2 em{font-style:italic;font-weight:400}
.eyebrow{display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.on-night.eyebrow,.night .eyebrow,.hero2 .eyebrow{color:var(--gold-l)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* reading progress (CSS scroll timeline; invisible where unsupported) */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--cinnabar),var(--gold-l));transform-origin:0 50%;transform:scaleX(0);z-index:40;pointer-events:none}
@supports (animation-timeline:scroll()){.progress{animation:prog linear both;animation-timeline:scroll(root)}}
@keyframes prog{to{transform:scaleX(1)}}

/* scroll reveals: content is visible by default; animation only adds the entrance */
@supports (animation-timeline:view()){
  .rv{animation:rv-in linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  .rv-l{animation:rv-l linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
}
@keyframes rv-in{from{opacity:0;transform:translateY(32px)}}
@keyframes rv-l{from{opacity:0;transform:translateX(-24px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* buttons: micro-interactions */
.btn{transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s;position:relative;overflow:hidden;isolation:isolate}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--cinnabar);box-shadow:0 12px 26px -14px rgba(178,58,35,.85)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.26) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.site-head{background:rgba(244,239,229,.86)}

/* ---------- HERO v2 ---------- */
.hero2{position:relative;color:var(--night-ink);overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 75% at 74% 42%,#1c2a41 0%,rgba(12,18,28,0) 70%),radial-gradient(45% 55% at 0% 100%,rgba(178,58,35,.20),transparent 70%),var(--night)}
.hero2::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;pointer-events:none;
  background-image:radial-gradient(1px 1px at 8% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 33% 12%,#f6e7c4 50%,transparent 51%),radial-gradient(1.3px 1.3px at 47% 78%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 91% 16%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 62% 9%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 18% 64%,#f6e7c4 50%,transparent 51%),radial-gradient(1.2px 1.2px at 97% 72%,#fff 50%,transparent 51%);background-size:520px 520px}
.hero2-in{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center;padding:clamp(36px,6vw,88px) 22px clamp(28px,4vw,48px)}
.hero2 h1{font-size:var(--fs-hero);line-height:1.02;letter-spacing:-.03em;color:#fbf7ef;font-weight:400;margin-bottom:.4em}
.hero2 h1 em{color:var(--gold-l);font-weight:300;display:block}
.hero2 .lede{font-size:clamp(1.02rem,.95rem + .3vw,1.18rem);color:#d9d1c1;max-width:34em}
.hero2 .ticks{list-style:none;padding:0;margin:1.2rem 0 1.8rem;display:grid;gap:.5rem}
.hero2 .micro{color:var(--night-mute)}
.dial-col{position:relative;display:grid;justify-items:center;gap:14px}
.dial{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;contain:layout paint}
.dial-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dial-svg line{stroke:var(--gold-l);stroke-width:1;opacity:.45}
.dial-svg .tk-m{opacity:.8;stroke-width:1.4}
.d-c1,.d-c2,.d-c3{fill:none;stroke:var(--gold-l);opacity:.38}
.d-c3{stroke-dasharray:2 6}
.d-outer,.d-terms{transform-box:view-box;transform-origin:50% 50%}
.d-outer{animation:spin 480s linear infinite}
.d-terms{transition:transform 2.6s var(--ease)}
.d-terms .t{fill:var(--night-ink);opacity:.55;font:15px/1 var(--cjk);text-anchor:middle;dominant-baseline:central;transition:opacity .6s,fill .6s}
.d-terms .t.tm{opacity:.85;font-size:17px}
.d-terms .t.now{fill:var(--gold-l);opacity:1;font-weight:700}
.d-arc{fill:rgba(178,58,35,.30);stroke:#e0664c;stroke-width:1.2;opacity:0;transition:opacity 1s .9s}
.d-sun{fill:#f6d38c;opacity:0;transition:opacity 1s 1.2s}
.d-ptr{fill:#e0664c;opacity:0;transition:opacity 1s 1.2s}
.dial.ready .d-arc,.dial.ready .d-sun,.dial.ready .d-ptr{opacity:1}
.dial .moon{position:absolute;inset:21%;border-radius:50%;background:radial-gradient(circle at 42% 38%,rgba(246,236,214,.20),rgba(246,236,214,.05) 58%,transparent 71%)}
.dial .crane{position:absolute;z-index:2;left:18%;top:15%;width:64%;height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));animation:drift 9s ease-in-out infinite}
.dial-ink{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none}
.dial-cap{min-height:3.2em;margin:0;text-align:center;font-size:.9rem;color:var(--night-mute);max-width:30em}
.dial-cap b{color:var(--gold-l);font-weight:600}
.dial-cap .zh{font-family:var(--cjk);color:#fbf7ef;font-size:1.05rem}
@supports (animation-timeline:scroll()){
  .dial{animation:dial-par linear both;animation-timeline:scroll(root);animation-range:0 90vh}
}
@keyframes dial-par{to{transform:translateY(60px) scale(.94);opacity:.55}}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(220,195,143,.18);margin:0 22px;padding:0;list-style:none}
.facts li{padding:18px 18px 26px 0;color:var(--night-mute);font-size:.88rem}
.facts b{display:block;font:400 clamp(1.4rem,1rem + 1.3vw,2rem)/1.1 var(--serif);color:#fbf7ef;margin-bottom:2px}
@media (max-width:900px){
  .hero2-in{grid-template-columns:1fr;padding-top:18px;gap:0}
  .dial-col{order:-1}
  .dial{max-width:340px}
  .facts{grid-template-columns:1fr 1fr}
}

/* ---------- BENTO ---------- */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bx{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,2.4vw,30px);overflow:hidden;isolation:isolate}
.bx::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(178,58,35,.08),transparent 60%)}
.bx:hover::before{opacity:1}
.bx.dark{background:var(--night);color:var(--night-ink);border-color:transparent}
.bx.dark::before{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(220,195,143,.12),transparent 60%)}
.bx.dark h3{color:#fbf7ef}.bx.dark p{color:var(--night-mute)}
.bx.s2{grid-column:span 2}.bx.s3{grid-column:span 3}.bx.s4{grid-column:span 4}.bx.s6{grid-column:1/-1}.bx.r2{grid-row:span 2}
.bx h3{font-size:1.35rem}
.bx .k{font:600 .7rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-t);margin:0 0 .9rem}
.bx.dark .k{color:var(--gold-l)}
@media (max-width:980px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bx.s3,.bx.s4,.bx.s6{grid-column:1/-1}.bx.s2{grid-column:span 1}.bx.r2{grid-row:auto}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bx.s2{grid-column:1/-1}}
.mini-ec .row{grid-template-columns:1fr;margin:18px 0 14px}
.mini-ec .big{font:400 clamp(1.8rem,1.2rem + 1.8vw,2.6rem)/1.05 var(--serif);letter-spacing:-.02em;margin:0 0 .4em;color:#fbf7ef}
.mini-ec input[type=date]{background:rgba(255,255,255,.96)}
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.seg button{border:0;background:transparent;border-radius:999px;padding:8px 14px;font:600 .82rem/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}
.no-js-hide{display:none}
.js .no-js-hide{display:inline-flex}

/* five-element cycle + radar */
.cycle,.radar{width:100%;height:auto;display:block;overflow:visible}
.cycle .nd{color:var(--ink-2);cursor:default}
.cycle .e0,.radar .e0{color:var(--wood)}.cycle .e1,.radar .e1{color:var(--fire)}.cycle .e2,.radar .e2{color:var(--earth)}.cycle .e3,.radar .e3{color:var(--metal)}.cycle .e4,.radar .e4{color:var(--water)}
.cycle .nd circle{fill:var(--card);stroke:currentColor;stroke-width:1.8;transition:fill .3s,r .3s}
.cycle .nz{font:600 21px/1 var(--cjk);text-anchor:middle;fill:currentColor}
.cycle .ne{font:600 9.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-anchor:middle;fill:var(--muted)}
.cycle .ar{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-dasharray:5 5;animation:flow 1.4s linear infinite;transition:opacity .45s,stroke .3s}
.cycle .ar.ctl{stroke:var(--cinnabar)}
.cycle .ah{fill:var(--ink-2)}
.cycle.m-gen .g-ctl,.cycle.m-ctl .g-gen{opacity:0}
.cycle .nd.dm circle{fill:currentColor}.cycle .nd.dm .nz{fill:#fff}
.cycle .ar.hl{stroke-width:2.6;stroke:var(--ink)}
.cycle .ar.dim{opacity:.18}
.bx.dark .cycle .nd circle{fill:var(--night-2)}.bx.dark .cycle .ar{stroke:var(--night-mute)}
@keyframes flow{to{stroke-dashoffset:-20}}
.radar .rg{fill:none;stroke:var(--line-2);stroke-width:1}
.radar .rl{font:600 10.5px/1 var(--sans);text-anchor:middle;fill:currentColor;letter-spacing:.04em}
.radar .rv-poly{fill:rgba(178,58,35,.16);stroke:var(--cinnabar);stroke-width:2;stroke-linejoin:round;transform-box:view-box;transform-origin:50% 50%}
.radar .rv-dot{fill:currentColor;stroke:#fff;stroke-width:1.5}
.radar.grow .rv-poly{animation:grow 1.1s var(--ease) both}
.radar.grow .rv-dot{animation:pop .5s .8s var(--ease) both;transform-box:fill-box;transform-origin:50% 50%}
@keyframes grow{from{transform:scale(0);opacity:0}}
@keyframes pop{from{transform:scale(0)}}
.cycle-cap{min-height:3.3em;font-size:.9rem;color:var(--ink-2);margin:.4rem 0 0}

/* ten stems tabs */
.stems-tabs{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:6px 0 14px}
.stems-tabs button{aspect-ratio:1;border:1px solid var(--line-2);border-radius:12px;background:transparent;font:500 1.3rem/1 var(--cjk);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.stems-tabs button:hover{transform:translateY(-2px)}
.stems-tabs button[aria-selected=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.stems-tabs .w{color:var(--wood)}.stems-tabs .f{color:var(--fire)}.stems-tabs .e{color:var(--earth)}.stems-tabs .m{color:var(--metal)}.stems-tabs .wa{color:var(--water)}
.stems-tabs button[aria-selected=true]{color:#fff}
@media (max-width:640px){.stems-tabs{grid-template-columns:repeat(5,1fr)}}
.stem-panel h4{font:500 1.15rem/1.3 var(--serif);margin:0 0 .3rem}
.stem-panel p{margin:0;color:var(--ink-2);font-size:.95rem}
.stems-list{display:grid;gap:12px}
.js .stems-list .stem-panel[hidden]{display:none}
.stems-tabs{display:none}.js .stems-tabs{display:grid}

/* year strip: where the sun is */
.ystrip{position:relative;display:grid;grid-template-columns:repeat(24,1fr);gap:2px;margin:22px 0 10px;height:46px}
.ystrip span{border-radius:3px;background:rgba(220,195,143,.16);position:relative}
.ystrip span.maj{background:rgba(220,195,143,.30)}
.ystrip span.now{background:var(--cinnabar)}
.ystrip span.past{background:rgba(220,195,143,.45)}
.ystrip i{position:absolute;top:-8px;bottom:-8px;width:2px;background:#f6d38c;left:var(--p,0%);box-shadow:0 0 10px #f6d38c;opacity:0;transition:left 1.6s var(--ease),opacity .6s}
.ystrip.ready i{opacity:1}
.ylab{display:flex;justify-content:space-between;font:500 .78rem/1 var(--cjk);color:var(--night-mute)}
.ynow{font-size:.92rem;min-height:2.8em;margin-top:12px}
.ynow b{color:var(--gold-l);font-weight:600}
.fact-big{font:400 clamp(2.2rem,1.4rem + 2.4vw,3.4rem)/1 var(--serif);letter-spacing:-.03em;margin:.2rem 0 .3rem}
.fact-big small{font:500 .9rem var(--sans);letter-spacing:0;color:var(--muted)}

/* ---------- scroll story ---------- */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.story-fig{position:sticky;top:88px;margin:0;background:radial-gradient(80% 80% at 50% 40%,var(--night-3),var(--night));border-radius:28px;padding:18px;color:var(--night-ink);box-shadow:0 40px 80px -50px rgba(12,18,28,.8)}
.story-fig figcaption{font-size:.78rem;color:var(--night-mute);text-align:center;padding:4px 0 2px}
.story-svg{width:100%;height:auto;display:block}
.story-svg [data-l]{opacity:0;transition:opacity .55s var(--ease),transform .7s var(--ease);transform:translateY(12px);transform-box:view-box}
.story-fig[data-active="1"] [data-l="1"],.story-fig[data-active="2"] [data-l="2"],.story-fig[data-active="3"] [data-l="3"],.story-fig[data-active="4"] [data-l="4"],.story-fig[data-active="5"] [data-l="5"]{opacity:1;transform:none}
.story-svg text{text-anchor:middle;fill:var(--night-ink)}
.s-arc{fill:none;stroke:var(--gold-l);stroke-dasharray:3 6;opacity:.6}.s-mer{stroke:rgba(220,195,143,.18)}.s-hz{stroke:rgba(220,195,143,.5)}
.s-sun{fill:#f6d38c;filter:drop-shadow(0 0 12px #f6d38c)}
.s-big{font:400 26px var(--serif)}.s-sm{font:500 12.5px var(--sans);fill:var(--night-mute)!important;letter-spacing:.02em}
.s-col rect{fill:rgba(255,255,255,.04);stroke:rgba(220,195,143,.35)}
.s-col.dm rect{fill:var(--cinnabar);stroke:var(--cinnabar)}
.s-lab{font:600 10.5px var(--sans);letter-spacing:.16em;fill:var(--gold-l)!important}
.s-col.dm .s-lab{fill:#fff!important}
.s-ch{font:500 54px var(--cjk)}.s-ch2{font:500 26px var(--cjk)}.s-ch.w{font-size:44px;fill:#fff}
.s-col{transition:transform .6s var(--ease),opacity .6s}
.story-fig[data-active="2"] .s-col{animation:col-in .7s var(--ease) both}
.story-fig[data-active="2"] .c1{animation-delay:.12s}.story-fig[data-active="2"] .c2{animation-delay:.24s}.story-fig[data-active="2"] .c3{animation-delay:.36s}
@keyframes col-in{from{opacity:0;transform:translateY(24px)}}
.s-radar .rg,.story-svg .rg{fill:none;stroke:rgba(220,195,143,.25)}
.story-svg .rl{font:600 10.5px var(--sans);fill:var(--night-ink)}
.story-svg .rv-poly{fill:rgba(178,58,35,.4);stroke:#e0664c;stroke-width:2;transform-box:fill-box;transform-origin:50% 50%}
.story-svg .rv-dot{fill:#f6d38c}
.story-fig[data-active="3"] .rv-poly{animation:grow 1s var(--ease) both}
.s-dm{fill:var(--cinnabar)}.s-sat{fill:var(--night-2);stroke:var(--gold-l)}.s-link{stroke:var(--gold-l);stroke-dasharray:4 5;animation:flow 1.6s linear infinite}
.s-tl{stroke:var(--gold-l);opacity:.5}.s-yr circle{fill:var(--cinnabar);stroke:#f6d38c;stroke-width:2}
.story-steps{list-style:none;margin:0;padding:0;counter-reset:st}
.story-steps li{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0;border-left:2px solid var(--line);padding-left:28px;position:relative;transition:opacity .4s,border-color .4s}
.story-steps li::before{counter-increment:st;content:"0" counter(st);position:absolute;left:-1px;top:50%;transform:translate(-50%,-2.6em);background:var(--paper);font:500 .9rem/1 var(--serif);color:var(--muted);padding:6px 0}
.js .story-steps li:not(.on) :is(h2,h3),.js .story-steps li:not(.on) p{color:var(--muted)}.js .story-steps li:not(.on) :is(h2,h3) .zh{opacity:.8}
.js .story-steps li.on{opacity:1;border-left-color:var(--cinnabar)}
.story-steps li.on::before{color:var(--cinnabar)}
.story-steps :is(h2,h3){font-size:clamp(1.35rem,1.1rem + .8vw,1.8rem)}
.story-steps p{color:var(--ink-2);max-width:30em}
@media (max-width:860px){
  .story{grid-template-columns:1fr;gap:0}
  .story-fig{top:66px;z-index:2;max-width:420px;width:100%;margin:0 auto;padding:8px;border-radius:20px}
  .story-steps li{min-height:46vh}
}

/* ---------- report viewer ---------- */
.viewer{background:#fffefa;border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 80px -50px rgba(12,18,28,.55);overflow:hidden;position:relative}
.viewer::before{content:"";position:absolute;inset:8px;border:1px solid rgba(156,123,69,.22);border-radius:16px;pointer-events:none}
.vtabs{display:none;gap:4px;padding:10px;background:var(--paper-2);overflow-x:auto;scrollbar-width:none;position:relative;z-index:1}
.js .vtabs{display:flex}
.vtabs button{flex:0 0 auto;border:0;background:transparent;padding:9px 14px;border-radius:999px;font:600 .84rem/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.vtabs button[aria-selected=true]{background:var(--night);color:#fff}
.vpanel{padding:24px 26px 26px}
.js .vpanel[hidden]{display:none}
.js .vpanel{animation:fade-up .45s var(--ease) both}
@keyframes fade-up{from{opacity:0;transform:translateY(10px)}}
.vpanel :is(h2,h3){font-size:1.25rem}
.vpanel .radar{max-width:330px;margin:0 auto}
.gods{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.gods li{display:grid;grid-template-columns:3.2em 1fr;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.gods .c{font:500 1.6rem/1 var(--cjk);text-align:center}
.gods b{display:block;font-weight:600}.gods span{font-size:.9rem;color:var(--ink-2)}
.ymap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;list-style:none;padding:0;margin:0}
.ymap li{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--paper)}
.ymap .y{font:600 .74rem/1 var(--sans);letter-spacing:.14em;color:var(--gold-t)}
.ymap .gz{font:500 1.9rem/1.2 var(--cjk);display:block;margin:6px 0}
.ymap p{font-size:.88rem;color:var(--ink-2);margin:0}
@media (max-width:560px){.ymap{grid-template-columns:1fr}}

/* ---------- pricing toggle + compare ---------- */
.price-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:18px;margin-bottom:28px}
.cmp{margin-top:28px;overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.cmp table{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem}
.cmp th,.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:center}
.cmp th:first-child,.cmp td:first-child{text-align:left}
.cmp thead th{font:500 1.05rem/1.2 var(--serif);background:var(--paper-2);vertical-align:bottom}
.cmp thead th small{display:block;font:600 .9rem var(--sans);color:var(--cinnabar);margin-top:4px}
.cmp .feat{background:rgba(178,58,35,.05)}
.cmp .y{color:var(--wood);font-weight:700}.cmp .n{color:var(--muted)}
.cmp tbody tr{transition:background .2s}.cmp tbody tr:hover{background:rgba(156,123,69,.07)}
.js [data-view=cards] .cmp{display:none}
.js [data-view=table] .ladder{display:none}
.js [data-view] .cmp,.js [data-view] .ladder{animation:fade-up .4s var(--ease) both}
.tier{transition:transform .3s var(--ease),box-shadow .3s}
.tier:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(12,18,28,.5)}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.tier.feat{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,conic-gradient(from var(--ang),var(--cinnabar),var(--gold-l) 30%,var(--cinnabar) 60%,var(--cinnabar)) border-box}
.tier.feat:hover{animation:ang 4s linear infinite}
@keyframes ang{to{--ang:360deg}}

/* ---------- FAQ animation (modern ::details-content) ---------- */
.faq summary::after{content:"+";transition:transform .3s var(--ease)}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq summary{transition:color .2s}.faq summary:hover{color:var(--cinnabar-d)}
@supports selector(::details-content){
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* night rules band, v2 */
.nots2{display:grid;grid-template-columns:repeat(4,1fr);gap:0;list-style:none;padding:0;margin:0;border-top:1px solid rgba(240,233,219,.16)}
.nots2 li{padding:26px 22px 8px 0;border-right:1px solid rgba(240,233,219,.10);padding-left:22px}
.nots2 li:first-child{padding-left:0}.nots2 li:last-child{border-right:0}
.nots2 .x{font:300 2.4rem/1 var(--serif);color:#e0664c;display:block;margin-bottom:.8rem}
.nots2 h3{color:#fbf7ef}.nots2 p{color:var(--night-mute);font-size:.95rem}
@media (max-width:900px){.nots2{grid-template-columns:1fr 1fr}.nots2 li{border-right:0;padding-left:0}}
@media (max-width:560px){.nots2{grid-template-columns:1fr}}

/* ---------- Element Check v2 ---------- */
.ec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 6px}
.pc{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px 6px 12px;text-align:center;overflow:hidden}
.pc.dm{background:var(--night);color:var(--night-ink);border-color:var(--night)}
.pc .lab{font:600 .68rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pc.dm .lab{color:var(--gold-l)}
.pc .chs{display:grid;gap:2px;margin:10px 0 8px}
.pc .c{font:500 clamp(2rem,1.4rem + 2vw,2.8rem)/1.1 var(--cjk);display:block}
.pc .c small{display:block;font:600 .62rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.pc .god{font-size:.74rem;color:var(--ink-2);line-height:1.3;display:block;min-height:2.6em}
.pc.dm .god{color:var(--gold-l)}
.pc.none .c{color:var(--muted)}
.pc .c.e0 small{color:var(--wood)}.pc .c.e1 small{color:var(--fire)}.pc .c.e2 small{color:var(--earth)}.pc .c.e3 small{color:var(--metal)}.pc .c.e4 small{color:var(--water)}
.pc.dm .c small{color:var(--gold-l)!important}
.pc .c{animation:brush .9s var(--ease) both;animation-delay:calc(var(--i,0) * .18s + .1s)}
.pc::after{content:"";position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(0);background:radial-gradient(circle,rgba(21,24,28,.14),transparent 60%);animation:bloom 1.2s var(--ease) both;animation-delay:calc(var(--i,0) * .18s);pointer-events:none}
.pc.dm::after{background:radial-gradient(circle,rgba(220,195,143,.25),transparent 60%)}
@keyframes brush{from{clip-path:inset(0 0 100% 0);opacity:.2;filter:blur(3px)}to{clip-path:inset(0 0 0 0);opacity:1;filter:blur(0)}}
@keyframes bloom{0%{transform:translate(-50%,-50%) scale(0);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media (max-width:560px){.ec-grid{grid-template-columns:repeat(2,1fr)}}
.ec-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
.ec-charts .card{padding:20px}
.ec-charts h3{font-size:1.1rem;margin-bottom:.2em}
.ec-charts .small{margin:0}
@media (max-width:720px){.ec-charts{grid-template-columns:1fr}}
.rel{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px;font-size:.88rem}
.rel li{display:flex;gap:8px;align-items:baseline}
.rel i{font-style:normal;font-family:var(--cjk);font-weight:600;min-width:1.2em}
.ec-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 4px}
.dm-card{background:radial-gradient(70% 120% at 15% 50%,var(--night-3),var(--night));animation:fade-up .6s var(--ease) both}
.dm-card .glyph{animation:glyph 1.2s var(--ease) both}
@keyframes glyph{from{transform:scale(.6) rotate(-12deg);opacity:0;filter:blur(6px)}}
.tool{border-radius:24px}
.page-head{position:relative;overflow:hidden}
.page-head h1{font-size:clamp(2.3rem,1.5rem + 3vw,3.8rem);letter-spacing:-.03em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .d-terms{transition:none}
  .dial{animation:none}
  .pc::after{display:none}
}
.rel .e0{color:var(--wood)}.rel .e1{color:var(--fire)}.rel .e2{color:var(--earth)}.rel .e3{color:var(--metal)}.rel .e4{color:var(--water)}
.vfoot{margin:0;padding:0 26px 20px}
.night-panel.hero2{border-radius:28px;padding:24px}
.cycle.m-both .ar.dim{opacity:.12}
#explore .sec-head{max-width:46rem}
.bx.dark.mini-ec .big{color:#fbf7ef}
.viewer .vfoot{border:0;background:none;font-size:.78rem;color:var(--muted);padding:0 26px 20px;margin:0}
.mini-ec .you{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.mini-ec .you li{border:1px solid rgba(220,195,143,.28);border-radius:999px;padding:6px 12px;font-size:.8rem;color:var(--gold-l)}
#ec-cycle-tpl,svg[hidden]{display:none}
.tier .badge-soft{position:absolute;top:-12px;left:22px;background:#fbf7ef;color:var(--ink,#1b1a17);border:1px solid currentColor;font:600 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px}.tier{position:relative}
/* perf: below-the-fold home sections skip layout/paint until near the viewport */
main>section.hero2~section{content-visibility:auto;contain-intrinsic-size:auto 1100px}