body:has(.rap-mode){padding:0;overflow:hidden}
.rap-mode{width:min(100vw,calc(100dvh * 390 / 844),480px);height:auto;aspect-ratio:390/844;max-height:100dvh;background:#321e12}
.rap-mode #app{position:absolute;inset:0;padding:0;overflow:hidden}
.rap-mode #scene-footer,.rap-mode .background-fx,.rap-mode .mini-brand,.rap-mode .topbar>button:first-child{display:none!important}
.rap-mode .topbar{top:max(18px,env(safe-area-inset-top));left:auto;right:5%;z-index:20}
.rap-mode .sound-btn{width:44px;height:44px;padding:0;border:1px solid #eed5a45c;border-radius:50%;background:#42291ba6;color:#f8e8c6;box-shadow:none}
.rap-mode .music-note{font-size:20px}
.rap-scene{position:absolute;inset:0;isolation:isolate;overflow:hidden;container-type:inline-size;font-family:var(--serif);color:#452b21;user-select:none;-webkit-user-select:none}
.rap-scene [hidden]{display:none!important}
.rap-background{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;object-fit:fill}
.rap-heading{position:absolute;top:max(29px,calc(env(safe-area-inset-top) + 18px));left:7%;right:23%;height:5%;display:flex;align-items:center}
.rap-heading h1{margin:0;font:500 clamp(12px,3.45cqw,15px)/1.4 var(--serif);letter-spacing:.12em;color:#fff0ce;text-shadow:0 1px 5px #2a190e}
.rap-verse{position:absolute;left:10%;right:10%;top:15%;height:17%;box-sizing:border-box;padding:3cqw 2cqw 0;text-align:center;z-index:5;background:radial-gradient(ellipse at center,#f9e9c7ed 0%,#f5e0b596 62%,transparent 76%);pointer-events:none}
.rap-credit{display:block;min-height:20px;color:#963f2b;font-size:clamp(13px,3.45cqw,15px);font-weight:500;letter-spacing:.06em}
.rap-current{display:block;margin:1.5cqw 0 0;padding-top:1cqw;min-height:21cqw;max-height:30cqw;font-size:clamp(23px,6.15cqw,27px);font-weight:500;line-height:1.58;letter-spacing:.02em;color:#472b21;text-wrap:balance;overflow-wrap:anywhere}
.rap-current span{display:contents}.rap-current strong{display:inline;font-weight:600;color:#9b3528;transform-origin:center}
.rap-scene:not(.has-verse) .rap-current,.rap-scene:not(.has-verse) .rap-credit{visibility:hidden}.rap-scene:not(.has-verse) .rap-verse{background:none}
.rap-previous{display:none!important}
.rap-lamp{position:absolute;left:7%;right:7%;top:30%;height:43%;background:radial-gradient(ellipse at center,#fff2b94a,transparent 72%);pointer-events:none;mix-blend-mode:screen}
.rap-performer{position:absolute;top:31%;width:44%;height:39.5%;transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 3px 3px #65381524)}
.rap-user{left:2.5%}.rap-poet{left:53.5%}
.rap-sway{position:absolute;inset:0;transform-origin:50% 100%}
.rap-art{position:absolute;display:block;max-width:none;object-fit:contain;transform-origin:50% 100%}
.performing .rap-poet .rap-sway{animation:rapLean 2.5s ease-in-out infinite}
.rap-interaction{position:absolute;z-index:7;left:7%;right:7%;top:75.5%;bottom:auto;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:12px 10px 14px;box-sizing:border-box;background:linear-gradient(180deg,#2b1c18c9,#2b1c18e8);border-radius:7px}
.rap-caption{margin:0;min-height:22px;max-height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0;text-align:center;font-size:clamp(13px,3.55cqw,15px);line-height:1.6;color:#f0dfbd;font-weight:400;text-wrap:balance}
.rap-controls{display:flex;flex-direction:column;gap:8px}
.rap-controls:empty{display:none}
.rap-controls button{box-sizing:border-box;min-height:44px;font:500 clamp(13px,3.6cqw,16px)/1.4 var(--serif);padding:9px 8px;border:1px solid #d9b78182;border-radius:5px;background:#823728;color:#fff0d5;box-shadow:none;cursor:pointer;touch-action:manipulation;transition:background .18s,transform .18s,border-color .18s}
.rap-controls button:active{transform:scale(.97);background:#9b4731}
.rap-controls button:focus-visible{outline:2px solid #fae4ab;outline-offset:3px}
.rap-controls button:disabled{opacity:.4;cursor:default}
.rap-topics,.rap-pair,.rap-choices{display:flex;gap:8px}
.rap-topics>button,.rap-pair>button,.rap-choices>button{flex:1;min-width:0}
.rap-choices button{min-height:48px;padding:10px 4px}
.rap-topics button{background:#efdfbf;color:#5b382a;min-height:57px;border-color:#d3b68b}
.rap-topics button b{display:block;font-size:clamp(14px,3.8cqw,17px);font-weight:500}
.rap-topics button small{display:block;font-size:clamp(9px,2.5cqw,11px);margin-top:4px;white-space:nowrap;opacity:.78}
.rap-topics:has(.selected) button:not(.selected){opacity:.7}
.rap-topics button.selected{border-color:#efcc7f;background:#fff0cd;box-shadow:inset 0 -2px #b98040;transform:translateY(-2px)}
.rap-pair button{background:#38493d;color:#e9e3cf}
.rap-progress{height:2px;background:#e3c69a29;border-radius:2px;overflow:hidden;margin:auto 18% 8px;display:none}
.rap-progress i{display:block;width:0;height:100%;background:#d7b47b}
.rap-scene[data-phase=POET_RESPONSE] .rap-progress{display:block}
.rap-scene[data-phase=POET_RESPONSE] .rap-caption{margin-top:6px}
.rap-scene[data-phase=TOPIC_SELECT] .rap-interaction{gap:7px;padding-top:9px}
.rap-scene[data-phase=TOPIC_SELECT] .rap-caption{font-size:12px;min-height:19px}
.rap-scene[data-phase=READY_NEXT] .rap-caption{font-size:12px}
.rap-fx{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.rap-paper-heart{position:absolute;top:45%;font-size:24px;color:#a34f3c;animation:rapHeart 1.6s ease-out both}
.rap-paper-heart.h1{left:40%}.rap-paper-heart.h2{left:49%;animation-delay:.15s}.rap-paper-heart.h3{left:57%;animation-delay:.3s}
.rap-counter-ring{position:absolute;left:44%;top:49%;width:12%;aspect-ratio:1;border:1px solid #a6402b88;border-radius:50%;animation:rapRing .7s ease-out both}
.rap-quote{position:absolute;z-index:6;top:15%;left:13%;right:13%;padding:22px 17px 18px;background:#f6e7c7;border:1px solid #a96343;border-radius:2px;box-shadow:0 6px 20px #3f291924;text-align:center;color:#512e22;transform-origin:50% 0}
.rap-quote small{font-size:12px;letter-spacing:.08em;color:#a0553d}.rap-quote blockquote{font-size:clamp(22px,6cqw,27px);line-height:1.7;letter-spacing:.04em;margin:14px 0}.rap-quote cite{font-style:normal;font-size:12px;color:#8d6e4d}
.quote-focus .rap-verse{visibility:hidden}.quote-focus .rap-lamp{opacity:.3!important}
@keyframes rapLean{0%,100%{transform:rotate(0)}38%{transform:rotate(-.5deg) translateY(-1px)}60%{transform:rotate(-.5deg) translateY(-1px)}85%{transform:rotate(0)}}
@keyframes rapHeart{from{opacity:0;transform:translateY(0) scale(.7)}30%{opacity:.65}to{opacity:0;transform:translateY(-38px) scale(1)}}
@keyframes rapRing{from{opacity:.7;transform:scale(.7)}to{opacity:0;transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){.rap-scene *{animation:none!important;transition:none!important}}
.rap-scene.fx-paused *{animation-play-state:paused!important}