.page-head{padding:3.2rem 0 0;text-align:center}.page-sub{color:var(--text-dim);max-width:640px;margin:0 auto 1.4rem}.page-sub strong{color:var(--hxh-gold)}.section{padding:4rem 0 0}.principles{display:grid;grid-template-columns:300px 1fr;gap:1.5rem;padding:2rem;margin-top:1.8rem;align-items:center}@media(max-width:760px){.principles{grid-template-columns:1fr}}.aura-stage{display:grid;place-items:center}.aura-figure{width:100%;max-width:260px}.aura-layer{transform-origin:100px 140px;transition:opacity .5s,transform .5s}.hatsu-beam{opacity:0;transform-origin:100px 96px;transition:opacity .4s}#aura-figure[data-state=ten] .aura-outer{opacity:0}#aura-figure[data-state=ten] .aura-mid{opacity:.55;animation:aura-pulse 3.2s ease-in-out infinite}#aura-figure[data-state=ten] .aura-inner{opacity:1;animation:aura-pulse 3.2s ease-in-out infinite}#aura-figure[data-state=zetsu] .aura-layer{opacity:0}#aura-figure[data-state=ren] .aura-outer{opacity:1;animation:aura-pulse .9s ease-in-out infinite}#aura-figure[data-state=ren] .aura-mid{opacity:1;animation:aura-pulse .9s ease-in-out infinite .15s}#aura-figure[data-state=ren] .aura-inner{opacity:1;animation:flicker 1.4s linear infinite}#aura-figure[data-state=hatsu] .aura-outer{opacity:.35}#aura-figure[data-state=hatsu] .aura-mid{opacity:.5}#aura-figure[data-state=hatsu] .aura-inner{opacity:.8;animation:aura-pulse 1.6s ease-in-out infinite}#aura-figure[data-state=hatsu] .hatsu-beam{opacity:1;animation:flicker 1.1s linear infinite}.principle-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.1rem}.p-tab{font-family:var(--font-display);font-size:1.02rem;letter-spacing:.06em;padding:.5rem 1.2rem;border-radius:10px;border:2px solid var(--line);background:var(--panel-2);color:var(--text-dim);transition:all .2s}.p-tab:hover{border-color:var(--pc);color:var(--text);transform:translateY(-2px)}.p-tab.active{border-color:var(--pc);color:var(--pc);background:color-mix(in srgb,var(--pc) 12%,transparent);box-shadow:0 0 18px -4px var(--pc)}.p-body{display:none}.p-body.active{display:block;animation:pop-in .35s}.p-jp{font-weight:700;letter-spacing:.2em;font-size:.85rem;margin-bottom:.4rem}.p-body p{color:var(--text-dim);margin:0}.hex-wrap{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:1.6rem;padding:1.6rem;margin-top:1.8rem;align-items:center}@media(max-width:820px){.hex-wrap{grid-template-columns:1fr}}.hex-chart{width:100%}.hex-node{cursor:pointer;outline:none}.hex-dot{fill:var(--panel-2);stroke:var(--tc);stroke-width:2.5;transition:fill .25s,r .25s}.hex-ring{fill:none;stroke:var(--tc);stroke-width:2;opacity:0;transform-origin:center;transform-box:fill-box}.hex-node:hover .hex-dot,.hex-node:focus-visible .hex-dot{fill:color-mix(in srgb,var(--tc) 25%,var(--panel-2))}.hex-node.selected .hex-dot{fill:var(--tc)}.hex-node.selected .hex-ring{opacity:1;animation:ring-out 1.6s ease-out infinite}@keyframes ring-out{0%{transform:scale(1);opacity:.9}to{transform:scale(1.75);opacity:0}}.hex-pct{fill:var(--text);font-family:var(--font-body);font-size:13px;font-weight:700;dominant-baseline:middle;pointer-events:none}.hex-node.selected .hex-pct{fill:#0b0d12}.hex-label{fill:var(--text-dim);font-family:var(--font-body);font-size:13.5px;font-weight:700;letter-spacing:.04em;pointer-events:none;transition:fill .25s}.hex-node.selected .hex-label,.hex-node:hover .hex-label{fill:var(--tc)}.hex-hint{color:var(--text-dim);font-weight:600}.hex-detail{animation:pop-in .35s}.hex-detail h3{font-size:1.5rem}.hex-desc{color:var(--text-dim)}.hex-meta{display:grid;gap:.55rem;font-size:.9rem;margin-top:.9rem}.hex-meta-k{display:inline-block;min-width:108px;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--hxh-gold)}.hex-faces{display:flex;gap:.8rem;margin-top:1.1rem}.hex-face{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-decoration:none;color:var(--text-dim);font-size:.72rem;font-weight:700}.hex-face-art{width:62px;height:62px;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--fc) 40%,transparent),transparent 75%),linear-gradient(180deg,var(--panel-2),#0e1118);border:2px solid color-mix(in srgb,var(--fc) 50%,var(--line));transition:transform .25s}.hex-face:hover .hex-face-art{transform:scale(1.12)}.hex-face:hover{color:var(--fc)}.hex-face-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}.divination{padding:2rem;margin-top:1.8rem}.quiz-progress{height:8px;border-radius:6px;background:var(--panel-2);overflow:hidden;margin-bottom:1.5rem}.quiz-bar{height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--hxh-green),var(--hxh-gold));transition:width .45s cubic-bezier(.22,1,.36,1)}.quiz .q-text{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.03em;margin:0 0 1.1rem;animation:pop-in .3s}.quiz .q-answers{display:grid;gap:.6rem}@media(min-width:720px){.quiz .q-answers{grid-template-columns:1fr 1fr}}.quiz .q-answer{text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:.85rem 1.1rem;font-size:.94rem;transition:all .18s;animation:pop-in .35s backwards}.quiz .q-answer:hover{border-color:var(--hxh-green);background:color-mix(in srgb,var(--hxh-green) 10%,var(--panel-2));transform:translate(4px)}.result{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:center;animation:pop-in .5s}@media(max-width:700px){.result{grid-template-columns:1fr}}.glass-stage{display:grid;place-items:center}.glass-svg{width:100%;max-width:240px}#water{transition:y 1.6s ease,height 1.6s ease,fill 1.6s ease}#leaf{transition:transform 1.6s ease-in-out,filter 1s}#impurities,#overflow,#sparkles{transition:opacity .9s ease .7s}.glass-svg.fx-enhancement #water{y:44px;height:196px}.glass-svg.fx-enhancement #leaf{transform:translateY(-74px)}.glass-svg.fx-enhancement #overflow{opacity:1}.glass-svg.fx-emission #water{fill:#b44df0;opacity:.65}.glass-svg.fx-transmutation #sparkles,.glass-svg.fx-conjuration #impurities{opacity:1}.glass-svg.fx-manipulation #leaf{transform:translate(34px) rotate(14deg)}.glass-svg.fx-specialization #leaf{filter:drop-shadow(0 0 8px #f45fc0) hue-rotate(220deg);transform:translateY(-16px)}.glass-svg.fx-specialization #sparkles{opacity:1;fill:#f45fc0}.result-kicker{font-size:.7rem;font-weight:700;letter-spacing:.3em;color:var(--hxh-gold)}.result-name{font-size:2.1rem;margin:.15rem 0 .6rem}.result-water{font-weight:700;color:var(--text)}.result-desc,.result-users{color:var(--text-dim);font-size:.95rem}#quiz-retry{margin-top:.4rem}