:root{color-scheme:light;--paper:#fff8e8;--ink:#593421;--muted:#765940;--coral:#b8442e;--soft:#f7edda;--line:#ddcbb4;--mint:#d9e9d5;--ease:cubic-bezier(.22,.75,.25,1)}
:root[data-theme=night]{color-scheme:dark;--paper:#232d35;--ink:#fff1d8;--muted:#ddcbb2;--coral:#ffa789;--soft:#2c373d;--line:#53605e;--mint:#304a48}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Microsoft YaHei","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:disabled{cursor:default}a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:6px}h1,h2,h3,p{margin:0}h2,h3{text-wrap:balance}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:10px;left:10px;z-index:20;padding:12px 18px;background:var(--ink);color:var(--paper);transform:translateY(-180%)}.skip:focus{transform:none}
.header{height:78px;max-width:1320px;margin:auto;padding:0 46px;display:flex;align-items:center;justify-content:space-between;gap:22px}.brand{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-weight:1000;font-size:27px;letter-spacing:-.055em;color:var(--coral);display:flex;align-items:center;gap:8px;min-height:44px}.brand span{font-size:16px}.header nav{display:flex;gap:30px;margin-left:auto;font-size:13px}.header nav a{padding:14px 0}.header nav a:hover{color:var(--coral)}.tools{display:flex;gap:12px;align-items:center}.icon-button{width:42px;height:42px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:17px}.icon-button svg{width:22px;height:22px;fill:currentColor}.icon-button:hover{background:var(--soft)}.theme-toggle{display:flex;gap:7px;align-items:center;padding:10px 0;min-height:44px;font-size:11px}.theme-toggle>span:first-child{font-size:20px}.theme-toggle:hover{color:var(--coral)}.icon-button[aria-pressed=true]{color:var(--coral);background:var(--soft)}
.hero{padding:12px 0 64px}.title-wrap{max-width:1000px;padding:0 30px;margin:auto;position:relative;text-align:center;z-index:8}.wordmark{width:100%;height:auto;display:block;color:#f87855;overflow:visible}.tagline{position:relative;font-size:clamp(17px,2.1vw,27px);font-weight:800;letter-spacing:.07em;margin:-10px 0 0}.tagline span{color:#f6b63d;margin-left:16px;font-size:.8em}.stage-wrap{max-width:1250px;margin:-45px auto 0;padding:0 28px}.stage{position:relative;aspect-ratio:1672/941;isolation:isolate;perspective:1100px}.room{display:block;width:100%;height:100%;position:absolute;inset:0;border-radius:25px;object-fit:contain;mask-image:radial-gradient(ellipse at center,#000 49%,transparent 80%)}.door-frame{position:absolute;left:40.2%;top:24.5%;width:19.7%;height:51.8%;z-index:5;perspective:800px;pointer-events:none}.door{width:100%;height:100%;transform-origin:98% 58%;transform:rotateY(-106deg);transition:transform .65s var(--ease);position:relative;transform-style:preserve-3d}.door svg{width:100%;height:100%;display:block}.door-sign{position:absolute;left:30%;top:39%;width:53%;padding:10% 0;text-align:center;border:2px solid #a86c3f;border-radius:10px;background:#ffe3a8;color:#734629;font-size:clamp(9px,1.15vw,16px);font-weight:800;box-shadow:0 4px 0 #c2834b;backface-visibility:hidden;opacity:0;transition:opacity .3s}.door-sign span{display:block;font-size:10px;margin-top:5px;color:#cb6043}
.actor{position:absolute;z-index:4;width:24%;top:43%;transition:transform .95s var(--ease),opacity .4s;transform-origin:50% 75%}.actor-rabbit{left:15%}.actor-lion{right:15%;top:50%}.character{width:100%;padding:0;display:flex;flex-direction:column;align-items:center;position:relative}.character img{width:100%;height:auto;display:block;filter:drop-shadow(0 6px 1px #69402212);transition:transform .28s var(--ease);pointer-events:none}.character:not(:disabled):hover img{transform:translateY(-8px) rotate(-3deg)}.choose-label{display:flex;align-items:center;justify-content:center;gap:14px;background:#ff8059;color:#593421;box-shadow:0 4px 0 #c66644;border:2px solid #fff6e1;border-radius:30px;font-size:clamp(12px,1.4vw,19px);font-weight:800;padding:8px 20px;white-space:nowrap;transition:opacity .25s}.choose-label span{font-size:.8em}.cheer-bubble{position:absolute;z-index:1;top:-11%;left:12%;background:#fff3cc;color:#75472c;border:2px solid #bd8961;box-shadow:3px 3px 0 #a7714230;border-radius:22px;padding:8px 16px;font-size:clamp(11px,1.2vw,17px);font-weight:800;opacity:0;transform:translateY(10px) rotate(-6deg);transition:opacity .3s,transform .3s;white-space:nowrap}.cheer-bubble:after{content:"";width:10px;height:10px;background:#fff3cc;position:absolute;bottom:-6px;left:30%;transform:rotate(45deg);border-bottom:2px solid #bd8961;border-right:2px solid #bd8961}
.flush-station{position:absolute;z-index:7;right:2%;top:72%;width:15%;}.flush-button{width:100%;position:relative;padding:0;display:flex;flex-direction:column;align-items:center}.flush-button img{width:100%;height:auto;pointer-events:none;transform-origin:42% 46%;transition:transform .45s var(--ease)}.flush-button:not(:disabled):hover img{transform:rotate(8deg)}.handle-arrow{position:absolute;right:-1%;top:13%;font-size:clamp(25px,4vw,56px);color:#dd6141;transition:opacity .3s}.flush-label{background:#ff8059;color:#593421;border:2px solid #fff6e1;border-radius:30px;padding:7px 15px;font-size:clamp(12px,1.3vw,19px);font-weight:800;white-space:nowrap;box-shadow:0 4px 0 #c66644}.flush-button:disabled .handle-arrow{opacity:.25}.flush-button:disabled .flush-label{background:#f3c8a7;color:#694529;box-shadow:0 3px 0 #cda284}
.water-rings{position:absolute;z-index:6;left:43%;top:65%;width:14%;height:9%;opacity:0;pointer-events:none}.water-rings span{position:absolute;inset:0;border:3px solid #8dc9d6;border-left-color:transparent;border-right-color:transparent;border-radius:50%}.water-rings span:nth-child(2){inset:13%;animation-delay:.13s!important}.water-rings span:nth-child(3){inset:28%;animation-delay:.26s!important}.success{position:absolute;z-index:9;top:12%;left:50%;transform:translate(-50%,20px) scale(.8);opacity:0;pointer-events:none;min-width:250px;text-align:center;color:#714327;background:#fff3cf;border:2px solid #eabb72;border-radius:20px;padding:14px 24px;box-shadow:0 6px 0 #e5b57b80;transition:transform .6s var(--ease),opacity .3s}.success strong{font-family:"Arial Rounded MT Bold","Trebuchet MS",sans-serif;font-size:clamp(21px,3vw,40px);letter-spacing:-.04em}.success strong span{color:#46786d}.success small{display:block;margin-top:5px;font-size:12px;font-weight:700}.success i{position:absolute;color:#eeb442;font-style:normal;font-size:30px;top:0;left:-20%}.success i:nth-last-child(2){left:auto;right:-18%;top:55%}.success i:last-child{left:21%;top:-42%;font-size:18px}
.stage[data-phase=entering][data-guest=rabbit] .actor-rabbit,.stage[data-phase=closing][data-guest=rabbit] .actor-rabbit,.stage[data-phase=waiting][data-guest=rabbit] .actor-rabbit,.stage[data-phase=flushing][data-guest=rabbit] .actor-rabbit{transform:translate(104%,-15%) scale(.5)}
.stage[data-phase=entering][data-guest=lion] .actor-lion,.stage[data-phase=closing][data-guest=lion] .actor-lion,.stage[data-phase=waiting][data-guest=lion] .actor-lion,.stage[data-phase=flushing][data-guest=lion] .actor-lion{transform:translate(-104%,-26%) scale(.5)}
.stage[data-phase=closing] .door,.stage[data-phase=waiting] .door,.stage[data-phase=flushing] .door{transform:rotateY(0)}
.stage[data-phase=waiting] .door-sign,.stage[data-phase=flushing] .door-sign{opacity:1}
.stage[data-phase=waiting][data-guest=rabbit] .actor-rabbit,.stage[data-phase=flushing][data-guest=rabbit] .actor-rabbit,.stage[data-phase=waiting][data-guest=lion] .actor-lion,.stage[data-phase=flushing][data-guest=lion] .actor-lion{opacity:0;pointer-events:none}
.stage:not([data-phase=idle]):not([data-phase=complete]) .choose-label{opacity:0}
.stage[data-phase=waiting][data-guest=rabbit] .actor-lion .cheer-bubble,.stage[data-phase=waiting][data-guest=lion] .actor-rabbit .cheer-bubble{opacity:1;transform:translateY(0) rotate(-6deg)}
.stage[data-phase=waiting][data-guest=rabbit] .actor-lion img,.stage[data-phase=waiting][data-guest=lion] .actor-rabbit img{animation:cheer .8s var(--ease) 5}
.stage[data-phase=flushing] .flush-button img{transform:rotate(30deg)}
.stage[data-phase=flushing] .water-rings{opacity:1}.stage[data-phase=flushing] .water-rings span{animation:swirl .55s ease-in-out infinite}
.stage[data-phase=returning] .actor{opacity:1}.stage[data-phase=complete] .success{opacity:1;transform:translate(-50%,0) scale(1)}.stage[data-phase=complete] .actor img{animation:celebrate .6s var(--ease) 6}.stage[data-phase=complete] .success i{animation:spark .65s ease-in-out 5 alternate}
.status-area{position:relative;text-align:center;padding:18px 20px 0;min-height:136px}.status-area>p:first-child{font-size:clamp(15px,1.65vw,21px);font-weight:750;letter-spacing:.02em}.audio-note{font-size:11px;color:var(--muted);margin-top:7px}.audio-note:empty{display:none}.steps{margin:17px 0 0;padding:0;list-style:none;display:flex;align-items:center;justify-content:center;gap:33px;color:var(--muted);font-size:12px}.steps li{display:flex;gap:7px;align-items:center}.steps span{font-size:10px;font-family:Consolas,monospace;color:var(--muted)}.steps li[aria-current=step]{color:var(--coral);font-weight:800}.reset{font-size:12px;text-decoration:underline;text-underline-offset:5px;margin-top:18px;padding:6px 12px;min-height:36px}.reset:hover{color:var(--coral)}
.section{max-width:1120px;margin:auto;padding:85px 45px}.section-kicker{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--muted);padding-bottom:20px;border-top:1px solid var(--line);padding-top:20px}.how-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin:20px 0 46px}.section h2{font-size:clamp(35px,4.1vw,61px);line-height:1.4;letter-spacing:-.06em;font-weight:800}.section h2 span{color:var(--coral)}.how-heading>p{font-size:13px;line-height:2;color:var(--muted);margin-bottom:9px}.how-lines article{padding:25px 0;display:grid;grid-template-columns:60px 1fr 1.3fr;align-items:center;gap:24px;border-top:1px solid var(--line)}.how-lines article>span{font-family:Consolas,monospace;font-size:13px;color:var(--coral)}.how-lines h3{font-size:19px}.how-lines p{font-size:13px;color:var(--muted);line-height:1.9}.friends{text-align:center;padding-top:45px}.friend-pictures{display:flex;align-items:center;justify-content:center;gap:30px;max-width:480px;margin:25px auto 35px}.friend-pictures img{width:40%;height:auto}.friend-pictures span{font-size:26px;color:var(--coral)}.friends p{font-size:13px;line-height:2;color:var(--muted);margin-top:24px}.back-to-play{display:inline-flex;gap:30px;padding:16px 23px;border:1px solid var(--line);border-radius:30px;margin-top:30px;font-size:12px;font-weight:700}.back-to-play:hover{background:var(--soft);color:var(--coral)}footer{max-width:1230px;margin:20px auto 0;padding:28px 36px;border-top:1px solid var(--line);display:flex;gap:20px;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted)}footer>span{font-size:9px;letter-spacing:.12em}footer a:last-child:hover{color:var(--coral)}
.lamp-glow{position:absolute;right:20%;top:28%;width:13%;height:28%;background:radial-gradient(ellipse at top,#ffcf7390,transparent 69%);opacity:0;pointer-events:none;z-index:2}:root[data-theme=night] .room{filter:brightness(.68) saturate(.82)}:root[data-theme=night] .lamp-glow{opacity:1}:root[data-theme=night] .wordmark{color:#ff9d77}:root[data-theme=night] .wordmark g{stroke:#232d35}
@keyframes cheer{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-10px) rotate(-4deg)}}@keyframes celebrate{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-14px) rotate(4deg)}}@keyframes swirl{0%{transform:scale(.65) rotate(0);opacity:.4}50%{opacity:1}100%{transform:scale(1.05) rotate(180deg);opacity:.2}}@keyframes spark{to{transform:translateY(-12px) rotate(20deg)}}
html.reduced{scroll-behavior:auto}.reduced *, .reduced *:before,.reduced *:after{animation:none!important;transition:none!important}
@media(max-width:780px){.header{padding:0 24px;gap:14px}.header nav{gap:20px;font-size:12px}.tools{gap:7px}.theme-toggle{font-size:10px}.icon-button{width:36px;height:36px}.hero{padding-top:24px}.title-wrap{padding:0 30px}.stage-wrap{padding:0 6px;margin-top:20px}.actor-rabbit{left:11%}.actor-lion{right:12%}.actor{width:27%}.flush-station{width:17%;right:1%}.choose-label{padding:7px 15px}.how-lines article{grid-template-columns:30px 1fr;gap:12px}.how-lines p{grid-column:2}.section{padding:65px 27px}.how-heading{display:block}.how-heading>p{margin-top:18px}.steps{gap:25px}}
@media(max-width:500px){.header{height:68px;padding:0 18px;gap:10px}.brand{font-size:23px}.header nav{display:none}.tools{margin-left:auto;gap:8px}.theme-toggle span:last-child{display:none}.theme-toggle{padding:0 5px}.icon-button{width:36px;height:36px}.hero{padding:24px 0 36px}.title-wrap{padding:0 22px}.tagline{margin-top:0;font-size:17px;letter-spacing:.015em}.tagline span{margin-left:10px}.stage-wrap{overflow:hidden;padding:0;margin-top:20px}.stage{width:148%;margin-left:-24%}.actor{width:24%;top:45%}.actor-rabbit{left:19%}.actor-lion{right:19%;top:50%}.choose-label{font-size:12px;padding:7px 13px;gap:8px}.flush-station{right:15%;top:76%;width:15%;z-index:7}.flush-label{font-size:12px;padding:6px 11px}.handle-arrow{font-size:32px}.door-sign{font-size:10px}.cheer-bubble{font-size:11px;padding:6px 9px;left:0;top:-16%}.success{top:13%;padding:9px 16px;min-width:200px}.success strong{font-size:24px}.success small{font-size:10px}.stage[data-phase=entering][data-guest=rabbit] .actor-rabbit,.stage[data-phase=closing][data-guest=rabbit] .actor-rabbit,.stage[data-phase=waiting][data-guest=rabbit] .actor-rabbit,.stage[data-phase=flushing][data-guest=rabbit] .actor-rabbit{transform:translate(90%,-15%) scale(.5)}.stage[data-phase=entering][data-guest=lion] .actor-lion,.stage[data-phase=closing][data-guest=lion] .actor-lion,.stage[data-phase=waiting][data-guest=lion] .actor-lion,.stage[data-phase=flushing][data-guest=lion] .actor-lion{transform:translate(-90%,-26%) scale(.5)}.status-area{padding-top:14px;min-height:142px}.status-area>p:first-child{font-size:15px}.steps{font-size:11px;gap:18px}.steps span{font-size:9px}.section{padding:48px 24px}.section h2{font-size:35px}.how-lines h3{font-size:17px}.how-lines p{font-size:12px}.section-kicker{font-size:9px}.friend-pictures{gap:20px;margin-bottom:25px}.friends p{font-size:12px}footer{padding:25px 24px;flex-wrap:wrap}footer .brand{font-size:22px}footer>span{font-size:8px}footer a:last-child{width:100%;font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:500px){.stage-wrap{overflow:clip;padding-bottom:100px}.actor-lion{right:17%;width:22%}.flush-station{right:20%;top:98%}.status-area{min-height:112px}}