:root{--paper:#f1ead9;--ink:#493e32;--muted:#897961;--red:#974b3d}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'STKaiti','KaiTi','Noto Serif SC','Songti SC','SimSun',serif}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;user-select:none}
button:focus-visible,canvas:focus-visible{outline:2px solid var(--red);outline-offset:6px}
[hidden]{display:none!important}
main{position:relative;height:100svh;min-height:500px;overflow:hidden;background:var(--paper)}
main:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.04;z-index:20;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
.map-preview{position:absolute;inset:0;width:100%;height:100%;border:0;background:#f4efe4;opacity:0;z-index:1;pointer-events:none;transition:opacity 2.8s ease 1.7s}
.skip{position:absolute;right:4%;top:32px;border:0;border-bottom:1px solid #ad9a7a80;background:transparent;padding:8px 0;font-size:14px;letter-spacing:2px;z-index:30}
.skip span{margin-left:12px;color:var(--red)}
.music-toggle{position:absolute;left:4%;top:32px;z-index:30;border:0;border-bottom:1px solid #ad9a7a80;background:transparent;padding:8px 0;font-size:13px;letter-spacing:1px;color:var(--muted)}
.prologue{position:absolute;inset:0;display:flex;align-items:center;flex-direction:column;z-index:4;transition:opacity 2s}
.scene-backdrop{position:absolute;inset:0;background:url('myth-scene.png') center/100% 100% no-repeat;opacity:.84;filter:saturate(.7);pointer-events:none;transition:opacity 1.5s}
.cloud-drift{position:absolute;top:52%;width:clamp(180px,28vw,460px);height:auto;opacity:0;pointer-events:none}
.cloud-left{left:-4%;transform:translate(-10px,-4px) scale(1.02)}
.cloud-right{right:-4%;transform:translate(10px,-4px) scale(1.02)}
@keyframes cloudUnfurlLeft{from{opacity:0;transform:translate(8px,4px) scale(.97)}to{opacity:.22;transform:translate(-10px,-4px) scale(1.02)}}
@keyframes cloudUnfurlRight{from{opacity:0;transform:translate(-8px,4px) scale(.97)}to{opacity:.22;transform:translate(10px,-4px) scale(1.02)}}
[data-stage=bloom] .cloud-left{animation:cloudUnfurlLeft 1.2s ease-out both}
[data-stage=bloom] .cloud-right{animation:cloudUnfurlRight 1.2s ease-out both}
[data-stage=admire] .cloud-drift,[data-stage=ready] .cloud-drift{opacity:.22}
.opening{position:absolute;top:15%;margin:0;font-size:clamp(19px,2vw,28px);font-weight:400;letter-spacing:4px;transition:opacity .8s}
.prologue-intro{position:absolute;top:21%;left:6%;right:6%;margin:0;text-align:center;font-size:16px;line-height:1.9;letter-spacing:2px;color:#65513e;pointer-events:none;transition:opacity .6s}
main:not([data-stage=dust]) .prologue-intro{opacity:0}
.scene-copy{position:absolute;top:78%;left:8%;right:8%;margin:0;text-align:center;font-size:14px;line-height:1.9;letter-spacing:2px;color:#65513e;pointer-events:none}
.mirror-wrap{--mirror-size:min(38svh,340px);position:absolute;top:50%;width:var(--mirror-size);height:var(--mirror-size);margin-top:calc(var(--mirror-size) / -2);transform:scaleY(.88);transform-origin:center;transition:width 1.5s cubic-bezier(.4,0,.2,1),height 1.5s cubic-bezier(.4,0,.2,1),margin-top 1.5s cubic-bezier(.4,0,.2,1),transform 1.5s cubic-bezier(.4,0,.2,1),opacity 3s}
.mirror{position:absolute;inset:0;overflow:hidden;border-radius:50%;isolation:isolate;background:#8b9480;box-shadow:0 5px 9px #37291835,0 1px 2px #37291833;transition:box-shadow 1.3s}
.mirror:after{content:'';position:absolute;inset:8px;border:1px solid #e4d2a340;border-radius:50%;pointer-events:none;z-index:7;transition:opacity 2s}
.whole-mirror,.restored-pattern{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:saturate(.6);transition:opacity 1s}
.whole-mirror{opacity:.65;filter:saturate(.5) brightness(.94) blur(.65px)}
.restored-pattern{opacity:0}
.warm-rim{position:absolute;inset:-2px;border:1px solid #a58d60;border-radius:50%;box-shadow:0 0 18px #b09a6633;opacity:0;pointer-events:none;transition:opacity 1.5s}
.ink-aureole{position:absolute;inset:-20%;width:140%;height:140%;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity 1.2s,transform 1.8s}
.completion-wave{position:absolute;inset:-2px;border:1px solid #a58d60;border-radius:50%;opacity:0;pointer-events:none}
@keyframes mirrorBloom{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;user-select:none;transition:opacity .9s}
#dust{transition-duration:.45s;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='14' fill='none' stroke='%23f5efdf' stroke-width='1'/%3E%3Ccircle cx='18' cy='18' r='2' fill='%23f5efdf'/%3E%3C/svg%3E") 18 18,crosshair}
#patternInk{pointer-events:none;filter:drop-shadow(0 0 1px #a58d6040)}
.ritual{position:absolute;top:78%;z-index:9;text-align:center;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(6px);transition:opacity .8s,transform .8s,visibility .8s}
.ritual p{font-size:15px;letter-spacing:2px;margin:0 0 16px}
.seal-button{border:1px solid var(--red);background:var(--red);color:#f8efda;font-size:19px;padding:10px 28px;letter-spacing:7px;text-indent:7px;box-shadow:inset 0 0 0 3px var(--red),inset 0 0 0 4px #eddfbc6e}
.seal-button:hover{background:#804034}
.wipe-progress{position:absolute;bottom:10%;width:110px;height:1px;background:#b5a38760;pointer-events:none;transition:opacity .8s}
.wipe-progress span{display:block;width:0;height:1px;background:#627762;transition:width .2s}
[data-stage=pause] .opening,[data-stage=focusing] .opening,[data-stage=pattern] .opening,[data-stage=bloom] .opening,[data-stage=admire] .opening,[data-stage=ready] .opening,[data-stage=city] .opening{opacity:0}
[data-stage=focusing] .mirror-wrap,[data-stage=pattern] .mirror-wrap,[data-stage=bloom] .mirror-wrap,[data-stage=admire] .mirror-wrap,[data-stage=ready],[data-stage=city] .mirror-wrap{--mirror-size:min(52svh,78vw,520px);transform:none}
[data-stage=focusing] .mirror,[data-stage=pattern] .mirror,[data-stage=bloom] .mirror,[data-stage=admire] .mirror,[data-stage=ready] .mirror{box-shadow:0 10px 28px #493e3218}
[data-stage=pattern] .whole-mirror{opacity:.3}
[data-stage=pattern] .warm-rim,[data-stage=bloom] .warm-rim,[data-stage=admire] .warm-rim,[data-stage=ready] .warm-rim,[data-stage=city] .warm-rim{opacity:1}
[data-stage=focusing] .scene-backdrop,[data-stage=pattern] .scene-backdrop,[data-stage=bloom] .scene-backdrop,[data-stage=admire] .scene-backdrop,[data-stage=ready] .scene-backdrop{opacity:.24}
[data-stage=bloom] .restored-pattern,[data-stage=admire] .restored-pattern,[data-stage=ready] .restored-pattern,[data-stage=city] .restored-pattern{opacity:1;transition-duration:1.2s}
[data-stage=bloom] .completion-wave{animation:mirrorBloom 1.2s ease-out both}
[data-stage=bloom] .ink-aureole,[data-stage=admire] .ink-aureole{opacity:.22;transform:scale(1)}
[data-stage=ready] .ritual{opacity:1;visibility:visible;pointer-events:auto;transform:none}
main:not([data-stage=dust]) .wipe-progress{opacity:0}
[data-stage=city] .mirror-wrap{transform:scale(4.5);opacity:0;transition:transform 4.5s cubic-bezier(.4,0,.2,1),opacity 2.4s ease 1.8s}
[data-stage=city] .scene-backdrop{opacity:0;transition-duration:2.7s}
[data-stage=city] .map-preview{opacity:1}
[data-stage=city] .ritual{opacity:0;visibility:hidden;pointer-events:none}
[data-stage=city] .skip,[data-stage=city] .music-toggle{opacity:0;pointer-events:none}
@media(max-width:700px){
 .skip{top:24px;right:6%}.music-toggle{top:24px;left:6%;font-size:12px}.opening{top:15%;font-size:clamp(15px,4.1vw,19px);letter-spacing:2px}
 .prologue-intro{top:22%;font-size:13px;letter-spacing:.5px;line-height:1.9}
 .scene-copy{top:78%;font-size:13px;letter-spacing:1px}
 .mirror-wrap{--mirror-size:min(66vw,35svh,320px)}
 .ritual{top:80%}
 .cloud-drift{width:38vw;top:56%}.cloud-left{left:-8%}.cloud-right{right:-8%}
}
@media(max-width:700px) and (orientation:portrait){.scene-backdrop{background-image:url('myth-scene-mobile.png')}}
@media(max-height:700px) and (min-width:701px){main{min-height:480px}.opening{top:13%}.prologue-intro{top:21%;font-size:13px;line-height:1.8}.scene-copy{top:78%;font-size:13px}.mirror-wrap{--mirror-size:37svh}.ritual{top:80%}}
@media(prefers-reduced-motion:reduce){.mirror-wrap{transition-duration:.4s}.completion-wave{animation:none!important}.ink-aureole{transition:opacity 1.2s;transform:none}.cloud-drift{animation:none!important;transform:none!important;transition:none}}