:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:#edead8;background:#16201c;color-scheme:dark}*{box-sizing:border-box}body{margin:0;min-width:280px;background:radial-gradient(ellipse at 50% 20%,#34443955,transparent 65%),#16201c}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,a:focus-visible,.video-picker:focus-within{outline:3px solid #debe77;outline-offset:4px}.intro-header{max-width:1240px;margin:auto;padding:28px 38px;display:flex;align-items:center;justify-content:space-between;gap:20px}.intro-brand{display:flex;align-items:center;gap:11px;font-size:15px;font-weight:600}.intro-brand img{border-radius:11px}.intro-brand small{display:block;font-size:9px;font-weight:400;color:#909f8e;letter-spacing:.08em;margin-top:4px}.chapter-label{font-size:10px;color:#8c9c87;letter-spacing:.16em;display:flex;align-items:center;gap:10px}.chapter-label i{height:1px;width:24px;background:#74846966}#intro-skip{border:1px solid #6e7c635c;background:#33403040;color:#b2bd9e;border-radius:30px;padding:10px 15px;font-size:11px;display:flex;align-items:center;gap:15px}#intro-skip:hover{background:#4b5c4444}.intro-main{max-width:1164px;margin:auto;padding:0 22px}.cinema{position:relative;isolation:isolate;aspect-ratio:1.92;min-height:440px;max-height:720px;overflow:hidden;border-radius:17px;background:#080b0a;box-shadow:0 20px 60px #050c0755;border:1px solid #89957430;perspective:900px}.school-scene,.school-media,.school-vignette,.rift-scene,.black-scene,.chocolate-scene,.new-world,.film-grain{position:absolute;inset:0;width:100%;height:100%}.school-scene{transform-origin:50% 50%;transition:opacity .5s,filter .5s}.school-media{object-fit:cover;object-position:50% 40%;animation:school-pan 3.4s ease-out both;filter:brightness(.85) saturate(.75)}.school-vignette{background:linear-gradient(90deg,#0c161d8c,transparent 68%),linear-gradient(0deg,#08120ee6,transparent 24%,transparent 80%,#0a141444)}.scene-title{position:absolute;left:8%;top:27%;text-shadow:0 2px 24px #0c1216}.scene-title>span{display:block;letter-spacing:.16em;font-size:12px;color:#e1e7d0b3;margin-bottom:15px}.scene-title h1{font-weight:500;letter-spacing:.04em;font-size:clamp(32px,4.5vw,58px);line-height:1.42;margin:0;color:#f3f0dc}.rift-scene{opacity:0;pointer-events:none;display:grid;place-items:center}.rift{height:115%;width:26%;position:relative;z-index:2;fill:#e6f4dc;filter:drop-shadow(0 0 15px #c9f3ce);transform:scaleX(.01)}.rift-core{fill:#ffffff}.rift-halo{position:absolute;width:60%;height:100%;border-radius:50%;background:radial-gradient(ellipse,#ddffd779,transparent 63%);filter:blur(18px);opacity:.5}.rift-dust{position:absolute;font-size:18px;color:#edffe0;text-shadow:0 0 14px #dcffc6}.dust-one{top:22%;left:40%}.dust-two{top:63%;right:37%;font-size:26px}.dust-three{top:79%;left:45%;font-size:13px}.black-scene{background:#070a08;opacity:0;pointer-events:none}.chocolate-scene{opacity:0;pointer-events:none}.chocolate-drip{position:absolute;inset:-20% 0 0;background:linear-gradient(100deg,#4e2d20,#815332 38%,#4b2d24 72%,#875e38);transform:translateY(-120%);box-shadow:0 12px 18px #08090555;border-bottom:10px solid #45251f;border-radius:0 0 12% 8%}.chocolate-drip span{position:absolute;top:calc(100% - 8px);width:18%;height:80px;border-radius:0 0 65% 55%;background:inherit;border-bottom:8px solid #45251f}.chocolate-drip span:nth-child(1){left:0;height:55px}.chocolate-drip span:nth-child(2){left:16%;height:105px}.chocolate-drip span:nth-child(3){left:32%;height:72px}.chocolate-drip span:nth-child(4){left:49%;height:125px}.chocolate-drip span:nth-child(5){left:65%;height:60px}.chocolate-drip span:nth-child(6){right:0;height:99px}.new-world{background:linear-gradient(#322c1855,#1529188c),url('/games/assets/chocolate-clearing.png') center/cover;opacity:0;transition:opacity 1.1s}.film-grain{pointer-events:none;z-index:12;opacity:.12;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#28322718 4px,#28322718 5px);box-shadow:inset 0 0 95px 26px #040a05b3}.film-caption{position:absolute;bottom:35px;left:10%;right:10%;display:flex;align-items:center;gap:18px;justify-content:center;z-index:13;pointer-events:none}.film-caption p{font-size:13px;line-height:1.7;color:#ece8d0;letter-spacing:.12em;margin:0;text-align:center;text-shadow:0 1px 7px #000}.caption-line{width:32px;height:1px;background:#d3d7b768}.timeline{position:absolute;bottom:0;left:0;right:0;height:3px;background:#edf4c411;z-index:14}.timeline>span{display:block;height:100%;width:0;background:#d9d4a58c;transition:width .15s linear}.name-panel{position:absolute;z-index:15;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,calc(100% - 36px));background:#fffbeb;border:1px solid #d2bc80;border-radius:17px;color:#56492e;padding:26px 30px 18px;box-shadow:0 18px 50px #121d1180,inset 0 0 0 5px #e8dec021}.name-panel:before,.name-panel:after{content:"";position:absolute;top:-34px;width:2px;height:40px;background:#bda57c;left:28px;box-shadow:1px 0 #725d3e}.name-panel:after{left:auto;right:28px}.name-eyebrow{display:block;font-size:9px;letter-spacing:.13em;color:#a59166;margin-bottom:13px}.name-decoration{position:absolute;right:28px;top:23px;color:#c8b371;font-size:25px}.name-panel h2{font-size:26px;line-height:1.45;font-weight:600;letter-spacing:.02em;margin:0 0 12px}.name-panel>p{font-size:11px;color:#9c9178;line-height:1.8;margin:0 0 20px}.name-panel label{display:flex;justify-content:space-between;color:#7a6f53;font-size:11px;margin-bottom:8px}.name-panel label small{font-size:10px;color:#b0a286}#intro-name{color-scheme:light;width:100%;background:#fffef9;border:1px solid #dcd1b3;height:45px;border-radius:8px;color:#5a5039;padding:0 12px;font-size:14px}#intro-name::placeholder{color:#b6ac92;font-size:12px}#intro-name[aria-invalid=true]{border-color:#b76b53}.name-error{font-size:11px;color:#ab674a;line-height:1.6;margin:7px 0 0}#intro-start{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:45px;border:1px solid #6b7e4c;background:#7c8e58;color:#fffbea;border-radius:9px;padding:11px 13px;font-size:12px;margin-top:15px}#intro-start:hover{background:#687f48}.save-note{font-size:9px;line-height:1.6;color:#afa386;margin:9px 0 0;min-height:15px}.replay-button{display:block;margin:13px auto 0;background:none;border:0;color:#b0a283;font-size:10px;padding:5px 10px}.intro-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 5px 0}.intro-bottom>div:first-child>span{display:block;font-size:11px;color:#a5b39b}.intro-bottom small{display:block;font-size:10px;color:#677b65;margin-top:6px}.intro-actions{display:flex;align-items:center;gap:10px}.intro-actions button,.video-picker{border:1px solid #5b6c526b;background:#32442c22;border-radius:8px;padding:9px 12px;font-size:10px;color:#a5b594;white-space:nowrap}.video-picker{position:relative;overflow:hidden;cursor:pointer;display:flex;gap:12px;align-items:center}.video-picker input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;font-size:0}.video-note{font-size:10px;color:#6b7e65;line-height:1.8;margin:12px 5px}.intro-footer{max-width:1120px;padding:19px 4px 25px;border-top:1px solid #596b4f29;margin:28px auto 0;font-size:10px;color:#65775d;display:flex;justify-content:space-between}.intro-footer>span{color:#8a987a;letter-spacing:.06em}.no-script{font-size:13px;color:#b4c49f}.no-script a{text-decoration:underline}
body[data-phase=flip] .school-scene{animation:school-flip 1.7s ease-in both}body[data-phase=flip] .scene-title,body[data-phase=rift] .scene-title,body[data-phase=pull] .scene-title{opacity:0;transition:opacity .3s}body[data-phase=rift] .school-scene{transform:rotateX(16deg) rotate(-3deg) scale(1.14);filter:brightness(.55)}body[data-phase=rift] .rift-scene,body[data-phase=pull] .rift-scene{opacity:1}body[data-phase=rift] .rift{animation:rift-open 1.8s ease-in both}body[data-phase=rift] .rift-dust{animation:dust-drift 1.8s ease-out both}body[data-phase=pull] .school-scene{animation:world-pull 1.4s ease-in both}body[data-phase=pull] .rift{animation:rift-pull 1.4s ease-in both}body[data-phase=pull] .rift-halo{opacity:1;transform:scale(2);transition:all 1s}body[data-phase=black] .black-scene,body[data-phase=chocolate] .black-scene,body[data-phase=name] .black-scene{opacity:1}body[data-phase=chocolate] .chocolate-scene{opacity:1}body[data-phase=chocolate] .chocolate-drip{animation:chocolate-pour 2s cubic-bezier(.22,.64,.4,1) both}body[data-phase=name] .new-world{opacity:1}body[data-phase=name] .film-caption{opacity:0}body[data-phase=name] #intro-skip{visibility:hidden}body[data-phase=name] #intro-pause{display:none}body[data-phase=name] .school-scene{opacity:0}body[data-paused=true] .cinema *,body[data-paused=true] .cinema *:before,body[data-paused=true] .cinema *:after{animation-play-state:paused!important;transition:none!important}
@keyframes school-pan{from{transform:scale(1.05) translateY(0)}to{transform:scale(1.13) translateY(-2%)}}@keyframes school-flip{0%{transform:rotate(0) scale(1)}12%{transform:rotate(1deg) translateX(-3px)}25%{transform:rotate(-1deg) translateX(3px)}38%{transform:rotate(1deg) translateX(-4px)}55%{transform:rotateX(-6deg) rotate(-1deg) scale(1.04)}100%{transform:rotateX(16deg) rotate(-3deg) scale(1.14)}}@keyframes rift-open{from{transform:scaleX(.015);filter:drop-shadow(0 0 4px #bfe8a5)}to{transform:scaleX(1.5);filter:drop-shadow(0 0 24px #f1ffbf)}}@keyframes rift-pull{from{transform:scaleX(1.5);opacity:1}to{transform:scale(10,2);opacity:0}}@keyframes world-pull{from{transform:rotateX(16deg) rotate(-3deg) scale(1.14);opacity:.7}to{transform:rotate(13deg) scale(3.5);opacity:0;filter:blur(15px)}}@keyframes dust-drift{from{transform:translateY(15px) scale(.5);opacity:0}to{transform:translateY(-20px) scale(1);opacity:1}}@keyframes chocolate-pour{from{transform:translateY(-120%)}to{transform:translateY(0)}}
@media(max-width:700px){.intro-header{padding:20px;gap:10px}.intro-brand{font-size:13px;gap:8px}.intro-brand img{width:34px;height:34px}.chapter-label{display:none}#intro-skip{font-size:10px;padding:9px 11px;gap:9px}.intro-main{padding:0 13px}.cinema{aspect-ratio:auto;min-height:500px;height:70svh;max-height:730px;border-radius:14px}.school-media{object-position:48% center}.scene-title{left:9%;top:31%}.scene-title>span{font-size:10px}.scene-title h1{font-size:36px}.rift{width:65%}.film-caption{left:6%;right:6%;bottom:35px;gap:9px}.film-caption p{font-size:11px}.caption-line{width:18px;flex-shrink:0}.name-panel{width:calc(100% - 40px);max-width:380px;padding:26px 25px 18px}.name-panel h2{font-size:25px}.intro-bottom{padding:17px 4px 0;gap:10px}.intro-bottom>div:first-child>span{font-size:10px}.intro-bottom small{font-size:9px}.intro-actions{gap:6px}.intro-actions button,.video-picker{padding:8px 9px;font-size:9px}.video-picker{gap:5px}.video-note{font-size:9px}.intro-footer{margin:24px 18px 0;padding-top:17px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.cinema *,.cinema *:before,.cinema *:after{animation:none!important;transition:none!important}}body[data-reduced=true] .cinema *{animation:none!important;transition:none!important}