:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.page1{width:100vw;height:100dvh;overflow:hidden;position:relative;padding-top:0;box-sizing:border-box}@supports (padding-top: env(safe-area-inset-top)){.page1{padding-top:env(safe-area-inset-top)}}.page1-bg{position:fixed;top:0;left:0;width:100vw;height:100dvh;background-image:url(../images/universe.png);background-size:cover;background-position:center;background-repeat:repeat;animation:moveBackground 3s linear infinite;z-index:-1}.grid-layout{display:grid;grid-template-rows:repeat(8,1fr);width:100%;height:100%;position:relative;z-index:2}.title-box{grid-row:2 / span 2;grid-column:1 / -1;justify-self:center;align-self:center;width:80vw;max-width:500px;max-height:26vh;padding:4vh 4vw;background-image:url(../images/backgroundframe.png);background-size:cover;background-position:center;border-radius:16px;box-shadow:0 4px 15px #0006;text-align:center;color:#393629}.spaceship{grid-row:6 / span 2;grid-column:1 / -1;justify-self:center;align-self:start;width:clamp(160px,50vw,240px);transform:translateY(-20%);z-index:1;cursor:pointer}.title-box h1{font-size:clamp(28px,6vw,50px);line-height:1.4;margin:0;color:#393629;text-shadow:1px 1px 0 white;font-family:UranusPixel,monospace}.title-box h2{font-size:clamp(24px,5vw,32px);margin-top:1vh;margin-bottom:0;line-height:1.3;color:#393629;text-shadow:1px 1px 0 white;font-family:UranusPixel,monospace}@media (min-width: 768px) and (max-width: 1199px){.title-box h1{font-size:42px}.title-box h2{font-size:30px}}@media (min-width: 1200px){.title-box h1{font-size:48px}.title-box h2{font-size:36px}}.star{position:absolute;z-index:1;animation:rotateStar 3s linear infinite}@keyframes rotateStar{0%{transform:rotate(0)}to{transform:rotate(30deg)}}.star1{bottom:10%;right:5%;width:clamp(40px,6vw,90px)}.star2{top:5%;left:15%;width:clamp(50px,7vw,100px)}.star3{top:40%;right:3%;width:clamp(60px,8vw,120px)}.star4{top:60%;left:3%;width:clamp(4px,6vw,120px)}.page.page2{width:100vw;height:100dvh;overflow:hidden;position:relative;display:grid;grid-template-rows:repeat(8,12.5vh);background-color:transparent;padding-top:0;box-sizing:border-box}@supports (padding-top: env(safe-area-inset-top)){.page.page2{padding-top:env(safe-area-inset-top)}}.page2-bg{position:fixed;top:0;left:0;width:100vw;height:100dvh;background-image:url(../images/universe.png);background-size:cover;background-position:center;background-repeat:repeat;animation:moveBackground 15s linear infinite;z-index:-1}.main-frame{grid-row:2 / span 3;width:90vw;max-width:700px;margin:0 auto;display:flex;flex-direction:column;justify-content:space-between;background:#d7c4f1;border:4px solid transparent;background-clip:padding-box;box-shadow:0 6px 16px #00000073;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:16px;padding:1vh 3vw;gap:1vh;box-sizing:border-box}.top-frame{flex:1;background-image:url(../images/backgroundframe.png);background-size:cover;background-position:center;padding:3vh 3vw;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(24px,4vw,36px);color:#393629;text-shadow:1px 1px 0 white;border-radius:12px;box-sizing:border-box;box-shadow:0 3px 10px #0000004d}.top-text{font-size:clamp(24px,5vw,48px);line-height:1.5;margin:0;text-align:center}.bottom-frame{position:relative;overflow:visible;grid-row:7;margin-top:4vh;justify-self:center;align-self:center;display:flex;align-items:center;justify-content:center;gap:.6vw;cursor:pointer;height:clamp(48px,8vh,64px);padding:.4vh 1vw;background:#fdf3a1;border:2px solid #aaa;border-radius:12px;font-size:clamp(16px,4vw,24px);color:#393629;text-shadow:1px 1px 0 white;box-shadow:0 2px #aaa,0 4px #888,0 6px #666;width:fit-content;max-width:65vw;min-width:140px;transition:transform .1s ease,background .3s ease,box-shadow .3s ease}.bottom-frame:hover{transform:translateY(-4px);box-shadow:0 4px 8px #fff3,0 8px 16px #ffffff1a}@media (hover: none){.bottom-frame{animation:pulseGlow 1.8s ease-in-out infinite}}.ycy-icon{width:clamp(32px,6vw,36px);position:absolute;top:-50%;left:-1px;z-index:2;pointer-events:none;transition:transform .2s ease}.bottom-frame:hover .ycy-icon{transform:translateY(-4px)}@media (max-width: 600px){.bottom-frame{padding:.2vh .6vw;font-size:clamp(28px,5vw,36px);min-width:120px;max-width:90vw}.ycy-icon{width:clamp(28px,8vw,40px);top:-42%}}@media (min-width: 1000px){.bottom-frame{padding:.4vh 1.2vw;font-size:clamp(28px,5vw,36px)}.ycy-icon{width:clamp(24px,4vw,36px);top:-48%}}.page.page3{width:100vw;height:100dvh;overflow-y:auto;position:relative;display:flex;flex-direction:column;align-items:center;background-image:url(../images/universe.png);background-size:cover;background-repeat:repeat;font-family:UranusPixel,monospace;padding:5vh 0 max(4vh,env(safe-area-inset-bottom));animation:moveBackground 15s linear infinite;padding-top:0}@supports (padding-top: env(safe-area-inset-top)){.page.page3{padding-top:env(safe-area-inset-top)}}@keyframes moveBackground{0%{background-position:0 0}to{background-position:100px 100px}}.page3 .main-frame{width:90vw;max-width:700px;background:#d7c4f1;border-radius:16px;box-shadow:0 6px 16px #00000073;padding:4vh 5vw;display:flex;flex-direction:column;gap:2vh;box-sizing:border-box;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:4px solid transparent;background-clip:padding-box}.page3 .top-frame{position:relative;padding-left:clamp(70px,18vw,120px);background-image:url(../images/backgroundframe.png);background-size:cover;background-position:center;padding:3vh 3vw;border-radius:12px;box-shadow:0 3px 10px #0000004d;color:#393629;text-shadow:1px 1px 0 white;box-sizing:border-box;margin-bottom:2vh}.page3 .dialog-content{display:flex;flex-direction:column;position:relative;min-width:0;padding:0;width:100%;box-sizing:border-box}.page3 .top-text{font-size:clamp(16px,4.2vw,32px);line-height:1.6;text-align:left;margin:0;padding-bottom:2vh}.page3 .footer-box{display:flex;justify-content:flex-end;align-items:center;gap:1vw;padding-top:1vh}.page3 .source-text{font-size:clamp(16px,3vw,24px);color:#5a5240;text-align:right;white-space:nowrap}.page3 .avatar-inline{width:clamp(36px,9vw,60px);height:clamp(36px,9vw,60px);border-radius:50%;object-fit:cover;border:2px solid white;box-shadow:0 0 6px #0003}.page3 .audio-box{margin-top:2vh;width:100%;box-sizing:border-box}@media (max-width: 600px){.top-frame{flex-direction:column;align-items:center;text-align:center}.top-text{font-size:clamp(16px,5vw,28px);text-align:center}.avatar-wrapper{margin-bottom:2vh}.main-frame{padding:5vh 5vw}}.custom-audio-player{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:1vw;padding:1vh 2vw;background:#f4f0fa;border-radius:40px;width:100%;max-width:100%;font-family:UranusPixel,monospace;box-sizing:border-box;overflow-x:auto}.play-button{width:42px;height:42px;min-width:36px;min-height:36px;border-radius:50%;background-color:#6b5b95;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-size:0;line-height:0;box-sizing:border-box;flex-shrink:0;flex-grow:0}.play-button:focus{outline:none;box-shadow:none}.play-button:active{transform:scale(.95)}.progress-bar{flex-grow:1;min-width:0;width:100%;height:6px;appearance:none;background:#fff;border-radius:3px;outline:none;cursor:pointer}.progress-bar::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#6b5b95;border-radius:50%}.time-text{flex-shrink:0;font-size:14px;width:40px;text-align:center;color:#6b5b95;white-space:nowrap}.play-icon{width:0;height:0;border-left:12px solid white;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:2px}.pause-icon{display:flex;gap:4px}.pause-icon:before,.pause-icon:after{content:"";display:block;width:4px;height:16px;background:#fff}.page.page4{width:100vw;min-height:100dvh;overflow:hidden;position:relative;display:flex;flex-direction:column;align-items:center;font-family:UranusPixel,monospace;padding-top:calc(8vh + env(safe-area-inset-top));padding-bottom:calc(12vh + env(safe-area-inset-bottom));background-color:transparent;box-sizing:border-box;z-index:1}.page4-bg{position:fixed;top:0;left:0;width:100vw;height:100dvh;background-image:url(../images/universe.png);background-size:cover;background-position:center;background-repeat:repeat;animation:moveBackground 15s linear infinite;z-index:0}.header-bar{position:fixed;top:0;left:0;width:100vw;height:calc(7vh + env(safe-area-inset-top));padding:env(safe-area-inset-top) 4vw 0 4vw;display:flex;align-items:center;gap:2vw;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:3}.chat-avatar{width:clamp(30px,8vw,50px);height:clamp(30px,8vw,50px);max-height:calc(7vh + env(safe-area-inset-top));border-radius:50%;object-fit:cover;border:2px solid white}.chat-name{font-size:clamp(18px,4vw,24px);color:#fff;font-weight:700}.back-icon{width:clamp(24px,6vw,36px);height:clamp(24px,6vw,36px);cursor:pointer;-webkit-user-select:none;user-select:none;object-fit:contain}.chat-frame{position:fixed;top:calc(7vh + env(safe-area-inset-top));bottom:calc(10vh + env(safe-area-inset-bottom));left:0;right:0;overflow-y:auto;padding:2vh 4vw calc(3vh + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:2vh;box-sizing:border-box;z-index:2;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.chat-bubble{display:flex;align-items:flex-start;max-width:100%}.chat-bubble.left{justify-content:flex-start;flex-direction:row;align-self:flex-start;gap:1vw}.chat-bubble.right{justify-content:flex-end;flex-direction:row-reverse;align-self:flex-end;gap:1vw}.bubble-content{max-width:80vw;min-width:min-content;padding:.8vh 1.8vw;border-radius:12px;box-shadow:0 2px 6px #0003;font-size:clamp(16px,3.5vw,20px);word-break:break-word;line-height:1.5;background-color:#fff;color:#222;display:flex;flex-direction:column;align-items:flex-start}.chat-bubble.right .bubble-content{background-color:#d7f9d7;align-items:flex-end}.bubble-text{margin:0;white-space:normal;text-align:left;line-height:1.5}.bubble-source{font-size:.85em;color:#666;text-align:right;margin-top:.5em;white-space:nowrap}.bubble-avatar{display:none}.chat-bubble.left .bubble-avatar{display:block;width:clamp(30px,7vw,46px);height:clamp(30px,7vw,46px);border-radius:50%;object-fit:cover;margin-right:1vw}.page4 .custom-audio-player{padding:.6vh 1vw;border-radius:20px;gap:2vw;transform:scale(.9);transform-origin:left center}.page4 .custom-audio-player .play-button{width:36px;height:36px}.page4 .custom-audio-player .play-icon{border-left:10px solid white;border-top:6px solid transparent;border-bottom:6px solid transparent}.page4 .custom-audio-player .pause-icon:before,.page4 .custom-audio-player .pause-icon:after{width:3px;height:12px}.page4 .custom-audio-player .time-text{font-size:12px;width:32px}.input-bar{position:fixed;bottom:0;left:0;width:100vw;padding:1.2vh 4vw calc(3vh + env(safe-area-inset-bottom)) 4vw;background:transparent;z-index:3;box-sizing:border-box;transform:translateZ(0)}.input-container{display:flex;align-items:center;width:100%;background-color:#fff;border-radius:999px;box-shadow:0 2px 6px #0000001a;padding:.5vh 2vw;gap:2vw;box-sizing:border-box;flex-wrap:nowrap;overflow:hidden}.chat-input{flex:1;min-width:0;font-family:UranusPixel,monospace;font-size:clamp(16px,3.5vw,20px);border:none;outline:none;background:transparent;padding:.8vh 1vw;color:#333;box-sizing:border-box}.send-button{-webkit-appearance:none;appearance:none;color:inherit;background:#fdf3a1!important;border:none;font-family:UranusPixel,monospace;font-size:clamp(14px,3.5vw,20px);padding:.6vh 2vw;border-radius:20px;cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #0000001a;transition:background .2s ease;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;flex-shrink:0;flex-grow:0;width:auto;max-width:28vw;overflow:hidden;text-overflow:ellipsis;display:inline-flex;vertical-align:middle;box-sizing:border-box}.send-button:focus{outline:none;box-shadow:none}.send-button::-moz-focus-inner{border:0}.send-button:active{transform:translateY(1px);background:#fdf3a1!important}@supports (-webkit-touch-callout: none){html{height:100%;overflow:hidden}body{height:100%;position:relative;overflow:auto;-webkit-overflow-scrolling:touch}body.keyboard-open{position:fixed;width:100%;overflow:hidden}.page.page4{min-height:100%}.chat-frame{justify-content:flex-start;padding-top:1vh}}@media (min-width: 900px){.chat-frame{padding:3vh 6vw}.bubble-content{font-size:18px;padding:1.2vh 2.5vw}.chat-input,.send-button{font-size:18px}}@media (max-height: 500px){.input-bar{padding-bottom:calc(4vh + env(safe-area-inset-bottom));transform:translateZ(0)}.chat-frame{bottom:calc(10vh + env(safe-area-inset-bottom))}}html,body,#root{margin:0;padding:0;height:100%;font-size:16px;box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}@font-face{font-family:UranusPixel;src:url(../fonts/Uranus_Pixel_11Px.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}.pixel-font{font-family:UranusPixel,monospace;font-size:1.2rem;letter-spacing:1px}.global-header{font-size:clamp(24px,5vw,32px);color:#fff;text-shadow:2px 2px 0 black;text-align:center;margin-top:4vh;margin-bottom:4vh}.mode-buttons{display:flex;justify-content:center;gap:4vw;z-index:5;max-width:700px;box-sizing:border-box}.mode-buttons--fixed{position:absolute;bottom:max(6vh,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);padding-bottom:1vh;flex-wrap:nowrap;flex-direction:row;align-items:center}.mode-buttons--flow{margin-top:auto;width:100%;display:flex;justify-content:center;padding-bottom:4vh;padding-bottom:max(4vh,env(safe-area-inset-bottom))}.mode-button{position:relative;padding:.8vh 2vw;font-family:UranusPixel,monospace;font-size:clamp(14px,3.5vw,24px);color:#393629;background:#fdf3a1;border:2px solid #aaa;border-radius:8px;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;box-shadow:0 2px #aaa,0 4px #888,0 6px #666;transition:transform .1s ease;min-width:100px;max-width:180px}.mode-button:hover{transform:translateY(-4px);box-shadow:0 4px 8px #fff3,0 8px 16px #ffffff1a}@media (hover: none){.mode-button{animation:pulseGlow 1.8s ease-in-out infinite}}@keyframes pulseGlow{0%,to{filter:brightness(1);box-shadow:0 2px #aaa,0 4px #888,0 6px #666}50%{filter:brightness(1.2);box-shadow:0 2px 2px #fff,0 4px 6px #fdf3a1}}