#arp-scene .eyebrow { color: #d8a8d9; font-size: 12px; letter-spacing: .15em; }
#arp-scene h1 { font-size: clamp(24px, 5vw, 38px); margin: 10px 0; }
#arp-scene button { padding: 11px 18px; border: 1px solid #ff83cc; border-radius: 8px; background: #271021; color: #ffe7f6; font: inherit; cursor: pointer; }
#arp-scene button:hover { background: #451634; }
#arp-scene button:focus-visible { outline: 3px solid #ffe384; outline-offset: 4px; }
#arp-scene button:disabled { opacity: .5; cursor: wait; }
#arp-scene #arp-play { background: #ac226c; font-weight: 700; box-shadow: 0 0 22px #ee479b44; }
#arp-scene .controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }
#arp-scene #arp-stage { position: relative; width: min(100%, 760px); aspect-ratio: 1408 / 1088; margin: 12px auto; }
#arp-scene #arp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
#arp-scene #arp-stage img.active { visibility: visible; }
#arp-scene #arp-caption { min-height: 2em; margin: 0; font-size: clamp(21px, 4vw, 32px); letter-spacing: .06em; }
#arp-scene #arp-status, #arp-scene .hint { color: #c9bfc8; font-size: 14px; }
#arp-scene .manual button[aria-pressed="true"] { border-color: #ffe384; color: #ffe384; }
#arp-scene .theater { position: relative; }
#arp-scene #arp-stage { transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s ease; }
#arp-scene #arp-stage.evaporated { opacity: 0; filter: blur(12px); transform: translateY(-18px); }
#arp-scene #arp-ending { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 14px; opacity: 0; visibility: hidden; transition: opacity .7s ease; }
#arp-scene #arp-ending.visible { opacity: 1; visibility: visible; }
#arp-scene #arp-ending h2 { font-size: clamp(21px, 4vw, 36px); margin: 0 0 10px; }
#arp-scene #arp-ending p { margin: 0; }
#arp-scene #arp-motto { margin-top: 64px !important; font-size: clamp(20px, 4vw, 34px); opacity: 0; transition: opacity .6s; }
#arp-scene #arp-motto.visible { opacity: 1; }
#arp-scene .correction { position: relative; display: inline-block; white-space: nowrap; }
#arp-scene .cross { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#arp-scene .cross path { fill: none; stroke: #ff70c1; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 120; stroke-dashoffset: 120; }
#arp-scene .corrected .cross path { animation: arp-cross-out .3s ease forwards; }
#arp-scene .corrected .cross path + path { animation-delay: .25s; }
#arp-scene .hand { position: absolute; bottom: 85%; left: -5%; color: #ff70c1; font: italic 1.5em "Segoe Print", "Comic Sans MS", cursive; transform: rotate(-9deg); clip-path: inset(0 100% 0 0); }
#arp-scene .corrected .hand { animation: arp-handwriting .85s steps(16) .7s forwards; }
    @keyframes arp-cross-out { to { stroke-dashoffset: 0; } }
    @keyframes arp-handwriting { to { clip-path: inset(0); } }
    @media (prefers-reduced-motion: reduce) {
#arp-scene #arp-stage, #arp-scene #arp-ending, #arp-scene #arp-motto { transition: none; }
#arp-scene #arp-stage.evaporated { transform: none; filter: none; }
#arp-scene .corrected .cross path { animation: none; stroke-dashoffset: 0; }
#arp-scene .corrected .hand { animation: none; clip-path: inset(0); }
    }
  
#arp-scene { box-sizing:border-box; width:100%; max-width:900px; margin:32px auto; padding:16px; text-align:center; color:#ffe384; font:17px/1.5 system-ui,sans-serif; }
#arp-scene * { box-sizing:border-box; }
#arp-scene .arp-title { font-size:clamp(24px,5vw,38px); margin:10px 0; }
#arp-scene #arp-caption:empty { display:none; }
#arp-scene #arp-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#arp-scene #arp-stage { min-height:300px; }