:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.welcome-intro[hidden]{display:none}
.welcome-intro{position:fixed;inset:0;z-index:1000;overflow:hidden;background:#101112;color:#faf9f5;isolation:isolate;display:flex;align-items:center;padding:clamp(24px,7vw,110px)}
.welcome-glow{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 73% 53%,#ec65432b,transparent 58%),linear-gradient(120deg,#101112,#191b1c);animation:welcome-glow 2.8s ease-out both}
.welcome-copy{position:relative;z-index:2;width:100%;pointer-events:none;text-shadow:0 4px 35px #0009}
.welcome-eyebrow{font:12px ui-monospace,monospace;letter-spacing:.16em;color:#b9b9b5;margin:0 0 32px;animation:welcome-rise .8s .12s both}
#welcomeTitle{margin:0;font-weight:500;letter-spacing:-.045em;line-height:1.05}
#welcomeTitle>span{display:block;font-size:clamp(30px,4.8vw,74px);animation:welcome-rise .9s .25s both}
#welcomeTitle strong{display:block;margin-top:12px;font-size:clamp(54px,10vw,156px);font-weight:650;animation:welcome-rise 1s .4s both}
#welcomeTitle em{font-style:normal;color:#ff6042}
.welcome-character{position:absolute;right:2%;bottom:-5%;height:90%;max-width:65%;object-fit:contain;object-position:bottom;z-index:1;filter:drop-shadow(0 20px 60px #0009);animation:welcome-character 1.2s .15s both}
.welcome-line{height:2px;background:#ff6042;width:clamp(120px,22vw,340px);margin-top:40px;transform-origin:left;animation:welcome-line 2.6s .4s both}
.welcome-skip{position:absolute;z-index:3;right:clamp(24px,5vw,70px);top:32px;background:#ffffff0d;border:1px solid #ffffff40;color:#fff;border-radius:100px;padding:12px 20px;font:14px inherit;cursor:pointer;backdrop-filter:blur(12px)}
.welcome-skip:hover{background:#ff6042;color:#111}.welcome-skip:focus-visible{outline:3px solid #fff;outline-offset:5px}.welcome-skip span{margin-left:16px}
.welcome-footer{position:absolute;bottom:30px;left:clamp(24px,7vw,110px);font:12px ui-monospace,monospace;letter-spacing:.13em;color:#aaa}
.intro-running{overflow:hidden}.intro-running .desktop *{animation-play-state:paused!important}
.welcome-intro.is-leaving{pointer-events:none;animation:welcome-exit .7s cubic-bezier(.76,0,.24,1) both}
@keyframes welcome-rise{from{opacity:0;transform:translateY(30px);filter:blur(8px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes welcome-character{from{opacity:0;transform:translate(50px,30px) scale(1.06)}to{opacity:1;transform:translate(0,0) scale(1)}}
@keyframes welcome-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes welcome-glow{from{opacity:.2}to{opacity:1}}
@keyframes welcome-exit{to{transform:translateY(-100%)}}
@media(max-width:700px){.welcome-intro{align-items:flex-start;padding-top:24vh}.welcome-character{height:60%;max-width:90%;right:-8%;bottom:-2%}.welcome-copy{z-index:2}#welcomeTitle strong{font-size:clamp(50px,12vw,84px)}.welcome-eyebrow{margin-bottom:22px}.welcome-line{margin-top:24px}.welcome-footer{font-size:12px;bottom:18px}.welcome-skip{top:22px}}
@media(max-height:500px){.welcome-intro{padding-top:65px;align-items:center}.welcome-eyebrow{margin-bottom:12px}#welcomeTitle>span{font-size:28px}#welcomeTitle strong{font-size:60px}.welcome-line{margin-top:20px}.welcome-footer{bottom:12px}.welcome-skip{top:12px}}
html{scroll-behavior:smooth}
.menubar{animation:arrive .65s var(--motion-ease) both}
.intro-index{animation:arrive .7s .08s var(--motion-ease) both}
.intro-copy p{animation:arrive .8s .12s var(--motion-ease) both}
.intro-copy h1{animation:title-arrive .95s .17s var(--motion-ease) both}
.intro-art{animation:art-arrive 1s .2s var(--motion-ease) both}
.desktop-content{animation:arrive .85s .24s var(--motion-ease) both}
.shortcuts{animation:arrive .8s .34s var(--motion-ease) both}
@keyframes arrive{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes title-arrive{from{opacity:0;translate:0 28px;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(0)}}
@keyframes art-arrive{from{opacity:0;translate:18px 12px;rotate:5deg}to{opacity:1;translate:0 0;rotate:0deg}}
.intro-art{transform-style:preserve-3d;transition:box-shadow .4s,border-color .4s;view-transition-name:character-art}
.intro-art:after{content:"";position:absolute;inset:-50%;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#ffffff20 50%,transparent 60%);transform:translateX(-65%);animation:art-light 1.4s .5s var(--motion-ease) both}
@keyframes art-light{to{transform:translateX(65%)}}
.intro-art:hover{border-color:#ff8d7180;box-shadow:14px 20px 40px #0008}
.studio-window{view-transition-name:studio;transition:border-color .35s,box-shadow .35s}
.desktop.focused .studio-window{border-color:#ff5d3e55;box-shadow:0 0 50px #ff5d3e09,0 20px 60px #0006}
.windowbutton{width:auto;min-height:34px;gap:8px;display:inline-flex;padding:6px 9px;font-family:inherit;font-size:12px;white-space:nowrap;border:1px solid #ffffff20;transition:background .2s,color .2s}
.windowbutton[aria-pressed="true"]{color:#ffb49f;border-color:#ff5d3e60}
.windowbutton:disabled{cursor:wait}
.primary{position:relative;overflow:hidden;isolation:isolate;transition:background .25s,transform .35s var(--motion-ease),box-shadow .35s}
.primary:after{content:"";position:absolute;inset:-60%;background:linear-gradient(115deg,transparent 42%,#ffffff55 50%,transparent 58%);transform:translateX(-80%);pointer-events:none}
.primary:hover:after{transform:translateX(80%);transition:transform .7s var(--motion-ease)}
.primary:hover{box-shadow:0 8px 24px #ff5d3e30}
button:active{scale:.97}
.character-picker button{transition:transform .3s var(--motion-ease),background .25s,border-color .25s,box-shadow .25s}
.character-picker button:hover{transform:translateY(-4px)}
.character-picker img{transition:transform .45s var(--motion-ease)}
.character-picker button:hover img{transform:scale(1.06)}
.character-picker button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--accent),0 6px 24px #ff5d3e0c}
.upload{transition:background .3s,border-color .3s,transform .3s var(--motion-ease)}
.upload.over{transform:scale(1.02)}
.upload:hover .uploadicon{translate:0 -3px}.uploadicon{transition:translate .3s var(--motion-ease)}
.shortcut{transition:transform .55s var(--motion-ease),border-color .3s,box-shadow .3s,background .3s}
.shortcut:hover{border-color:#ff8c6f80;box-shadow:10px 18px 32px #0008}
.motion-toggle{border:1px solid #ffffff30;background:transparent;color:#cfcfca;border-radius:4px;padding:7px 10px;font-size:12px;min-height:34px}.motion-toggle[aria-pressed="true"]{color:#ffb49f;border-color:#ff5d3e80}
::view-transition-group(studio),::view-transition-group(character-art){animation-duration:.55s;animation-timing-function:var(--motion-ease)}
::view-transition-old(root){animation:screen-out .22s ease both}::view-transition-new(root){animation:screen-in .4s var(--motion-ease) both}
@keyframes screen-out{to{opacity:0}}@keyframes screen-in{from{opacity:0}to{opacity:1}}
@media(max-width:780px){.menuright{flex-wrap:wrap;justify-content:flex-end;max-width:75%}.menuright .draft-note{display:none}.window-file{display:none}}
html.reduced-motion{scroll-behavior:auto}
.reduced-motion *,.reduced-motion *:before,.reduced-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.reduced-motion .character-picker button:hover,.reduced-motion .primary:hover{transform:none}.reduced-motion button:active{scale:1}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}