@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Sans+Thai:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg: #f5f1e8;--ink: #1a1814;--accent: #8a6a2b;--ink-soft: #1a181420;--ink-faint: #1a18140d}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:IBM Plex Sans Thai,Cormorant Garamond,sans-serif;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .8s ease,color .8s ease;min-height:100vh}#root{min-height:100vh}.app{min-height:100vh;position:relative;overflow-x:hidden}.utility-bar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px 32px;z-index:50;pointer-events:none}.utility-bar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;font-family:Cormorant Garamond,serif;font-size:18px;letter-spacing:.02em}.brand-mark{width:28px;height:28px;border:1px solid;display:grid;place-items:center;font-style:italic;font-weight:500;border-radius:50%}.brand-name{font-weight:500}.utility-actions{display:flex;gap:8px}.util-btn{width:36px;height:36px;border:1px solid;background:transparent;font-size:14px;cursor:pointer;border-radius:50%;display:grid;place-items:center;transition:all .2s ease}.util-btn:hover{transform:scale(1.05)}.screen{min-height:100vh;padding:100px 32px 60px;animation:screen-enter .6s cubic-bezier(.2,.7,.2,1)}.picking{padding-top:84px;padding-bottom:24px}.picking-header{margin-bottom:16px}.picking-title{font-size:clamp(24px,3.2vw,36px)}.picking-progress{margin-bottom:16px}@keyframes screen-enter{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.landing{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;max-width:1280px;margin:0 auto;align-items:center}.landing-eyebrow{display:flex;align-items:center;gap:10px;font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;opacity:.65;margin-bottom:24px;text-transform:uppercase}.landing-eyebrow .dot{width:6px;height:6px;border-radius:50%}.landing-title{font-family:Cormorant Garamond,serif;font-size:clamp(48px,7vw,96px);line-height:1;font-weight:500;margin:0 0 28px;letter-spacing:-.02em}.landing-title em{font-style:italic;font-weight:400}.landing-sub{font-size:16px;max-width:460px;opacity:.75;margin:0 0 44px;line-height:1.7}.landing-topic-block{margin-bottom:36px}.landing-topic-label{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:14px}.landing-topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.topic-chip{padding:10px 18px;border:1px solid;background:transparent;border-radius:999px;font-family:inherit;font-size:14px;cursor:pointer;display:flex;align-items:baseline;gap:8px;transition:all .25s cubic-bezier(.2,.7,.2,1)}.topic-chip:hover{transform:translateY(-1px)}.topic-chip .topic-th{font-weight:500}.topic-chip .topic-en{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.12em;opacity:.55;text-transform:uppercase}.topic-chip.is-active .topic-en{opacity:.8}.topic-positions{display:flex;gap:18px;padding:16px 0;border-top:1px solid var(--ink-soft);font-size:13px;flex-wrap:wrap}.pos-label{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;align-self:center}.pos-item{display:flex;align-items:baseline;gap:8px}.pos-num{font-family:JetBrains Mono,monospace;font-size:10px;opacity:.4}.pos-text{font-weight:500}.landing-cta-row{display:flex;gap:12px;align-items:center;margin-bottom:28px}.cta-primary{border:none;padding:18px 32px;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer;border-radius:999px;display:inline-flex;align-items:center;gap:14px;transition:all .25s cubic-bezier(.2,.7,.2,1)}.cta-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #0000001f}.cta-primary:disabled{opacity:.45;cursor:not-allowed}.cta-primary .cta-arrow{font-family:JetBrains Mono,monospace;transition:transform .25s ease}.cta-primary:hover:not(:disabled) .cta-arrow{transform:translate(4px)}.cta-ghost{background:transparent;border:1px solid;padding:16px 24px;font-family:inherit;font-size:14px;cursor:pointer;border-radius:999px;transition:all .2s ease}.cta-ghost:hover{background:var(--ink-faint)}.landing-meta{display:flex;gap:12px;font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.08em;opacity:.5}.landing-meta .dim{opacity:.5}.landing-deco{position:relative;width:100%;height:480px;display:grid;place-items:center}.deco-card{position:absolute;width:220px;height:320px;border:1px solid;border-radius:8px;display:grid;place-items:center;box-shadow:0 30px 60px -20px #0000002e;transition:transform .6s ease}.deco-card-emblem{width:56px;height:56px;border:1px solid;border-radius:50%;display:grid;place-items:center;font-family:Cormorant Garamond,serif;font-style:italic;font-size:26px}.picking{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;min-height:100vh;padding-bottom:0}.picking-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-bottom:24px}.back-btn{background:transparent;border:none;font-family:inherit;font-size:14px;cursor:pointer;opacity:.65;transition:opacity .2s ease;justify-self:start}.back-btn:hover{opacity:1}.picking-title-block{text-align:center}.picking-eyebrow{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;opacity:.55;text-transform:uppercase;margin-bottom:6px}.picking-title{font-family:Cormorant Garamond,serif;font-size:clamp(28px,4vw,44px);font-weight:500;margin:0 0 6px;letter-spacing:-.01em}.picking-title em{font-style:italic;font-weight:400}.picking-sub{font-size:13px;opacity:.6;margin:0}.shuffle-btn{justify-self:end;background:transparent;border:1px solid;padding:10px 18px;font-family:inherit;font-size:13px;cursor:pointer;border-radius:999px;display:inline-flex;align-items:center;gap:8px;transition:all .25s ease}.shuffle-btn:hover:not(:disabled){background:var(--ink-faint);transform:rotate(-3deg)}.shuffle-btn:disabled{opacity:.3;cursor:not-allowed}.shuffle-icon{font-size:16px}.picking-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:720px;margin:0 auto 24px;width:100%}.progress-slot{padding:12px 16px;text-align:center;position:relative;transition:all .3s ease}.progress-slot.is-filled .progress-num{color:var(--accent);font-weight:600}.progress-num{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;opacity:.55;margin-bottom:4px;transition:all .3s ease}.progress-label{font-size:13px;font-weight:500;margin-bottom:8px}.progress-bar{height:2px;width:100%;overflow:hidden}.progress-bar-fill{height:100%;transition:width .6s cubic-bezier(.2,.7,.2,1)}.fan-stage{position:relative;height:380px;margin:0 auto;width:100%;max-width:1200px;overflow:visible}.fan-arc{position:absolute;top:24px;left:50%;width:1px;height:1px;animation:fan-deal .9s cubic-bezier(.2,.7,.2,1)}@keyframes fan-deal{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.fan-card-wrap{position:absolute;top:0;left:0;width:130px;height:200px;margin-left:-65px;transform-origin:50% 360px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}.fan-card-wrap.is-picked{opacity:.25;pointer-events:none}.fan-card-tilt{position:absolute;top:0;right:0;bottom:0;left:0;cursor:pointer}.picking-footer{position:sticky;bottom:0;text-align:center;padding:24px;background:linear-gradient(to top,var(--bg) 60%,transparent)}.footer-hint{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.12em;opacity:.6;text-transform:uppercase}.grid-stage{display:grid;grid-template-columns:repeat(4,80px);gap:10px;justify-content:center;padding:8px 16px 24px;animation:fan-deal .6s cubic-bezier(.2,.7,.2,1)}.grid-card-wrap{width:80px;height:124px;cursor:pointer;border-radius:8px;overflow:hidden;animation:grid-card-in .4s cubic-bezier(.2,.7,.2,1) both;transition:transform .2s ease,opacity .2s ease;-webkit-tap-highlight-color:transparent}.grid-card-wrap:not(.is-picked):active{transform:scale(.94)}.grid-card-wrap.is-picked{opacity:.22;pointer-events:none}@keyframes grid-card-in{0%{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.flip-card{position:relative;width:100%;height:100%;perspective:1400px}.flip-card-flipper{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.5,0,.2,1.05)}.flip-card.is-face-up .flip-card-flipper{transform:rotateY(180deg)}.flip-card-face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:8px;overflow:hidden;box-shadow:0 14px 30px -14px #00000040}.flip-card-back{transform:rotateY(180deg)}.flip-card-glow{position:absolute;top:-40%;right:-40%;bottom:-40%;left:-40%;pointer-events:none;z-index:-1;opacity:0;animation:glow-in .4s ease forwards;filter:blur(24px)}.flip-card.is-face-up .flip-card-glow{top:-60%;right:-60%;bottom:-60%;left:-60%;filter:blur(40px)}@keyframes glow-in{0%{opacity:0}to{opacity:.85}}.flip-card-badge{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:JetBrains Mono,monospace;font-size:12px;font-weight:600;z-index:5;animation:badge-pop .4s cubic-bezier(.2,.7,.2,1.4)}@keyframes badge-pop{0%{transform:scale(0)}to{transform:scale(1)}}.card-back-inner,.card-face-inner{width:100%;height:100%;border:1px solid;position:relative;border-radius:8px;overflow:hidden}.card-back-frame,.card-face-frame{position:absolute;top:6px;right:6px;bottom:6px;left:6px;border:1px solid;display:grid;place-items:center;overflow:hidden}.card-back-emblem{position:absolute;width:38px;height:38px;border:1px solid;border-radius:50%;display:grid;place-items:center;font-style:italic;font-size:18px;z-index:2;background:inherit}.card-face-frame{display:flex;flex-direction:column;padding:8px}.card-face-top,.card-face-bottom{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;width:100%}.card-face-num{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.1em}.card-face-glyph{font-family:Cormorant Garamond,serif;font-style:italic;font-size:16px}.card-face-art{flex:1;width:100%;display:flex;align-items:center;justify-content:center}.card-face-name{font-family:Cormorant Garamond,serif;font-size:11px;font-style:italic}.card-face-th{font-size:10px}.reveal{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:40px}.reveal-header{text-align:center}.reveal-eyebrow{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;opacity:.55;margin-bottom:8px;text-transform:uppercase}.reveal-title{font-family:Cormorant Garamond,serif;font-size:clamp(32px,4.5vw,52px);font-weight:500;margin:0;letter-spacing:-.01em}.reveal-title em{font-style:italic;font-weight:400}.reveal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;width:100%;max-width:880px}.reveal-card-col{display:flex;flex-direction:column;align-items:center;gap:16px}.reveal-pos{text-align:center}.reveal-pos-num{font-family:JetBrains Mono,monospace;font-size:10px;opacity:.45;margin-right:8px}.reveal-pos-label{font-size:14px;font-weight:500}.reveal-card-stage{width:200px;height:300px;cursor:pointer;position:relative}.reveal-card-name{text-align:center;transition:opacity .6s ease .3s;max-width:220px}.reveal-card-en{font-family:Cormorant Garamond,serif;font-style:italic;font-size:22px;margin-bottom:2px}.reveal-card-th{font-size:14px;opacity:.7;margin-bottom:12px}.reveal-card-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.reveal-key{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.05em;padding:4px 10px;border:1px solid;border-radius:999px;opacity:.7}.reveal-footer{margin-top:16px}.result{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:36px}.result-header{text-align:center}.result-eyebrow{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;opacity:.55;margin-bottom:12px;text-transform:uppercase}.result-title{font-family:Cormorant Garamond,serif;font-size:clamp(40px,5.5vw,72px);font-weight:500;margin:0;letter-spacing:-.02em;line-height:1.05}.result-title em{font-style:italic;font-weight:400}.result-cards{display:flex;flex-direction:column;gap:28px}.result-card-block{display:grid;grid-template-columns:220px 1fr;gap:36px;padding:28px 0;border-top:1px solid;align-items:start}.result-card-block:first-child{border-top:none;padding-top:8px}.result-card-visual{width:200px;height:300px;position:relative}.result-card-text{padding-top:8px}.result-card-pos{display:flex;align-items:baseline;gap:10px;margin-bottom:10px;font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.65}.rcp-num{color:var(--accent);font-weight:600}.result-card-name{font-family:Cormorant Garamond,serif;font-size:38px;font-weight:500;margin:0 0 4px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;letter-spacing:-.01em}.result-card-en{font-style:italic;font-size:20px;font-weight:400}.result-card-keys{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.result-key{font-family:JetBrains Mono,monospace;font-size:10px;letter-spacing:.06em;padding:4px 10px;border:1px solid;border-radius:999px}.result-card-body{font-size:15px;line-height:1.75;margin:0;max-width:60ch;text-wrap:pretty}.result-summary{padding:44px 48px;border-radius:12px;margin-top:12px}.summary-eyebrow{font-family:JetBrains Mono,monospace;font-size:11px;letter-spacing:.18em;margin-bottom:14px;text-transform:uppercase}.summary-title{font-family:Cormorant Garamond,serif;font-size:32px;font-weight:500;font-style:italic;margin:0 0 18px}.summary-body{font-size:16px;line-height:1.8;margin:0 0 28px;max-width:60ch;text-wrap:pretty}.summary-cards-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding-top:24px;border-top:1px solid currentColor;opacity:.95}.mini-card{display:flex;flex-direction:column;gap:4px;padding:4px 0}.mini-num{font-family:JetBrains Mono,monospace;font-size:10px;opacity:.6;letter-spacing:.1em}.mini-glyph{font-family:Cormorant Garamond,serif;font-style:italic;font-size:22px}.mini-name{font-family:Cormorant Garamond,serif;font-style:italic;font-size:18px}.result-footer{display:flex;justify-content:flex-end;gap:12px;padding-top:12px}@media(max-width:880px){.utility-bar{padding:16px 20px}.screen{padding:80px 20px 40px}.landing{grid-template-columns:1fr;gap:32px;text-align:left}.landing-deco{height:280px;order:-1}.deco-card{width:160px;height:232px}.landing-cta-row{flex-direction:column;align-items:stretch}.landing-cta-row .cta-primary{justify-content:center}.picking-header{grid-template-columns:1fr;text-align:center}.back-btn,.shuffle-btn{justify-self:center}.picking-progress{grid-template-columns:1fr;gap:8px}.progress-slot{padding:8px}.reveal-cards{grid-template-columns:1fr;gap:32px}.reveal-card-stage{width:180px;height:270px}.result-card-block{grid-template-columns:1fr;gap:20px;text-align:left}.result-card-visual{width:160px;height:240px;margin:0 auto}.result-card-name{font-size:30px}.result-summary{padding:28px 24px}.summary-title{font-size:24px}.summary-cards-mini{grid-template-columns:1fr;gap:8px}.result-footer{flex-direction:column}.result-footer button{justify-content:center}}.app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(circle at 20% 30%,rgba(0,0,0,.02) 0%,transparent 50%),radial-gradient(circle at 80% 70%,rgba(0,0,0,.02) 0%,transparent 50%);z-index:0}.app>*{position:relative;z-index:1}