:root{--ease: cubic-bezier(.2, .8, .2, 1);font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,PingFang TC,Noto Sans TC,Microsoft JhengHei,system-ui,sans-serif;-webkit-font-smoothing:antialiased}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}body{background:#0c0c0f}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}ul{list-style:none}.app{min-height:100dvh;background:var(--bg);color:var(--ink);transition:color .3s}.kicker{font-size:12px;font-weight:600;letter-spacing:.22em;opacity:.6;text-transform:uppercase}.kicker-extra{margin-left:14px;letter-spacing:.1em;font-variant-numeric:tabular-nums}.lead{font-size:clamp(16px,1.6vw,19px);line-height:1.9;opacity:.82}.fine{font-size:12px;opacity:.45;line-height:1.7}.muted{opacity:.5}.center{min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:24px;text-align:center;padding:24px}.btn{padding:12px 28px;border-radius:999px;font-weight:600;letter-spacing:.08em;background:var(--ink);color:var(--ink-inv);transition:transform .25s var(--ease),opacity .2s}.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.97)}.btn-lg{padding:16px 44px;font-size:16px}.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 35%,transparent)}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.aurora{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;filter:blur(90px) saturate(1.2);opacity:.75}.aurora span{position:absolute;width:46vmax;height:46vmax;border-radius:50%;left:calc(var(--i) * 17% - 12%);top:calc(50% - 23vmax + (var(--i) - 2.5) * 6vmax);animation:drift calc(14s + var(--i) * 3s) ease-in-out infinite alternate;animation-delay:calc(var(--i) * -4s)}@keyframes drift{0%{transform:translate(-8%,-12%) scale(.9)}to{transform:translate(10%,14%) scale(1.15)}}.intro{position:relative;min-height:100dvh;display:grid;place-items:center;overflow:hidden}.intro:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#0c0c0f80}.intro-body{position:relative;z-index:1;display:grid;justify-items:center;gap:28px;text-align:center;padding:32px 24px;animation:rise .9s var(--ease) both}.intro h1{font-size:clamp(88px,18vw,200px);font-weight:200;letter-spacing:.12em;line-height:1;margin-right:-.12em}.intro .fine{max-width:30em}br.wide{display:none}@media (min-width: 720px){br.wide{display:inline}}@keyframes rise{0%{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}.progress{position:fixed;z-index:5;top:0;left:0;right:0;display:flex;gap:4px;padding:10px clamp(20px,5vw,64px) 0}.progress i{flex:1;height:2px;border-radius:2px;background:var(--ink);opacity:.18;transition:opacity .5s}.progress i.done{opacity:.55}.progress i.on{opacity:1}.stage{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column}.stage-head{padding:40px clamp(20px,5vw,64px) 28px;display:grid;gap:14px;animation:rise .7s var(--ease) both}.stage-head h2{font-size:clamp(22px,3.2vw,40px);font-weight:500;line-height:1.4;letter-spacing:.02em;max-width:22em;text-wrap:balance}.strips{flex:1;display:flex;min-height:0}.strip{flex:1 1 0;position:relative;min-width:0;transition:flex-grow .5s var(--ease);animation:strip-in .7s var(--ease) both;animation-delay:calc(var(--i) * 35ms + .12s)}.strip span{position:absolute;left:50%;bottom:28px;transform:translate(-50%);writing-mode:vertical-rl;font-size:13px;font-weight:600;letter-spacing:.3em;opacity:0;transition:opacity .3s}@media (hover: hover){.strips:not(.locked) .strip:hover{flex-grow:2.8}.strips:not(.locked) .strip:hover span{opacity:.85}}.strip.picked{flex-grow:2.8}.strip:focus-visible{outline-offset:-6px}.strip:focus-visible span{opacity:.85}@keyframes strip-in{0%{transform:translateY(100%)}to{transform:none}}@media (max-width: 640px){.strips{flex-direction:column}.strip span{writing-mode:horizontal-tb;left:20px;bottom:50%;transform:translateY(50%);opacity:.7;font-size:12px}@keyframes strip-in{0%{transform:translate(-100%)}to{transform:none}}}.flood{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;animation:flood .62s cubic-bezier(.6,0,.2,1) both}@keyframes flood{0%{clip-path:circle(0 at var(--x) var(--y))}to{clip-path:circle(150vmax at var(--x) var(--y))}}.duel{flex:1;display:flex;min-height:0;animation:fade .3s both}.half{flex:1 1 0;display:grid;place-items:center;min-width:0;overflow:hidden;transition:flex-grow .42s var(--ease)}.half span{font-size:clamp(18px,2.4vw,28px);font-weight:500;letter-spacing:.3em;margin-right:-.3em;opacity:.9;white-space:nowrap;transition:opacity .2s}.half.lose{flex-grow:0}.half.lose span{opacity:0}@media (hover: hover){.half:not(.win):not(.lose):hover{flex-grow:1.25}}@media (max-width: 640px){.duel{flex-direction:column}.half{min-height:0}}@keyframes fade{0%{opacity:0}to{opacity:1}}.mixer{flex:1;display:grid;align-content:center;justify-items:center;gap:30px;padding:0 clamp(20px,5vw,64px) 48px;animation:rise .8s .1s var(--ease) both}.slider{width:min(560px,100%);display:grid;gap:12px}.slider span{font-size:12px;font-weight:600;letter-spacing:.22em;opacity:.65}.slider input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:10px;border-radius:99px;background:var(--track);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent);cursor:pointer}.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 10px #00000059,0 0 0 1px #0000001f;transition:transform .2s var(--ease)}.slider input::-webkit-slider-thumb:active{transform:scale(1.2)}.slider input::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 10px #00000059,0 0 0 1px #0000001f}.mixer .btn{margin-top:14px}.analyzing{animation:fade .5s both}.pulse{display:flex;gap:10px}.pulse i{width:10px;height:10px;border-radius:50%;background:var(--ink);animation:pulse 1.1s ease-in-out infinite}.pulse i:nth-child(2){animation-delay:.15s}.pulse i:nth-child(3){animation-delay:.3s}@keyframes pulse{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}.result{animation:fade .8s both}.hero{position:relative;min-height:82dvh;display:grid;place-items:center;overflow:hidden}.hero:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(#0c0c0f40 40%,#0c0c0f)}.hero-body{position:relative;z-index:1;display:grid;justify-items:center;gap:22px;text-align:center;padding:24px;animation:rise 1s .15s var(--ease) both}.hero h1{font-size:clamp(72px,15vw,168px);font-weight:200;letter-spacing:.1em;margin-right:-.1em;line-height:1.1}.tagline{font-size:clamp(17px,2vw,22px);opacity:.85;letter-spacing:.06em}.fingerprint{display:flex;margin-top:10px}.fingerprint i{width:34px;height:34px;border-radius:50%;margin-left:-8px;box-shadow:0 0 0 2px #0c0c0f}.fingerprint i:first-child{margin-left:0}.sheet{max-width:920px;margin:0 auto;padding:0 clamp(20px,5vw,48px) 80px}.block{padding:56px 0;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:20px}.block:first-child{border-top:0}.split{grid-template-columns:1fr auto;gap:48px;align-items:center}.split>div{display:grid;gap:18px}@media (max-width: 720px){.split{grid-template-columns:1fr;justify-items:center}.split>div{justify-self:stretch}}.block h3{font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:.04em;display:flex;align-items:center;gap:14px}.swatch{width:22px;height:22px;border-radius:50%;box-shadow:0 0 0 1px #ffffff40;flex:none}.body-lg{font-size:clamp(18px,2.1vw,23px);line-height:1.85;font-weight:400}.body{font-size:16px;line-height:1.9;opacity:.75}.note{font-size:15px;line-height:1.8;padding-left:14px;border-left:2px solid var(--accent);opacity:.9}.tags{display:flex;flex-wrap:wrap;gap:10px}.tags li{padding:7px 16px;border-radius:99px;font-size:14px;letter-spacing:.06em;background:color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent)}.moodmap{position:relative;width:240px;height:240px;flex:none;border-radius:20px;background:linear-gradient(#ffffff24,#ffffff24) center / 1px 100% no-repeat,linear-gradient(#ffffff24,#ffffff24) center / 100% 1px no-repeat,#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff1a}.ax{position:absolute;font-size:11px;letter-spacing:.2em;opacity:.5}.ax.top{top:10px;left:50%;transform:translate(-50%)}.ax.bottom{bottom:10px;left:50%;transform:translate(-50%)}.ax.top,.ax.bottom{margin-left:22px}.ax.left{left:12px;top:calc(50% - 22px)}.ax.right{right:10px;top:calc(50% - 22px)}.dot{position:absolute;width:22px;height:22px;margin:-11px;border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 28px 6px #ffffff47;animation:pop .7s .5s var(--ease) both}@keyframes pop{0%{transform:scale(0)}to{transform:scale(1)}}.radar{width:300px;max-width:100%;flex:none;overflow:visible}.radar .grid{fill:none;stroke:#ffffff1f;stroke-width:1}.radar text{fill:#fff9;font-size:12px;letter-spacing:.1em}.radar .shape{stroke-width:2;stroke-linejoin:round;transform-origin:center;animation:pop .9s .3s var(--ease) both}.radar .inner{fill-opacity:.4}.radar .surface{fill:none;stroke:#fff;stroke-dasharray:5 5}.legend{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;opacity:.7}.legend span{display:inline-flex;align-items:center;gap:8px}.lg-surface{width:18px;border-top:2px dashed #fff}.lg-inner{width:14px;height:14px;border-radius:4px;background:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:inset 0 0 0 2px var(--accent)}.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}@media (max-width: 820px){.insights{grid-template-columns:1fr}}.insights article{padding:26px 24px;border-radius:20px;background:#ffffff0d;display:grid;gap:14px;align-content:start}.insights h4{font-size:17px;font-weight:600;letter-spacing:.05em;display:flex;flex-wrap:wrap;align-items:center;gap:8px}.insights .body{font-size:15px}.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 10px 3px 4px;border-radius:99px;background:#ffffff17;white-space:nowrap}.chip i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px #ffffff4d}.dist{display:grid;gap:12px;margin-top:6px}.dist li{display:grid;grid-template-columns:5em 1fr 3em;align-items:center;gap:14px;font-size:14px;opacity:.55}.dist li.me{opacity:1;font-weight:600}.bar{height:6px;border-radius:6px;background:#ffffff14;overflow:hidden}.bar i{display:block;height:100%;border-radius:6px;transition:width 1s var(--ease)}.num{text-align:right;font-variant-numeric:tabular-nums}.actions{padding-top:40px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:14px;align-items:center}.actions .fine{flex-basis:100%;margin-top:10px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}}