*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0d0d14;--bg-card:#14141e;--bg-surface:#1a1a26;--gold:#c9a84c;--gold-hover:#d4af37;--gold-dim:#c9a84c26;--gold-glow:#c9a84c4d;--text:#f0ebe3;--text-muted:#8a8078;--green:#5a9a6a;--green-bg:#5a9a6a1a;--amber:#c9884c;--amber-bg:#c9884c1a;--radius:12px;--radius-sm:8px;--radius-pill:100px;--font-display:Georgia, "Times New Roman", serif;--font-body:system-ui, -apple-system, sans-serif;--transition:.3s ease}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100dvh;line-height:1.6;overflow-x:hidden}#root{flex-direction:column;min-height:100dvh;display:flex}img{max-width:100%;display:block}button{font-family:var(--font-body);cursor:pointer;color:inherit;background:0 0;border:none}input,textarea{font-family:var(--font-body);color:var(--text);background:var(--bg-surface);border-radius:var(--radius-sm);transition:border-color var(--transition);border:1px solid #c9a84c33;outline:none;width:100%;padding:12px 16px;font-size:1rem}input:focus,textarea:focus{border-color:var(--gold)}h1,h2,h3,h4{font-family:var(--font-display);color:var(--text);font-weight:400;line-height:1.3}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}.screen{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;min-height:100dvh;padding:24px 20px;display:flex}.screen-scroll{flex-direction:column;flex:1;min-height:100dvh;padding:24px 20px;display:flex;overflow-y:auto}.container{width:100%;max-width:480px;margin:0 auto}.btn-primary{background:var(--gold);color:var(--bg);letter-spacing:.05em;text-transform:uppercase;border-radius:var(--radius-pill);transition:all var(--transition);justify-content:center;align-items:center;gap:8px;min-width:200px;padding:14px 36px;font-size:1rem;font-weight:600;display:inline-flex}.btn-primary:hover{background:var(--gold-hover);box-shadow:0 4px 20px var(--gold-glow);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{color:var(--gold);letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--gold);border-radius:var(--radius-pill);transition:all var(--transition);background:0 0;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-size:.9rem;font-weight:500;display:inline-flex}.btn-secondary:hover{background:var(--gold-dim);box-shadow:0 0 15px var(--gold-glow)}.btn-ghost{color:var(--text-muted);letter-spacing:.03em;transition:color var(--transition);align-items:center;gap:6px;padding:8px 16px;font-size:.875rem;display:inline-flex}.btn-ghost:hover{color:var(--gold)}.oracle-card{background:var(--bg-card);border-radius:var(--radius);transition:all var(--transition);border:1px solid #c9a84c40;overflow:hidden}.oracle-card:hover{border-color:var(--gold);box-shadow:0 0 20px var(--gold-glow), 0 8px 32px #0006;transform:translateY(-2px)}.oracle-card-back{background:var(--bg-card);border-radius:var(--radius);border:1px solid #c9a84c4d;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.oracle-card-back:before{content:"";pointer-events:none;border:1px solid #c9a84c26;border-radius:8px;position:absolute;inset:6px}.oracle-card-back:after{content:"";background:radial-gradient(circle, var(--gold-dim) 0%, transparent 70%);pointer-events:none;width:60%;height:60%;position:absolute}.badge{letter-spacing:.12em;text-transform:uppercase;border-radius:var(--radius-pill);background:var(--gold-dim);color:var(--gold);border:1px solid #c9a84c4d;padding:4px 14px;font-size:.7rem;font-weight:600;display:inline-block}.tag{color:var(--gold);background:var(--gold-dim);border-radius:var(--radius-pill);border:1px solid #c9a84c33;padding:4px 12px;font-size:.8rem;display:inline-block}.expandable{border-radius:var(--radius);transition:border-color var(--transition);border:1px solid #c9a84c26;overflow:hidden}.expandable:hover{border-color:#c9a84c4d}.expandable-header{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition);justify-content:space-between;align-items:center;padding:14px 16px;display:flex}.expandable-header:hover{background:#ffffff05}.expandable-header h4{font-family:var(--font-body);letter-spacing:.04em;text-transform:uppercase;font-size:.9rem;font-weight:600}.expandable-chevron{color:var(--text-muted);transition:transform var(--transition);font-size:.75rem}.expandable-chevron.open{transform:rotate(180deg)}.expandable-body{max-height:0;transition:max-height .4s,padding .4s;overflow:hidden}.expandable-body.open{max-height:600px;padding:0 16px 16px}.expandable-body ul{flex-direction:column;gap:10px;list-style:none;display:flex}.expandable-body li{text-align:left;padding-left:20px;font-size:.95rem;line-height:1.5;position:relative}.expandable-body li:before{content:"";border-radius:50%;width:6px;height:6px;position:absolute;top:8px;left:0}.expandable.attuned{border-color:#5a9a6a33}.expandable.attuned .expandable-header{background:var(--green-bg)}.expandable.attuned .expandable-header h4{color:var(--green)}.expandable.attuned li:before{background:var(--green)}.expandable.distorted{border-color:#c9884c33}.expandable.distorted .expandable-header{background:var(--amber-bg)}.expandable.distorted .expandable-header h4{color:var(--amber)}.expandable.distorted li:before{background:var(--amber)}.audio-player{background:var(--bg-surface);border-radius:var(--radius);opacity:.6;border:1px solid #c9a84c26;align-items:center;gap:14px;padding:16px 20px;display:flex}.audio-player-icon{background:var(--gold-dim);width:40px;height:40px;color:var(--text-muted);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1rem;display:flex}.audio-player-info{text-align:left;flex:1}.audio-player-title{color:var(--text-muted);margin-bottom:2px;font-size:.85rem}.audio-player-status{color:var(--text-muted);opacity:.7;font-size:.75rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@keyframes breathe{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}@keyframes cardFloat{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-8px)rotate(1deg)}75%{transform:translateY(4px)rotate(-1deg)}}@keyframes staggerIn{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.fade-in{animation:.6s forwards fadeIn}.fade-in-up{animation:.6s forwards fadeInUp}.fade-in-down{animation:.6s forwards fadeInDown}.scale-in{animation:.5s forwards scaleIn}.stagger-1{opacity:0;animation-delay:.1s}.stagger-2{opacity:0;animation-delay:.2s}.stagger-3{opacity:0;animation-delay:.3s}.stagger-4{opacity:0;animation-delay:.4s}.stagger-5{opacity:0;animation-delay:.5s}.stagger-6{opacity:0;animation-delay:.6s}.screen-enter{animation:.5s forwards fadeInUp}.pulse-circle{border:1px solid var(--gold);border-radius:50%;justify-content:center;align-items:center;width:120px;height:120px;animation:4s ease-in-out infinite breathe;display:flex;position:relative}.pulse-circle:before{content:"";border:1px solid #c9a84c33;border-radius:50%;animation:4s ease-in-out .5s infinite breathe;position:absolute;inset:-15px}.pulse-circle:after{content:"";border:1px solid #c9a84c1a;border-radius:50%;animation:4s ease-in-out 1s infinite breathe;position:absolute;inset:-30px}.shuffle-container{justify-content:center;align-items:center;width:100%;height:200px;display:flex;position:relative}.shuffle-card{width:80px;height:120px;animation:2s ease-in-out infinite cardFloat;position:absolute}.shuffle-card:first-child{animation-delay:0s;left:calc(50% - 100px)}.shuffle-card:nth-child(2){animation-delay:.3s;left:calc(50% - 40px)}.shuffle-card:nth-child(3){animation-delay:.6s;left:calc(50% + 20px)}.shuffle-card:nth-child(4){animation-delay:.2s;top:10px;left:calc(50% - 70px)}.shuffle-card:nth-child(5){animation-delay:.5s;top:10px;left:calc(50% - 10px)}.card-art{aspect-ratio:3/4;background:var(--bg);border-radius:var(--radius);width:100%;color:var(--text-muted);border:none;justify-content:center;align-items:center;font-size:.85rem;display:flex;overflow:hidden}.card-art img{object-fit:cover;object-position:center;width:100%;height:100%;transform:scale(1.12)}.spread-grid{flex-wrap:wrap;justify-content:center;gap:16px;padding:20px 0;display:flex}.spread-position{cursor:pointer;transition:transform var(--transition);flex-direction:column;align-items:center;gap:10px;display:flex}.spread-position:hover{transform:scale(1.03)}.spread-position-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.spread-position .card-art{width:260px}.spread-position .card-name{font-family:var(--font-display);color:var(--gold);font-size:.95rem}.integration-prompt{background:var(--bg-surface);border-radius:var(--radius);border:1px solid #c9a84c26;padding:20px}.integration-prompt label{font-family:var(--font-display);color:var(--gold);margin-bottom:12px;font-size:1rem;font-style:italic;display:block}.integration-prompt textarea{resize:vertical;min-height:80px}.divider{background:linear-gradient(90deg, transparent, var(--gold), transparent);width:60px;height:1px;margin:20px auto}.spread-options{flex-direction:column;gap:16px;width:100%;display:flex}.spread-option{background:var(--bg-card);border-radius:var(--radius);text-align:left;transition:all var(--transition);cursor:pointer;border:1px solid #c9a84c40;padding:24px 20px}.spread-option:hover{border-color:var(--gold);box-shadow:0 0 20px var(--gold-glow), 0 8px 32px #0006;transform:translateY(-2px)}.spread-option-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.spread-option-name{font-family:var(--font-display);color:var(--gold);font-size:1.2rem}.spread-option-count{color:var(--text-muted);background:var(--bg-surface);border-radius:var(--radius-pill);padding:4px 12px;font-size:.8rem}.spread-option-desc{color:var(--text-muted);margin-bottom:12px;font-size:.9rem;line-height:1.5}.spread-option-question{font-family:var(--font-display);color:var(--text);opacity:.8;font-size:.95rem;font-style:italic}.card-detail{flex-direction:column;gap:24px;display:flex}.card-detail-art{aspect-ratio:3/4;background:var(--bg-surface);border-radius:var(--radius);width:100%;max-width:320px;color:var(--text-muted);border:1px solid #c9a84c33;justify-content:center;align-items:center;margin:0 auto;font-size:.85rem;display:flex;overflow:hidden}.card-detail-art img{object-fit:cover;width:100%;height:100%}.card-detail-header{text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.card-detail-name{font-family:var(--font-display);color:var(--text);font-size:1.8rem}.card-detail-subtitle{color:var(--text-muted);font-size:1rem;font-style:italic}.signal-words{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.oracle-message{flex-direction:column;gap:16px;display:flex}.oracle-message p{color:var(--text);opacity:.9;font-size:1rem;line-height:1.7}.back-bar{align-items:center;margin-bottom:8px;padding:8px 0;display:flex}@media (width>=768px){h1{font-size:2.5rem}h2{font-size:1.75rem}.screen,.screen-scroll{padding:40px 32px}.container{max-width:560px}.spread-position .card-art{width:280px}}@media (width>=1024px){.container{max-width:720px}}