.number-stage{position:relative;isolation:isolate;margin:20px -12px 24px;background:linear-gradient(#cfe8f7 0 50%,#faf6e9 72%,#fffef8 100%);border-radius:14px;overflow:hidden;text-align:center}
.number-stage .number-film{margin:0;max-width:none;position:relative}
.number-stage video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;border:0;border-radius:0;background:transparent;pointer-events:none}
.number-stage video::-webkit-media-controls{display:none!important}
.number-stage .number-film:after{content:"";position:absolute;inset:auto 0 0;height:16%;background:linear-gradient(transparent,#faf6e9);pointer-events:none}
.note-space{position:relative;height:clamp(180px,31vw,260px);margin-top:-22px}
.note-canvas{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(0 12px 8px #766e492a)}
.note-canvas canvas{display:block;width:100%;height:100%}
.note-fallback{position:absolute;inset:18px 20px;background:linear-gradient(115deg,#ffedcf88,transparent 35%,#d9ebf788),#fff9e9;box-shadow:0 9px 16px #766e4920;border-radius:3px 7px 4px 8px;display:flex;flex-direction:column;justify-content:center;border:1px solid #e6dcc2}
.note-fallback:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 32%,#8e806615 33%,#ffffff9c 33.4%,transparent 34%,transparent 66%,#8e806615 66.5%,transparent 67%),linear-gradient(transparent 49%,#8e806615 50%,transparent 51%)}
.note-brand{font:11px Georgia,serif;letter-spacing:.4em;margin:0 0 20px;color:#77694f}
.number-stage .balls{position:relative;display:flex;justify-content:space-evenly;gap:0;margin:0;padding:0;list-style:none}
.number-stage .balls li{display:block;background:none;border:0;border-radius:0;width:auto;height:auto;font:clamp(28px,6vw,54px)/1.2 Georgia,serif;color:#292921}
.note-caption{font:9px Georgia,serif;letter-spacing:.35em;margin:20px 0 0;color:#77694f}
.note-space[data-renderer="webgl"] .note-fallback{clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.note-space[data-state="idle"] .note-fallback,.note-space[data-state="working"] .note-fallback,.note-space[data-state="error"] .note-fallback{visibility:hidden}
.note-space[data-renderer="fallback"][data-state="ready"] .note-fallback{animation:note-unfold 1.4s cubic-bezier(.2,.7,.2,1) both}
.stage-message{position:relative;margin:0;padding:4px 16px 20px;min-height:48px;color:#5c604f;font:14px/1.6 system-ui,sans-serif}
.number-stage[data-state="ready"] .stage-message{color:#354e42;font-weight:650}
.number-stage[data-state="working"] .stage-message:before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#d5a952;animation:hope-pulse 1.4s ease-in-out infinite}
.note-idle{position:absolute;inset:0;display:grid;place-content:center;padding:20px;color:#77735f;font:14px/1.8 Georgia,Batang,serif}
.note-idle small{font:10px system-ui;letter-spacing:.2em;color:#a29678;margin-bottom:8px}
.note-space[data-state="opening"] .note-idle,.note-space[data-state="ready"] .note-idle{display:none}
@keyframes hope-pulse{50%{opacity:.3;transform:scale(.7)}}
@keyframes note-unfold{from{opacity:0;transform:perspective(700px) rotateX(65deg) scaleX(.35) scaleY(.7)}to{opacity:1;transform:none}}
@media(max-width:480px){.number-stage{margin-left:-10px;margin-right:-10px}.note-space{height:170px;margin-top:-8px}.note-fallback{inset:10px}.note-brand{margin-bottom:14px}.note-caption{margin-top:14px}.stage-message{font-size:13px}}
@media(prefers-reduced-motion:reduce){.number-stage *{animation:none!important}}