:root{font-family:Plus Jakarta Sans,sans-serif;color:#f8f7ff;background:radial-gradient(circle at 18% 18%,rgba(82,17,212,.26),transparent 34%),radial-gradient(circle at 82% 78%,rgba(255,59,143,.2),transparent 28%),radial-gradient(circle at 52% 110%,rgba(255,140,59,.16),transparent 28%),#0a0712;color-scheme:dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary: #5211d4;--pink: #ff3b8f;--orange: #ff8c3b;--bg: #0a0712;--bg-elevated: rgba(255, 255, 255, .03);--border: rgba(255, 255, 255, .1);--muted: #a49abf;--text: #f8f7ff}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}button,input{font:inherit}button{border:0}.app-shell{min-height:100vh;position:relative}.progress-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:1rem;background:#0304099e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.progress-modal{width:min(100%,28rem);padding:1.4rem;border-radius:1.6rem}.progress-modal__icon{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;margin-bottom:1rem;border-radius:1rem;background:linear-gradient(135deg,#5211d442,#ff3b8f33);color:#fff}.progress-modal__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.progress-modal__header strong{font-size:1.05rem}.progress-modal__header span{font-size:1.4rem;font-weight:800;color:#fff}.progress-modal p{margin:.75rem 0 .9rem;color:var(--muted);line-height:1.7}.progress-track--modal{margin:0}.progress-stage{margin-top:.7rem;color:#ffffff80;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.corner-badge{position:fixed;top:1rem;right:1rem;z-index:20;border:1px solid rgba(255,255,255,.08);background:#ffffff0d;color:#ffffffb8;padding:.45rem .75rem;border-radius:999px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.material-symbols-outlined{font-variation-settings:"FILL" 1,"wght" 500,"GRAD" 0,"opsz" 24}.hero-shell,.result-shell{width:min(100%,540px);margin:0 auto;padding:1rem 1.25rem 3rem}.hero-shell{position:relative;min-height:100vh;color:#f8f2ff;overflow:hidden}.hero-share-button{position:absolute;top:1rem;right:1.25rem;z-index:2;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#f8f2ffeb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.hero-share-button:hover{background:#ffffff1f;transform:translateY(-1px)}.hero-shell:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;background:radial-gradient(circle at 20% 18%,rgba(120,74,255,.38),transparent 32%),radial-gradient(circle at 82% 20%,rgba(255,74,149,.24),transparent 24%),radial-gradient(circle at 50% 96%,rgba(255,149,72,.18),transparent 26%),linear-gradient(180deg,#12081f,#1a0d2f 46%,#140a25)}.hero-shell:after{content:"";position:fixed;top:-12%;right:-12%;bottom:-12%;left:-12%;z-index:-1;background:radial-gradient(circle at 26% 32%,rgba(157,105,255,.14),transparent 18%),radial-gradient(circle at 74% 38%,rgba(255,97,170,.1),transparent 16%),radial-gradient(circle at 42% 74%,rgba(92,197,255,.08),transparent 18%);filter:blur(48px);opacity:.95;animation:heroMistFlow 18s ease-in-out infinite alternate}.app-header,.result-nav{display:flex;align-items:center;justify-content:space-between}.brand-mark,.result-nav__title{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:.04em}.brand-mark .material-symbols-outlined{color:var(--primary)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:999px;background:transparent;color:#ffffffd1;cursor:pointer;transition:background .16s ease}.icon-button:hover{background:#ffffff1a}.icon-button:disabled{cursor:not-allowed;opacity:.6}.hero-content{display:flex;flex-direction:column;align-items:center;gap:1.2rem;padding-top:2.8rem}.hero-player{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.15rem;margin-top:0}.hero-player__disc-wrap{position:relative;display:grid;place-items:center;width:15.5rem;height:15.5rem}.hero-player__motion{position:absolute;width:2rem;height:2rem;border:2px solid transparent;border-top-color:#ffffffbf;border-radius:50%;opacity:.75}.hero-player__motion--left{left:1.4rem;top:3.1rem;transform:rotate(-32deg)}.hero-player__motion--right{right:1.2rem;bottom:3rem;transform:rotate(145deg)}.hero-player__disc{position:relative;width:10rem;height:10rem;border-radius:50%;overflow:hidden}.hero-player__disc--vinyl{display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at center,rgba(255,255,255,.02) 0 12%,transparent 12% 100%),repeating-radial-gradient(circle at center,#ffffff0a 0,#ffffff0a 2px,#09090dfa 2px,#09090dfa 7px),linear-gradient(135deg,#1a1a1e,#0d0d12);box-shadow:inset 0 0 0 1px #ffffff08,0 0 28px #240f542e;animation:vinylSpin 7.5s linear infinite}.hero-player__disc--vinyl:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(128deg,transparent 42%,rgba(255,255,255,.16) 49%,transparent 57%);mix-blend-mode:screen;pointer-events:none}.hero-player__cover{width:9rem;height:9rem;object-fit:cover;border-radius:50%;border:.18rem solid rgba(239,58,52,.9);animation:coverFade .42s ease;z-index:1}.hero-player__spindle{position:absolute;width:.72rem;height:.72rem;border-radius:50%;background:#f6efe8;box-shadow:0 0 0 .18rem #ef3a34e0;z-index:2}.hero-player__meta{max-width:21rem;text-align:center}.hero-player__meta--animated{animation:metaSlideIn .62s cubic-bezier(.22,1,.36,1)}.hero-player__trackline{margin:0;font-size:.98rem;font-weight:800;color:#fffffff5;line-height:1.45;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.hero-player__mbti-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.55rem;margin-top:.8rem}.hero-player__badge{padding:.28rem .62rem;border-radius:999px;background:#63f2ca1f;border:1px solid rgba(99,242,202,.22);color:#7ef7d8;font-size:.74rem;font-weight:800;letter-spacing:.06em}.hero-player__profile{color:#ece5ffd1;font-size:.8rem;font-weight:700;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hero-player__blurb{margin:.72rem 0 0;color:#cbc2e3e6;font-size:.88rem;line-height:1.65;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}.hero-copy{text-align:center}.hero-copy h1{margin:0;font-size:clamp(2.8rem,10vw,4rem);line-height:1.02;letter-spacing:-.05em;font-weight:800;color:#fffffffa}.hero-copy__accent{background:linear-gradient(180deg,#6c2cff,#7a2de7 38%,#cf3295 68%,#f24497);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy p,.lead-copy,.report-panel p,.dimension-card p,.meta-strip p,.input-hint,.mini-stat span,.index-card span,.evidence-item__body span,.playlist-chip{color:var(--muted)}.hero-shell .input-label,.hero-shell .input-row input,.hero-shell .input-row .material-symbols-outlined{color:#f8f2ff}.hero-shell .input-hint,.hero-shell .mode-badge{color:#bfb4ded6}.hero-copy p{margin:1rem auto 0;max-width:30rem;line-height:1.75;font-size:1rem}.glass-panel{border:1px solid var(--border);background:var(--bg-elevated);box-shadow:0 18px 40px #664d9314;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.hero-shell .glass-panel{border-color:#ffffff17;background:linear-gradient(180deg,#2617418f,#160c266b),#ffffff08;box-shadow:0 18px 40px #0e061d47,inset 0 1px #ffffff0f}.input-panel{width:100%;padding:1.35rem;border-radius:1.6rem;margin-top:.2rem}.input-label{display:block;margin-bottom:.85rem;font-size:.9rem;font-weight:700;line-height:1.55}.input-row{display:flex;align-items:center;gap:.75rem;padding:.95rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:1rem;background:#ffffff0d}.input-row input{flex:1;color:var(--text);background:transparent;border:0;outline:none}.input-row input::placeholder{color:#e9e2ff61}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;width:100%;border-radius:1rem;padding:1rem 1.15rem;margin-top:.9rem;font-weight:700}.primary-button{color:#fff;background:var(--primary);box-shadow:0 12px 28px #5211d440;cursor:pointer;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}.primary-button:hover:not(:disabled){background:#5211d4eb}.primary-button:active:not(:disabled){transform:scale(.98)}.primary-button:disabled{cursor:progress;opacity:.88}.ghost-button{color:#ffffffd6;background:#ffffff0d;border:1px solid rgba(255,255,255,.08)}.input-hint{margin:.85rem 0 0;font-size:.82rem;line-height:1.65}.input-help-link{display:block;width:100%;margin-top:.85rem;padding:0;background:transparent;color:#f8f2ffeb;font-size:.86rem;font-weight:700;text-align:center;cursor:pointer}.input-help-link:hover{color:#fff}.mode-badge,.error-banner{margin-top:.85rem;padding:.85rem .95rem;border-radius:1rem;font-size:.9rem;line-height:1.6}.help-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:grid;place-items:center;padding:1rem;background:#06050c94;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.help-modal{width:min(100%,28rem);padding:1.25rem;border-radius:1.5rem}.help-modal__header{display:flex;align-items:center;justify-content:space-between;gap:1rem}.help-modal__header strong{font-size:1.05rem;color:#fff}.help-steps{margin-top:1rem;display:flex;flex-direction:column;gap:.7rem}.help-steps p{margin:0;color:#e2dcf2e0;line-height:1.7}.help-example{margin-top:1rem;padding:.9rem 1rem;border-radius:1rem;border:1px solid rgba(255,255,255,.08);background:#ffffff0d}.help-example span{display:block;margin-bottom:.45rem;color:#bfb4ded6;font-size:.78rem}.help-example code{display:block;color:#fff;font-size:.84rem;line-height:1.6;word-break:break-all}.help-modal__action{margin-top:1rem}.mode-badge{background:#5211d426;color:#d1c0ff}.error-banner{background:#ff6b811f;color:#ffc4ce}.meta-strip{text-align:center}.ai-pill{display:inline-flex;align-items:center;gap:.55rem;padding:.65rem 1rem;border-radius:999px;background:#ffffff0d;border:1px solid rgba(255,255,255,.05);color:#ffffffe6}.result-nav{position:sticky;top:0;z-index:10;padding:1rem 0;background:#0a0712cc;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.result-hero{text-align:center;padding:2.75rem 0 2rem}.cover-avatar{width:8rem;height:8rem;margin:0 auto 1rem;border-radius:50%;background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.2);box-shadow:0 0 0 4px #5211d433}.playlist-chip{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1rem;padding:.45rem .75rem;border-radius:999px;background:#ffffff0d}.result-hero h1{margin:0;font-size:clamp(4.3rem,18vw,5.8rem);line-height:.95;background:linear-gradient(90deg,var(--primary),var(--pink),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}.result-hero h2{margin:.75rem 0 .4rem;font-size:1.25rem;font-weight:700;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.result-hero p{max-width:17.5rem;margin:0 auto;color:var(--muted);font-size:.875rem;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical}.section-card,.report-panel{border-radius:1.5rem;padding:1.5rem}.section-card{position:relative}.section-card--roast{padding:1.15rem 1.3rem;border-radius:1.35rem}.section-card__badge{position:absolute;top:1rem;right:1rem;padding:.3rem .6rem;border-radius:999px;background:#5211d429;color:#cdb7ff;font-size:.72rem;font-weight:700}.section-title,.section-heading,.report-panel__label{display:flex;align-items:center;gap:.55rem}.section-title h3,.section-heading h3,.report-panel h3{margin:0}.lead-copy{line-height:1.85;margin-top:0;font-size:.95rem}.lead-copy--quote{color:#ffffffe0}.lead-copy--quote em{display:block;font-style:normal;line-height:1.72;letter-spacing:.01em}.section-block{margin-top:2rem}.section-heading{margin-bottom:1rem}.section-heading__bar{width:.35rem;height:1.15rem;border-radius:999px;background:var(--primary)}.section-heading__bar--pink{background:var(--pink)}.section-heading__bar--orange{background:var(--orange)}.dimension-list,.evidence-list{display:flex;flex-direction:column;gap:1rem}.dimension-card{padding:.15rem 0 .9rem}.dimension-card__top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end}.dimension-card__top div{display:flex;flex-direction:column;gap:.2rem}.dimension-card__top span{color:#94a3b8b3;font-size:.85rem}.progress-track{height:.45rem;margin:.8rem 0 .7rem;border-radius:999px;background:#1e293bd9;overflow:hidden}.progress-track__fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--pink),var(--orange))}.dimension-card p{margin:0;font-size:.84rem;line-height:1.65}.gene-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem}.gene-card{display:flex;flex-direction:column;gap:.7rem;min-height:15rem;padding:1.25rem;border-radius:1.6rem}.gene-card__title{color:#ffffff80;font-size:.86rem}.gene-card strong{font-size:2rem;line-height:1.08}.gene-card__icon{margin-top:auto;font-size:2.4rem}.gene-card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.75}.gene-card--tone-1 strong,.gene-card--tone-1 .gene-card__icon{color:var(--pink)}.gene-card--tone-2 strong,.gene-card--tone-2 .gene-card__icon{color:var(--orange)}.gene-card--tone-3 strong,.gene-card--tone-3 .gene-card__icon{color:var(--primary)}.gene-card--tone-4 strong,.gene-card--tone-4 .gene-card__icon{color:#fff}.stats-scroller{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem;margin-top:1rem}.stats-scroller+.dimension-list{margin-top:1.35rem}.mini-stat{padding:.95rem 1rem;border-radius:1rem;border-left:4px solid var(--primary)}.mini-stat:nth-child(2){border-left-color:var(--pink)}.mini-stat:nth-child(3){border-left-color:var(--orange)}.mini-stat span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.mini-stat strong{display:block;margin-top:.4rem;font-size:1.15rem}.evidence-item{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:1rem;align-items:start}.evidence-item__cover{width:3.5rem;height:3.5rem;border-radius:.75rem;box-shadow:0 16px 32px #0000003d;background-size:cover;background-position:center}.evidence-item__content{min-width:0;display:flex;flex-direction:column;gap:.6rem}.evidence-item__meta{min-width:0;width:100%;display:flex;align-items:baseline;gap:.5rem}.evidence-item__meta strong{min-width:0;font-size:.98rem;line-height:1.35}.evidence-item__meta span{flex-shrink:0;font-size:.78rem;line-height:1.3;color:var(--muted)}.evidence-item__meta strong,.evidence-item__meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.evidence-item__badge{justify-self:stretch;min-width:0;align-self:flex-start;padding:.35rem .75rem;border-radius:1.15rem;border:1px solid rgba(255,255,255,.1);background:#ffffff08;max-width:100%}.evidence-item__reason{margin:0;color:#e2e8f0e6;font-size:.82rem;line-height:1.65;white-space:normal;overflow-wrap:anywhere}.report-panel{margin-top:2rem;background:linear-gradient(135deg,#5211d42e,#0a0714cc,#ff3b8f26);border:1px solid rgba(255,255,255,.05)}.report-panel article{padding-top:1rem;border-top:1px solid rgba(255,255,255,.05);margin-top:1rem}.report-panel article:first-of-type{margin-top:.25rem}.report-panel p{margin:.55rem 0 0;line-height:1.85;font-size:.95rem}.actions-block{margin-top:2rem;padding-bottom:2rem}@media (max-width: 640px){.hero-shell,.result-shell{padding-inline:1rem}.evidence-item{grid-template-columns:3.35rem 1fr;gap:.85rem;align-items:start}.corner-badge{right:.75rem;top:.75rem}.showcase-card{width:19.25rem;grid-template-columns:4.8rem 1fr}.showcase-card__cover{width:4.8rem;height:4.8rem}}@media (max-width: 420px){.stats-scroller{gap:.65rem}.mini-stat{padding:.8rem .72rem}.mini-stat span{font-size:.64rem;letter-spacing:.05em}.mini-stat strong{font-size:1rem}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes coverFade{0%{opacity:.35;transform:translate3d(14px,0,0) scale(.94)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes metaSlideIn{0%{opacity:0;transform:translate3d(26px,0,0);filter:blur(8px)}62%{opacity:1;transform:translate3d(-6px,0,0);filter:blur(0)}to{opacity:1;transform:translateZ(0);filter:blur(0)}}@keyframes heroMistFlow{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(1.5%,2%,0) scale(1.04)}to{transform:translate3d(3%,-2%,0) scale(1.02)}}@keyframes vinylSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}