@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600&display=swap');
:root{--ink:#233a3b;--muted:#71807f;--accent:#245b53;--line:#dce3e1;--serif:'Noto Serif SC','Songti SC',serif}*{box-sizing:border-box}body{margin:0;background:#f5f7f7;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft Yahei',sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #4a9489;outline-offset:5px}button{color:inherit}header{height:106px;max-width:1500px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);font-size:23px;font-weight:600}.mark{font-size:42px;line-height:1;font-weight:400}.brand small{display:block;font-size:10px;letter-spacing:3px;margin-top:3px}.header-note{font-size:11px;letter-spacing:3px;color:#83918f}.quiet{border:0;background:none;font-size:14px;padding:12px 0}.quiet span{margin-left:12px}.hero{max-width:1420px;min-height:660px;height:calc(100svh - 185px);max-height:920px;margin:auto;display:grid;grid-template-columns:46% 54%;align-items:center;padding:24px 6% 65px;position:relative;overflow:hidden}.hero-copy{position:relative;z-index:2}.eyebrow{display:block;font-size:11px;letter-spacing:3px;color:#718581;margin-bottom:28px}.eyebrow:before{content:'';display:inline-block;width:23px;height:1px;background:#7b9590;vertical-align:middle;margin-right:13px}h1{font-family:var(--serif);font-size:clamp(44px,4.7vw,70px);font-weight:400;letter-spacing:3px;line-height:1.42;margin:0 0 26px}h1 em{font-style:normal;color:#4c857a}.intro{line-height:2;color:#72817e;font-size:16px;margin:0 0 36px}.primary{background:#244f49;color:#fff;border:1px solid #244f49;border-radius:50px;padding:19px 34px;font-size:16px;letter-spacing:2px;box-shadow:0 9px 23px #244f4916;transition:background .2s,transform .2s}.primary:hover{background:#163b35;transform:translateY(-2px)}.primary .star{margin-left:24px;color:#d9ecbf}.micro{font-size:12px;color:#8b9693;margin-top:19px;letter-spacing:1px}.art{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0}.orb-image{width:128%;max-width:none;mix-blend-mode:multiply;animation:float 8s ease-in-out infinite;transition:filter 1s;pointer-events:none}.orb-wrap{width:100%;display:flex;justify-content:center;transition:transform .6s ease-out}.orbit-label{position:absolute;font-size:12px;letter-spacing:2px;color:#728884;background:#f9fbfac7;padding:12px 18px;border:1px solid #ffffff;border-radius:30px;backdrop-filter:blur(12px);box-shadow:0 8px 30px #405f5810}.l1{top:18%;right:8%;transform:rotate(6deg)}.l2{bottom:21%;left:1%;transform:rotate(-7deg)}.art-caption{position:absolute;bottom:0;text-align:center;font-size:10px;letter-spacing:3px;color:#94a49e}.hero-index{position:absolute;bottom:24px;left:6%;display:flex;gap:12px;font-size:11px;letter-spacing:2px;color:#8b9793}.hero-index b{font-weight:400;color:#2e5b50}.hero-index i{width:55px;height:1px;background:#9cb4ac;margin-top:6px}footer{max-width:1350px;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:26px 18px;font-size:11px;color:#8a9692;letter-spacing:1px}.quiz{max-width:1110px;margin:auto;padding:38px 32px 60px;min-height:calc(100svh - 185px);animation:enter .5s ease}.quiz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:36px}.back{border:0;background:transparent;color:#70837c;font-size:14px;padding:10px 0}.steps{display:flex;gap:8px;align-items:center;font-size:12px;color:#789086;letter-spacing:2px}.steps i{height:3px;width:36px;background:#dce5df;border-radius:4px}.steps i.on{background:#4c7e6c}.question-head{text-align:center}.question-head .eyebrow{margin-bottom:18px}.question-head h2{font-family:var(--serif);font-size:38px;font-weight:400;letter-spacing:2px;margin:0 0 15px}.question-head p{color:#7b8982;font-size:14px;margin-bottom:34px}.choices{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.choice{text-align:left;border:1px solid #dde4e0;border-radius:16px;background:#fff;padding:0;overflow:hidden;transition:transform .25s,box-shadow .25s,border .25s}.choice:hover{transform:translateY(-7px);box-shadow:0 18px 45px #27483815;border-color:#82a89a}.choice-art{height:225px;position:relative;overflow:hidden;background:#edf4f1;display:grid;place-items:center}.choice-art img{width:135%;mix-blend-mode:multiply;transition:transform .7s}.choice:hover img{transform:scale(1.1) rotate(8deg)}.choice-num{position:absolute;top:17px;left:17px;font-size:11px;letter-spacing:2px;color:#526d62}.choice-copy{padding:21px}.choice-copy strong{font-family:var(--serif);font-size:21px;font-weight:500;display:block;margin-bottom:9px}.choice-copy span{color:#819086;font-size:13px;line-height:1.7}.quiz-foot{text-align:center;color:#929e98;font-size:12px;letter-spacing:1px;margin-top:31px}.result{max-width:1120px;padding:38px 35px 60px;margin:auto;min-height:calc(100svh - 185px);display:grid;grid-template-columns:46% 54%;gap:68px;align-items:center;animation:enter .7s ease}.result-art{border-radius:180px 180px 18px 18px;background:#e9f0e8;min-height:490px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden;border:1px solid #dbe6df}.result-art img{width:125%;mix-blend-mode:multiply}.result-art .card-brand{position:absolute;top:43px;font-size:11px;letter-spacing:4px}.result-art .card-type{position:absolute;bottom:46px;font-size:12px;letter-spacing:5px}.result-copy .eyebrow{margin-bottom:18px}.result-copy h2{font-family:var(--serif);font-size:44px;font-weight:400;letter-spacing:3px;margin:0 0 14px}.result-sub{font-family:var(--serif);color:#618878;font-size:19px;line-height:1.7;margin:0 0 20px}.result-desc{font-size:15px;line-height:2;color:#78877e}.tags{display:flex;gap:9px;margin:22px 0}.tags span{border:1px solid #dce5df;border-radius:30px;padding:7px 13px;font-size:12px;color:#608071}.ritual{border-top:1px solid #dce5df;padding:20px 0}.ritual small{font-size:11px;letter-spacing:2px;color:#799586}.ritual p{font-size:14px;line-height:1.8;margin-bottom:5px}.result-actions{display:flex;align-items:center;gap:22px;margin-top:13px}.result-actions .primary{font-size:14px;padding:16px 24px}.result-note{font-size:11px;color:#96a097;margin-top:18px}dialog{border:1px solid #dce6e0;padding:50px;max-width:510px;width:calc(100% - 36px);border-radius:22px;background:#f7faf8;color:var(--ink);box-shadow:0 30px 100px #143c3020}dialog::backdrop{background:#23443940;backdrop-filter:blur(8px)}dialog h2{font-family:var(--serif);font-size:36px;font-weight:400;line-height:1.5}dialog p{color:#76877e;line-height:1.9;font-size:14px}.close{position:absolute;right:20px;top:14px;border:0;background:none;font-size:28px}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);background:#264e43;color:white;border-radius:30px;padding:14px 24px;font-size:14px;opacity:0;pointer-events:none;transition:.3s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes float{50%{transform:translateY(-15px) rotate(3deg)}}@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){.hero{padding-left:3%;padding-right:3%}}@media(max-width:800px){header{height:84px;padding:0 6%}.header-note{display:none}.brand{font-size:20px}.mark{font-size:35px}.hero{height:auto;min-height:calc(100svh - 160px);grid-template-columns:1fr;padding:26px 7% 60px;text-align:center;overflow:hidden}.hero-copy{order:2}.hero h1{font-size:42px;line-height:1.35;letter-spacing:2px;margin-bottom:18px}.hero .eyebrow{margin-bottom:15px;font-size:10px}.art{height:310px;width:310px;justify-self:center;order:1;margin-top:-30px;margin-bottom:-12px}.orb-image{width:118%}.orbit-label{font-size:10px;padding:9px 12px}.l1{top:15%;right:-3%}.l2{bottom:19%;left:-9%}.art-caption{display:none}.intro{font-size:14px;margin-bottom:24px}.hero-index{display:none}.micro{font-size:11px}.primary{padding:17px 30px}.hero .primary{min-width:230px}footer{margin:0 6%;padding:21px 0;font-size:10px;gap:20px}footer span:nth-child(2){display:none}.quiz{padding:18px 22px 40px}.quiz-top{margin-bottom:25px}.question-head h2{font-size:28px;line-height:1.5}.choices{grid-template-columns:repeat(2,1fr);gap:13px}.choice-art{height:160px}.choice-copy{padding:16px 13px}.choice-copy strong{font-size:18px}.choice-copy span{font-size:12px}.result{grid-template-columns:1fr;gap:30px;padding:15px 26px 40px}.result-art{min-height:310px;max-width:330px;width:100%;margin:auto;border-radius:150px 150px 15px 15px;height:330px}.result-art img{width:110%}.result-art .card-brand{top:30px}.result-art .card-type{bottom:28px}.result-copy h2{font-size:36px}.result-copy .eyebrow{font-size:10px}.result-actions{gap:18px}.result-note{line-height:1.8}dialog{padding:35px 25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.orb-image,.choice-art img,.result-art img{mask-image:radial-gradient(ellipse at center,#000 48%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at center,#000 48%,transparent 72%)}

/* Scene photography: retain true color and full photographic frames. */
.choice-art img,.result-art img{mask-image:none;-webkit-mask-image:none;mix-blend-mode:normal;object-fit:cover;width:100%;height:100%;display:block}
.choice-art{height:255px;background:#e5ece8}
.choice:hover img{transform:scale(1.045)}
.choice-num{color:#fff;text-shadow:0 1px 8px #0008;background:#183b303b;border:1px solid #ffffff55;backdrop-filter:blur(8px);padding:7px 9px;border-radius:5px;top:14px;left:14px}
.result-art{height:530px;isolation:isolate}
.result-art img{position:absolute;inset:0;z-index:-2}
.result-art:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0c20194a,transparent 35%,transparent 55%,#0c2019a1)}
.result-art .card-brand,.result-art .card-type{color:white;text-shadow:0 2px 10px #142c2470}
@media(max-width:800px){.choice-art{height:190px}.result-art{height:380px;min-height:380px}}

/* Interactive crystal and opening choreography */
.hero .art{isolation:isolate}
.crystal-stage{position:absolute;inset:-30px -65px 10px;display:grid;place-items:center}
.crystal-stage canvas{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;outline-offset:-30px;position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .8s}
.crystal-stage canvas.dragging{cursor:grabbing}
.crystal-stage[data-state="ready"] canvas{opacity:1}
.crystal-fallback{width:100%;transition:opacity .6s}
.crystal-stage[data-state="ready"] .crystal-fallback{opacity:0}
.crystal-stage[data-state="fallback"] canvas{display:none}
.crystal-controls{position:absolute;bottom:25px;left:0;right:0;display:flex;justify-content:center;align-items:center;gap:18px;z-index:3;color:#748c83;font-size:12px;letter-spacing:1px}
.crystal-pause{border:1px solid #cadbd5;border-radius:20px;background:#ffffff90;padding:7px 12px;font-size:12px;color:#426c60;backdrop-filter:blur(12px)}
.art .orbit-label{pointer-events:none;z-index:2;animation:label-arrive 1.7s both}
.art .l2{animation-delay:.2s}
.hero-copy .eyebrow{animation:copy-arrive .9s .1s both}.hero-copy h1{animation:copy-arrive 1.15s .2s both}.hero-copy .intro{animation:copy-arrive 1.1s .35s both}.hero-copy .primary{animation:copy-arrive 1.1s .5s both}.hero-copy .micro{animation:copy-arrive 1.1s .6s both}
@keyframes copy-arrive{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes label-arrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(max-width:800px){.crystal-stage{inset:-25px -35px 0}.hero .art{height:350px;margin-bottom:8px}.crystal-controls{bottom:0;font-size:10px;gap:12px}.crystal-pause{font-size:11px;padding:6px 10px}.art .l1{top:18%;right:-6%}.art .l2{bottom:20%;left:-5%}}
.crystal-stage[data-state="fallback"] + .crystal-controls{display:none}
@media(prefers-reduced-motion:reduce){.crystal-stage canvas,.crystal-fallback{transition:none}}
/* Language controls and content that adapts to translation length. */
.header-actions{display:flex;align-items:center;gap:22px;min-width:0}
#language-select{font:inherit;font-size:13px;color:var(--ink);background:#ffffffa8;border:1px solid #d3e0da;border-radius:22px;padding:9px 28px 9px 12px;max-width:165px;cursor:pointer}
#language-select:focus-visible{outline:3px solid #4a9489;outline-offset:3px}
html:not([lang="zh"]):not([lang="ja"]):not([lang="ko"]) .hero h1{font-size:clamp(38px,4.1vw,62px);letter-spacing:-1.6px;line-height:1.15;overflow-wrap:break-word}
html:not([lang="zh"]) .hero .intro{line-height:1.8;max-width:440px}
html:not([lang="zh"]) .eyebrow,html:not([lang="zh"]) .primary{letter-spacing:1px}
html[lang="ja"]{--serif:'Yu Mincho','Hiragino Mincho ProN',serif}
html[lang="ko"]{--serif:'AppleMyungjo','Batang',serif}
.choice-copy strong{overflow-wrap:anywhere;line-height:1.4}.choice-copy{min-height:122px}.choices{align-items:stretch}
.result{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);gap:55px}.result-copy{min-width:0}.result-copy h2{font-size:clamp(30px,3.3vw,44px);overflow-wrap:anywhere;line-height:1.35}
.result-art .card-type{max-width:85%;text-align:center;line-height:1.7;letter-spacing:2px}.tags{flex-wrap:wrap}.result-actions{flex-wrap:wrap}
.crystal-controls{font-size:11px;gap:12px;text-align:center}.crystal-controls span{max-width:65%;line-height:1.5}.orbit-label{max-width:230px;text-align:center;line-height:1.5}
@media(max-width:1100px){.header-note{display:none}.header-actions{gap:16px}}
@media(max-width:800px){header{padding:0 5%;height:auto;min-height:84px;gap:12px;flex-wrap:wrap}.header-actions{gap:8px}.header-actions .quiet{font-size:12px;max-width:105px;line-height:1.5}#language-select{max-width:137px;font-size:12px;padding-right:19px}.brand{font-size:17px}.brand small{font-size:8px;letter-spacing:2px}.brand .mark{font-size:29px}.brand{gap:8px}html:not([lang="zh"]):not([lang="ja"]):not([lang="ko"]) .hero h1{font-size:39px;letter-spacing:-.8px}.hero .intro{margin-left:auto;margin-right:auto}.result{grid-template-columns:1fr;gap:30px}.choice-copy{min-height:123px}.crystal-controls span{max-width:61%}.art .orbit-label{max-width:160px}.hero .micro{line-height:1.8}.question-head h2{font-size:26px}.question-head p{line-height:1.7}.quiz-foot{line-height:1.8}.result-actions .primary{letter-spacing:0}}