@import url("/platform-visual/typography.css?v=20260919-1");
:root{color-scheme:dark;font-family:Arial,sans-serif;background:#000;color:#eee9e3}
*{box-sizing:border-box}body{margin:0}button{font:inherit}
#sky{position:fixed;inset:0;width:100%;height:100dvh;border:0;background:#000}
nav{position:fixed;z-index:4;top:max(18px,env(safe-area-inset-top));right:max(22px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:8px}
nav button{width:44px;height:44px;display:grid;place-items:center;border:0;background:transparent;color:#c7ccc9;font-size:28px;font-weight:300;cursor:pointer;border-radius:50%;transition:color .5s,background .5s}
nav #about{font-size:23px}
body[data-view="sky"] nav button{animation:quiet-breath 13s ease-in-out infinite}
body[data-view="sky"] nav #add{animation-delay:-4s}body[data-view="sky"] nav #about{animation-delay:-8s}
@keyframes quiet-breath{0%,100%{color:#899493;text-shadow:0 0 2px #94c4ca22}33%{color:#b3a4b8;text-shadow:0 0 5px #c4a4dc33}66%{color:#b5ae94;text-shadow:0 0 4px #e1cca133}}
nav button:hover,nav button:focus-visible{animation:none!important;color:#fff!important;background:#ffffff0a;outline:1px solid #ffffff55;outline-offset:2px}
section[hidden]{display:none!important}main{position:relative;z-index:2;pointer-events:none}
#about-page{height:100dvh;overflow-y:auto;pointer-events:auto;background:linear-gradient(90deg,transparent,rgba(0,0,0,.35) 25%,rgba(0,0,0,.35) 75%,transparent);scrollbar-color:#555 transparent}
article{max-width:650px;margin:0 auto;padding:100px 44px 100px 28px;text-shadow:0 2px 14px #000}
.eyebrow{font-size:10px!important;letter-spacing:.32em;color:#b7b5b6;margin:0 0 30px!important}
h1{font-family:var(--platform-font);font-size:clamp(42px,7vw,68px);font-weight:400;line-height:1.12;letter-spacing:-.035em;margin:0 0 38px}
article p{font-size:17px;line-height:1.95;color:#c7c3c1;margin:0 0 27px}
article .lead{font-family:var(--platform-font);font-size:clamp(22px,4vw,28px);line-height:1.55;color:#ece3d8;margin-bottom:38px}em{font-style:normal;color:#e3d9e1}
article .closing{font-family:var(--platform-font);font-size:26px;line-height:1.65;color:#e1d5c7;margin:44px 0 0}
#add-page{pointer-events:auto;height:100dvh;padding:80px 80px 30px 24px;display:grid;place-items:center}
#form{width:min(620px,100%);height:min(740px,100%);border:0;background:transparent}
@media(max-width:600px){nav{right:10px;gap:5px}article{padding:80px 70px 70px 25px}article p{font-size:16px}#add-page{padding:65px 60px 15px 8px}}
@media(prefers-reduced-motion:reduce){body[data-view="sky"] nav button{animation:none}nav button{transition:none}}

.language-switch{display:flex;gap:20px;margin-bottom:36px}.language-switch button{border:0;padding:5px 0;background:transparent;color:#aaa;font-size:12px;cursor:pointer}.language-switch button[aria-pressed="true"]{color:#eee;border-bottom:1px solid #aaa}.language-switch button:focus-visible{outline:1px solid #ccc;outline-offset:4px}#copy-zh h1,#copy-zh .lead,#copy-zh .closing{font-family:var(--platform-font)}#copy-zh p{line-height:2.1}#copy-zh h1{letter-spacing:.08em}

/* About presentation only: original shared sky remains untouched. */
#about-page{overflow:hidden;background:linear-gradient(0deg,#0002,transparent 65%,#0005)}
.language-switch{position:fixed;z-index:3;top:max(20px,env(safe-area-inset-top));left:5vw;right:90px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:0;padding:8px 0;background:linear-gradient(#000b,#0000)}
.language-switch button{font-size:14px;min-height:34px}
.crawl-stage{position:absolute;inset:100px 0 0;overflow:hidden;perspective:650px;mask-image:linear-gradient(transparent,black 9%,black 94%,transparent)}
#about-page article{position:absolute;top:0;left:10%;width:80%;max-width:none;margin:0;padding:0 30px 80px;transform-origin:50% 100%;will-change:transform;text-align:center}
#about-page article p{font-size:var(--platform-body);line-height:1.9;margin-bottom:1.5em;color:#e5ddce}
#about-page article h1{font-size:var(--platform-h1);margin-bottom:1em}
#about-page article .lead,#about-page article .closing{font-size:var(--platform-intro);color:#f0e6d5}
#pause-crawl{margin-inline-start:auto;min-width:40px}
@media(max-width:600px){.language-switch{left:20px;right:65px;gap:8px 16px}.crawl-stage{top:110px;perspective:900px}#about-page article{left:4%;width:88%;padding:0 12px 60px}#about-page article p{font-size:var(--platform-body)}}
@media(prefers-reduced-motion:reduce){#about-page{overflow:auto}.crawl-stage{position:relative;inset:auto;padding-top:110px;overflow:visible;mask-image:none;perspective:none}#about-page article{position:relative;transform:none!important;will-change:auto}#pause-crawl{display:none}}

/* Focused full-page panels must not draw a frame around the sky. */
#about-page:focus,#add-page:focus{outline:none}

/* Make the English work title readable above the opening statement. */
#about-page article .eyebrow{font-size:clamp(18px,2.2vw,30px)!important;letter-spacing:.16em;line-height:1.5;color:#e5ddce}

/* Keep all language names at the top without consuming the reading area. */
.language-switch{flex-wrap:nowrap;align-items:flex-start;gap:14px}
.language-options{display:flex;flex:1;min-width:0;flex-wrap:wrap;align-content:flex-start;gap:6px 20px;max-height:min(25dvh,170px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent;padding:0 6px 8px 0}
.language-options button{flex:none;white-space:nowrap;line-height:1.5}
.reading-controls{display:flex;flex:none;align-items:center;gap:6px}
.reading-controls button{width:34px;min-height:34px}
#pause-crawl{margin-inline-start:0}
@media(max-width:600px){.language-switch{left:16px;right:60px;gap:6px}.language-options{max-height:150px;gap:4px 14px}.language-options button{font-size:13px}.reading-controls{flex-direction:column;gap:4px}.reading-controls button{width:28px;min-width:28px}}
@media(prefers-reduced-motion:reduce){.crawl-stage{padding-top:220px}}

/* Reading controls sit below ?; keep the original payment form in its iframe. */
nav .reading-controls{display:none;flex-direction:column;gap:8px}
body[data-view="about"] nav .reading-controls{display:flex}
nav .reading-controls button{width:44px;height:44px;font-size:18px;color:#aaa}
#add-page{padding:24px 76px 24px 24px}
.add-dialog{position:relative;width:min(620px,100%);height:min(500px,calc(100dvh - 48px));padding-top:32px;background:#080d0d}
#form{display:block;width:100%;height:100%;height:calc(100% - 0px);border:0}
#close-form{position:absolute;top:0;right:8px;width:36px;height:32px;display:grid;place-items:center;padding:0;border:0;background:transparent;color:#bbb;font-size:24px;cursor:pointer}
#close-form:hover{color:#fff}#close-form:focus-visible{outline:1px solid #aaa;outline-offset:-3px}
@media(max-width:600px){#add-page{padding:16px 58px 16px 8px}.add-dialog{height:min(560px,calc(100dvh - 32px))}nav .reading-controls{gap:5px}}
@media(prefers-reduced-motion:reduce){nav #pause-crawl{display:none}}

/* Leave exposed sky interactive on every view. Only actual controls capture input. */
#about-page,#add-page,.crawl-stage,#about-page article{pointer-events:none}
.language-switch,.add-dialog{pointer-events:auto}

#ending-add{display:block;pointer-events:auto;margin:64px auto 40px;width:88px;height:88px;padding:0;border:0;background:transparent;color:#e5ddce;font:300 76px/1 Arial,sans-serif;cursor:pointer;transition:color .3s,text-shadow .3s}
#ending-add:hover,#ending-add:focus-visible{color:#fff;text-shadow:0 0 14px #e5ddce66;outline:1px solid #aaa;outline-offset:4px}

#directory-page{pointer-events:auto;height:100dvh;overflow:auto;padding:64px 80px 40px 32px;background:#0009} .directory-panel{max-width:44rem;margin:auto;padding:0;font-family:Arial,Helvetica,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:1rem;line-height:1.6;color:#eee9e3}#directory-title{font-family:inherit;font-size:var(--platform-h1);font-weight:600;line-height:1.2;letter-spacing:-.02em;margin:0 0 24px}.directory-panel p{color:#d0ced3;font-size:.875rem;line-height:1.5}.directory-panel label{display:block;margin:28px 0 10px}#star-search{width:100%;padding:12px;background:#101313;border:0;border-bottom:1px solid #777;color:#eee9e3;font:inherit;min-height:44px}#star-list{padding:0;list-style:none}#star-list button{display:flex;justify-content:space-between;gap:16px;width:100%;padding:16px 0;border:0;border-bottom:1px solid #ffffff22;background:transparent;color:#eee;text-align:start;cursor:pointer;overflow-wrap:anywhere}#star-list small{color:#d0ced3;font-size:.75rem;white-space:nowrap}#star-list button:hover{color:#a9f4f3}#directory-retry{color:#fff;background:#222;border:1px solid #666;padding:10px}nav #directory{font-size:25px}@media(max-width:600px){#directory-page{padding:80px 64px 32px 20px}#directory-title{font-size:var(--platform-h1)}.directory-panel{padding:0}#star-list button{flex-direction:column;gap:6px}}

#directory-language{max-width:100%;background:#101313;color:#eee;border:1px solid #555;padding:10px;font:inherit;margin:0 0 12px}

/* Directory controls share the original interactive sky; no full-page veil. */
#directory-page{pointer-events:none;background:transparent;overflow:hidden}
.directory-panel{pointer-events:none}
#directory-language,#star-search,#directory-retry{pointer-events:auto}
#star-list{pointer-events:auto;width:max-content;max-width:100%;max-height:calc(100dvh - 330px);overflow-y:auto;scrollbar-color:#777 transparent}
#star-list button{pointer-events:auto;width:100%;min-width:220px;gap:24px}
@media(max-width:600px){#star-list{max-height:calc(100dvh - 300px)}#star-list button{min-width:160px}}

#about-page{background:transparent}

/* Quiet navigation: every view, dimmer than the lights, softly staggered. */
body nav button,body[data-view="sky"] nav button{color:#8b939b;opacity:.42;animation:icon-starlight 9s ease-in-out infinite;text-shadow:none}
body nav #add{animation-delay:-2s}body nav #about{animation-delay:-5s}body nav #directory{animation-delay:-7s}
body nav .reading-controls button{color:#8b939b;animation-delay:-3s}body nav #pause-crawl{animation-delay:-6s}
@keyframes icon-starlight{0%,100%{opacity:.28;color:#858b99}42%{opacity:.55;color:#9da9ae}72%{opacity:.35;color:#9b8e9e}}
body nav button:hover,body nav button:focus-visible{opacity:1;animation:none!important}
@media(prefers-reduced-motion:reduce){body nav button,body[data-view="sky"] nav button{animation:none;opacity:.45}body nav button:hover,body nav button:focus-visible{opacity:1}}

/* Keep the entire directory scrollport inside the viewport. */
#directory-page{height:100dvh;padding-bottom:max(24px,env(safe-area-inset-bottom))}
.directory-panel{height:100%;min-height:0;display:flex;flex-direction:column}
.directory-panel>*{flex-shrink:0}
#star-list{flex:1 1 auto;min-height:0;max-height:none;margin-bottom:0;padding-bottom:16px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;touch-action:pan-y}
@media(max-height:600px){#directory-page{padding-top:20px}.directory-panel{padding-top:0;padding-bottom:0}#directory-title{margin-bottom:12px}.directory-panel label{margin-top:12px}#directory-status{margin:10px 0}}

/* One shared left/right edge for search, names, IDs and row rules. */
#star-list{width:100%;max-width:100%;scrollbar-gutter:auto;scrollbar-width:none}
#star-list::-webkit-scrollbar{display:none}
#star-list li{width:100%}
#star-list button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;width:100%;min-width:0;text-align:start}
#star-list button span{min-width:0}
#star-list small{justify-self:end;text-align:end;font-variant-numeric:tabular-nums}

/* A quiet path back to MADICE, always within the screen safe area. */
#madice-return{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:5;width:44px;height:44px;display:grid;place-items:center;pointer-events:auto;color:#8b939b;font:500 19px Arial,sans-serif;text-decoration:none;opacity:.42;animation:icon-starlight 9s ease-in-out -4s infinite}
#madice-return:hover,#madice-return:focus-visible{animation:none;opacity:1;color:#fff}
#madice-return:focus-visible{outline:1px solid #888;outline-offset:2px}
@media(max-width:600px){#madice-return{right:max(10px,env(safe-area-inset-right))}}
@media(prefers-reduced-motion:reduce){#madice-return{animation:none}}

/* Voluntary account entry stays above the same retained sky. */
#account-page{height:100dvh;overflow-y:auto;padding:64px 80px 64px 32px;pointer-events:none;scrollbar-color:#555 transparent}
.account-panel{max-width:44rem;margin:0 auto;pointer-events:auto;font-family:Arial,Helvetica,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;color:#eee9e3;line-height:1.6;text-shadow:none}
.account-panel h1{font-family:inherit;font-size:var(--platform-h1);font-weight:600;line-height:1.2;letter-spacing:-.02em;margin:0 0 24px;overflow-wrap:anywhere}
.account-panel h2{font-family:inherit;font-size:var(--platform-h2);font-weight:600;line-height:1.3;letter-spacing:0;margin:48px 0 16px}
.account-panel p{font-size:1rem;font-weight:400;color:#d0ced3;margin:16px 0;line-height:1.6}
#account-intro{font-size:1.125rem;line-height:1.65;margin:0 0 24px}
#account-join{display:inline-flex;align-items:center;min-height:44px;font-size:1rem;font-weight:500;color:inherit;border-bottom:1px solid #666369;text-decoration:none;padding:8px 0}
#account-status{font-size:.875rem;line-height:1.5;color:#d0ced3;margin-top:24px}
#account-browse{display:inline-flex;align-items:center;min-height:44px;border:0;background:transparent;color:inherit;padding:8px 0;margin-top:32px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;font:inherit;font-size:1rem}
.account-panel a:focus-visible,.account-panel button:focus-visible{outline:2px solid #b1eef0;outline-offset:4px}
.account-panel :is(a,button):hover{color:#b1eef0}
.account-panel:lang(zh) h1{letter-spacing:normal}
@media(max-width:600px){#account-page{padding:80px 64px 32px 20px}.account-panel h1{font-size:var(--platform-h1)}.account-panel h2{font-size:var(--platform-h2);margin-top:32px}#account-intro{font-size:1rem}#account-browse{margin-top:24px}}

@media(max-height:660px){nav{gap:0}nav button{height:38px}}