*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111b17;font-family:'Malgun Gothic',sans-serif}button,select,a{font:inherit}button,a,select{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #f4c968;outline-offset:3px}#player{position:relative;width:100%;height:100dvh;overflow:hidden}#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--scale,1));transform-origin:center;overflow:hidden;background:#eee9df}#stage>.frame{position:absolute;inset:0;width:1920px;height:1080px;object-fit:contain;background:#eee9df}#stage>.incoming{z-index:2}.effect-fade{animation:fade .8s ease both}.effect-slide{animation:slide .8s cubic-bezier(.2,.7,.2,1) both}.effect-zoom{animation:zoom 1s ease both}.effect-wipe{animation:wipe .9s ease both}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes zoom{from{opacity:0;transform:scale(1.09)}to{opacity:1;transform:scale(1)}}@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}@media(prefers-reduced-motion:reduce){.incoming{animation:none!important}#progress i{transition:none!important}}
#loading{position:absolute;inset:40% 20%;display:grid;place-items:center;z-index:8;color:white;background:#17382eeb;text-align:center;padding:25px;border-radius:16px;pointer-events:none}#loading[hidden]{display:none}#controls{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:22px 28px 18px;background:linear-gradient(#102119eb,#102119fa);color:#fff;transition:opacity .3s;display:flex;align-items:center;gap:12px 24px;flex-wrap:wrap;box-shadow:0 -5px 35px #0004}#controls.sleep{opacity:0;pointer-events:none}#controls .back{font-size:14px}#playTitle{font-size:16px;flex:1}#controls .buttons{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}#controls button,#controls select,#controls .buttons>a{background:#ffffff13;color:white;border:1px solid #ffffff55;border-radius:5px;min-height:44px;padding:9px 15px;text-decoration:none}#controls select option{color:#142b22;background:white}#controls label{font-size:13px;display:flex;align-items:center;gap:8px}#controls #counter{min-width:65px;font-variant-numeric:tabular-nums;text-align:center}#dots{display:flex;gap:8px}#dots button{min-height:30px;width:32px;padding:4px;font-size:12px}#dots button[aria-current=true]{background:#f0d69f;color:#1e392d}#controls p{font-size:11px;opacity:.75;margin:0}#controls .playlist{margin-left:auto}#controls input{width:18px;height:18px;accent-color:#f0d69f}#progress{height:4px;position:absolute;bottom:0;left:0;right:0;background:#ffffff20;z-index:11}#progress i{display:block;width:100%;height:100%;background:#e5cba0;transform:scaleX(0);transform-origin:left}body.render #controls,body.render #progress,body.render #loading{display:none!important}body.render{background:white}
.design{width:1920px;height:1080px;position:absolute;inset:0;overflow:hidden;background:var(--paper);color:var(--ink);font-family:'Malgun Gothic',sans-serif}.design header{position:absolute;top:38px;left:80px;right:80px;display:flex;justify-content:space-between;align-items:center;height:48px;border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent);padding-bottom:20px}.logo{font-size:29px;letter-spacing:-1.5px;font-weight:900}.logo i{font-style:normal;color:var(--accent);margin-left:13px}.series{font-size:18px;letter-spacing:2px}.composition{position:absolute;top:125px;left:80px;right:80px;bottom:110px;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.copy{position:relative;z-index:3;min-width:0}.kicker{font-size:24px;letter-spacing:2px;margin:0 0 34px;font-weight:700;color:var(--accent)}h1{margin:0;font-size:98px;line-height:1.2;letter-spacing:-6px;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;max-width:100%}.body-copy{font-size:33px;line-height:1.7;word-break:keep-all;margin:38px 0 0;white-space:pre-line;max-width:850px}.tag{margin-top:42px;display:inline-block;border-top:2px solid var(--ink);padding-top:20px;font-size:25px;font-weight:700}.visual{margin:0;width:100%;height:100%;min-width:0;min-height:0;position:relative;overflow:hidden;z-index:1;background:var(--soft)}.visual img{width:100%;height:100%;object-fit:cover;display:block}.secondary{display:none}.number{position:absolute;font-size:260px;font-weight:900;line-height:1;color:var(--soft);z-index:0;pointer-events:none;left:0;bottom:0}.design footer{position:absolute;left:80px;right:80px;bottom:30px;display:flex;justify-content:space-between;align-items:end;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent);padding-top:18px;gap:35px;font-size:18px;z-index:5}.design footer b{font-size:24px}.disclaimer{text-align:right;font-size:17px;line-height:1.5}.font-1 h1{font-family:Batang,Georgia,serif;font-weight:600}.font-2 h1{font-weight:900;letter-spacing:-7px}.font-2 .tag{border:1px solid var(--ink);padding:13px 22px;border-radius:40px}
.layout-0 .visual{border-radius:240px 8px 8px 8px}.layout-0 .number{display:none}
.layout-1 .composition{inset:0;display:block}.layout-1 .visual{position:absolute;inset:0}.layout-1 .visual:after,.layout-9 .visual:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#10261de8,#10261d99 48%,#10261d05)}.layout-1 .copy{position:absolute;left:95px;top:220px;width:980px;color:white}.layout-1 .kicker{color:#f0d5a2}.layout-1 .tag{border-color:white}.layout-1 header,.layout-1 footer{color:white;border-color:#ffffff55;z-index:6}.layout-1 .number{display:none}
.layout-2 .composition{grid-template-columns:1fr 1fr;grid-template-rows:350px 1fr;gap:30px}.layout-2 .copy{grid-column:1/-1;text-align:center}.layout-2 h1{font-size:86px}.layout-2 .kicker{margin-bottom:18px}.layout-2 .body-copy{max-width:1500px;margin:24px auto 0;font-size:30px}.layout-2 .tag{display:none}.layout-2 .secondary{display:block}.layout-2 .visual{border-radius:10px}.layout-2 .number{display:none}
.layout-3 .visual{grid-column:1;grid-row:1;border-radius:5px}.layout-3 .copy{grid-column:2;grid-row:1;border-left:5px solid var(--accent);padding-left:50px}.layout-3 h1{font-size:90px}.layout-3 .number{display:none}
.layout-4 .composition{grid-template-columns:1.25fr 1fr;gap:55px;border-top:5px double var(--ink);padding-top:35px}.layout-4 .copy{grid-column:1}.layout-4 .visual{grid-column:2;border-radius:0}.layout-4 h1{font-family:Batang,serif;font-size:95px}.layout-4 .number{font-size:120px;bottom:0;left:20px;color:var(--soft)}
.layout-5 .visual{height:760px;width:760px;border-radius:50%;justify-self:end;outline:2px solid var(--ink);outline-offset:17px}.layout-5 .number{font-size:480px;opacity:.55;bottom:-50px}.layout-5 h1{font-size:93px}.layout-5 .copy{padding-bottom:20px}
.layout-6 .visual{grid-row:1;grid-column:1;border-radius:420px 420px 0 0}.layout-6 .copy{grid-row:1;grid-column:2}.layout-6 .number{display:none}.layout-6 .tag{background:var(--soft);border:0;padding:20px 30px}
.layout-7 .composition{grid-template-columns:1fr 1fr;grid-template-rows:360px 1fr;gap:20px}.layout-7 .copy{grid-column:1/-1;background:var(--ink);color:var(--paper);padding:30px 45px;align-self:stretch}.layout-7 .kicker{color:var(--soft);margin-bottom:15px}.layout-7 h1{font-size:82px}.layout-7 .body-copy{max-width:1500px;margin-top:20px;font-size:29px}.layout-7 .tag{display:none}.layout-7 .secondary{display:block}.layout-7 .number{display:none}
.layout-8 .composition{grid-template-columns:1.3fr .8fr .8fr;gap:32px}.layout-8 .secondary{display:block;height:80%;align-self:end}.layout-8 .visual{border-radius:5px}.layout-8 h1{font-size:88px}.layout-8 .body-copy{font-size:31px}.layout-8 .number{display:none}
.layout-9 .composition{inset:125px 50px 105px;display:block}.layout-9 .visual{position:absolute;inset:0;border-radius:25px}.layout-9 .visual:after{background:linear-gradient(0deg,#10261df2,#10261d44)}.layout-9 .copy{position:absolute;left:80px;right:80px;bottom:65px;color:white;text-align:center}.layout-9 .kicker{color:#f5d8a3}.layout-9 .body-copy{margin:28px auto 0;max-width:1400px}.layout-9 .tag{border-color:white;margin-top:28px}.layout-9 .number{display:none}
.layout-10 .composition{grid-template-columns:1.25fr 1fr;grid-template-rows:1.4fr 1fr;gap:24px}.layout-10 .copy{grid-row:1/3;background:var(--soft);height:100%;display:flex;flex-direction:column;justify-content:center;padding:50px}.layout-10 .visual{border-radius:0 150px 0 0}.layout-10 .secondary{display:block;border-radius:0 0 0 100px}.layout-10 h1{font-size:90px}.layout-10 .number{display:none}
.layout-11 .composition{border:2px solid var(--ink);padding:45px;gap:50px;grid-template-columns:1.15fr 1fr}.layout-11 .visual{border-left:3px dashed var(--ink);padding-left:35px;background:transparent}.layout-11 .tag{background:var(--accent);color:white;border:0;padding:15px 25px}.layout-11 .number{display:none}.layout-11 h1{font-size:90px}
.layout-12 .composition{grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;gap:25px 55px}.layout-12 .copy{grid-row:1/3}.layout-12 .secondary{display:block}.layout-12 .visual{border-radius:90px 0 90px 0}.layout-12 .number{display:none}
.layout-13 .composition{background:var(--soft);padding:45px 55px;grid-template-columns:1.1fr 1fr;border-radius:30px;gap:45px}.layout-13 .visual{border-radius:50% 50% 5% 5%;height:650px;box-shadow:25px 25px 0 var(--paper)}.layout-13 h1{font-size:90px}.layout-13 .number{display:none}
.layout-14 .composition{background:repeating-linear-gradient(transparent 0 59px,color-mix(in srgb,var(--ink) 10%,transparent) 59px 60px);padding:25px 20px;grid-template-columns:1.2fr 1fr}.layout-14 .copy{background:var(--paper);padding:25px 0}.layout-14 .visual{height:620px;border:15px solid var(--paper);outline:3px solid var(--ink);transform:rotate(3deg)}.layout-14 .number{display:none}.layout-14 h1{font-family:Batang,serif;font-size:92px}
.layout-15 .composition{grid-template-rows:420px 1fr;grid-template-columns:1fr;gap:30px}.layout-15 .visual{grid-row:1}.layout-15 .copy{grid-row:2;display:grid;grid-template-columns:1.25fr 1fr;column-gap:60px;align-items:center}.layout-15 .kicker{grid-column:1/-1;margin-bottom:18px}.layout-15 h1{font-size:79px}.layout-15 .body-copy{margin:0;font-size:31px}.layout-15 .tag{display:none}.layout-15 .number{display:none}
.layout-16 .composition{background:var(--ink);color:var(--paper);padding:50px;gap:55px;grid-template-columns:1fr 1fr}.layout-16 .kicker{color:var(--soft)}.layout-16 .tag{border-color:var(--paper)}.layout-16 h1{font-size:91px}.layout-16 .visual{border-radius:250px 250px 0 0;border:12px solid var(--paper)}.layout-16 .number{display:none}
.layout-17 .composition{grid-template-columns:1.3fr 1fr;gap:65px}.layout-17 .visual{height:570px;width:650px;transform:rotate(5deg);border:16px solid white;box-shadow:0 20px 40px #0002}.layout-17 .secondary{display:block;position:absolute;right:390px;bottom:0;width:330px;height:270px;transform:rotate(-8deg);border:12px solid white;z-index:2}.layout-17 .copy{padding-right:35px}.layout-17 .number{display:none}.layout-17 h1{font-size:92px}
.layout-18 .composition{border:2px solid var(--ink);gap:0;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;background:var(--soft)}.layout-18 .copy{grid-row:1/3;padding:50px}.layout-18 .visual{border-left:6px double var(--ink);padding:25px;background:var(--paper)}.layout-18 .secondary{display:block}.layout-18 .number{display:none}.layout-18 h1{font-size:87px}.layout-18 .body-copy{font-size:31px}
.layout-19 .composition{grid-template-columns:1.2fr 1fr;gap:55px}.layout-19 .copy{grid-column:2;grid-row:1;padding-right:15px}.layout-19 .visual{grid-column:1;grid-row:1;clip-path:polygon(0 0,100% 0,100% 88%,88% 100%,0 100%)}.layout-19 .number{display:none}.layout-19 h1{font-size:89px}.layout-19 .tag{color:var(--accent)}
@media(max-width:700px){#controls{padding:14px;gap:10px}#controls .buttons{gap:7px}#controls button,#controls select,#controls .buttons>a{font-size:12px;padding:8px 10px}#controls p{display:none}#controls .playlist{margin-left:0}#playTitle{font-size:13px}#dots{gap:3px}#dots button{width:28px;font-size:11px}#controls .back{font-size:12px}}

/* slide-stack-fix: keep each scene text/photos in its own stacking context */
#stage>.design{isolation:isolate;z-index:0}
#stage>.design.incoming{z-index:2}