.scene-five { background: radial-gradient(ellipse at 50% 49%,#fffdf4 0%,#f9f1de 65%,#ede1ca 100%); }
.scene-five-wash { position:absolute;left:12%;top:29%;width:76%;height:56%;border-radius:50%;background:radial-gradient(ellipse,#f3dfb366,transparent 72%);filter:blur(17px);pointer-events:none; }
.text-area-five { top:23%;width:min(900px,76vw); }
.text-area-five .phrase { font-size:clamp(36px,3.55vw,53px); }
.ornament-stage { position:absolute;left:50%;top:37%;width:min(1080px,83vw);height:49%;transform:translateX(-50%); }
.ornament-art { width:100%;height:100%;overflow:visible;filter:drop-shadow(4px 7px 6px #6c67401c); }
.ornament-stems path { stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.25s var(--ease); }
.scene-five.is-revealed .ornament-stems path { stroke-dashoffset:0; }
.ornament-leaves,.ornament-flowers,.ornament-finish { opacity:0;transition:opacity .8s ease,transform 1.15s var(--ease);transform-box:fill-box;transform-origin:center; }
.ornament-left { transform:translate(-25px,18px) rotate(-9deg); }
.ornament-right { transform:translate(25px,18px) rotate(9deg); }
.ornament-flowers { transform:translateY(18px) scale(.75); }
.ornament-finish { transform:translateY(9px); }
.scene-five.has-second .ornament-left,.scene-five.has-third .ornament-right,.scene-five.has-fourth .ornament-flowers,.scene-five.has-fourth .ornament-finish { opacity:1;transform:none; }
.ornament-glimmer { opacity:0;stroke-dasharray:130 900;stroke-dashoffset:1030; }
.scene-five.has-fourth .ornament-glimmer { animation:ornament-shine 1.4s ease-out .5s both; }
@keyframes ornament-shine { 0% { opacity:0;stroke-dashoffset:1030; } 22% { opacity:.8; } 100% { opacity:0;stroke-dashoffset:0; } }
.folded-postcard { position:absolute;z-index:8;right:clamp(42px,9vw,150px);bottom:11%;width:125px;height:122px;border:0;background:transparent;color:#624e39;opacity:0;transform:translateY(17px) rotate(7deg);transition:opacity .55s ease,transform .6s var(--ease);pointer-events:none; }
.scene-five.has-fifth .folded-postcard { opacity:1;transform:translateY(0) rotate(7deg);pointer-events:auto; }
.folded-postcard:hover { transform:translateY(-5px) rotate(3deg) !important; }
.folded-postcard-front { position:absolute;top:0;left:12%;width:76%;height:78%;display:block;background:linear-gradient(145deg,#fffdf5,#ead6b9);border:1px solid #b7a07b;box-shadow:7px 11px 18px #614b352b; }
.folded-postcard-front::before { content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:#f4e4cb;clip-path:polygon(0 100%,50% 7%,100% 100%);border-top:1px solid #c7b395; }
.folded-postcard-front::after { content:"";position:absolute;left:0;right:0;top:0;height:60%;background:linear-gradient(155deg,#fff8e8,#ead7b9);clip-path:polygon(0 0,100% 0,50% 95%);filter:drop-shadow(0 2px 1px #917a5940); }
.folded-postcard-seam { position:absolute;left:14%;top:-8%;width:72%;height:10%;background:#fdf7e9;border:1px solid #cbb799;transform:rotate(-5deg); }
.folded-postcard-flower { position:absolute;z-index:2;left:50%;top:52%;width:24px;height:24px;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;background:#dfb46d;color:#fff7dc;font-size:15px; }
.folded-postcard-flower svg { width:12px;height:12px;fill:currentColor; }
.folded-postcard-label { position:absolute;left:50%;bottom:0;display:flex;align-items:center;gap:7px;white-space:nowrap;transform:translateX(-50%);font-size:17px; }
.scene-five.is-leaving .ornament-stage { opacity:0;transform:translate(-50%,-12px) scale(.88);transition:opacity .7s ease,transform .75s var(--ease); }
.scene-five.is-leaving .folded-postcard { opacity:0; }

.scene-six { background:radial-gradient(ellipse at 50% 52%,#fffef7 0%,#fff8e8 66%,#eae4d3 100%); }
.scene-six::before { content:"";position:absolute;left:25%;top:31%;width:50%;height:55%;border-radius:50%;background:#ffe6a544;filter:blur(40px);transition:opacity .3s ease; }
.scene-six.is-performing::before { opacity:1;animation:music-light 4.4s ease-in-out infinite alternate; }
@keyframes music-light { to { opacity:.38;transform:scale(1.1); } }
.music-plant { position:absolute;width:min(330px,25vw);height:50%;pointer-events:none;opacity:.36;filter:sepia(.15); }
.music-plant img { width:100%;height:100%;object-fit:contain; }
.music-plant-left { left:-7%;bottom:-11%;transform:rotate(-25deg); }
.music-plant-right { right:-7%;bottom:-11%;transform:scaleX(-1) rotate(-25deg); }
.scene-six.is-performing .music-plant img { animation:plant-breathe 4s ease-in-out infinite alternate;transform-origin:bottom; }
@keyframes plant-breathe { to { transform:rotate(3deg); } }
.text-area-six { top:21%;width:min(890px,75vw); }
.text-area-six .phrase { font-size:clamp(35px,3.45vw,52px); }
.piano-area { position:absolute;z-index:5;left:50%;top:39%;width:min(1000px,82vw);height:min(36vh,315px);min-height:220px;transform:translateX(-50%); }
.piano { position:relative;width:100%;height:100%;padding:0 14px 13px;background:linear-gradient(#65513f,#3e2e25 30%,#564333);border:2px solid #4a382b;border-radius:15px 15px 24px 24px;box-shadow:0 19px 30px #44352a45,inset 0 3px 3px #b49b77a6,inset 0 -7px 7px #2a1d1866;opacity:0;transform:translateY(26px) scaleY(.82);transition:opacity .8s ease,transform .9s var(--ease); }
.scene-six.is-revealed .piano { opacity:1;transform:none; }
.piano-upper { height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 21px;color:#dcc4a0;font-size:13px;letter-spacing:.11em; }
.piano-screws { font-family:Arial,sans-serif;color:#ae9270;font-size:12px; }
.piano-screws { display:flex;gap:10px; }.piano-screws i { width:7px;height:7px;border:1px solid #ae9270;border-radius:50%;box-shadow:inset 0 0 0 1px #5f4938; }
.white-keys { position:relative;display:flex;height:calc(100% - 44px);background:#d1c2a9;padding-bottom:6px;border-radius:0 0 11px 11px;overflow:hidden; }
.piano-key { touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent; }
.white-key { position:relative;flex:1;min-width:0;border:1px solid #a99d87;border-top:5px solid #e8dcc4;border-radius:0 0 9px 9px;background:linear-gradient(90deg,#e6dfd1 0%,#fffdf5 15%,#fffefa 73%,#e1d8c8 100%);box-shadow:inset 0 -9px 5px #a599832a,2px 4px 2px #382a2040;color:#938069;transition:background .12s ease,transform .1s ease; }
.white-key + .white-key { border-left:2px solid #887c69; }
.white-key.is-pressed { background:linear-gradient(#f8e1ae,#fff4d6);transform:translateY(5px);box-shadow:inset 0 4px 8px #956b3847; }
.white-key.is-performance { background:linear-gradient(#f6dfb0,#fff8e4);box-shadow:inset 0 0 20px #efcb7780; }
.piano-key span { position:absolute;bottom:17px;left:50%;transform:translateX(-50%);font:11px Arial,sans-serif;letter-spacing:.1em;opacity:.7; }
.black-keys { position:absolute;top:43px;left:14px;right:14px;height:calc(100% - 56px);pointer-events:none; }
.black-key { position:absolute;top:0;width:8%;height:61%;transform:translateX(-50%);padding:0;border:1px solid #201d1b;border-radius:0 0 7px 7px;background:linear-gradient(90deg,#242325 0%,#55514e 45%,#292728 88%);box-shadow:inset 2px 0 2px #a2988b47,inset 0 -10px 5px #08070769,4px 7px 6px #2d211b7a;color:#d0c0a2;pointer-events:auto;transition:height .1s ease,background .1s ease; }
.black-key.is-pressed { height:60%;background:linear-gradient(90deg,#66513b,#29221e 80%);box-shadow:inset 0 5px 8px #0d0a087a,1px 2px 3px #2d211b7a; }
.black-key.is-performance { background:linear-gradient(90deg,#8d6847,#3b2e25 85%);box-shadow:0 0 16px #eecb8b9c; }
.black-key span { bottom:12px;color:#e8d7b5;font-size:10px; }
.black-one { left:12.5%; }.black-two { left:25%; }.black-three { left:50%; }.black-four { left:62.5%; }.black-five { left:75%; }
.scene-six:not(.is-free):not(.is-post) .piano-key { cursor:default; }
.sound-rings { position:absolute;inset:-16% 0;pointer-events:none; }
.sound-rings span { position:absolute;left:50%;top:55%;width:18%;height:32%;border:1px solid #e1bd6b;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.45); }
.sound-rings.is-ringing span { animation:sound-ring 1.15s ease-out both; }
.sound-rings.is-ringing span:nth-child(2) { animation-delay:.17s; }.sound-rings.is-ringing span:nth-child(3) { animation-delay:.34s; }
@keyframes sound-ring { 15% { opacity:.52; } 100% { opacity:0;transform:translate(-50%,-50%) scale(6); } }
.music-controls { position:absolute;z-index:8;left:50%;bottom:6.5%;width:min(820px,90vw);transform:translateX(-50%);text-align:center; }
.scene-six.is-post .music-controls,.scene-six.is-await-post .music-controls { bottom:15%; }
.music-hint { min-height:20px;margin:0 0 12px;color:#846f58;font:14px/1.4 Arial,sans-serif; }
.music-actions { display:flex;justify-content:center;gap:12px;flex-wrap:wrap; }
.music-button { min-height:43px;padding:9px 19px;border:1px solid #c5ac87;border-radius:99px;background:#fff9ec;color:#564231;box-shadow:0 5px 12px #725a3930;font-size:17px; }
.music-button-primary { background:#594432;color:#fff8e8;border-color:#594432; }
.music-button:hover { transform:translateY(-2px); }
.scene-six.is-performing .bee { transition:left .7s ease,top .7s ease; }
.scene-six.is-leaving .piano { transform:translateY(22vh) scaleY(.18);opacity:.25; }
body[data-stage="five"] .bee { left:86%;top:26%;transform:translate(-50%,-50%) scale(.61); }
body[data-stage="six"] .bee { left:82%;top:25%;transform:translate(-50%,-50%) scale(.57) rotate(-3deg); }
body[data-stage="six"] .bee.is-shifted { left:76%;top:27%;transform:translate(-50%,-50%) scale(.57) rotate(8deg); }
body[data-stage="six"] .bee.is-performing { transition:left .85s ease,top .85s ease,transform .85s ease; }

.line-transition { position:absolute;z-index:45;inset:0;display:flex;align-items:stretch;justify-content:center;gap:clamp(4px,2vw,28px);padding:0 15%;background:#faf1df;opacity:0;pointer-events:none;transition:opacity .68s ease; }
.line-transition.is-covering { opacity:1; }
.line-transition span { width:1px;height:100%;background:linear-gradient(transparent,#c6ad7e 33%,#c6ad7e 70%,transparent);transform:scaleY(.05);transition:transform .75s var(--ease); }
.line-transition.is-covering span { transform:scaleY(1); }
.line-transition.is-piano span { background:linear-gradient(transparent,#97876d 23%,#97876d 76%,transparent); }
.line-transition.is-ending { align-items:center;gap:3px;padding:0 19%; }
.line-transition.is-ending span { width:12%;height:22%;background:#fffaf0;border:1px solid #c9bba5;border-radius:2px;box-shadow:2px 3px 4px #705a3820;transform:scaleY(.02); }
.line-transition.is-ending.is-covering span { transform:scaleY(1); }
.postcard-modal { position:absolute;z-index:90;inset:0;display:grid;place-items:center;padding:14px; }
.postcard-modal-backdrop { position:absolute;inset:0;background:#241c18c9;backdrop-filter:blur(8px); }
.postcard-modal-content { position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;max-height:100%; }
.postcard-modal img { display:block;width:auto;height:auto;max-width:min(90vw,740px);max-height:calc(100svh - 78px);object-fit:contain;box-shadow:0 17px 36px #0008; }
.postcard-close { min-width:130px;min-height:38px;padding:7px 20px;border:1px solid #ead5af;border-radius:99px;background:#fff8e9;color:#3c2e22;font-size:17px; }

@media (max-width:700px) {
  .text-area-five { top:25%;width:calc(100% - 32px); }
  .text-area-five .phrase { font-size:clamp(27px,7.4vw,35px);line-height:1.16; }
  .ornament-stage { top:41%;width:170vw;height:43%; }
  .folded-postcard { right:5%;bottom:10%;width:97px;height:100px; }
  .folded-postcard-label { font-size:15px; }
  body[data-stage="five"] .bee { left:15%;top:8%;transform:translate(-50%,-50%) scale(.41); }

  .music-plant { width:150px;height:32%;opacity:.2; }
  .music-plant-left { left:-78px;bottom:15%; }.music-plant-right { right:-78px;bottom:15%; }
  .text-area-six { top:22%;width:calc(100% - 34px); }
  .text-area-six .phrase { font-size:clamp(27px,7.2vw,34px);line-height:1.17; }
  .piano-area { top:42%;width:calc(100% - 18px);height:31%;min-height:195px; }
  .piano { padding:0 6px 8px;border-radius:10px 10px 15px 15px; }
  .piano-upper { height:31px;padding:0 11px;font-size:10px; }
  .white-keys { height:calc(100% - 31px);padding-bottom:4px; }
  .white-key { border-radius:0 0 6px 6px; }
  .black-keys { top:31px;left:6px;right:6px;height:calc(100% - 40px); }
  .black-key { width:10%;height:61%;border-radius:0 0 5px 5px; }
  .piano-key span { display:none; }
  .music-controls { bottom:6%;width:calc(100% - 20px); }
  .scene-six.is-post .music-controls,.scene-six.is-await-post .music-controls { bottom:15%; }
  .music-hint { margin-bottom:8px;font-size:12px; }
  .music-button { min-height:40px;padding:8px 13px;font-size:15px; }
  body[data-stage="six"] .bee { left:17%;top:9%;transform:translate(-50%,-50%) scale(.42); }
  body[data-stage="six"] .bee.is-shifted { left:19%;top:9%;transform:translate(-50%,-50%) scale(.42) rotate(8deg); }
  .postcard-modal img { max-width:calc(100vw - 28px);max-height:calc(100svh - 76px); }
}

@media (max-width:375px) and (max-height:640px) {
  .text-area-five { top:23%; }.text-area-five .phrase { font-size:26px; }
  .ornament-stage { top:38%;width:150vw;height:43%; }
  .folded-postcard { bottom:11%;width:81px;height:88px; }
  .text-area-six { top:20%; }.text-area-six .phrase { font-size:25px; }
  .piano-area { top:40%;height:35%;min-height:188px; }
  .music-controls { bottom:4%; }.music-hint { font-size:11px;margin-bottom:5px; }
  .scene-six.is-post .music-controls,.scene-six.is-await-post .music-controls { bottom:16%; }
  body[data-stage="six"] .bee { left:15%;top:5%;transform:translate(-50%,-50%) scale(.35); }
  body[data-stage="six"] .bee.is-shifted { left:17%;top:5%;transform:translate(-50%,-50%) scale(.35) rotate(8deg); }
  .music-button { min-height:36px;padding:6px 12px;font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
  .scene-five.is-revealed .ornament-stems path { stroke-dashoffset:0; }
  .scene-five.has-fourth .ornament-glimmer { display:none; }
  .sound-rings { display:none; }
}