.card-container{position:relative;transition:transform .3s cubic-bezier(.16,1,.3,1)}.card-glow{position:absolute;inset:-6px;border-radius:calc(var(--radius-xl) + 6px);opacity:.5;filter:blur(25px);z-index:-1;transition:opacity .3s ease}.card-container:hover .card-glow{opacity:.8}.legendary-glow{background:linear-gradient(135deg,#fbbf24,#f59e0b,#ef4444);background-size:300% 300%;animation:gradientShift 4s ease infinite}.epic-glow{background:linear-gradient(135deg,#a855f7,#7c3aed);background-size:200% 200%;animation:gradientShift 5s ease infinite}.rare-glow{background:linear-gradient(135deg,#3b82f6,#1d4ed8);background-size:200% 200%;animation:gradientShift 6s ease infinite}.common-glow{background:linear-gradient(135deg,var(--color-neutral-400),var(--color-neutral-500))}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.result-card{position:relative;background:linear-gradient(145deg,var(--color-bg-elevated) 0%,#fafafa 100%);border-radius:var(--radius-xl);padding:var(--space-8);box-shadow:0 25px 50px -12px #00000026,0 0 0 1px #ffffff80 inset;border:2px solid transparent;overflow:hidden;transition:all .3s cubic-bezier(.16,1,.3,1)}.result-card.legendary{border-color:#fbbf24;box-shadow:0 25px 50px -12px #fbbf244d,0 0 0 1px #ffffff80 inset,0 0 60px -20px #fbbf2433 inset}.result-card.epic{border-color:#a855f7;box-shadow:0 25px 50px -12px #a855f740,0 0 0 1px #ffffff80 inset,0 0 50px -15px #a855f733 inset}.result-card.rare{border-color:#3b82f6;box-shadow:0 25px 50px -12px #3b82f633,0 0 0 1px #ffffff80 inset,0 0 40px -15px #3b82f626 inset}.card-corner{position:absolute;width:20px;height:20px;border:2px solid var(--personality-color, var(--color-primary-500));opacity:.4;transition:all .3s ease}.card-corner.top-left{top:12px;left:12px;border-right:none;border-bottom:none;border-radius:8px 0 0}.card-corner.top-right{top:12px;right:12px;border-left:none;border-bottom:none;border-radius:0 8px 0 0}.card-corner.bottom-left{bottom:12px;left:12px;border-right:none;border-top:none;border-radius:0 0 0 8px}.card-corner.bottom-right{bottom:12px;right:12px;border-left:none;border-top:none;border-radius:0 0 8px}.card-container:hover .card-corner{width:28px;height:28px;opacity:.7}.rarity-banner{position:absolute;top:-2px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-4);font-size:var(--text-xs);font-weight:var(--font-black);letter-spacing:.1em;border-radius:0 0 var(--radius-lg) var(--radius-lg);text-transform:uppercase;box-shadow:0 4px 12px #00000026;z-index:10}.rarity-banner[data-rarity=legendary]{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#451a03}.rarity-banner[data-rarity=epic]{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff}.rarity-banner[data-rarity=rare]{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff}.rarity-banner[data-rarity=common]{background:linear-gradient(135deg,var(--color-neutral-400),var(--color-neutral-500));color:#fff}.rarity-stars{letter-spacing:2px;font-size:10px}.result-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--space-4)}.type-badge{display:flex;align-items:center;gap:var(--space-2)}.type-id{font-size:var(--text-4xl);font-weight:var(--font-black);color:var(--personality-color, var(--color-primary-700));letter-spacing:-.05em;line-height:1;font-family:var(--font-mono)}.special-icon{font-size:var(--text-xl);color:var(--color-accent);animation:sparkle 2s ease-in-out infinite}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.pattern-badge{padding:var(--space-1) var(--space-3);background:linear-gradient(135deg,var(--color-neutral-100),var(--color-neutral-50));border:1px solid var(--color-border);border-radius:var(--radius-lg)}.pattern-value{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-bold);color:var(--personality-color, var(--color-primary-700));letter-spacing:.05em}.card-content{text-align:center}.type-name{font-size:var(--text-2xl);font-weight:var(--font-black);color:var(--color-text);margin-bottom:var(--space-3);letter-spacing:-.02em}.tagline{font-size:var(--text-lg);font-style:italic;color:var(--personality-color, var(--color-primary-600));margin-bottom:var(--space-5);font-weight:var(--font-medium);opacity:.9}.divider{height:2px;background:linear-gradient(90deg,transparent,var(--personality-color, var(--color-primary-400)),transparent);margin:var(--space-5) 0;opacity:.5}.description{font-size:var(--text-base);line-height:1.7;color:var(--color-neutral-700);font-weight:var(--font-medium)}.card-footer{margin-top:var(--space-6);display:flex;flex-direction:column;align-items:center;gap:var(--space-2)}.glow-line{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--personality-color, var(--color-primary-400)),transparent);opacity:.4}.footer-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 var(--space-2)}.sbti-logo{font-size:var(--text-xs);font-weight:var(--font-black);color:var(--color-neutral-400);letter-spacing:.3em;text-transform:uppercase}.site-url{font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-neutral-500);letter-spacing:.05em}:root{--color-primary-50: #faf5ff;--color-primary-100: #f3e8ff;--color-primary-200: #e9d5ff;--color-primary-300: #d8b4fe;--color-primary-400: #c084fc;--color-primary-500: #a855f7;--color-primary-600: #9333ea;--color-primary-700: #7c3aed;--color-primary-800: #6b21a8;--color-primary-900: #581c87;--color-neutral-50: #f9fafb;--color-neutral-100: #f3f4f6;--color-neutral-200: #e5e7eb;--color-neutral-300: #d1d5db;--color-neutral-400: #9ca3af;--color-neutral-500: #6b7280;--color-neutral-600: #4b5563;--color-neutral-700: #374151;--color-neutral-800: #1f2937;--color-neutral-900: #111827;--color-bg: var(--color-primary-50);--color-bg-elevated: #ffffff;--color-text: var(--color-neutral-800);--color-text-muted: var(--color-neutral-500);--color-text-inverse: #ffffff;--color-border: var(--color-neutral-200);--color-accent: #f59e0b;--color-accent-bg: #fef3c7;--color-accent-text: #92400e;--color-focus: var(--color-primary-700);--focus-ring: 0 0 0 3px var(--color-primary-200);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans JP", "Hiragino Kaku Gothic Pro", "Noto Sans KR", "Malgun Gothic", "WenQuanYi Micro Hei", sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--font-black: 900;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--z-skip-link: 9999;--z-modal: 1000;--z-dropdown: 100;--z-sticky: 10}@media(prefers-reduced-motion:reduce){:root{--transition-fast: .01ms;--transition-base: .01ms;--transition-slow: .01ms}}*{box-sizing:border-box;margin:0;padding:0}html{font-family:var(--font-family);background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh;scroll-behavior:smooth;scroll-padding-top:2rem}body{min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3{line-height:1.2}.skip-link{position:absolute;top:-100px;left:0;background:var(--color-primary-700);color:var(--color-text-inverse);padding:8px 16px;text-decoration:none;z-index:var(--z-skip-link);border-radius:0 0 var(--radius-md) 0;font-weight:var(--font-medium);opacity:0;pointer-events:none;transition:top 0s,opacity 0s}.skip-link:focus{top:0;opacity:1;pointer-events:auto;transition:top var(--transition-fast)}:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}