@charset "UTF-8";
:root{color-scheme:dark;--ink:#242236;--night:#151526;--lavender:#d6ccff;--paper:#fffefd;--line:#e7e3ec;font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-synthesis:none;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0c0d14;color:#f6f3ff}button,input{font:inherit}button{cursor:pointer}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b0a0ef;outline-offset:5px}button{border:0}button:disabled{cursor:default}[hidden]{display:none!important}h1,p{margin:0}h1:focus{outline:none}.sr-only{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;z-index:100;top:-60px;left:20px;background:white;color:#222;padding:14px}.skip-link:focus{top:12px}.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 28%,#32304a4f,transparent 65%)}.app-shell{position:relative;width:min(100%,520px);margin:auto;background:var(--night);min-height:100svh;box-shadow:0 0 100px #0005;overflow:clip}.topbar{position:absolute;z-index:20;top:0;left:0;right:0;height:76px;padding:0 26px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#121321b3,transparent)}.wordmark{padding:8px 0;background:none;font-weight:800;font-size:23px;letter-spacing:-1.8px}.brand-star{display:inline-block;font-size:12px;margin-left:5px;vertical-align:top;padding-top:3px;letter-spacing:0;color:#c5bceb}.topbar-right{display:flex;align-items:center;gap:16px}#episode-label{font-size:10px;letter-spacing:.02em;color:#ded8ed9e}.motion-button{display:flex;align-items:center;gap:5px;background:#0c0c201f;border:1px solid #ffffff20;border-radius:30px;padding:7px 9px;color:#e5e0f1;font-size:10px}.motion-button>span:first-child{font-size:16px;line-height:10px}.screen{position:relative}.shot{width:100%;aspect-ratio:2/3;background-image:url('assets/yuran-webtoon-v3.png');background-size:200% 200%;background-repeat:no-repeat;transform:translateZ(0)}.shot-cover{background-position:0 0}.shot-secret{background-position:100% 0}.shot-reading{background-position:0 100%}.shot-smile{background-position:100% 100%}
.poster{min-height:810px;height:100svh;max-height:1020px;isolation:isolate;background:#161526;overflow:hidden}.cover-art{mask-image:linear-gradient(#000 75%,transparent 100%);position:absolute;top:-20px;left:-6%;width:112%;transform-origin:50% 35%;animation:cover-breathe 16s ease-in-out infinite alternate}.poster-shade{position:absolute;inset:0;background:linear-gradient(180deg,#10132315 35%,#13132600 40%,#15152680 58%,#151526 78%)}.cover-whisper{position:absolute;top:46%;right:7%;writing-mode:vertical-rl;font-size:14px;letter-spacing:.18em;line-height:1.8;text-shadow:0 2px 10px #161526,0 0 12px #161526;color:#fff9fc;animation:soft-enter 1.4s both .3s}.cover-copy{position:absolute;bottom:27px;left:30px;right:30px;text-align:center}.cover-eyebrow{color:#ddd6f7;font-size:12px;font-weight:500;letter-spacing:.05em;margin-bottom:8px;text-shadow:0 2px 8px #151526}.cover-copy h1{font-size:72px;line-height:1.13;letter-spacing:-7px;font-weight:800;text-shadow:0 0 28px #aaa0cf33;position:relative;display:inline-block;padding-right:7px}.cover-copy h1>span{position:absolute;right:-15px;top:1px;font-size:21px;color:#e7dbff;letter-spacing:0}.cover-subtitle{font-size:19px;font-weight:500;letter-spacing:-.6px;margin-top:11px}.cover-rule{display:flex;align-items:center;gap:12px;justify-content:center;margin:18px auto 13px;color:#c1b3e3}.cover-rule i{height:1px;width:38px;background:linear-gradient(90deg,transparent,#c1b3e366)}.cover-rule i:last-child{transform:rotate(180deg)}.cover-rule span{font-size:14px}.cover-description{font-size:13px;color:#b6b1c9;line-height:1.9;margin-bottom:23px;letter-spacing:-.1px}.primary-button{display:flex;justify-content:center;align-items:center;gap:20px;min-height:57px;width:100%;border-radius:12px;background:#e1d9ff;color:#252137;font-size:15px;font-weight:700;letter-spacing:-.3px;transition:background .2s,transform .2s;box-shadow:0 4px 25px #a793e112}.primary-button:hover{background:#f0eaff;transform:translateY(-2px)}.primary-button>span{font-size:23px;font-weight:400}.preview-button{background:none;color:#c1bbd3;margin-top:9px;padding:12px 24px;font-size:12px}.preview-button span{margin-left:8px}.cover-footnote{font-size:9px;letter-spacing:.02em;color:#77738c;margin-top:9px}.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:#ede4ff;box-shadow:0 0 10px #ac98ff;animation:drift var(--duration,7s) ease-in-out var(--delay,0s) infinite;opacity:.5}.mote:nth-child(3n){width:2px;height:2px}.meeting{min-height:780px;height:100svh;max-height:1000px;overflow:hidden;background:#19172e}.meeting-art{position:absolute;top:0;left:-6%;width:112%;mask-image:linear-gradient(#000 75%,transparent 100%)}.meeting-art .shot{animation:soft-enter .8s both}.meeting::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 54%,#18162b 84%)}.meeting-caption{position:absolute;top:102px;left:28px;font-size:12px;color:#e9e1f7;letter-spacing:.04em;z-index:2}.sound-effect{position:absolute;top:37%;left:12%;color:#e3d1ee;font-style:italic;font-size:24px;transform:rotate(-12deg)}.conversation{z-index:3;position:absolute;bottom:42px;left:24px;right:24px;padding:25px 25px 15px;border:1px solid #ebe6ff33;border-radius:6px 22px 6px 22px;background:#1b193be6;backdrop-filter:blur(16px);box-shadow:0 12px 38px #09071c50}.speaker{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#c9baef;letter-spacing:.06em}.speaker i{width:4px;height:4px;background:#dbccff;border-radius:50%}#greeting-copy{font-size:19px;line-height:1.85;letter-spacing:-.7px;white-space:pre-line;min-height:111px;margin-top:14px;word-break:keep-all}.conversation-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:15px}.conversation-bottom>span{font-size:10px;color:#8c83a9;letter-spacing:2px}#greeting-next{padding:10px 0 10px 15px;color:#e3d6ff;background:none;font-size:13px}#greeting-next span{margin-left:10px}
body[data-screen="input"] .topbar{background:none;color:#292239}body[data-screen="input"] .motion-button{color:#5b526e;border-color:#30234620}body[data-screen="input"] #episode-label{color:#837b90}.profile-screen{background:#faf9fd;min-height:100svh;color:var(--ink);padding-top:78px;color-scheme:light}.form-scene{height:200px;position:relative;overflow:hidden;background:#e5dff3}.form-portrait{width:57%;height:100%;position:relative;overflow:hidden;mask-image:linear-gradient(90deg,#000 60%,transparent)}.form-portrait .shot{position:absolute;width:160%;left:-33%;top:-125px}.speech{background:#fff;color:#302c3c;border:1.2px solid #3b3445;border-radius:50%;padding:23px 28px;text-align:center;line-height:1.85;letter-spacing:-.35px;font-size:16px;font-weight:500;position:relative;word-break:keep-all;overflow-wrap:anywhere;white-space:pre-line}.speech::after{content:"";position:absolute;width:16px;height:23px;bottom:-15px;left:36%;background:#fff;clip-path:polygon(0 0,100% 0,0 100%);filter:drop-shadow(1px 0 #3b3445);transform:rotate(10deg)}.form-speech{position:absolute;right:22px;top:48px;font-size:17px;min-width:174px;padding:21px 23px}.form-speech::after{left:8%;bottom:0;transform:rotate(55deg)}.form-spark{position:absolute;right:20%;top:21px;color:#8f80b1;font-size:22px}.form-body{padding:34px 32px 25px}.small-label{font-size:11px;letter-spacing:.04em;color:#8c819e}.form-body h1{font-size:23px;font-weight:700;letter-spacing:-1.2px;margin:9px 0 30px}.field{display:block;font-size:13px;font-weight:600;margin-bottom:22px}.field input,input[type=time]{display:block;width:100%;margin-top:10px;min-height:52px;min-width:0;padding:12px 14px;background:#fff;border:1px solid #dfdbe8;border-radius:8px;outline:none;color:#2d273d;font-size:15px;font-weight:400}.field input:focus,input[type=time]:focus{border-color:#9985c9;box-shadow:0 0 0 3px #c1afe52c}.field input::placeholder{color:#aea7b9;font-size:14px}.field input:disabled,input[type=time]:disabled{background:#eeebf3;color:#aaa}.inline-field{border:0;padding:0;margin:0 0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.inline-field legend{float:left;font-size:13px;font-weight:600;line-height:39px;padding:0}.choice-group{display:flex;gap:6px}.choice-group label{position:relative}.choice-group input{position:absolute;opacity:0;width:100%;height:100%;margin:0}.choice-group span{display:block;padding:11px 22px;border:1px solid #e3dfec;border-radius:8px;background:#fff;color:#8c839b;font-size:13px}.choice-group input:checked+span{background:#eee7fb;border-color:#b9a5df;color:#665081;font-weight:600}.choice-group input:focus-visible+span{outline:2px solid #9985c9;outline-offset:3px}.time-heading{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:600}.check-label{display:flex;align-items:center;gap:5px;font-size:11px;color:#82788d;font-weight:400}.check-label input{accent-color:#9180b6}.gender-field{margin-top:23px}.optional{font-size:10px;color:#9c93a8;font-weight:400;margin-left:5px}.form-note{font-size:11px;line-height:1.9;color:#948a9f;margin:5px 0 22px}.form-submit{background:#383048;color:#fff;box-shadow:none}.form-submit:hover{background:#544468}.text-button{display:block;background:none;margin:14px auto 0;padding:13px;font-size:12px;color:#908399}.loading-screen{display:flex;min-height:100svh;align-items:center;justify-content:center;flex-direction:column;text-align:center}.loading-screen h1{font-size:24px;line-height:1.8;letter-spacing:-1px;font-weight:500;margin-top:14px}.loading-stars{position:relative;width:100px;height:100px;margin-bottom:20px;color:#d2c1f9}.loading-stars span{position:absolute;left:12px;top:28px;font-size:20px;animation:twinkle 1.5s infinite}.loading-stars span:nth-child(2){left:50px;top:10px;font-size:34px;animation-delay:.3s}.loading-stars span:nth-child(3){left:68px;top:65px;font-size:12px;animation-delay:.6s}.loading-line{margin-top:33px;width:100px;height:1px;background:#464057;overflow:hidden}.loading-line::after{content:"";display:block;height:100%;width:40%;background:#d4c5f2;animation:load-line 1s infinite}
body[data-screen="result"] .topbar{position:fixed;left:50%;transform:translateX(-50%);width:min(100%,520px);height:60px;background:#171626eb;backdrop-filter:blur(12px);border-bottom:1px solid #ffffff0b}body[data-screen="result"] .wordmark{font-size:20px}body[data-screen="result"] #episode-label{font-size:10px;color:#b4abc6}.comic-reader{padding-top:60px;background:var(--paper);color:var(--ink)}.reading-progress{position:fixed;z-index:25;top:59px;left:50%;transform:translateX(-50%);width:min(100%,520px);height:2px}#reading-progress-fill{display:block;height:100%;width:0;background:#bda3f0}.episode-intro{background:linear-gradient(#161527,#25203d);color:#f3edff;text-align:center;padding:37px 24px 0;position:relative}.reader-demo{display:inline-block;font-size:9px;color:#9485aa;padding:5px 10px;border:1px solid #c4b6e125;border-radius:20px;margin-bottom:40px}.episode-number{display:block;font-size:11px;letter-spacing:4px;color:#b6a3cf}.episode-intro h1{font-size:33px;letter-spacing:-1.7px;font-weight:500;margin:17px 0 20px}.episode-intro #reader-name{font-size:12px;color:#d9cde8}#profile-caption{font-size:9px;line-height:1.8;color:#8e7f9f;margin:9px 0 0;overflow-wrap:anywhere}.episode-star{display:block;font-size:23px;color:#ae94cf;margin:44px 0 27px}.first-narration{font-size:15px;line-height:2.2;letter-spacing:-.5px;color:#ddd4ea}.scroll-cue{display:flex;flex-direction:column;gap:11px;font-size:9px;color:#8a7d9e;padding:35px 0 28px;letter-spacing:.05em}.scroll-cue span{font-size:18px}.comic-beat{position:relative}.comic-panel{position:relative;overflow:hidden}.comic-panel .shot{display:block}.speech-top{position:absolute;top:6%;left:9%;max-width:80%;min-width:168px}.speech-bottom{position:absolute;bottom:5%;right:7%;max-width:85%;min-width:218px}.speech-bottom::after{bottom:auto;top:-16px;left:71%;transform:rotate(160deg)}.panel-sfx{position:absolute;right:13%;top:59%;font-size:22px;font-style:italic;color:#ede5f6;transform:rotate(-12deg);letter-spacing:4px;text-shadow:0 0 8px #4b326d}.comic-gutter{padding:65px 20px 61px;text-align:center;min-height:268px;background:#fffefd}.narration{font-size:14px;line-height:2.3;letter-spacing:-.3px;color:#71677b;word-break:keep-all}.comic-gutter>span{display:block;line-height:1.1;color:#bfb5c9;font-size:14px;margin-top:27px}.reading-panel .speech{top:4%;left:6%;font-size:15px;max-width:78%;padding:21px 25px}.book-sfx{top:71%;left:10%;right:auto;font-size:25px}.magic-dust{position:absolute;top:40%;left:35%;font-size:38px;color:#fff7d7;opacity:0;text-shadow:0 0 20px #cbb2ff}.in-view .magic-dust{animation:twinkle 3s ease-in-out infinite}.dialogue-sequence{padding:0 25px 74px;background:#fffefd;position:relative}.key-dialogue{max-width:350px;width:95%;margin:-8px auto 52px;white-space:pre-line;line-height:1.9;padding:29px 25px;font-size:20px;z-index:2;letter-spacing:-.7px}.key-dialogue::after{left:61%;bottom:-17px}.dialogue-paragraphs{display:flex;flex-direction:column;gap:45px}.dialogue-paragraphs .speech{font-size:15px;line-height:2;max-width:350px;width:90%;padding:29px 30px;align-self:flex-start;letter-spacing:-.4px}.dialogue-paragraphs .speech:nth-child(even){align-self:flex-end}.dialogue-paragraphs .speech:nth-child(even)::after{left:74%;transform:rotate(-10deg)}.constellation-scene{background:linear-gradient(#292344,#191829 70%,#201c32);color:#e8ddf7;padding-bottom:57px;overflow:hidden}.book-insert{height:270px;position:relative;overflow:hidden;border-top:3px solid #221c35;border-bottom:3px solid #221c35}.book-insert .shot{position:absolute;width:150%;left:-27%;top:-455px}.book-insert::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,#29234470)}.insert-caption{position:absolute;left:12%;top:16%;font-size:20px;letter-spacing:4px;transform:rotate(-12deg);color:white;text-shadow:0 0 10px #8e77bb;z-index:1}.constellation-intro{text-align:center;padding:51px 30px 0;font-size:19px;line-height:2;letter-spacing:-.6px}.element-stars{position:relative;height:310px;max-width:400px;margin:8px auto 0}.element-stars::before{content:"";position:absolute;inset:30px 20px 4px;background:radial-gradient(ellipse,#8071a21c,transparent 70%);border:1px solid #8b76a516;border-radius:50%;transform:rotate(-15deg)}.element-star{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:68px;min-height:78px;background:none;color:#d8cde9;display:flex;flex-direction:column;align-items:center;padding:0}.orb{display:flex;justify-content:center;align-items:center;width:47px;height:47px;font-size:19px;font-weight:400;border:1px solid color-mix(in srgb,var(--star-color) 50%,transparent);border-radius:50%;background:radial-gradient(circle at 33% 30%,color-mix(in srgb,var(--star-color) 30%,transparent),#211c3577);box-shadow:0 0 20px color-mix(in srgb,var(--star-color) 12%,transparent);color:var(--star-color);transition:box-shadow .3s,transform .3s}.element-star[aria-pressed=true] .orb{box-shadow:0 0 24px color-mix(in srgb,var(--star-color) 40%,transparent);transform:scale(1.12);border-color:var(--star-color)}.element-star>span:last-child{font-size:10px;letter-spacing:1px;margin-top:10px;color:#c5b8d6}.element-star::after{content:"✦";position:absolute;top:-8px;right:1px;font-size:9px;color:var(--star-color);opacity:.5}.in-view .element-star::after{animation:twinkle 4s infinite;animation-delay:var(--delay)}.star-instruction{text-align:center;font-size:10px;color:#8f7ea5;margin:3px 0 28px}.element-response{margin:0 32px;border-top:1px solid #b398d42b;padding:22px 9px 0;text-align:center;min-height:130px}.element-response .speaker{justify-content:center;margin-bottom:13px;font-size:11px}.element-response p{font-size:15px;line-height:1.9;white-space:pre-line;word-break:keep-all}.demo-explanation{text-align:center;font-size:9px;color:#776587;margin:15px 20px 0}.comic-gutter.small{min-height:160px;padding:66px 20px}.smile-panel{background:#e8e0f3}.smile-panel .speech-top{left:11%;top:5%;font-size:16px}.smile-sfx{color:#826b9c;left:15%;right:auto;top:47%;text-shadow:none;font-size:25px}.closing-dialogue{padding-bottom:15px}.closing-dialogue .key-dialogue{margin-top:-13px;background:#fffaf0;font-size:19px}.closing-dialogue .key-dialogue::after{background:#fffaf0}.episode-end{text-align:center;padding:56px 25px 65px;color:#6e5c81}.episode-end>span:first-child{font-size:19px;color:#b7a6cb}.episode-end>p{font-size:15px;letter-spacing:-.4px;margin-top:21px}.episode-end .end-whisper{font-size:12px;color:#a195aa;margin-top:11px}.end-signature{display:block;font-size:21px;font-style:italic;margin-top:30px;font-weight:500;letter-spacing:3px;color:#8d769f}.reader-footer{background:#eeebf3;padding:37px 30px 33px;text-align:center;border-top:1px solid #e6e0ec}.reader-footer>p:first-child{font-size:11px;color:#8b7d97;margin-bottom:25px}.reader-footer>p:first-child span{padding:0 5px}.reader-footer .primary-button{background:#383048;color:#ede6fa;font-size:14px}.reader-note{font-size:9px;color:#a99db1;margin-top:15px}.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.65,.2,1)}.reveal.is-visible{opacity:1;transform:translateY(0)}
@keyframes cover-breathe{from{transform:scale(1)}to{transform:scale(1.035) translateY(-5px)}}@keyframes drift{0%,100%{transform:translate(0,0);opacity:.1}50%{transform:translate(10px,-24px);opacity:.7}}@keyframes soft-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}@keyframes load-line{from{transform:translateX(-100%)}to{transform:translateX(350%)}}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reduce-motion .reveal{opacity:1;transform:none}.reduce-motion .magic-dust{opacity:.6}.reduce-motion .cover-whisper{opacity:1}.reduce-motion{scroll-behavior:auto}
@media(min-width:700px){.app-shell{border-left:1px solid #ffffff07;border-right:1px solid #ffffff07}.poster{min-height:920px}.cover-copy{bottom:39px;left:46px;right:46px}.cover-whisper{top:44%;right:9%;font-size:16px}.cover-copy h1{font-size:82px}.cover-subtitle{font-size:21px}.cover-description{font-size:14px}.primary-button{min-height:60px}.cover-art{top:-24px;left:-7%;width:114%}.meeting{min-height:900px}.conversation{bottom:60px;left:34px;right:34px;padding:30px 28px 17px}.book-insert .shot{top:-620px}.form-portrait .shot{top:-173px}.speech{font-size:18px}.speech-top{padding:26px 31px}.speech-bottom{padding:25px 35px}.key-dialogue{font-size:22px}.dialogue-paragraphs .speech{font-size:16px}.comic-gutter{padding:84px 20px;min-height:320px}}
@media(max-width:359px){.topbar{padding:0 20px}#episode-label{display:none}.cover-copy{left:23px;right:23px}.cover-art{width:126%;left:-13%}.cover-whisper{right:7%;top:43%}.form-body{padding-left:24px;padding-right:24px}.form-speech{right:13px;min-width:154px;font-size:15px}.dialogue-sequence{padding-left:16px;padding-right:16px}.speech{font-size:15px}.book-insert .shot{top:-365px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}.magic-dust{opacity:.6}}