src/launch.css

@import url('/fonts/launch-fonts.css');
/* Maple's full-scene composition, typography and compact controls, in MiniCPM blue. */
#launch-screen{--ml-ink:#f1f0ea;--ml-muted:#b2bacb;--ml-faint:#b1b9cc;--ml-line:#b8c2e626;position:relative;min-height:100svh;background:#090d17;color:var(--ml-ink);font-family:'Manrope',sans-serif;z-index:1}
body:not(.launch-view) #launch-screen{display:none}.launch-view{overflow:auto;background:#090d17}.launch-view .shell{position:fixed;inset:0;z-index:25;height:100dvh;min-height:0;pointer-events:none;padding:0!important;background:transparent}.launch-view .shell>.sidebar,.launch-view .shell>.main-shell{display:none!important}.launch-view .settings-panel{position:absolute;top:82px;right:0;bottom:0;width:350px;max-width:100vw;z-index:25;pointer-events:auto;box-shadow:-20px 0 80px #0007}.launch-view #apply-settings{display:none}.launch-view .settings-panel .launch-settings-actions{display:none}
.ml-art{position:fixed;inset:60px -8% -5% 31%;z-index:0;pointer-events:auto;mix-blend-mode:screen;background:radial-gradient(ellipse at 48% 53%,#25295842,transparent 66%)}.ml-art #launch-scene{position:absolute;inset:0}.ml-art #launch-scene canvas{display:block;mix-blend-mode:screen}.ml-shade{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(97deg,#090d17f2 0%,#090d17e0 24%,#090d179e 40%,#090d172e 52%,#090d1700 62%)}.ml-grain{position:fixed;inset:0;z-index:2;opacity:.035;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.93' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.ml-topbar{position:fixed;top:0;left:0;right:0;z-index:10;height:82px;display:flex;align-items:center;gap:45px;padding:0 clamp(22px,4vw,68px);border-bottom:1px solid #f2eee41c;background:linear-gradient(to bottom,#080d175c,transparent);backdrop-filter:blur(8px)}.ml-brand{display:flex;align-items:center;gap:13px;color:var(--ml-ink);text-decoration:none;font-size:12px;letter-spacing:.11em;font-weight:600}.ml-brand:hover{text-decoration:none}.ml-brand em{color:var(--ml-faint);font-style:normal;font-weight:400}.ml-mark{width:31px;height:31px;display:grid;place-items:center;border:1px solid #8d9df6a8;border-radius:50%;color:#b6c5ff}.ml-mark svg{width:17px;height:17px}.ml-private{display:inline-flex;align-items:center;gap:8px;color:#a5bacd;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.1em}.ml-private>i{width:6px;height:6px;border-radius:50%;background:#9fcce8;box-shadow:0 0 14px #a2c8ee80}
.ml-stage{position:relative;z-index:3;min-height:100svh;display:flex;align-items:center;padding:116px clamp(24px,7vw,112px) 70px;pointer-events:none}.ml-copy,.ml-loader{width:min(585px,47vw);position:relative;pointer-events:auto}.ml-eyebrow{margin:0 0 26px;color:var(--ml-faint);font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.15em}.ml-eyebrow>span{color:#9eaff5;margin-right:12px}.ml-copy h1{margin:0;font-family:'Manrope',sans-serif;font-size:clamp(58px,7.4vw,112px);line-height:.84;font-weight:300;letter-spacing:-.045em;text-shadow:0 2px 30px #090d17d9,0 1px 6px #090d17b3;white-space:nowrap}.ml-copy h1 em{color:#c0c8e0;font-family:'Newsreader',serif;font-weight:300}.ml-lede{width:min(500px,100%);margin:28px 0 0;color:#c9ceda;text-shadow:0 1px 14px #090d17cc;font-size:clamp(16px,1.15vw,18px);line-height:1.75;font-weight:300}
.ml-context{margin:28px 0 0;max-width:440px}.ml-context>label{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:11px}.ml-context>label>span,.ml-kv-row>span{color:#a8b0c1;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.13em}.ml-context>label>strong{font-family:'DM Mono',monospace;font-size:12px;font-weight:400;color:#b6bff0}.ml-context input[type=range]{appearance:none;width:100%;height:2px;background:var(--ml-line);cursor:pointer;display:block;margin:20px 0 12px}.ml-context input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#b9c3f0;border:0;cursor:pointer}.ml-context input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#b9c3f0;border:0;cursor:pointer}.ml-context-note{margin:9px 0 15px;color:#b0bacf;font-family:'DM Mono',monospace;font-size:12px;line-height:1.6}.ml-kv-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:16px}.ml-kv-row>span{font-size:12px}.ml-kv-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--ml-line);flex:1}.ml-kv-modes button{padding:12px 8px;min-height:42px;border:0;background:#0d1422;color:var(--ml-faint);font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.1em;cursor:pointer;transition:color .2s,background .2s}.ml-kv-modes button:hover{color:#d1d8f3}.ml-kv-modes button[aria-pressed=true]{background:#1c2842;color:#c0cbf4}
#ml-storage .model-storage-choice{margin-top:15px;max-width:440px}#ml-storage .storage-switch{font-family:'DM Mono',monospace;font-size:12px;color:#adb6ca}#ml-storage .model-storage-choice>small{font-family:'DM Mono',monospace;font-size:12px;color:#aab4ca;margin-left:35px}.ml-actions{display:flex;align-items:center;gap:28px;margin-top:22px}.ml-actions .launch-control{margin:0;display:block}.ml-actions .launch-control>span{display:none}.ml-actions .primary-button{min-width:202px;height:57px;display:inline-flex;align-items:center;justify-content:space-between;padding:0 20px 0 24px;border:1px solid #abbbeaaf;border-radius:2px;background:#b0bce817;box-shadow:none;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#e2e8ff;gap:25px;transition:background .25s,color .25s,transform .25s}.ml-actions .primary-button>svg:first-child{display:none}.ml-actions .primary-button:hover{background:#ccd7ff;color:#10182a;transform:translateY(-2px)}.ml-text-button{padding:10px 0;background:none;border:0;border-bottom:1px solid #d0d9ef3d;color:var(--ml-faint);font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.12em;cursor:pointer;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}.ml-text-button:hover{color:var(--ml-ink);border-color:var(--ml-ink)}.ml-text-button svg{width:11px;height:11px}.ml-advanced{margin-top:9px;border-color:transparent;font-size:12px;padding-bottom:3px}.ml-specs{display:flex;gap:clamp(28px,4vw,58px);margin:29px 0 0}.ml-specs>div{display:flex;flex-direction:column;gap:4px}.ml-specs dt{font-family:'Newsreader',serif;font-size:22px;font-style:italic;color:#d6ddf3}.ml-specs dd{margin:0;color:#a3aabc;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.13em}.ml-byline{margin:20px 0 0;color:#aab4ca;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.12em}.ml-caption{position:fixed;bottom:27px;right:clamp(22px,4vw,68px);z-index:3;display:flex;align-items:center;gap:24px;color:#9ca6bb;font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.12em;pointer-events:none}.ml-caption>i{width:42px;height:1px;background:#b0c0e330}
.ml-loader{width:min(470px,43vw)}.ml-loader .loading-panel{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.ml-loader .loading-line{display:flex;flex-direction:column-reverse;align-items:flex-start;gap:24px}.ml-loader #load-progress-text{font-family:'Manrope',sans-serif;font-size:clamp(92px,11vw,160px);font-weight:300;letter-spacing:-.07em;line-height:1}.ml-loader #load-stage{font-family:'DM Mono',monospace;font-size:12px;font-weight:400;letter-spacing:.09em;text-transform:uppercase}.ml-loader .progress-track{margin:20px 0 13px;height:2px;background:var(--ml-line)}.ml-loader #load-progress{background:#b4c6ff;border-radius:0;box-shadow:0 0 18px #aec2ff66}.ml-loader .loading-bottom{align-items:flex-start;gap:14px;font-family:'DM Mono',monospace;font-size:12px;line-height:1.8}.ml-loader #load-detail{max-width:85%;color:#a9b3c8}.ml-loader .launch-stages{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.05em;margin-top:22px}.ml-loader-note{margin:26px 0 16px;color:#9da9c1;font-size:12px;line-height:1.8;max-width:400px}.ml-loader .status-led{display:none}
@media(max-width:1050px){.ml-actions{gap:18px}.ml-actions .primary-button{min-width:180px}.ml-copy h1{font-size:7.1vw}.ml-copy{width:50vw}.ml-art{left:35%;right:-18%}.ml-caption{font-size:12px;gap:14px}.ml-topbar{gap:30px}}
@media(max-width:850px){.ml-topbar{height:68px;gap:24px}.ml-topbar .ml-brand{font-size:12px}.ml-private{font-size:12px}.hf-embedded .ml-topbar{align-items:flex-start;padding-top:18px;height:92px}.hf-embedded .ml-private{position:absolute;top:65px;left:clamp(22px,4vw,68px)}.ml-stage{align-items:flex-start;padding-top:120px;padding-bottom:55px}.ml-copy,.ml-loader{width:100%;max-width:600px}.ml-copy h1{font-size:clamp(55px,13vw,84px)}.ml-lede{max-width:530px}.ml-context{max-width:440px}.ml-art{inset:40px -30% auto 20%;height:650px;opacity:.7}.ml-shade{background:linear-gradient(180deg,#090d179e 0%,#090d17d6 38%,#090d17f5 100%)}.ml-caption{display:none}.ml-loader{padding-top:8vh}.launch-view .settings-panel{top:92px}.ml-specs{margin-top:30px}}
@media(max-width:520px){.ml-topbar{padding-left:24px;padding-right:24px}.hf-embedded .ml-topbar{padding-top:76px;height:124px}.hf-embedded .ml-private{position:static;font-size:12px;padding-top:9px}.hf-embedded .ml-stage{padding-top:159px}.launch-view .settings-panel{top:124px}.ml-copy h1{font-size:clamp(49px,12.6vw,65px)}.ml-eyebrow{font-size:12px;margin-bottom:23px}.ml-lede{font-size:13px;margin-top:28px}.ml-context{margin-top:28px}.ml-actions{align-items:stretch;flex-direction:column;gap:8px;margin-top:25px}.ml-actions .primary-button{width:100%}.ml-actions .ml-text-button{align-self:flex-start}.ml-specs{justify-content:space-between;gap:12px}.ml-kv-row>span{font-size:12px}.ml-kv-modes button{font-size:12px;padding:12px 5px}.ml-byline{font-size:12px}.ml-context-note{font-size:12px}.ml-loader .loading-bottom{font-size:12px}.ml-loader #load-progress-text{font-size:112px}}
@media(prefers-reduced-motion:reduce){.ml-actions .primary-button{transition:none}}

/* Keep controls and supporting copy readable at every viewport width. */
.ml-context>label>strong{font-size:14px}
.ml-context-note{font-size:13px;line-height:1.65}
#ml-storage .storage-switch{font-family:'Manrope',sans-serif;font-size:14px;color:#d0d7e8}
#ml-storage .model-storage-choice>small{font-family:'Manrope',sans-serif;font-size:13px;max-width:none;line-height:1.6}
.ml-actions .primary-button{font-size:13px;letter-spacing:.08em}
.ml-text-button{font-size:12px;letter-spacing:.06em}
.ml-advanced{font-size:12px;margin-top:12px}
.ml-specs dd{font-family:'Manrope',sans-serif;font-size:12px;letter-spacing:.04em;line-height:1.5}
.ml-byline{font-size:12px;letter-spacing:.04em;line-height:1.7}
.ml-loader #load-stage,.ml-loader .loading-bottom{font-size:13px}
.ml-loader .launch-stages{font-size:12px;line-height:1.6;flex-wrap:wrap;gap:12px}
.ml-loader-note{font-size:15px}
.ml-kv-modes button:focus-visible,.ml-text-button:focus-visible,.storage-switch:focus-visible{outline:2px solid #c0cbff;outline-offset:4px}
@media(max-width:520px){.ml-lede{font-size:16px}.ml-topbar{gap:16px}.ml-private{letter-spacing:0}.ml-context>label{gap:10px}.ml-context>label>span{letter-spacing:.05em}.ml-byline{max-width:300px}.ml-specs{gap:20px}.ml-specs>div{flex:1;min-width:0}}

.ml-runtime-details{margin-top:24px;color:#b9c5de;font-size:13px;max-width:100%}.ml-runtime-details summary{cursor:pointer;padding:6px 0}.ml-runtime-details pre{max-height:200px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;font-family:'DM Mono',monospace;font-size:12px;background:#0a101ddd;padding:14px;border:1px solid var(--ml-line)}
.gpu-preparing .ml-loader #load-progress-text{font-size:clamp(72px,9vw,126px);letter-spacing:-.04em}.gpu-preparing .ml-loader .progress-track{overflow:hidden}.gpu-preparing #load-progress{width:35%!important;animation:gpu-setup 1.8s ease-in-out infinite}
@keyframes gpu-setup{from{transform:translateX(-120%)}to{transform:translateX(400%)}}
@media(prefers-reduced-motion:reduce){.gpu-preparing #load-progress{animation:none;width:100%!important}}

.ml-dspark{max-width:440px;margin:20px 0 18px}.ml-dspark label{display:block;font:13px var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:#b8bfd3;margin-bottom:10px}.ml-dspark select{width:100%;padding:12px 14px;background:#111725;color:#e1e5f2;border:1px solid #3a4156;border-radius:4px;font:15px system-ui}.ml-dspark p{font:14px/1.6 system-ui;color:#abb4c9;margin:9px 0}