:root{--jsr-red:#8b0d16;--jsr-red-dark:#5f0710;--jsr-green:#174c32;--jsr-cream:#fff9ef;--jsr-gold:#d4a72c;--jsr-ink:#28231f}
.jsr{max-width:1120px;margin:0 auto;padding:44px 24px 64px;color:var(--jsr-ink);font-family:inherit}
.jsr__hero{text-align:center;max-width:760px;margin:0 auto 28px}.jsr__eyebrow{margin:0 0 8px;color:var(--jsr-red);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.jsr__hero h1{margin:0;color:var(--jsr-green);font-family:Georgia,serif;font-size:clamp(2.25rem,5vw,4.25rem);line-height:1.05}.jsr__hero>p:last-child{max-width:650px;margin:18px auto 0;font-size:1.08rem;line-height:1.65;color:#655d56}
.jsr__filters{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin:0 auto 38px}.jsr__filter{appearance:none;border:1px solid #dfd4c3;border-radius:999px;background:#fff;padding:10px 17px;color:#514a44;font:600 .9rem/1 inherit;cursor:pointer;transition:.2s}.jsr__filter:hover,.jsr__filter:focus-visible{border-color:var(--jsr-red);color:var(--jsr-red)}.jsr__filter.is-active{border-color:var(--jsr-green);background:var(--jsr-green);color:white}
.jsr__stage{display:grid;grid-template-columns:minmax(380px,1.05fr) minmax(320px,.95fr);gap:clamp(34px,6vw,72px);align-items:center;padding:clamp(24px,4vw,48px);border:1px solid #eadfce;border-radius:24px;background:linear-gradient(145deg,#fffdf8,#fbf1e4);box-shadow:0 18px 55px rgba(73,35,17,.08)}
.jsr__wheel-wrap{position:relative;width:min(100%,520px);aspect-ratio:1;margin:auto;filter:drop-shadow(0 16px 18px rgba(75,11,17,.2))}.jsr__wheel{position:absolute;inset:0}.jsr__wheel svg{display:block;width:100%;height:100%;overflow:visible}.jsr__wheel g{transform-origin:250px 250px;transition:transform 4s cubic-bezier(.12,.62,.12,1)}.jsr__wheel text{fill:#fffdf5;font:700 13px/1 sans-serif;pointer-events:none}.jsr__wheel text.is-dark{fill:#4c241c}.jsr__pointer{position:absolute;z-index:4;top:-10px;left:50%;width:0;height:0;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-top:42px solid var(--jsr-red-dark);filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}.jsr__spin{position:absolute;z-index:5;inset:50% auto auto 50%;width:116px;height:116px;transform:translate(-50%,-50%);border:7px solid #fff8e9;border-radius:50%;background:var(--jsr-red);box-shadow:0 4px 0 var(--jsr-red-dark),0 7px 22px rgba(0,0,0,.3);color:#fff;cursor:pointer;font:900 1.3rem/1 inherit;letter-spacing:.08em}.jsr__spin small{display:block;margin-top:5px;font-size:1.2rem}.jsr__spin:hover{background:#a5131f}.jsr__spin:disabled{cursor:wait}.jsr.is-spinning .jsr__spin span{font-size:0}.jsr.is-spinning .jsr__spin span:after{content:'...';font-size:1.3rem}
.jsr__result{min-height:380px;display:flex;align-items:center}.jsr__placeholder{text-align:center;width:100%;padding:32px}.jsr__placeholder>span,.jsr__fallback{display:grid;place-items:center;width:80px;height:80px;margin:0 auto 22px;border-radius:50%;background:#efe3d2;color:var(--jsr-red);font:700 2.3rem Georgia,serif}.jsr__placeholder h2,.jsr__song h2{margin:0;color:var(--jsr-green);font:700 clamp(1.7rem,3vw,2.35rem)/1.15 Georgia,serif}.jsr__placeholder p{color:#756b62}.jsr__song{width:100%;overflow:hidden;border-radius:18px;background:#fff;box-shadow:0 12px 38px rgba(72,41,22,.13);animation:jsrReveal .45s ease both}.jsr__song>img{display:block;width:100%;height:210px;object-fit:cover}.jsr__song>.jsr__fallback{width:100%;height:180px;margin:0;border-radius:0;background:#efe3d2}.jsr__song-body{padding:25px}.jsr__picked{margin:0 0 7px;color:var(--jsr-red);font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.jsr__song-body>p:not(.jsr__picked){color:#6b625b;line-height:1.55}.jsr__actions{display:flex;align-items:center;gap:12px;margin-top:22px}.jsr__actions a,.jsr__actions button{display:inline-flex;justify-content:center;align-items:center;min-height:45px;border-radius:8px;padding:0 17px;font-weight:750;text-decoration:none;cursor:pointer}.jsr__primary{gap:20px;background:var(--jsr-red);color:white!important}.jsr__actions button{border:1px solid #d8cdc0;background:white;color:var(--jsr-green)}.jsr__status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.jsr-cta{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:20px 0;padding:17px 16px;border:1px solid #e1c896;border-left:5px solid var(--jsr-gold);border-radius:9px;background:linear-gradient(135deg,#fff8e8,#f9ead1);color:#302b27!important;text-decoration:none!important;transition:.2s}.jsr-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(83,44,19,.12)}.jsr-cta__icon{font-size:1.8rem}.jsr-cta strong,.jsr-cta small{display:block}.jsr-cta strong{color:var(--jsr-green);font-size:1rem}.jsr-cta small{margin-top:4px;color:#6c6258;font-size:.78rem}.jsr-cta__arrow{color:var(--jsr-red);font-size:1.35rem}
@keyframes jsrReveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:800px){.jsr{padding:30px 15px 48px}.jsr__stage{grid-template-columns:1fr;padding:22px 16px}.jsr__wheel-wrap{max-width:480px}.jsr__result{min-height:0}.jsr__spin{width:94px;height:94px}.jsr__wheel text{font-size:12px}.jsr__song>img{height:230px}}
@media(max-width:480px){.jsr__filters{justify-content:flex-start;flex-wrap:nowrap;overflow:auto;margin-inline:-15px;padding:0 15px 10px}.jsr__filter{white-space:nowrap}.jsr__stage{border-radius:16px}.jsr__wheel text{font-size:10px}.jsr__spin{width:78px;height:78px;border-width:5px;font-size:1rem}.jsr__actions{align-items:stretch;flex-direction:column}.jsr__actions a,.jsr__actions button{width:100%}}
@media(prefers-reduced-motion:reduce){.jsr__wheel g{transition-duration:.01ms}.jsr__song{animation:none}.jsr-cta{transition:none}}