/* Room 02 only. Scene coordinates follow the approved wardrobe composition. */
#practiceRoot.practice-v5{position:absolute;inset:0;width:100%;height:100%;min-height:100dvh;overflow:hidden;background:#b99b87;color:#fff3df;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none;font-family:'Songti SC','SimSun',serif}
#practiceRoot.practice-v5 *{box-sizing:border-box}#practiceRoot.practice-v5 [hidden]{display:none!important}
#practiceRoot.practice-v5 button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}#practiceRoot.practice-v5 button:focus-visible,#practiceRoot.practice-v5 canvas:focus-visible{outline:2px solid #fff3ce;outline-offset:3px}#practiceRoot.practice-v5 img,#practiceRoot.practice-v5 .object-art{pointer-events:none;-webkit-user-drag:none}
.practice-v5 .practice-viewport{position:absolute;inset:0;overflow:clip;touch-action:none;outline:none}.practice-v5 .practice-world{position:absolute;left:0;top:50%;width:max(100%,177.6833dvh);height:max(100%,56.280vw);transform:translate(calc(-1 * var(--room-pan,0px)),-50%);container-type:size;transition:filter .7s}
.practice-v5 .room-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.practice-v5 .object-hotspot{position:absolute;padding:0;min-width:36px;min-height:44px;z-index:5}
.practice-v5 .object-art{width:100%;height:100%;overflow:visible;display:block;transition:filter .35s}
.practice-v5 .object-hotspot:hover>.object-art,.practice-v5 .object-hotspot:focus-visible>.object-art{filter:drop-shadow(0 0 2px #ffedca88) drop-shadow(0 3px 2px #4b302333)}
.practice-v5 .object-whisper{position:absolute;left:50%;bottom:0;transform:translate(-50%,70%);white-space:nowrap;padding:5px 9px;border-radius:15px;background:#50372c91;color:#fff2da;font-size:clamp(10px,.9vw,14px);letter-spacing:.08em;opacity:0;transition:opacity .25s;pointer-events:none;text-shadow:0 1px 2px #473025}
.practice-v5 button:hover>.object-whisper,.practice-v5 button:focus-visible>.object-whisper{opacity:1}
.practice-v5 .dance-shoes{transition:left .6s,top .6s,width .6s,height .6s;z-index:9}
.practice-v5 .dance-shoes:after{content:'';position:absolute;left:40%;top:14%;width:6px;height:6px;background:#fff4d9;border-radius:50%;box-shadow:0 0 0 5px #fff1d524;animation:practice-breathe 3s ease-in-out infinite;pointer-events:none}
.practice-v5.shoes-active .dance-shoes:after{display:none}
.practice-v5 .garment-object{cursor:pointer!important;z-index:6}.practice-v5 .garment-object>.object-art{transform:translateY(var(--pull,0px)) rotate(var(--sway,0deg));transform-origin:50% 0;transition:transform .12s ease-out;filter:drop-shadow(2px 4px 2px #4a26231a)}
.practice-v5 .garment-reflection{position:absolute;z-index:2;opacity:0;filter:blur(.6px);pointer-events:none;transform:scaleX(-1) translateY(var(--pull,0px));transition:transform .15s,opacity .6s;mask-image:linear-gradient(#000 55%,transparent)}.practice-v5.dance-active .garment-reflection{opacity:.28}
.practice-v5 .outfit-object{transform-origin:50% 0;transition:transform .5s,filter .5s}.practice-v5 .outfit-object.selected{transform:translateY(-5px) rotate(-.5deg);filter:drop-shadow(0 1px 5px #fff1c566)}.practice-v5 .outfit-object[data-outfit='pink']{z-index:7}.practice-v5 .outfit-object .object-whisper{bottom:18%}
.practice-v5 .mirror-photo{position:absolute;inset:0;opacity:0;transition:opacity .7s;overflow:hidden;background:linear-gradient(90deg,#30292422,#322327d9 44%,#382b2966)}
.practice-v5 .mirror-photo.current{opacity:1}.practice-v5 .mirror-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:saturate(.91);mask-image:linear-gradient(0deg,transparent,#000 5%,#000 95%,transparent)}.practice-v5 .mirror-echo{position:absolute;left:70%;top:0;width:30%;height:100%;object-fit:cover;transform:scaleX(-1);opacity:.12;mask-image:linear-gradient(90deg,transparent,#000 40%,transparent)}
.practice-v5 .mirror-exposure{position:absolute;inset:0;background:#fff6e5;opacity:0;pointer-events:none}.practice-v5 .shutter .mirror-exposure{animation:practice-exposure .6s ease-out both}
.practice-v5 .growth-moments{position:absolute;left:42%;top:17%;display:flex;flex-direction:column;gap:.6cqh;color:#fff1daae;font-size:clamp(10px,1.05cqw,18px);font-family:'Kaiti SC','Songti SC',serif;letter-spacing:.15em;transform:rotate(4deg);text-shadow:0 1px 4px #6a493d66;pointer-events:none}
.practice-v5 .mirror-note{position:absolute;z-index:4;padding:2px!important;background:#dfbcb2!important;box-shadow:0 2px 5px #50322b55;transform:rotate(5deg);transition:transform .5s,box-shadow .5s;min-width:25px;min-height:30px}.practice-v5 .mirror-note .note-front{display:grid;place-content:center;width:100%;height:100%;font:clamp(5px,.45cqw,8px) Georgia;color:#9a7766;letter-spacing:.02em}.practice-v5 .mirror-note img{width:100%;height:100%;object-fit:cover}.practice-v5 .mirror-note.flipped{z-index:15;transform:rotate(-3deg) scale(2.9);box-shadow:3px 7px 14px #35211866}.practice-v5 [data-card='secret'].flipped{transform:translateX(-40%) rotate(-5deg) scale(3.4)}
.practice-v5 .mirror-focus{position:absolute;inset:0;z-index:18;isolation:isolate;animation:practice-approach .65s ease-out both;background:#bfa393}.practice-v5 .mirror-closeup{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.practice-v5 .practice-mirror{position:absolute;inset:0 3% 7%;overflow:hidden;isolation:isolate}.practice-v5 .practice-mirror .mirror-photo{inset:8% 0 0;background:linear-gradient(90deg,#493a3722,#30272acd 48%,#493a3722);mask-image:linear-gradient(0deg,transparent,#000 4%,#000 94%,transparent)}.practice-v5 .practice-mirror .mirror-image{left:16%;width:68%}.practice-v5.highlights .practice-mirror .mirror-photo.current .mirror-image{animation:practice-recall 1.7s ease-out both}
.practice-v5 .mirror-fog{position:absolute;inset:0;width:100%;height:100%;touch-action:none;z-index:5;cursor:crosshair;transition:opacity .9s}.practice-v5 .mirror-fog.clear{opacity:0;pointer-events:none}.practice-v5 .heart-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6;filter:drop-shadow(0 0 9px #ffd4c2)}.practice-v5 .heart-trace path{fill:none;stroke:#fff3dc;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}.practice-v5 .heart-alice{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);font:italic clamp(36px,6vw,78px) Georgia;color:#fff2dd;text-shadow:0 0 28px #f7c2b7,0 1px 8px #8e6655;white-space:nowrap;animation:practice-alice 1.5s ease both;z-index:7}.practice-v5 .draw-cursor{position:absolute;width:12px;height:12px;border:1px solid #fff;box-shadow:0 0 0 1px #866559;border-radius:50%;transform:translate(-50%,-50%);z-index:7;pointer-events:none}
#practiceRoot.practice-v5 .fog-reset{position:absolute;right:5%;bottom:8%;padding:8px 12px;min-height:44px;font-size:12px;background:#76534950;border-radius:20px;z-index:10}
#practiceRoot.practice-v5 .return-room{position:absolute;z-index:30;top:max(16px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));bottom:auto;padding:10px 15px;min-height:44px;color:#fff0d8;background:#513d306b;border:1px solid #fff1ce25;border-radius:25px;font:12px 'Songti SC',serif;backdrop-filter:blur(8px);letter-spacing:.06em}
#practiceRoot.practice-v5:not([data-mode='idle']) .return-room{visibility:hidden}.practice-v5 .practice-memory{position:absolute;z-index:25;top:max(20px,env(safe-area-inset-top));right:max(23px,env(safe-area-inset-right));font:12px 'Songti SC',serif;letter-spacing:.08em;text-shadow:0 1px 5px #372319;background:#513d3060;padding:10px 13px;border-radius:25px;backdrop-filter:blur(6px)}
.practice-v5 .practice-notice{position:absolute;z-index:29;left:20%;right:20%;bottom:6%;margin:0;text-align:center;color:#fff5df;font-size:clamp(11px,1.1vw,16px);letter-spacing:.13em;text-shadow:0 1px 6px #372017,0 1px 2px #372017;pointer-events:none}.practice-v5 .practice-notice:empty{display:none}
#practiceRoot.practice-v5 .practice-retry{position:absolute;z-index:30;bottom:14%;left:50%;transform:translateX(-50%);min-height:44px;padding:8px 16px;background:#503c33d9;border-radius:22px;white-space:nowrap;font-size:12px}
.practice-v5 .practice-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#experience[data-phase='practice']>#musicToggle{visibility:visible;z-index:31}
@keyframes practice-breathe{50%{opacity:.45}}@keyframes practice-exposure{from{opacity:.16}to{opacity:0}}@keyframes practice-recall{from{transform:scale(1.01)}to{transform:scale(1.045)}}@keyframes practice-approach{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes practice-alice{0%{opacity:0;filter:blur(3px)}30%,80%{opacity:1;filter:blur(0)}100%{opacity:0}}
@media(orientation:portrait){.practice-v5 .practice-mirror .mirror-image{left:0;width:100%}}
@media(prefers-reduced-motion:reduce){.practice-v5 *{animation:none!important;transition-duration:.01s!important}}

.practice-v5 .shoe-home{position:absolute;inset:0}.practice-v5 .heart-trace>svg{width:100%;height:100%;display:block}


/* v6: physical return door, one-tap shoes, and one dress remembered at a time. */
.practice-v5.shoes-active .shoe-home{transform-origin:50% 15%;animation:practice-shoe-sway .9s ease-in-out both}
@keyframes practice-shoe-sway{0%,100%{transform:rotate(0)}28%{transform:translateY(-12px) rotate(-10deg)}62%{transform:translateY(-3px) rotate(7deg)}}
.practice-v5 .practice-moment{position:absolute;left:12%;top:37%;z-index:4;color:#fff0db;font-size:clamp(16px,1.9cqw,30px);letter-spacing:.14em;text-shadow:0 1px 10px #503325;opacity:0;transition:opacity .7s;pointer-events:none}
.practice-v5.dance-active .practice-moment{opacity:1}
.practice-v5 .mirror-moment{position:absolute;left:22%;right:22%;top:5%;margin:0;text-align:center;font-size:clamp(13px,1.5vw,22px);color:#fff3df;letter-spacing:.18em;text-shadow:0 1px 8px #5c3d32;z-index:12;pointer-events:none}
.practice-v5 .practice-notice{bottom:auto;top:15%;left:22%;right:22%}
.practice-v5.has-caption .practice-notice{opacity:0}
.practice-v5 .practice-caption{z-index:40;bottom:max(6%,22px);width:max-content;max-width:min(78vw,720px)}
.practice-v5 .viewer-message{position:absolute;left:20%;right:20%;top:31%;z-index:7;text-align:center;color:#fff0df;text-shadow:0 2px 12px #513629;animation:practice-message 1.2s ease both}
.practice-v5 .viewer-message small{font-size:12px;letter-spacing:.28em;opacity:.8}
.practice-v5 .viewer-message p{font-size:clamp(18px,2.3vw,32px);line-height:2;letter-spacing:.1em;margin:18px 0}
.practice-v5 .viewer-message .heart-alice{position:static;display:block;transform:none;font-size:clamp(29px,4.3vw,56px);animation:practice-message 1.4s ease both;margin-top:18px}
@keyframes practice-message{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.practice-v5 .mirror-keepsake{position:absolute;left:86%;top:62%;width:1px;height:1px;pointer-events:none}
@media(max-height:500px){.practice-v5 .mirror-moment{top:6%;font-size:12px}.practice-v5 .practice-notice{top:16%;font-size:11px}.practice-v5 .viewer-message{top:28%}.practice-v5 .viewer-message p{font-size:18px;line-height:1.9;margin:10px 0}.practice-v5 .viewer-message small{font-size:10px}.practice-v5 .viewer-message .heart-alice{font-size:30px;margin-top:12px}}
@media(min-aspect-ratio:19/10){.practice-v5 .practice-world{top:auto;bottom:0;transform:translateX(calc(-1 * var(--room-pan,0px)))}.practice-v5 .growth-moments{left:41%;top:27%;font-size:10px}}
/* Override the legacy practice-caption reset without changing shared room styles. */
#practiceRoot.practice-v5 .practice-caption{left:50%;transform:translate(-50%,5px);max-width:min(78vw,720px);padding:9px 18px;backdrop-filter:blur(6px);opacity:0}
#practiceRoot.practice-v5 .practice-caption.visible{transform:translateX(-50%);opacity:1}
@media(max-height:500px){#practiceRoot.practice-v5 .practice-caption{padding:5px 12px;font-size:13px}.practice-v5 .practice-memory{top:12px;right:max(16px,env(safe-area-inset-right));font-size:10px;padding:8px 11px}#practiceRoot.practice-v5 .return-room{top:max(8px,env(safe-area-inset-top));font-size:11px;padding:7px 12px}.practice-v5 .mirror-note.flipped{transform:rotate(-3deg) scale(2.3)}}

/* Desktop window widths vary independently of device type. */
.practice-v5 .practice-viewport.can-pan{cursor:grab}
.practice-v5 .practice-viewport.panning,.practice-v5 .practice-viewport.panning button{cursor:grabbing!important}
.practice-v5 .practice-viewport.panning .object-whisper{opacity:0}
#practiceRoot.practice-v5 .pan-left,#practiceRoot.practice-v5 .pan-right{position:absolute;z-index:16;top:57.5%;width:38px;height:64px;border:1px solid #ffedce4a;background:#58382d70;border-radius:20px;font:36px Georgia;color:#fff2da;backdrop-filter:blur(5px);box-shadow:0 2px 12px #42251c22}
.practice-v5 .pan-left{left:12px}.practice-v5 .pan-right{right:12px}
#practiceRoot.practice-v5 .pan-left:disabled,#practiceRoot.practice-v5 .pan-right:disabled{opacity:0;pointer-events:none}

.practice-v5 .fog-actions{position:absolute;z-index:20;right:5%;bottom:8%;display:flex;gap:10px}
#practiceRoot.practice-v5 .fog-actions button{position:static;min-height:44px;padding:8px 15px;font-size:13px;background:#76534977;border:1px solid #fff1d433;border-radius:22px}
#practiceRoot.practice-v5 .fog-done{background:#6a433cbb}
@media(prefers-reduced-motion:reduce){.practice-v5.shoes-active .shoe-home{transform:translateY(-8px);filter:drop-shadow(0 6px 3px #57342444)}}

/* A full-height architectural doorway beside the mirror, not a floating miniature. */
#practiceRoot.practice-v5{--door-width:clamp(112px,20vw,300px)}
.practice-v5 .mirror-closeup{left:var(--door-width);width:calc(100% - var(--door-width))}
.practice-v5 .practice-mirror{inset:0 3% 7% calc(var(--door-width) + 2%)}
.practice-v5 .mirror-moment{left:calc(var(--door-width) + 4%);right:4%}
.practice-v5.fog-active .practice-notice{left:calc(var(--door-width) + 4%);right:4%}
#practiceRoot.practice-v5 .mirror-return-door{position:absolute;left:0;top:0;bottom:0;width:var(--door-width);height:100%;z-index:19;padding:0;overflow:hidden;border-right:7px solid #61402c;border-radius:0;background:#8c6048}
.practice-v5 .mirror-return-door>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:49% 50%;transition:filter .3s}
.practice-v5 .mirror-return-door:hover>img{filter:brightness(1.08)}
.practice-v5 .door-label{position:absolute;bottom:16%;left:5%;right:5%;padding:8px 2px;text-align:center;font-size:clamp(12px,1.1vw,16px);letter-spacing:.07em;color:#fff0d9;text-shadow:0 1px 5px #382016;line-height:1.5;background:#4a2a1959;border-top:1px solid #f6dfb82a;border-bottom:1px solid #f6dfb82a}
.practice-v5 .viewer-message{left:10%;right:10%}

/* v9: freely browsable recollections and a handwritten heart kept with the letter. */
.practice-v5 .garment-object.is-moving>.object-art{animation:practice-garment-sway 1.2s ease-in-out both}
.practice-v5 .garment-reflection.is-moving>.object-art{animation:practice-garment-sway 1.2s ease-in-out both}
@keyframes practice-garment-sway{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(9px) rotate(-4deg)}60%{transform:translateY(3px) rotate(3deg)}}
.practice-v5.album-active .practice-mirror .mirror-photo{inset:12% 0 13%}
.practice-v5 .album-controls{position:absolute;left:calc(var(--door-width) + 3%);right:3%;bottom:3%;z-index:20;display:flex;justify-content:center;align-items:center;gap:20px}
#practiceRoot.practice-v5 .album-controls button,#practiceRoot.practice-v5 .album-replay,#practiceRoot.practice-v5 .signature-actions button{padding:10px 16px;min-height:42px;border:1px solid #fbe3c654;border-radius:24px;background:#62483d91;font-size:14px;backdrop-filter:blur(6px)}
#practiceRoot.practice-v5 button:disabled{opacity:.38;cursor:default}
.practice-v5 .album-counter{font:12px Georgia;letter-spacing:.12em;min-width:36px;text-align:center}
#practiceRoot.practice-v5 .album-replay{position:absolute;left:calc(var(--door-width) + 3%);bottom:11%;z-index:21;font-size:12px;padding:6px 12px;min-height:34px}
#practiceRoot.practice-v5.album-active .practice-caption{left:calc(50% + var(--door-width)/2);bottom:12%;max-width:calc(90% - var(--door-width));font-size:clamp(13px,1.3vw,18px)}
.practice-v5 .viewer-message{top:50%;left:4%;right:4%;transform:translateY(-50%);animation:none;padding:32px 12px;color:#fff0df}
.practice-v5 .viewer-message p{font-size:clamp(17px,2.2vw,30px);line-height:1.9;letter-spacing:.035em;margin:24px 0}
.practice-v5 .letter-signature{display:flex;align-items:center;justify-content:center;gap:18px}
.practice-v5 .letter-signature>span{font-size:clamp(17px,2vw,26px);white-space:nowrap;font-style:italic}
.practice-v5 .signature-pad{width:150px;height:115px;border:1px dashed #f4ddc478;border-radius:16px;background:#fcebddc9;touch-action:none;cursor:crosshair;box-shadow:0 5px 22px #5e39261a}
.practice-v5 .signature-pad.is-saved{border-color:transparent;background:#fcebddc9;cursor:default}
.practice-v5 .viewer-message .signature-status{font-size:12px;letter-spacing:.08em;line-height:1.5;margin:16px 0 12px;color:#fff1ddc9}
.practice-v5 .signature-actions{display:flex;justify-content:center;gap:12px}
#practiceRoot.practice-v5 .signature-actions button{font-size:12px;min-height:36px;padding:7px 14px}
@media(max-width:700px){.practice-v5 .album-controls{gap:9px}#practiceRoot.practice-v5 .album-controls button{font-size:12px;padding:8px 10px}.practice-v5 .viewer-message p{font-size:18px}.practice-v5 .letter-signature{gap:10px}.practice-v5 .signature-pad{width:120px;height:100px}}
@media(max-height:500px){.practice-v5 .viewer-message{padding:8px}.practice-v5 .viewer-message p{margin:10px 0;font-size:17px;line-height:1.6}.practice-v5 .signature-pad{height:72px;width:100px}.practice-v5 .viewer-message .signature-status{margin:7px 0;font-size:10px}.practice-v5 .album-controls{bottom:2%}#practiceRoot.practice-v5 .album-controls button{min-height:30px;padding:6px 12px}.practice-v5 .viewer-message small{font-size:10px}.practice-v5 .letter-signature>span{font-size:17px}.practice-v5 .practice-mirror{bottom:12%}}
@media(prefers-reduced-motion:reduce){.practice-v5 .garment-object.is-moving>.object-art{transform:translateY(5px)}}

/* A quiet replay control stays with the practice garments in the wardrobe. */
#practiceRoot.practice-v5 .garment-replay{position:absolute;left:60.8%;top:69%;z-index:8;padding:7px 11px;min-height:34px;border:1px solid #fbe3c647;border-radius:18px;background:#62483d91;font-size:clamp(10px,.82cqw,13px);backdrop-filter:blur(5px);white-space:nowrap}

/* v11: the drawn heart opens the photographs; shoes move for the whole narration. */
.practice-v5 .shoe-home{transition:transform .45s ease-out}
.practice-v5.shoes-active .shoe-home{animation:practice-shoe-sway 1.15s ease-in-out infinite}
.practice-v5 .mirror-note{pointer-events:none;cursor:default}
.practice-v5 .mirror-note .note-front{padding:4px;line-height:1.65;text-align:center;font-family:'Songti SC',serif;font-size:clamp(6px,.55cqw,10px)}
.practice-v5 .fog-guidance{position:absolute;z-index:8;top:17%;left:5%;right:5%;text-align:center;color:#fff9eb;text-shadow:0 1px 9px #66514a,0 1px 2px #66514a;pointer-events:none}
.practice-v5 .fog-guidance p{font-size:clamp(18px,2.1vw,30px);line-height:1.8;letter-spacing:.07em;margin:0 0 14px}
.practice-v5 .fog-guidance small{font-size:clamp(11px,1.05vw,15px);letter-spacing:.1em}
.practice-v5.fog-active .practice-mirror .mirror-photo{inset:12% 0 13%}
.practice-v5.fog-active .mirror-image{filter:blur(2px) saturate(.85)}
.practice-v5 .fog-actions{left:calc(var(--door-width) + 4%);right:4%;bottom:3%;justify-content:center}
#practiceRoot.practice-v5 .fog-actions button{background:#62483dbd}
.practice-v5.fog-active .mirror-fog{transition:opacity .65s;z-index:7}
.practice-v5.fog-active .draw-cursor{z-index:9}
.practice-v5.letter-active .signature-pad{background:#fcebdd9c}
@media(max-width:700px){.practice-v5 .mirror-moment{top:8%;font-size:13px}.practice-v5 .fog-guidance{top:19%}.practice-v5 .fog-guidance p{font-size:18px}}
@media(max-height:500px){.practice-v5 .fog-guidance{top:18%}.practice-v5 .fog-guidance p{font-size:18px;line-height:1.5;margin-bottom:8px}.practice-v5 .fog-actions{bottom:2%}#practiceRoot.practice-v5 .fog-actions button{min-height:32px;padding:6px 13px}}

/* v12: drawing is independent of photographs; only the completed heart parts the mist. */
.practice-v5.fog-active:not(.fog-parting) .mirror-photo{visibility:hidden}
.practice-v5.fog-active .mirror-image{filter:saturate(.91)}
.practice-v5.fog-active .mirror-fog{transition:none}
.practice-v5 .mirror-fog.heart-held{cursor:default}

/* v13: soft mist, an empty mirror while drawing, then a feathered original photograph. */
.practice-v5.album-active .practice-mirror{--photo-reveal:0}
.practice-v5.album-active .practice-mirror::before{content:"";position:absolute;inset:-5%;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 20% 25%,#f1e4d99c,transparent 65%),radial-gradient(ellipse at 85% 78%,#eee0d4aa,transparent 64%);filter:blur(22px);animation:practice-mist-drift 14s ease-in-out infinite alternate}
.practice-v5.album-active .practice-mirror::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse 46% 52% at 50% 47%,transparent 42%,#eaddd21a 65%,#ecdfd24d 90%,#f0e5d973 115%);filter:blur(12px)}
.practice-v5.album-active .practice-mirror .mirror-photo{inset:auto;top:8%;left:50%;height:88%;width:auto;max-width:94%;aspect-ratio:1080/1608;transform:translateX(-50%);background:none;z-index:1;mask-image:radial-gradient(ellipse 50% 52% at 50% 48%,#000 44%,#000e 61%,#0007 80%,transparent 100%)}
.practice-v5.album-active .practice-mirror .mirror-image{inset:0;width:100%;height:100%;object-fit:contain;mask-image:none;filter:saturate(.94);transform:scale(1.08)}
.practice-v5.album-active .practice-mirror .mirror-echo{display:none}
.practice-v5.fog-parting .practice-mirror .mirror-photo.current{opacity:var(--photo-reveal);transition:none}
.practice-v5.fog-active .fog-guidance{top:13%;color:#6b4b40;text-shadow:0 1px 10px #fff5e5c9}
.practice-v5.fog-active .fog-guidance p{font-size:clamp(19px,2vw,28px);line-height:1.7;font-weight:400;letter-spacing:.09em}
.practice-v5.fog-active .fog-guidance small{color:#84685a;font-size:12px;letter-spacing:.08em}
.practice-v5.fog-active .mirror-moment{opacity:0}
.practice-v5 .mirror-fog{mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 48%,#000e 66%,transparent 100%)}
.practice-v5.letter-active .practice-mirror::before,.practice-v5.letter-active .practice-mirror::after{display:none}
@keyframes practice-mist-drift{from{transform:translate(-1%,1%) scale(1.03);opacity:.65}to{transform:translate(1%,-1%) scale(1.07);opacity:.9}}
@media(prefers-reduced-motion:reduce){.practice-v5.album-active .practice-mirror::before{animation:none}}

/* v14: her words, a pause, then our reply. */
.practice-v5 .ending-words{position:absolute;left:5%;right:5%;top:45%;transform:translateY(-50%);margin:0;text-align:center;font:400 clamp(23px,3vw,40px)/1.8 'Songti SC',serif;letter-spacing:.14em;color:#fff1db;text-shadow:0 2px 18px #58433666;opacity:0;transition:opacity 1.1s,transform 1.1s;pointer-events:none;z-index:9}
.practice-v5.ending-words-visible .ending-words{opacity:1;transform:translateY(-50%)}
.practice-v5.ending-fading .ending-words{opacity:0;transform:translateY(-56%);transition-duration:.7s}
.practice-v5 .mirror-closeup{transition:filter 1s}
.practice-v5.ending-active .mirror-closeup,.practice-v5.letter-active .mirror-closeup{filter:blur(7px) brightness(.78)}
.practice-v5.ending-active .mirror-moment,.practice-v5.letter-active .mirror-moment,.practice-v5.ending-active .practice-memory,.practice-v5.letter-active .practice-memory{display:none}
#experience:has(#practiceRoot.ending-active) #stickerBag,#experience:has(#practiceRoot.letter-active) #stickerBag{visibility:hidden;pointer-events:none}
.practice-v5.letter-active .viewer-message{top:48%;left:50%;right:auto;width:min(88%,590px);transform:translate(-50%,-50%);padding:0;text-align:left;animation:practice-letter-arrive 1.1s ease both}
.practice-v5.letter-active .viewer-message>small{display:block;font-size:13px;letter-spacing:.22em;color:#eedbca;margin-bottom:25px}
.practice-v5.letter-active .viewer-message>p{font-size:clamp(19px,2.15vw,29px);line-height:1.95;letter-spacing:.015em;margin:0;white-space:normal;text-shadow:0 2px 16px #624b3870}
.practice-v5.letter-active .letter-signature{justify-content:flex-end;gap:8px;margin-top:26px;align-items:center}
.practice-v5.letter-active .letter-signature>span{font-size:clamp(17px,1.65vw,23px);letter-spacing:.025em}
.practice-v5.letter-active .signature-pad.is-saved{width:115px;height:auto;aspect-ratio:150/115;border:none;border-radius:0;background:none;box-shadow:none;flex:none;filter:drop-shadow(0 1px 6px #fff0d533)}
#practiceRoot.practice-v5 .letter-back{position:absolute;left:calc(50% + var(--door-width)/2);bottom:5%;transform:translateX(-50%);z-index:20;background:none;border:none;border-bottom:1px solid #fff2d744;border-radius:0;padding:8px 4px;font-size:13px;color:#fff0dbcc;letter-spacing:.08em}
@keyframes practice-letter-arrive{from{opacity:0;filter:blur(5px)}to{opacity:1;filter:blur(0)}}
@media(max-width:700px){.practice-v5.letter-active .viewer-message{width:90%}.practice-v5.letter-active .viewer-message>p{font-size:clamp(15px,3.2vw,21px)}.practice-v5.letter-active .signature-pad.is-saved{width:90px}.practice-v5.letter-active .letter-signature{margin-top:18px;gap:3px}.practice-v5.letter-active .viewer-message>small{margin-bottom:18px;font-size:11px}}
@media(max-height:500px){.practice-v5.letter-active .viewer-message>p{font-size:18px}.practice-v5.letter-active .viewer-message>small{margin-bottom:12px}.practice-v5.letter-active .letter-signature{margin-top:10px}.practice-v5.letter-active .signature-pad.is-saved{width:78px}.practice-v5.letter-active .viewer-message{top:47%}}
@media(prefers-reduced-motion:reduce){.practice-v5 .ending-words,.practice-v5 .mirror-closeup{transition-duration:.15s}.practice-v5.letter-active .viewer-message{animation-duration:.15s}}

/* Keep both closing-page destinations together, at the bottom of the mirror. */
.practice-v5 .letter-navigation{display:none;position:absolute;left:calc(var(--door-width) + 3%);right:3%;bottom:5%;z-index:20;align-items:center;justify-content:center;gap:32px}
.practice-v5.letter-active .letter-navigation{display:flex}
#practiceRoot.practice-v5 .letter-navigation button{position:static;transform:none;min-height:44px;padding:8px 4px;background:none;border:none;border-bottom:1px solid #fff2d744;border-radius:0;font-size:13px;color:#fff0dbcc;letter-spacing:.08em}
#practiceRoot.practice-v5 .letter-navigation button:hover{color:#fff8eb;border-bottom-color:#fff2d7bb}
.practice-v5.letter-active .mirror-return-door .door-label{display:none}
@media(max-width:700px){.practice-v5 .letter-navigation{gap:20px}#practiceRoot.practice-v5 .letter-navigation button{font-size:12px}}

/* v15: a passing veil between photographs and one personally chosen recollection. */
.practice-v5 .album-mist{position:absolute;inset:-15%;z-index:4;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 12%,#f5e7d822 30%,#f5e7d8c9 48%,#f8eee280 60%,transparent 83%);filter:blur(25px)}
.practice-v5.mist-sweep .album-mist{animation:practice-album-mist 1.15s ease-in-out both}
@keyframes practice-album-mist{0%{opacity:0;transform:translateX(-80%)}35%{opacity:.85}100%{opacity:0;transform:translateX(80%)}}
.practice-v5 .favorite-choice{position:absolute;left:calc(var(--door-width) + 5%);right:5%;top:8%;bottom:6%;z-index:15;text-align:center;overflow:auto;scrollbar-width:thin;padding:0 0 15px}
.practice-v5 .favorite-choice h2{font:400 clamp(20px,2.1vw,30px)/1.6 'Songti SC',serif;color:#fff2df;letter-spacing:.06em;margin:8px 0 10px}
.practice-v5 .favorite-choice>p{font-size:12px;letter-spacing:.08em;color:#f3dfcc;margin:0 0 24px}
.practice-v5 .favorite-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-width:810px;margin:0 auto 25px}
#practiceRoot.practice-v5 .favorite-grid button{min-width:0;padding:7px 7px 11px;border-radius:60px 60px 9px 9px;background:#e4c5b313;border:1px solid #edd7bd45;transition:background .25s,transform .25s,border-color .25s}
.practice-v5 .favorite-grid img{display:block;width:100%;height:clamp(145px,29vh,280px);object-fit:cover;object-position:center 27%;border-radius:52px 52px 4px 4px;opacity:.82;transition:opacity .25s}
.practice-v5 .favorite-grid span{display:block;font-size:clamp(10px,1.1vw,15px);line-height:1.6;color:#fff0d9;padding-top:10px}
#practiceRoot.practice-v5 .favorite-grid button[aria-pressed='true']{border-color:#ffe3bd;background:#f6d7bc33;transform:translateY(-4px)}
.practice-v5 .favorite-grid button[aria-pressed='true'] img{opacity:1}
#practiceRoot.practice-v5 .favorite-continue{padding:12px 22px;min-height:44px;font-size:14px;border:1px solid #f1d5b77a;border-radius:24px;background:#6045398a;color:#fff0dc}
#practiceRoot.practice-v5 .favorite-browse{display:block;margin:13px auto 0;padding:7px 12px;font-size:12px;color:#f5e4d4bd;background:none}
.practice-v5.choice-active .mirror-moment{display:none}.practice-v5.choice-active .mirror-closeup{filter:blur(6px) brightness(.67)}
.practice-v5.ending-active .practice-mirror .mirror-photo.current{opacity:.13;left:72%;height:100%;top:0;filter:blur(3px)}
.practice-v5.letter-active .practice-mirror .mirror-photo.current{opacity:.2;left:72%;height:100%;top:0;filter:blur(2px);transition:opacity 1.5s}
@media(max-width:760px){.practice-v5 .favorite-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:380px}.practice-v5 .favorite-grid img{height:150px}.practice-v5 .favorite-choice{top:4%;bottom:3%}.practice-v5 .favorite-choice>p{margin-bottom:16px}.practice-v5 .favorite-choice h2{font-size:20px}}
@media(max-height:550px) and (min-width:761px){.practice-v5 .favorite-choice{top:2%;bottom:2%}.practice-v5 .favorite-choice h2{font-size:20px;line-height:1.3;margin:0 0 5px}.practice-v5 .favorite-choice h2 br{display:none}.practice-v5 .favorite-choice>p{margin-bottom:10px}.practice-v5 .favorite-grid{margin-bottom:10px}.practice-v5 .favorite-grid img{height:28vh}.practice-v5 .favorite-browse{margin-top:3px}}
@media(prefers-reduced-motion:reduce){.practice-v5.mist-sweep .album-mist{animation:none}.practice-v5 .favorite-grid button{transition:none}}

/* v16: architectural door bays extend the panorama without moving object coordinates. */
#practiceRoot.practice-v5{--scene-width:max(100vw,177.6833dvh);--scene-height:max(100dvh,56.280vw);--passage-width:calc(var(--scene-height) * .46)}
.practice-v5 .practice-world{width:calc(var(--scene-width) + var(--passage-width) * 2);height:var(--scene-height);container-type:normal}
.practice-v5 .practice-scene{position:absolute;left:var(--passage-width);top:0;width:var(--scene-width);height:100%;container-type:size}
#practiceRoot.practice-v5 .journey-door{position:absolute;top:0;bottom:0;width:var(--passage-width);height:100%;padding:0;overflow:hidden;border-radius:0;background:#a97660;isolation:isolate}
.practice-v5 .bedroom-door{left:0}.practice-v5 .dorm-door{right:0}
.practice-v5 .journey-door-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .35s,transform .7s;transform-origin:50% 60%}
.practice-v5 .journey-door:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 -30px 45px #3c24181a}
.practice-v5 .bedroom-door:after{background:linear-gradient(90deg,transparent 92%,#4d2b2190)}
.practice-v5 .dorm-door:after{background:linear-gradient(90deg,#4d2b2190,transparent 8%)}
.practice-v5 .journey-door:hover .journey-door-art,.practice-v5 .journey-door:focus-visible .journey-door-art{filter:brightness(1.065)}
.practice-v5 .journey-door-plaque{position:absolute;left:24%;width:49%;top:43%;padding:9px 3px;border:1px solid #dfbf8399;background:linear-gradient(130deg,#685033ee,#3f2e1cdd);box-shadow:0 2px 4px #321b1b66,inset 0 0 0 2px #e8c9971f;color:#f7e4be;text-shadow:0 1px 2px #342416;font-size:clamp(13px,1.4vw,20px);letter-spacing:.16em;line-height:1.4;transform:rotate(-.6deg)}
.practice-v5 .dorm-door .journey-door-plaque{top:44%;left:25%;width:51%;background:linear-gradient(130deg,#ead3aadf,#c3a477e8);border-color:#84664288;color:#58412d;text-shadow:0 1px #fff3d866}
.practice-v5 .journey-door-hint{position:absolute;left:8%;right:8%;bottom:8%;font-size:clamp(12px,1.1vw,16px);letter-spacing:.1em;text-shadow:0 1px 6px #2f160e,0 0 14px #472819;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .25s}
.practice-v5 .journey-door:hover .journey-door-hint,.practice-v5 .journey-door:focus-visible .journey-door-hint{opacity:1;transform:none}
.practice-v5 .journey-door.is-opening .journey-door-hint{opacity:0}
.practice-v5 .dorm-door-status{position:absolute;left:7%;right:7%;bottom:20%;padding:17px 8px;border:1px solid #f1dab544;border-radius:3px;background:#604836e8;box-shadow:0 6px 25px #3d231d33;color:#fff0d7;font-size:clamp(13px,1.3vw,18px);line-height:1.9;animation:practice-message .3s ease both}
.practice-v5 .dorm-door-status small{font-size:12px;opacity:.78}
.practice-v5 .dorm-door.is-waiting .journey-door-hint{opacity:0}
#practiceRoot.practice-v5:not([data-mode='idle']) .journey-door{pointer-events:none}

/* v17: one approved continuous photograph; doors are hotspots in the same perspective. */
#practiceRoot.practice-v5{--scene-width:max(300dvh,156.25vw);--scene-height:max(100dvh,52.083333vw)}
#practiceRoot.practice-v5 .practice-world{top:50%;bottom:auto;width:var(--scene-width);height:var(--scene-height);transform:translate(calc(-1 * var(--room-pan,0px)),-50%);container-type:size}
.practice-v5 .practice-scene{inset:0;width:100%;height:100%;container-type:size}
.practice-v5 .object-cleanplate{position:absolute;z-index:3;pointer-events:none;opacity:0}
.practice-v5.shoes-active [data-clean='0'],.practice-v5.shoe-settling [data-clean='0'],.practice-v5.dance-active [data-clean='1'],.practice-v5.dance-active [data-clean='2']{opacity:1}
.practice-v5 .growth-moments{left:43%;top:16%;font-size:clamp(10px,.6cqw,15px)}
.practice-v5 .practice-moment{left:29%;top:56%;font-size:clamp(15px,1cqw,26px)}
#practiceRoot.practice-v5 .journey-door{bottom:auto;right:auto;padding:0;background:transparent;overflow:visible;z-index:7;isolation:auto}
.practice-v5 .journey-door:after{background:none;box-shadow:none}
.practice-v5 .journey-leaf{position:absolute;inset:0;transform-origin:left center;pointer-events:none}
.practice-v5 .door-interior{position:absolute;inset:0;background:linear-gradient(#5e291830,#5e291845),url('../assets/scenes/childhood/room.webp') 24% 50%/auto 100%;clip-path:polygon(0 0,96% 6.7%,95.3% 94.7%,.5% 100%);opacity:0;pointer-events:none}
.practice-v5 .bedroom-door.is-opening .door-interior{opacity:1}
.practice-v5 .journey-door-hint{left:-8%;right:-8%;bottom:9%;font-size:clamp(12px,.75cqw,18px);padding:7px 4px;background:#59372480;border-radius:3px}
.practice-v5 .journey-door:hover .journey-leaf,.practice-v5 .journey-door:focus-visible .journey-leaf{filter:brightness(1.035)}
.practice-v5 .dorm-door:hover:after,.practice-v5 .dorm-door:focus-visible:after{inset:43% 70% 40% 0;background:radial-gradient(ellipse,#fff0c133,transparent 70%)}
.practice-v5 .dorm-door-status{left:-7%;right:-7%;bottom:17%;font-size:clamp(12px,.8cqw,18px)}
