html:has(body.sci-stars), body.sci-stars { margin: 0; height: 100%; min-width: 320px; background: #080e16; overflow: hidden; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: #edf3f7; }
.sci-stars .sci-header { position: fixed; left: 0; right: 0; top: 0; background: #080e16ef; }
.sci-stars>canvas { position: fixed; left: 0; top: 0; z-index: 0; }
.sci-stars #brand { position: fixed; left: 32px; top: 113px; z-index: 12; pointer-events: none; max-width: min(440px, calc(100vw - 60px)); }
.star-eyebrow { color: #95cbbb; font-size: 10px; letter-spacing: .15em; }
.sci-stars #brand h1 { font-size: 31px; line-height: 1.3; font-weight: 520; letter-spacing: -.025em; margin: 13px 0 12px; text-shadow: 0 2px 16px #080e16; }
.sci-stars #brand small { display: block; font-size: 13px; line-height: 1.7; color: #abc0cc; }
.sci-stars #brand p { color: #7f9aaa; font-size: 14px; line-height: 1.7; margin: 8px 0; }
.sci-stars #search { position: fixed; right: 32px; top: 113px; width: 337px; z-index: 13; opacity: 1; }
.sci-stars #search label { display: block; color: #abc5ca; font-size: 13px; margin-bottom: 9px; }
.star-search-field { display: flex; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #40605e; border-radius: 8px; background: #11222dec; box-shadow: 0 7px 24px #0002; }
.star-search-field>span { font-size: 26px; color: #91b5b0; }
.sci-stars #search input { box-sizing: border-box; width: 100%; min-width: 0; height: 47px; padding: 10px 0; border: 0; background: none; color: #edf3f7; font: inherit; font-size: 14px; outline: none; }
.star-search-field:focus-within { border-color: #87ead0; outline: 2px solid #87ead026; }
.sci-stars #search input::placeholder { color: #829caa; }
.sci-stars #search input:disabled { opacity: .55; }
.sci-stars #scount { display: block; color: #8da8b6; font-size: 12px; line-height: 1.8; margin-top: 8px; }
.sci-stars #tip { position: fixed; z-index: 13; box-sizing: border-box; max-width: min(340px, calc(100vw - 32px)); padding: 10px 13px; border-radius: 7px; background: #11232ef5; color: #d9eced; font-size: 14px; line-height: 1.65; pointer-events: none; opacity: 0; border: 1px solid #44675e; }
.sci-stars #panel { position: fixed; right: 0; top: 78px; height: calc(100% - 78px); width: min(410px, 100%); z-index: 35; box-sizing: border-box; padding: 32px 27px; background: #0e1b27fa; border-left: 1px solid #365346; transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; backdrop-filter: blur(14px); box-shadow: -12px 0 40px #0003; }
.sci-stars #panel.show { transform: translateX(0); }
.sci-stars #panel h3 { margin: 6px 30px 16px 0; font-size: 22px; line-height: 1.5; color: #ecf7f5; font-weight: 550; }
.sci-stars #panel .pmeta { color: #8dceb7; font-size: 14px; line-height: 1.8; padding-bottom: 17px; margin-bottom: 19px; border-bottom: 1px solid #2e4350; }
.sci-stars #panel p { color: #c1d1dc; font-size: 15px; line-height: 1.9; }
.sci-stars #panel h4 { margin: 27px 0 13px; font-size: 14px; font-weight: 550; color: #b4cbd3; letter-spacing: .03em; }
.sci-stars #panel .ploading { color: #9fc0c5; font-size: 15px; }
.sci-stars #panel .pnn { padding: 0; }
.sci-stars #panel .pnn li { list-style: none; padding: 12px 14px; margin: 8px 0; font-size: 14px; line-height: 1.75; cursor: pointer; background: #1a2d39; border: 1px solid #304955; border-radius: 7px; color: #cddce5; }
.sci-stars #panel .pnn li:hover { background: #254439; border-color: #568c76; }
.sci-stars #panel #pclose { position: absolute; right: 15px; top: 17px; background: #19302f; width: 32px; height: 32px; border: 1px solid #3c5b50; border-radius: 6px; color: #c7dfd6; font-size: 22px; cursor: pointer; }
.star-toolbar { position: fixed; z-index: 18; bottom: 27px; left: 32px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.star-help { display: flex; gap: 9px; color: #92aebd; font-size: 12px; line-height: 1.8; }
.star-help i { color: #567582; font-style: normal; }
#star-motion { color: #bfdcd3; font: inherit; font-size: 12px; line-height: 1.5; background: #142e2bed; border: 1px solid #3a6053; border-radius: 5px; padding: 7px 10px; cursor: pointer; }
#star-motion:disabled { opacity: .6; cursor: default; }
.star-view-tools { display: flex; border: 1px solid #3a6053; border-radius: 5px; overflow: hidden; }
.star-view-tools button { min-width: 32px; height: 34px; color: #b9d5ca; border: 0; border-right: 1px solid #34564b; background: #122b27ed; padding: 0 8px; font-size: 13px; cursor: pointer; }
.star-view-tools button:last-child { border-right: 0; }
.star-view-tools button:hover { background: #2a5144; }
.sci-stars #hud { color: #617f8d; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.star-download { position: fixed; bottom: 24px; right: 32px; z-index: 18; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #102d28ed; color: #a4ecd3; padding: 13px 18px; border: 1px solid #436f5d; border-radius: 7px; font-size: 14px; line-height: 1.6; text-decoration: none; }
.star-download:hover { background: #244c3e; }
.sci-stars #hero-brand { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 16; color: #e3faf1; font-weight: 530; font-size: clamp(35px, 6vw, 76px); letter-spacing: -.035em; pointer-events: none; opacity: 0; transition: opacity 1s ease; text-shadow: 0 0 30px #1f967348; text-align: center; }
.sci-stars #hero-brand.show { opacity: 1; }
.sci-stars #hero-brand small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .23em; color: #9bc7c0; margin-top: 12px; text-shadow: none; }
#star-error { position: fixed; top: 48%; left: 50%; transform: translate(-50%, -50%); z-index: 18; padding: 20px 25px; color: #e3cda6; background: #30291df5; border: 1px solid #745e37; border-radius: 8px; font-size: 15px; line-height: 1.9; max-width: calc(100vw - 48px); box-sizing: border-box; width: 460px; }
.sci-stars :is(button, a, input):focus-visible { outline: 2px solid #87ead0; outline-offset: 3px; }
@media (max-width: 1000px) { .sci-stars #brand { left: 24px; } .sci-stars #search { right: 24px; width: 280px; } .star-toolbar { left: 24px; bottom: 82px; } .star-download { left: 24px; right: auto; } }
@media (max-width: 760px) {
  .sci-stars #brand { left: 20px; top: 91px; }
  .sci-stars #brand h1 { font-size: 25px; margin: 8px 0 7px; }
  .sci-stars #brand small { font-size: 11px; }
  .sci-stars #brand p { display: none; }
  .sci-stars #search { top: 191px; left: 20px; right: 20px; width: auto; }
  .sci-stars #search label { font-size: 12px; margin-bottom: 7px; }
  .sci-stars #search input { height: 42px; }
  .sci-stars #scount { font-size: 11px; }
  .sci-stars #panel { top: 68px; height: calc(100% - 68px); padding: 28px 22px; }
  .sci-stars #panel h3 { font-size: 20px; }
  .star-toolbar { left: 20px; right: 20px; bottom: 84px; gap: 10px; }
  .star-help { font-size: 11px; gap: 5px; }
  .star-download { left: 20px; right: 20px; bottom: 20px; font-size: 13px; }
  .sci-stars #hud { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sci-stars #hero-brand, .sci-stars #panel { transition: none; } }