/* Shared public homepage and login-loading first screen. */
:root,:root:lang(ja){--void:#090b13;--ivory:#f1e8d5;--gold:#dbbd80;--teal:#a3d1c9;--body-copy:#b5b9c1;--line:rgba(221,198,146,.19);--font-brand:Cinzel,serif;--font-mincho:'Astraea Entry JP','Yu Mincho',serif;--font-ui:'Yu Gothic','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;--orb-size:250px;--rx:min(34vw,490px);--ry:290px}
html,body{height:auto;min-height:100%;overflow:visible;background:var(--void)}
html{scroll-behavior:smooth;scroll-padding-top:26px;scrollbar-width:thin;scrollbar-color:#595343 var(--void)}
body{font-size:14px;line-height:2;letter-spacing:.045em}
body::-webkit-scrollbar{display:block;width:8px}
body::-webkit-scrollbar-thumb{background:#595343}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
h1,h2,h3{font-family:var(--font-mincho);font-weight:400;line-height:1.65;letter-spacing:.07em}
h2{font-size:clamp(26px,2.9vw,39px)}
h2 em,h1 em{font-style:normal;color:var(--gold)}
p{overflow-wrap:anywhere}
.skip-link{position:fixed;left:20px;top:-80px;padding:8px 16px;background:var(--void);z-index:100}
.skip-link:focus{top:10px}
.page-header{position:absolute;top:29px;left:0;right:0;z-index:30;height:100px;padding:0 5.6%;display:flex;align-items:center;justify-content:center}
.wordmark{font-family:var(--font-brand);font-size:24px;letter-spacing:.24em;text-indent:.24em;text-align:center;line-height:1.3}
.wordmark>span{display:block;font-family:var(--font-mincho);font-size:9px;letter-spacing:.45em;text-indent:.45em;color:var(--gold);margin:5px 0 0}
.page-header nav{position:absolute;right:5.6%;display:flex;align-items:center;gap:33px;font-size:12px;color:#d0ccbf}
.page-header nav>a{position:relative;padding:12px 0}
.page-header nav>a:hover{color:var(--gold)}
.stage{width:100%;height:970px;min-height:970px;animation:none;--orb-size:250px;--rx:min(34vw,490px);--ry:290px}
.stage .bg{inset:0;animation:none;transform:none;background-position:center 43%;opacity:.66}
.stage .vignette{background:linear-gradient(180deg,#090b1340 0%,#090b131a 24%,#090b1340 64%,#090b13 100%),linear-gradient(90deg,#090b13a6,transparent 27%,transparent 73%,#090b13a6)}
.stage .constellation{--cy:48.6%}
.hero-heading{position:absolute;top:133px;left:50%;transform:translateX(-50%);z-index:22;text-align:center;width:min(640px,45%);pointer-events:none}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--gold);font-family:var(--font-ui);font-size:10px;font-weight:500;letter-spacing:.18em;line-height:1.8}
.hero-heading .eyebrow{justify-content:center;font-size:11px;letter-spacing:.18em}
.hero-heading .eyebrow>span{width:24px;height:1px;background:var(--gold);opacity:.45}
.hero-heading h1{font-size:clamp(28px,3.2vw,44px);line-height:1.5;letter-spacing:.12em;margin-top:17px;text-shadow:0 3px 18px #030709}
.stage .mirror{--size:137px;animation:none;opacity:1}
.stage .mirror-float{animation-duration:12s}
.stage .mirror-cut::after{content:'';position:absolute;inset:42% 0 0;z-index:4;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(5,8,17,.8) 65%,rgba(5,8,17,.92))}
.stage .mirror figcaption{bottom:15%;width:84%;padding:0 2px;font-size:12px;line-height:1.4;letter-spacing:.04em;white-space:normal;word-break:keep-all;overflow-wrap:normal}
.stage .orb:not(.is-opening){animation:none}
.stage .orb-label-word{font-size:23px;letter-spacing:.25em;text-indent:.25em}
.stage .orb-label-cap{font-size:11px;letter-spacing:.14em;margin-top:12px}
.hero-explainer{position:absolute;top:656px;left:50%;transform:translateX(-50%);z-index:22;text-align:center;width:min(660px,60%);color:#d4d7d6;font-size:14px;line-height:2.05;text-shadow:0 2px 14px #090b13}
.hero-lead{font-family:var(--font-mincho);font-size:19px;color:var(--ivory);margin-bottom:12px;letter-spacing:.06em}
.hero-notes{list-style:none;display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin-top:22px;color:#b5c5c2;font-size:11px;letter-spacing:.06em}
.hero-notes li+li:before{content:'·';padding:0 14px;color:var(--gold)}
.hero-explainer .orb-hint{font-size:10px;color:#a3acae;margin-top:10px}
.scroll-cue{position:absolute;bottom:36px;left:50%;transform:translateX(-50%);z-index:23;text-align:center;font-size:11px;color:var(--gold);letter-spacing:.15em;padding:8px 16px}
.scroll-cue span{display:block;font-size:21px;margin-top:3px;line-height:1.3}
.stage-side-note{position:absolute;left:37px;top:44%;writing-mode:vertical-rl;font-size:9px;letter-spacing:.25em;color:#bbb79d60}
.section-wrap{width:min(1140px,calc(100% - 112px));margin:0 auto}
.section-heading .eyebrow{margin-bottom:22px}
.short-line{width:30px;height:1px;background:var(--gold);opacity:.4}
.about-section{padding:95px 0 108px;display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;border-top:1px solid var(--line)}
.about-copy{padding-top:1px;color:var(--body-copy);line-height:2.15}
.about-copy p+p{margin-top:20px}
.about-copy .intro{font-size:17px;color:var(--ivory);line-height:2}
.about-copy strong{font-weight:500;color:var(--gold)}
.role-pair{display:flex;align-items:center;gap:25px;border-top:1px solid var(--line);padding-top:24px;margin-top:30px;color:#e3ddcf;font-size:12px}
.role-pair small{display:block;font-size:10px;color:#9c9e9f;margin-bottom:3px}
.role-link{color:var(--gold);font-size:23px;line-height:1}
.experience-section{background:#10141d;border-top:1px solid #ffffff06;border-bottom:1px solid #ffffff06;position:relative}
.experience-inner{display:grid;grid-template-columns:.82fr 1.18fr;gap:96px;padding-top:94px;padding-bottom:94px;align-items:center}
.experience-copy h2{margin:20px 0 27px}
.experience-copy>p:not(.eyebrow){color:var(--body-copy);line-height:2.2;margin-top:18px}
.experience-copy>p:nth-of-type(2){font-family:var(--font-mincho);font-size:18px;color:var(--ivory)}
.text-link{display:inline-flex;gap:32px;align-items:center;font-size:12px;color:var(--gold);padding:7px 0;border-bottom:1px solid #d9bf8859;margin-top:26px}
.experience-copy p.example-note{font-size:10px;line-height:1.9;color:#929ba9;margin-top:36px;letter-spacing:.02em}
.story-preview{background:#141b25;border:1px solid #c2b18b42;border-radius:4px;box-shadow:0 30px 65px #0003;overflow:hidden}
.story-topline{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line);font-family:var(--font-mincho);font-size:14px}
.story-topline i{font-style:normal;color:var(--gold);margin-right:10px}
.story-topline small{font-family:var(--font-ui);font-size:8px;letter-spacing:.17em;color:#aeb3b9}
.story-scene{height:161px;background:linear-gradient(90deg,#141b256b,#141b2533),linear-gradient(0deg,#141b25,transparent),url('../../../public/astraea/assets/bg-isekai.webp') center 56%/cover;display:flex;flex-direction:column;justify-content:center;padding:18px 29px}
.scene-chapter{font-size:9px;letter-spacing:.13em;color:#d2c2a3;margin-bottom:11px}
.story-scene p{font-family:var(--font-mincho);font-size:20px;line-height:1.8;color:#f3ebd8}
.story-content{padding:14px 28px 23px;font-size:12px;color:#d0d5d9;line-height:2}
.speaker{display:block;font-size:10px;color:var(--gold);margin-bottom:8px;letter-spacing:.16em}
.player-turn{position:relative;border-left:2px solid #85b7b0;background:#95c0b00d;padding:15px 36px 15px 18px;margin:21px 0}
.player-turn .speaker{color:#a6d3c7}
.turn-arrow{position:absolute;right:18px;top:42%;color:#a6d3c7}
.choice-label{margin-top:26px;color:#bcbcae;font-size:10px}
.example-choices{display:flex;gap:8px;margin-top:10px;font-size:10px}
.example-choices span{padding:7px 10px;border:1px solid #cfc08c44;border-radius:2px;color:#d9c9a8;flex:1;text-align:center}
.free-input-example{border:1px solid #d5e3eb21;border-radius:2px;padding:10px 12px;display:flex;justify-content:space-between;color:#9aabb4;margin-top:12px;font-size:10px}
.story-caption{padding:12px 18px;text-align:center;font-size:9px;background:#0e151e;color:#b3b9bc;border-top:1px solid #ffffff0c;letter-spacing:.02em}
.how-section{padding-top:108px;padding-bottom:92px}
.centered{text-align:center}
.centered .eyebrow{justify-content:center}
.centered>p:last-child{color:var(--body-copy);margin-top:16px;font-size:13px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:66px}
.steps li{padding:0 34px;border-left:1px solid var(--line)}
.steps li:first-child{padding-left:0;border:0}
.steps li:last-child{padding-right:0}
.step-number{font-family:var(--font-brand);font-size:31px;color:var(--gold);opacity:.85;line-height:1.2}
.steps h3{font-size:19px;margin:22px 0 16px;color:var(--ivory)}
.steps p{color:var(--body-copy);font-size:13px;line-height:2.1}
.step-caption{display:block;margin-top:20px;font-size:10px;color:#b9bea9}
.how-footnote{text-align:center;color:#999eaa;font-size:11px;margin-top:52px}
.faq-section{border-top:1px solid var(--line);padding:95px 0 106px;display:grid;grid-template-columns:.8fr 1.2fr;gap:65px}
.faq-section .section-heading>p:last-child{color:var(--body-copy);margin-top:23px;font-size:13px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{padding:24px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;color:#e4dfd1;list-style:none;font-size:14px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{position:relative;width:12px;height:12px;flex:0 0 12px}
.faq-list summary span:before,.faq-list summary span:after{content:'';position:absolute;top:5px;left:0;background:var(--gold);height:1px;width:12px}
.faq-list summary span:after{transform:rotate(90deg)}
.faq-list details[open] summary span:after{transform:none}
.faq-list details>p{padding:0 32px 23px 0;color:var(--body-copy);font-size:13px;line-height:2.1}
.closing-section{text-align:center;position:relative;padding:70px 24px 78px;background:radial-gradient(ellipse at 50% 110%,#28443b66,transparent 65%),#0e131c;border-top:1px solid var(--line)}
.closing-star{font-size:35px;color:var(--gold);line-height:1;margin-bottom:18px}
.closing-section .eyebrow{justify-content:center;font-size:9px}
.closing-section h2{font-size:clamp(23px,2.9vw,36px);margin-top:23px}
.closing-section>p:not(.eyebrow){color:var(--body-copy);margin-top:15px;font-size:13px}
.primary-button{display:inline-flex;justify-content:space-between;gap:65px;align-items:center;background:#ddc697;border:1px solid #e5d2ab;border-radius:2px;color:#202622;padding:14px 26px;font-size:13px;margin-top:32px;letter-spacing:.12em;transition:background .2s}
.primary-button:hover{background:#f0deb4}
.closing-note{display:block;color:#a5aea8;font-size:10px;margin-top:12px}
.preview-footer{width:min(1280px,calc(100% - 96px));margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:29px 0;color:#9c9eaa}
.footer-brand{font-family:var(--font-brand);font-size:15px;letter-spacing:.2em;color:#d2c9b3}
.preview-footer>div{display:flex;gap:24px;flex-wrap:wrap}
.preview-footer button{background:none;border:0;color:inherit;font-size:10px;padding:8px 0}
.preview-footer button:hover{color:var(--gold)}
.preview-footer small{font-size:9px}
@media(min-width:1700px){.stage{--rx:560px}.stage .mirror{--size:151px}}
@media(max-width:1100px){.page-header{padding:0 5%}.page-header nav{gap:21px}.stage{--rx:34vw}.section-wrap{width:calc(100% - 88px)}.about-section{gap:50px}.experience-inner{gap:45px;grid-template-columns:.85fr 1.15fr}.hero-heading h1{font-size:37px}.hero-explainer{width:60%;font-size:13px}.hero-lead{font-size:17px}.steps li{padding:0 23px}.steps h3{font-size:17px}.preview-footer{flex-wrap:wrap}.stage-side-note{display:none}}
@media(max-width:1000px){
  body{font-size:13px}.page-header{top:26px;height:82px;padding:0 23px}.wordmark{font-size:20px}.wordmark>span{font-size:8px}.page-header nav{display:none}
  .stage{height:1030px;min-height:1030px;--orb-size:176px;--rx:33vw;--ry:250px}.stage .bg{background-position:50% 47%}.stage .vignette{background:linear-gradient(180deg,#090b13a1,transparent 23%,#090b1333 60%,#090b13 97%)}.stage .constellation{--cy:52%}.stage .mirror{--size:86px}.stage .mirror figcaption{font-size:10px;letter-spacing:0}.stage .mirror-plate{transform:translate(4px,5px)}.hero-heading{top:105px;width:calc(100% - 32px)}.hero-heading .eyebrow{font-size:9px;letter-spacing:.1em}.hero-heading .eyebrow>span{width:18px}.hero-heading h1{font-size:31px;letter-spacing:.065em;margin-top:18px}.hero-explainer{top:824px;width:calc(100% - 36px);font-size:12px;line-height:1.9}.hero-lead{font-size:14px;margin-bottom:9px}.hero-notes{font-size:9px;margin-top:12px}.hero-notes li+li:before{padding:0 8px}.hero-explainer .orb-hint{font-size:9px;margin-top:8px}.stage .orb-label-word{font-size:19px}.stage .orb-label-cap{font-size:10px;margin-top:9px}.scroll-cue{bottom:5px;width:calc(100% - 44px);font-size:9px;padding:3px 12px}.scroll-cue span{font-size:18px;margin-top:0}.section-wrap{width:calc(100% - 44px)}
  .about-section{grid-template-columns:1fr;gap:30px;padding:58px 0 62px}.section-heading .eyebrow{margin-bottom:18px}.about-copy .intro{font-size:15px}.about-copy p+p{margin-top:16px}.role-pair{gap:14px;font-size:11px}.role-pair small{font-size:9px}.role-link{font-size:20px}.desktop-break{display:none}
  .experience-inner{grid-template-columns:1fr;gap:32px;padding-top:56px;padding-bottom:56px}.experience-copy h2{margin:18px 0 24px}.experience-copy>p:nth-of-type(2){font-size:17px}.experience-copy p.example-note{margin-top:23px;font-size:10px}.example-note br{display:none}.story-content{padding:10px 19px 20px;font-size:12px;letter-spacing:.02em}.story-scene{padding:18px 20px}.story-scene p{font-size:19px}.story-topline{padding:14px 19px}.story-caption{font-size:9px;line-height:1.8}.example-choices{font-size:10px;gap:6px}.example-choices span{padding:6px 4px}.free-input-example{font-size:9px}
  .how-section{padding-top:63px;padding-bottom:60px}.centered{text-align:left}.centered .eyebrow{justify-content:flex-start}.centered>p:last-child{font-size:12px}.how-section h2{font-size:26px}.how-section h2 em{display:block}.steps{grid-template-columns:1fr;margin-top:36px;gap:30px}.steps li,.steps li:first-child,.steps li:last-child{position:relative;padding:0 0 28px 53px;border-left:0;border-bottom:1px solid var(--line)}.steps li:last-child{padding-bottom:0;border-bottom:0}.step-number{position:absolute;left:0;top:4px;font-size:24px}.steps h3{font-size:18px;margin:0 0 12px}.steps p{font-size:12px}.step-caption{font-size:10px;margin-top:12px}.how-footnote{text-align:left;font-size:10px;margin-top:32px}
  .faq-section{grid-template-columns:1fr;gap:30px;padding:56px 0 63px}.faq-section .section-heading>p:last-child{font-size:12px;margin-top:16px}.faq-section .section-heading>p:last-child br{display:none}.faq-list summary{font-size:13px;padding:21px 0;gap:14px}.faq-list details>p{font-size:12px;padding-right:18px}.closing-section{padding:54px 22px 57px}.closing-section h2{font-size:23px;letter-spacing:.02em}.closing-section>p:not(.eyebrow){font-size:12px}.preview-footer{width:calc(100% - 44px);display:block;text-align:center;padding:29px 0}.preview-footer>div{gap:6px 19px;justify-content:center;margin:17px 0 12px}.preview-footer button{font-size:9px}.primary-button{gap:55px}
}
@media(min-width:600px) and (max-width:1000px){.stage{height:1080px;min-height:1080px;--orb-size:230px;--ry:235px}.stage .constellation{--cy:50%}.stage .mirror{--size:116px}.stage .mirror figcaption{font-size:11px}.hero-heading h1{font-size:38px}.hero-heading .eyebrow{font-size:11px}.hero-explainer{top:829px;width:70%;font-size:14px}.hero-lead{font-size:18px}.hero-notes{font-size:11px}.hero-explainer .orb-hint{font-size:10px}.scroll-cue{bottom:25px;font-size:11px}.page-header{padding:0 44px}.section-wrap{width:calc(100% - 100px)}.about-section,.experience-inner,.how-section,.faq-section{padding-top:72px;padding-bottom:72px}.story-content{font-size:14px}.experience-copy p.example-note{font-size:11px}.steps p{font-size:14px}.faq-list details>p{font-size:14px}}
@media(max-width:360px){.hero-heading h1{font-size:27px}.stage{--orb-size:150px;--rx:32.2vw}.stage .mirror{--size:73px}.stage .mirror figcaption{font-size:9px}.hero-explainer{font-size:10px}.hero-lead{font-size:13px}.hero-notes{font-size:8px}.hero-notes li+li:before{padding:0 6px}.role-pair{gap:10px;font-size:10px}.example-choices{font-size:9px}.free-input-example{font-size:8px}.closing-section h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* The review ribbon is absent on both live entry documents. */
.page-header{top:0}
.home-lang-select{left:24px;right:auto}
.homepage .home-lang-select{position:absolute;top:28px}
html:lang(en) .hero-heading h1{letter-spacing:.025em;font-size:clamp(28px,3vw,42px)}
html:lang(en) .stage .mirror figcaption{font-size:11px;word-break:normal}
html:lang(en) .stage .orb-label-cap{font-size:9px;letter-spacing:.02em}
html:lang(en) .hero-heading .eyebrow{letter-spacing:.04em}
@media(max-width:600px){
  .homepage .home-lang-select{top:16px;left:12px;width:88px;height:36px;font-size:11px}
  .homepage .wordmark{font-size:20px}
  html:lang(en) .stage .mirror figcaption{font-size:8px}
  html:lang(en) .hero-heading .eyebrow{font-size:9px}
  html:lang(en) .hero-lead{font-size:13px}
  html:lang(en) .hero-explainer{font-size:10px}
}
@media(max-width:360px){.homepage .home-lang-select{left:8px;width:78px;padding:0 5px}.homepage .wordmark{font-size:18px;letter-spacing:.18em;text-indent:.18em}}
.page-loading .stage .mirror{opacity:1;animation:none}
.page-loading .page-header,.page-loading .scroll-cue{pointer-events:none}
.page-loading .load-word{font-size:clamp(15px,1.6vw,23px);letter-spacing:.14em;text-indent:.14em}
html:has(.overlay.is-open),html:has(.overlay.open),body.homepage:has(.overlay.is-open),body.homepage:has(.overlay.open){overflow:hidden}
.preview-footer [data-policy-link]{font-size:11px;color:#9ca1a8}
.preview-footer [data-policy-link]:hover{color:var(--gold)}
.image-feature{color:var(--gold)}

/* The authenticated handoff paints the existing Loading first screen before
   the next document's asset inventory is ready, without another asset request. */
/* Keep the embedded Loading viewport equal to the locked login viewport;
   classic iframe scrollbars otherwise shift its centered orb in WebKit. */
html:has(body.page-loading),body.page-loading{height:100%;overflow:hidden}
.login-handoff> :not(main):not(.page-header):not(script):not(template),
.login-handoff main> :not(#stage){display:none!important}
.login-handoff .constellation{transform:none!important;pointer-events:none}
.login-handoff .stage,.login-handoff .stage .mirror{transition:none!important}