:root{--bg:#091d14;--fg:#edffdf;--accent:#d1ff43;--phase:0;--pulse:0;--enter:1;--exit:1}
/* Use a fixed top-left origin; JS calculates the scaled composition's position. */
html body{display:block;position:relative}
body .stage{color:var(--fg);position:fixed;left:0;top:0;transform-origin:0 0}
.audio-status{position:fixed;left:12px;right:12px;bottom:100px;z-index:30;text-align:center;color:#eff8e1;font:12px/1.6 sans-serif;pointer-events:none}
.embedded .audio-status{display:none}
.embedded.audio-gesture-required .player-controls{display:flex;width:auto}
.embedded.audio-gesture-required .player-controls>:not(#sound){display:none}
.embedded.audio-gesture-required .audio-status{display:block}
.player-controls button:disabled{opacity:.55;cursor:wait}
body .player-controls button{min-width:44px;min-height:44px;touch-action:manipulation}
.scene-art{will-change:transform}
.scene.active .scene-art{transform:translateX(calc((1 - var(--enter))*240px)) translateY(calc(var(--swing)*9px)) rotate(calc((1 - var(--enter))*18deg + var(--swing)*1.5deg)) scale(calc(.93 + var(--enter)*.07 + var(--pulse)*.065 + var(--impact)*.1))}
.scene.active .intro-mark{transform:scale(calc(.3 + var(--enter)*.7 + var(--pulse)*.07)) rotate(calc(-12deg + var(--phase)*25deg));box-shadow:28px 28px 0 #b79af44a,0 0 100px #d1ff4330}
.scene.active .giant-spark{font-size:175px;transform:rotate(calc(var(--phase)*180deg)) scale(calc(1 + var(--pulse)*.18));text-shadow:12px 12px 0 #b79af466}
.scene.active .voice-core{box-shadow:0 0 85px #b79af44a;transform:rotate(calc(-8deg + var(--swing)*5deg)) scale(calc(1 + var(--pulse)*.1))}
.scene.active .final-mark{transform:scale(calc(.8 + var(--enter)*.2 + var(--pulse)*.035));text-shadow:0 0 75px #d1ff431a}
@media(prefers-reduced-motion:reduce){.scene.active .scene-art{transform:none}.scene.active .intro-mark,.scene.active .voice-core,.scene.active .final-mark,.scene.active .giant-spark{transform:none}}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#071b11;color:var(--fg);font-family:Inter,"Noto Sans KR",Arial,sans-serif}body{display:grid;place-items:center}.stage{position:absolute;width:1600px;height:900px;overflow:hidden;background:var(--bg);transform-origin:center;isolation:isolate}.stage canvas{position:absolute;inset:0;z-index:0}.frame-top,.frame-bottom{position:absolute;left:55px;right:55px;display:flex;justify-content:space-between;align-items:center;z-index:10;font:12px ui-monospace,monospace;letter-spacing:.07em}.frame-top{top:34px}.frame-bottom{bottom:30px}.frame-top span:nth-child(2){opacity:.6}.film-border{position:absolute;inset:15px;border:1px solid currentColor;opacity:.1;pointer-events:none;z-index:10}.scene{position:absolute;inset:0;display:none;z-index:2}.scene.active{display:block}.scene-copy{position:absolute;left:65px;top:165px;width:800px;transform:translateY(calc((1 - var(--enter))*90px));opacity:var(--enter)}.kicker{font:13px ui-monospace,monospace;letter-spacing:.15em}.scene h1{font-size:104px;font-weight:900;letter-spacing:-.065em;line-height:.91;margin:28px 0 38px}.scene h2{font-size:58px;line-height:1.03;letter-spacing:-.05em;font-weight:800;margin:0}.scene h2 span{color:var(--accent)}.scene p{font-size:22px;line-height:1.7;letter-spacing:-.045em;margin:26px 0 0;font-weight:500}.keywords{margin-top:46px;display:flex;align-items:center;gap:22px;font:13px ui-monospace,monospace;letter-spacing:.08em}.keywords b{font:35px Inter,sans-serif;color:var(--accent)}.scene-art{position:absolute;right:40px;top:165px;width:660px;height:590px;transform:translateX(calc((1 - var(--enter))*200px)) rotate(calc((1 - var(--enter))*14deg));opacity:var(--enter);perspective:1100px}.intro-mark{position:absolute;left:635px;top:110px;width:330px;height:330px;border-radius:80px;display:grid;place-items:center;background:var(--accent);color:var(--bg);font-size:240px;font-style:italic;font-weight:900;transform:scale(calc(.3 + var(--enter)*.7)) rotate(calc(-12deg + var(--phase)*25deg));box-shadow:25px 25px 0 #b79af42e}.mark-star{position:absolute;right:-100px;top:-20px;font-size:160px;color:#b79af4}.intro-title{position:absolute;top:505px;left:65px;right:65px;text-align:center;font-size:100px;font-weight:900;letter-spacing:-.065em;line-height:1}.intro-title span{display:block;transform:translateY(calc((1 - var(--enter))*100px))}.outline{-webkit-text-stroke:2px var(--fg);color:transparent}.intro-note{position:absolute;bottom:100px;width:100%;text-align:center;font-size:20px}.orbit{position:absolute;inset:20px;border:2px solid currentColor;opacity:.3;border-radius:50%;transform:rotate(-25deg)}.chat-card{position:absolute;display:flex;align-items:center;gap:22px;border-radius:25px;padding:35px;background:#f0f7df;color:#133623;box-shadow:20px 22px 0 #1439232b;width:540px;transform:rotate(-9deg) translateX(calc(var(--pulse)*-10px))}.card-a{top:55px;left:20px}.card-b{top:290px;left:90px;background:#143923;color:#edffdf;transform:rotate(9deg) translateX(calc(var(--pulse)*10px))}.chat-card small{font:12px ui-monospace,monospace;display:block;margin-bottom:15px}.chat-card strong{font-size:28px;letter-spacing:-.05em}.avatar{font-size:66px}.check{font-size:40px;margin-left:auto}.chat-connector{position:absolute;top:210px;left:270px;font-size:100px}.message-button{display:block;background:#d1ff43;color:#133623;border-radius:30px;padding:13px 20px;font-size:12px;font-weight:700;margin-top:24px}.giant-spark{position:absolute;right:8px;bottom:15px;font-size:140px;transform:rotate(calc(var(--phase)*120deg))}.globe{position:absolute;width:410px;height:410px;border:2px solid currentColor;opacity:.6;border-radius:50%;right:25px;top:10px;transform:rotate(calc(-18deg + var(--phase)*30deg))}.globe span{position:absolute;inset:0 90px;border:2px solid currentColor;border-radius:50%}.globe span:nth-child(2){inset:0 150px}.globe span:nth-child(3){inset:100px 0}.globe span:nth-child(4){inset:160px 0}.flight-path{position:absolute;inset:0;color:var(--accent)}.flight-path svg{width:100%}.plane{position:absolute;right:105px;top:110px;font-size:145px;transform:translateY(calc(var(--pulse)*-25px))}.fare-ticket{position:absolute;top:295px;left:25px;width:600px;border-radius:20px;background:#edffdf;color:#173323;transform:rotate(-8deg);box-shadow:12px 15px 0 #17332344;padding:28px}.fare-ticket small{font:11px ui-monospace,monospace}.fare-ticket div{display:flex;align-items:center;justify-content:space-between;margin:28px 0;font-size:33px}.fare-ticket div strong:last-child{font-size:29px}.fare-ticket footer{border-top:2px dashed #17332355;padding-top:20px;display:flex;justify-content:space-between;font:12px ui-monospace,monospace}.inbox-note{position:absolute;left:40px;top:55px;padding:20px 28px;border-radius:40px;background:var(--accent);color:var(--bg);font:15px ui-monospace,monospace;transform:rotate(-8deg)}.review-card{position:absolute;width:320px;background:#eff8e1;color:#153424;border-radius:25px;padding:30px;box-shadow:16px 18px 0 #14291b25}.review-one{left:5px;top:10px;transform:rotate(-14deg) translateY(calc(var(--pulse)*-15px))}.review-two{right:15px;top:55px;transform:rotate(12deg) translateY(calc(var(--pulse)*15px))}.review-card small{font:10px ui-monospace,monospace}.stars{display:block;font-size:35px;letter-spacing:2px;margin:24px 0}.review-card strong{font-size:30px;letter-spacing:-.05em}.lines{height:30px;margin-top:20px;background:repeating-linear-gradient(to bottom,#91ad7d 0 5px,transparent 5px 13px);border-radius:4px;width:85%}.review-three{left:140px;top:265px;background:#102f20;color:#eff8e1;transform:rotate(-4deg) scale(calc(1 + var(--pulse)*.035));width:370px}.review-three strong{display:block;font-size:66px;line-height:.98;margin:20px 0}.review-tags{display:flex;gap:10px;font:10px ui-monospace,monospace}.review-tags span{border:1px solid #eff8e150;border-radius:30px;padding:9px}.voice-ring{position:absolute;inset:40px 65px;border:3px solid #eff8e15c;border-radius:50%;transform:rotate(calc(var(--phase)*100deg)) scale(calc(1 + var(--pulse)*.05))}.ring-two{inset:5px 130px;transform:rotate(calc(-40deg - var(--phase)*120deg))}.voice-core{position:absolute;top:135px;left:215px;width:240px;height:240px;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--accent);color:#123221;border-radius:65px;font-size:155px;font-weight:900;font-style:italic;transform:rotate(-8deg) scale(calc(1 + var(--pulse)*.04))}.voice-core span{font:11px ui-monospace,monospace}.waveform{position:absolute;left:50px;right:50px;bottom:45px;display:flex;gap:8px;height:80px;align-items:center;justify-content:center}.waveform i{display:block;width:7px;background:var(--accent);border-radius:5px}.voice-tag{position:absolute;border-radius:30px;padding:17px 25px;background:#eff8e1;color:#173323;font:14px ui-monospace,monospace}.tag-one{top:45px;left:25px;transform:rotate(-10deg)}.tag-two{top:115px;right:15px;transform:rotate(10deg)}.tag-three{bottom:160px;left:15px;transform:rotate(-5deg)}.kanban{position:absolute;left:0;right:15px;top:180px;display:grid;grid-template-columns:repeat(3,1fr);gap:15px;transform:rotate(-7deg) rotateY(-12deg);padding:20px;background:#071b11;border-radius:25px;box-shadow:15px 20px 0 #091d1433}.kanban > div > small{display:block;font:12px ui-monospace,monospace;color:#edffdf;padding:13px 0}.kanban article{padding:20px;height:210px;background:#d1ff43;color:#102b1b;border-radius:13px;font:15px ui-monospace,monospace;transform:translateY(calc(var(--pulse)*-10px))}.kanban > div:nth-child(2) article{background:#f890ce;transform:translateY(calc(var(--pulse)*15px))}.kanban > div:nth-child(3) article{background:#edffdf}.kanban article strong{display:block;font:800 31px Inter,sans-serif;letter-spacing:-.05em;margin:40px 0 35px}.kanban article span{font-size:10px}.knowledge-card{position:absolute;left:65px;top:30px;width:450px;display:flex;gap:25px;align-items:center;border-radius:20px;padding:26px;background:#edffdf;color:#102b1b;font:15px ui-monospace,monospace;transform:rotate(9deg)}.knowledge-card span{font-size:44px}.loop-label{position:absolute;bottom:35px;left:45px;font:15px ui-monospace,monospace;transform:rotate(-5deg)}.studio .scene-copy{top:130px}.studio h1{font-size:94px;margin-bottom:25px}.studio h2{font-size:58px}.studio .keywords{margin-top:26px}.clapper{position:absolute;left:5px;top:10px;width:575px;background:#102b1b;color:#eff8e1;transform:rotate(-8deg);border-radius:20px;overflow:hidden;box-shadow:15px 16px 0 #102b1b30}.clapper > span{display:block;padding:20px 25px;border-top:23px solid transparent;border-image:repeating-linear-gradient(45deg,#102b1b 0 25px,#eff8e1 25px 50px) 23;font:14px ui-monospace,monospace}.clapper > div{font-size:28px;font-weight:800;padding:5px 25px 25px;letter-spacing:-.045em}.shot-stack{position:absolute;left:35px;right:30px;top:210px;height:260px}.shot{position:absolute;width:370px;height:230px;border:10px solid #eff8e1;border-radius:12px;overflow:hidden;background:#b79af4;box-shadow:10px 12px 0 #102b1b30}.shot > span{position:absolute;left:15px;top:15px;z-index:4;font:10px ui-monospace,monospace}.shot-a{left:0;top:-30px;transform:rotate(-16deg)}.shot-b{left:100px;top:15px;transform:rotate(2deg);background:#d1ff43}.shot-c{left:180px;top:65px;transform:rotate(14deg) translateY(calc(var(--pulse)*-15px));background:#f890ce}.shot-orb{width:150px;height:150px;border-radius:50%;background:#102b1b;position:absolute;right:30px;top:45px}.shot-mountain{position:absolute;bottom:-20px;left:40px;width:180px;height:180px;background:#102b1b;transform:rotate(45deg)}.shot i{position:absolute;inset:15px;border:1px solid #102b1b66}.shot i:last-child{inset:35px}.shot-sun{position:absolute;left:55px;top:50px;width:100px;height:100px;background:#d1ff43;border-radius:50%}.shot-grid{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 89px,#102b1b25 89px 90px),repeating-linear-gradient(0deg,transparent 0 59px,#102b1b25 59px 60px)}.shot strong{position:absolute;right:60px;top:72px;color:#102b1b;font-size:60px}.edit-track{position:absolute;bottom:-15px;left:25px;right:5px;display:flex;gap:7px;padding:15px;background:#102b1b;border-radius:12px;transform:rotate(-5deg)}.edit-track span{height:28px;flex:1;background:#d1ff43}.edit-track span:nth-child(even){background:#b79af4}.final-mark{position:absolute;top:155px;width:100%;text-align:center;font-size:260px;font-weight:900;font-style:italic;letter-spacing:-.075em;transform:scale(calc(.8 + var(--enter)*.2))}.final-mark > span{color:var(--accent);font-weight:500;margin-left:35px}.finale h2{position:absolute;left:110px;top:470px;font-size:75px;line-height:1.04}.finale h2 span{color:var(--accent)}.finale p{position:absolute;right:90px;bottom:200px;font:15px ui-monospace,monospace;letter-spacing:.06em}.final-url{position:absolute;right:90px;bottom:140px;font-size:30px;font-weight:700;letter-spacing:-.04em}.name-ribbons{position:absolute;top:100px;left:-100px;width:1800px;font-size:28px;font-weight:800;letter-spacing:-.025em;opacity:calc(1 - var(--phase)*2.8);transform:rotate(-9deg) translateX(calc(var(--phase)*-200px))}.name-ribbons span{display:block;background:#d1ff43;color:#102b1b;padding:12px;margin:12px 0}.name-ribbons span:nth-child(2){background:#b79af4;transform:translateX(250px)}#beat-strip{display:flex;align-items:center;height:15px;gap:4px}#beat-strip i{width:3px;background:currentColor}.player-controls{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:10px;padding:12px;background:#071b11e8;color:#eff8e1;border:1px solid #edffdf44;border-radius:16px;font:11px ui-monospace,monospace;box-shadow:0 8px 30px #0005}.player-controls button{border:1px solid #edffdf44;background:none;color:inherit;min-height:36px;min-width:36px;border-radius:8px;padding:6px 10px;cursor:pointer}.player-controls input{width:180px;accent-color:#d1ff43}.player-controls button:focus-visible,.player-controls input:focus-visible{outline:2px solid #d1ff43;outline-offset:3px}.embedded .player-controls{display:none}@media(max-width:600px){.player-controls{width:calc(100% - 20px);gap:7px}.player-controls input{flex:1;min-width:0}.player-controls > span{display:none}}