.sol-standalone { margin: 0; background: #073f55; }
.sol-app {
  --sol-bg: #073f55; --sol-accent: #f3f0e7; --view-x: 32deg; --view-y: -8deg;
  position: relative; isolation: isolate; min-height: 100svh; overflow: hidden;
  background-color: var(--sol-bg); color: var(--sol-accent);
  font-family: "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.sol-app::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .42; pointer-events: none; mix-blend-mode: soft-light;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.72'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 280px 280px, 80px 80px, 80px 80px;
}
.sol-app::after { content: "SUN—OS / NAVIGATION PLATE"; position: absolute; right: 24px; top: 25px; color: rgba(243,240,231,.62); font: 700 8px/1 monospace; letter-spacing: .14em; writing-mode: vertical-rl; pointer-events: none; }
.sol-stars { position: absolute; inset: -2%; width: 104%; height: 104%; z-index: -1; opacity: .1; mix-blend-mode: screen; transform: translate(var(--star-parallax-x,0),var(--star-parallax-y,0)); will-change: transform; }
.sol-star-catalog { position: absolute; inset: 0; z-index: 1; pointer-events: none; color: var(--sol-accent); font: 500 7px/1 "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; letter-spacing: .14em; opacity: .45; transform: translate(var(--label-parallax-x,0),var(--label-parallax-y,0)); will-change: transform; }
.sol-star-catalog span { position: absolute; padding-left: 10px; white-space: nowrap; }
.sol-star-catalog span::before { content: ""; position: absolute; left: 0; top: 2px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 5px currentColor; }
.sol-star-catalog span:nth-child(1) { left: 15%; top: 23%; }
.sol-star-catalog span:nth-child(2) { right: 14%; top: 27%; }
.sol-star-catalog span:nth-child(3) { left: 8%; top: 63%; }
.sol-star-catalog span:nth-child(4) { right: 10%; top: 68%; }
.sol-star-catalog span:nth-child(5) { left: 48%; top: 18%; }
.sol-header { position: absolute; top: clamp(28px,5vw,58px); left: clamp(25px,5vw,74px); z-index: 4; pointer-events: none; text-transform: uppercase; }
.sol-header h1 { margin: 11px 0 4px; max-width: 700px; font-size: clamp(43px,7.3vw,98px); font-weight: 800; letter-spacing: -.055em; line-height: .86; }
.sol-header p { margin: 14px 0 0; color: rgba(243,240,231,.72); font: 600 10px/1.3 Arial,sans-serif; letter-spacing: .045em; text-transform: none; }
.sol-header .sol-eyebrow { margin: 0; padding-left: 38px; color: var(--sol-accent); font: 700 9px/1 Arial,sans-serif; letter-spacing: .11em; position: relative; }
.sol-header .sol-eyebrow::before { content: ""; position: absolute; left: 0; top: 4px; width: 27px; border-top: 1px solid var(--sol-accent); }
.sol-stage { position: absolute; inset: 175px 0 54px; display: grid; place-items: center; transform: translateY(-50px); cursor: grab; touch-action: none; perspective: 1200px; }
.is-dragging .sol-stage { cursor: grabbing; }
.sol-camera { position: relative; width: 1px; height: 1px; transform-style: preserve-3d; transition: transform .12s ease-out; }
.is-dragging .sol-camera { transition: none; }
.sol-system { position: absolute; inset: 0; transform-style: preserve-3d; counter-reset: link-index 0; }
.sol-pulsar-map { position: absolute; left: -400px; top: -250px; width: 800px; height: 500px; overflow: visible; pointer-events: none; }
.sol-pulsar-rays { display: none; }
.sol-pulsar-ticks, .sol-pulsar-code { display: none; }
.sol-comet-orbit > ellipse { fill: none; stroke: var(--sol-accent); stroke-width: 1.15; stroke-linecap: round; stroke-dasharray: 1 8; opacity: .34; }
.sol-comet-coma { fill: var(--sol-accent); fill-opacity: .2; stroke: none; }
.sol-comet-nucleus { fill: var(--sol-accent); stroke: none; }
.sol-comet-tail { opacity: .1; transform-origin: 0 0; }
.sol-comet-dust circle { fill: var(--sol-accent); stroke: none; }
.sol-comet-notations path { fill: none; stroke: var(--sol-accent); stroke-width: .8; opacity: .55; }
.sol-comet-notations text { fill: var(--sol-accent); font: 500 7px/1 "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; letter-spacing: .12em; opacity: .66; }
.sol-oort-cloud {
  position: absolute; left: -260px; top: -260px; width: 520px; height: 520px; border-radius: 50%; pointer-events: none; opacity: .65;
}
.sol-oort-cloud span { position: absolute; width: var(--dust-size); height: var(--dust-size); border-radius: 50%; background: var(--sol-accent); box-shadow: 0 0 2px rgba(243,240,231,.35); opacity: var(--dust-opacity); }
.sol-hydrogen { display: none; }
.sol-hydrogen span { position: absolute; top: 7px; width: 35px; height: 35px; border: 1px solid currentColor; border-radius: 50%; }
.sol-hydrogen span:first-child { left: 5px; }
.sol-hydrogen span:nth-child(2) { left: 65px; }
.sol-hydrogen span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: currentColor; transform: translate(-50%,-50%); }
.sol-hydrogen i { position: absolute; left: 52px; top: 18px; font: normal 8px/1 monospace; }
.sol-hydrogen b { position: absolute; left: 3px; top: 49px; font: 700 7px/1 monospace; letter-spacing: .14em; white-space: nowrap; }
.sol-sun {
  position: absolute; left: -38px; top: -38px; width: 76px; height: 76px; box-sizing: border-box;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  transform: rotateZ(calc(var(--view-y) * -1)) rotateX(calc(var(--view-x) * -1));
  padding: 0; appearance: none; background: transparent; color: var(--sol-bg); box-shadow: none; cursor: pointer; z-index: 5;
}
.sol-sun::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; background: color-mix(in srgb,var(--sol-accent) 84%,var(--sol-bg)); box-shadow: 0 0 8px rgba(243,240,231,.52), 0 0 23px rgba(243,240,231,.26), 0 0 46px rgba(243,240,231,.12); transition: filter .18s,box-shadow .18s; }
.sol-sun::after { content: none; }
.sol-sun:hover::before { filter: brightness(1.06); box-shadow: 0 0 11px rgba(243,240,231,.62), 0 0 29px rgba(243,240,231,.32), 0 0 55px rgba(243,240,231,.15); }
.sol-sun:focus-visible { outline: 2px solid var(--sol-accent); outline-offset: 6px; }
.sol-orbit {
  --radius: 150px; --duration: 20s; counter-increment: link-index;
  position: absolute; left: calc(var(--radius) * -1); top: calc(var(--radius) * -1); width: calc(var(--radius) * 2); height: calc(var(--radius) * 2);
  z-index: 6; box-sizing: border-box; border: 1px solid rgba(243,240,231,.11); border-radius: 50%; transform: rotateX(var(--orbit-tilt,0deg)); transform-style: preserve-3d; pointer-events: none;
}
.sol-orbit::before { content: none; }
.sol-planet { position: absolute; left: 50%; top: 50%; width: calc(var(--planet-size) + 10px); height: calc(var(--planet-size) + 10px); min-width: 44px; min-height: 44px; display: block; border-radius: 50%; transform-style: preserve-3d; text-decoration: none !important; outline: none; cursor: pointer; pointer-events: auto; }
.sol-planet-sphere {
  display: block; position: relative; width: 100%; height: 100%; box-sizing: border-box; border: .75px solid color-mix(in srgb,var(--planet-color,var(--sol-accent)) 62%,transparent); border-radius: 50%; pointer-events: none;
  background: var(--sol-bg); box-shadow: inset 0 0 0 4px var(--sol-bg), inset 0 0 0 5.58px var(--planet-color,var(--sol-accent)), 0 0 7px color-mix(in srgb,var(--planet-color,var(--sol-accent)) 25%,transparent), 0 0 16px color-mix(in srgb,var(--planet-color,var(--sol-accent)) 12%,transparent); transition: .18s ease;
}
.sol-orbit:nth-of-type(3n) .sol-planet-sphere, .sol-orbit:nth-of-type(3n + 1) .sol-planet-sphere { border-radius: 50%; transform: none; clip-path: none; }
.sol-planet-sphere::before { content: "0" counter(link-index); position: absolute; inset: 0; display: grid; place-items: center; color: var(--sol-accent); font: 700 8px/1 Arial,sans-serif; letter-spacing: 0; }
.sol-planet-sphere::after { content: none; }
.sol-label {
  position: absolute; left: 50%; top: calc(100% + 9px); z-index: 2; padding: 0; transform: translateX(-50%); pointer-events: auto; cursor: pointer;
  color: var(--sol-accent); white-space: nowrap; text-align: center; font-size: clamp(9px,.82vw,11px); line-height: 1; font-weight: 700; letter-spacing: .015em; text-transform: uppercase; transition: .18s;
}
.sol-label::before { content: none; }
.sol-planet:hover .sol-planet-sphere, .sol-planet:focus-visible .sol-planet-sphere { background: var(--planet-color,var(--sol-accent)); border-color: var(--planet-color,var(--sol-accent)); box-shadow: inset 0 0 0 4px var(--planet-color,var(--sol-accent)), inset 0 0 0 5.58px var(--planet-color,var(--sol-accent)), 0 0 10px color-mix(in srgb,var(--planet-color,var(--sol-accent)) 48%,transparent), 0 0 26px color-mix(in srgb,var(--planet-color,var(--sol-accent)) 25%,transparent); transform: scale(1.1); }
.sol-planet:hover .sol-planet-sphere::before, .sol-planet:focus-visible .sol-planet-sphere::before { color: var(--sol-bg); }
.sol-orbit:nth-of-type(3n) .sol-planet:hover .sol-planet-sphere, .sol-orbit:nth-of-type(3n) .sol-planet:focus-visible .sol-planet-sphere { transform: scale(1.1); }
.sol-planet:hover .sol-label, .sol-planet:focus-visible .sol-label { color: var(--sol-accent); transform: translateX(-50%) translateY(2px); }
.sol-planet:focus-visible { outline: 1px dashed var(--sol-accent); outline-offset: 11px; }
.sol-hint { position: absolute; left: clamp(25px,5vw,74px); bottom: 25px; color: rgba(255,255,255,.72); font: 700 9px/1 monospace; letter-spacing: .12em; text-transform: uppercase; }
.sol-hint span { display: inline-block; margin-right: 7px; color: var(--sol-accent); }
.sol-list { position: absolute; right: 38px; bottom: 23px; display: flex; gap: 20px; z-index: 5; counter-reset: nav-index 0; }
.sol-list a { counter-increment: nav-index; color: rgba(255,255,255,.75) !important; text-decoration: none !important; font: 700 9px/1 monospace; letter-spacing: .1em; text-transform: uppercase; }
.sol-list a::before { content: "0" counter(nav-index) " "; color: var(--sol-accent); }
.sol-list a:hover, .sol-list a:focus-visible { color: var(--sol-accent) !important; }
.sol-about-dialog {
  width: min(460px, calc(100vw - 42px)); max-height: min(560px, calc(100svh - 54px)); box-sizing: border-box; padding: 32px 34px 36px;
  border: 1px solid #f3f0e7; border-radius: 0; background-color: #073f55; color: #f3f0e7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' seed='11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
  box-shadow: 14px 14px 0 rgba(0,0,0,.14); overflow: auto;
}
.sol-about-dialog::backdrop { background: rgba(1,24,34,.72); backdrop-filter: blur(3px); }
.sol-about-dialog[open] { animation: sol-dialog-in .18s ease-out; }
.sol-about-index { margin: 0 0 25px; padding-bottom: 9px; border-bottom: 1px solid rgba(243,240,231,.38); font: 700 9px/1 Arial,sans-serif; letter-spacing: .12em; }
.sol-about-copy { color: rgba(243,240,231,.86); font: 500 14px/1.55 Arial,sans-serif; }
.sol-about-copy p { margin: 0 0 1em; }
.sol-about-close { position: absolute; right: 15px; top: 13px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(243,240,231,.5); border-radius: 50%; background: transparent; color: #f3f0e7; font: 300 24px/29px Arial,sans-serif; cursor: pointer; }
.sol-about-close:hover, .sol-about-close:focus-visible { background: #f3f0e7; color: #073f55; outline: none; }
@keyframes sol-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.sol-reduced-motion .sol-sun::before { animation-play-state: paused; }

/* Minimalist mode */
.sol-minimalist {
  min-height: 100svh; box-sizing: border-box; display: flex; flex-direction: column; overflow: auto;
  padding: clamp(26px,5vw,58px) clamp(20px,5vw,58px) clamp(22px,4vw,42px); touch-action: pan-y; overscroll-behavior-y: contain;
}
.sol-minimalist::before {
  opacity: .14; mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 8% 18%,rgba(243,240,231,.42) 0 .7px,transparent .9px),
    radial-gradient(circle at 22% 72%,rgba(243,240,231,.28) 0 .55px,transparent .8px),
    radial-gradient(circle at 41% 35%,rgba(243,240,231,.34) 0 .65px,transparent .85px),
    radial-gradient(circle at 63% 83%,rgba(243,240,231,.3) 0 .55px,transparent .8px),
    radial-gradient(circle at 79% 24%,rgba(243,240,231,.38) 0 .7px,transparent .9px),
    radial-gradient(circle at 94% 61%,rgba(243,240,231,.26) 0 .55px,transparent .8px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' seed='19' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.64'/%3E%3C/svg%3E");
  background-size: 557px 631px,719px 683px,853px 773px,983px 877px,641px 739px,907px 811px,280px 280px;
  background-position: 37px 91px,211px 43px,79px 317px,401px 173px,283px 509px,19px 227px,0 0;
}
.sol-minimalist::after { content: "SUN—OS / MINIMAL PLATE"; }
.sol-min-header { flex: none; width: min(100%,680px); margin: 0 auto; }
.sol-min-eyebrow { margin: 0; padding-left: 38px; position: relative; color: var(--sol-accent); font: 700 9px/1 Arial,sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.sol-min-eyebrow::before { content: ""; position: absolute; left: 0; top: 4px; width: 27px; border-top: 1px solid var(--sol-accent); }
.sol-mini-visual { flex: none; position: relative; display: grid; place-items: center; min-height: clamp(190px,30vh,280px); background-image: radial-gradient(circle at 29% 38%,color-mix(in srgb,var(--sol-accent) 42%,transparent) 0 .6px,transparent .8px),radial-gradient(circle at 72% 63%,color-mix(in srgb,var(--sol-accent) 34%,transparent) 0 .55px,transparent .75px),radial-gradient(circle at 62% 25%,color-mix(in srgb,var(--sol-accent) 26%,transparent) 0 .5px,transparent .7px); }
.sol-mini-perspective { width: 240px; height: 190px; display: grid; place-items: center; perspective: 520px; perspective-origin: 50% 46%; }
.sol-mini-system { position: relative; width: 190px; height: 190px; transform-style: preserve-3d; transform: rotateX(32deg) rotateZ(-10deg) scale(1.69); }
.sol-mini-sun { position: absolute; left: 50%; top: 50%; z-index: 5; width: 19px; height: 19px; border-radius: 50%; background: var(--sol-accent); box-shadow: 0 0 8px color-mix(in srgb,var(--sol-accent) 48%,transparent),0 0 22px color-mix(in srgb,var(--sol-accent) 22%,transparent); transform: translate(-50%,-50%) translateZ(4px) rotateZ(10deg) rotateX(-32deg); }
.sol-mini-orbit { position: absolute; left: 50%; top: 50%; width: calc(var(--mini-radius) * 2); height: calc(var(--mini-radius) * 2); box-sizing: border-box; border: 1px solid color-mix(in srgb,var(--sol-accent) 20%,transparent); border-radius: 50%; transform: translate(-50%,-50%) rotateZ(var(--mini-node,0deg)) rotateY(var(--mini-yaw,0deg)) rotateX(var(--mini-tilt,0deg)); transform-origin: center; transform-style: preserve-3d; }
.sol-mini-orbit i { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.sol-mini-orbit i b { position: absolute; left: 0; top: 0; width: 7px; height: 7px; box-sizing: border-box; border: 1px solid var(--mini-color,var(--sol-accent)); border-radius: 50%; background: var(--sol-bg); box-shadow: 0 0 5px color-mix(in srgb,var(--mini-color,var(--sol-accent)) 36%,transparent); transform-origin: center; will-change: transform,opacity; }
.sol-mini-oort { position: absolute; left: 50%; top: 50%; width: 116px; height: 116px; border-radius: 50%; opacity: .48; transform: translate(-50%,-50%); background: repeating-conic-gradient(from 8deg,color-mix(in srgb,var(--sol-accent) 58%,transparent) 0 .55deg,transparent .7deg 4deg); -webkit-mask: radial-gradient(circle,transparent 0 46px,#000 47px 52px,transparent 53px); mask: radial-gradient(circle,transparent 0 46px,#000 47px 52px,transparent 53px); }
.sol-mini-comet-orbit { position: absolute; left: 50%; top: 50%; width: 178px; height: 48px; box-sizing: border-box; border: 1px dotted color-mix(in srgb,var(--sol-accent) 34%,transparent); border-radius: 50%; transform: translate(-50%,-50%) rotate(-14deg); }
.sol-mini-comet-orbit i { position: absolute; right: 11px; top: 4px; width: 3px; height: 3px; border-radius: 50%; background: var(--sol-accent); box-shadow: 0 0 5px var(--sol-accent); animation: sol-mini-comet 2.4s ease-in-out infinite alternate; }
.sol-mini-notation { position: absolute; color: color-mix(in srgb,var(--sol-accent) 48%,transparent); font: 500 6px/1 "PingFang SC","Noto Sans CJK SC",sans-serif; letter-spacing: .12em; white-space: nowrap; }
.sol-mini-notation-a { left: calc(50% + 68px); top: calc(50% - 18px); }
.sol-mini-notation-b { left: calc(50% - 98px); top: calc(50% + 36px); }
@keyframes sol-mini-comet { from { opacity: .28; transform: scale(.7); } to { opacity: 1; transform: scale(1.3); } }
.sol-mini-maximalist { flex: none; position: relative; width: 100%; min-height: clamp(220px,32vh,300px); overflow: hidden; isolation: isolate; }
.sol-mini-maximalist .sol-stars { z-index: 0; opacity: .12; }
.sol-mini-maximalist .sol-star-catalog { z-index: 1; font-size: 5px; opacity: .34; }
.sol-mini-maximalist .sol-stage { inset: 0; z-index: 2; transform: scale(var(--sol-mini-scale,.28)); transform-origin: center; cursor: default; pointer-events: none; }
.sol-mini-maximalist .sol-planet { min-width: 0; min-height: 0; pointer-events: none; scale: .8; }
.sol-mini-maximalist .sol-orbit .sol-planet-sphere { border: 1px solid color-mix(in srgb,var(--planet-color,var(--sol-accent)) 72%,transparent); background: var(--sol-bg); box-shadow: 0 0 7px color-mix(in srgb,var(--planet-color,var(--sol-accent)) 22%,transparent); transform: scaleX(1.18); }
.sol-mini-maximalist .sol-planet-sphere::before { content: none; }
.sol-mini-maximalist .sol-label { display: none; }
.sol-mini-maximalist .sol-sun { pointer-events: none; }
.sol-mini-about-trigger { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(300px,90vw); height: 200px; padding: 0; border: 0; border-radius: 50%; appearance: none; background: transparent; cursor: pointer; touch-action: manipulation; transform: translate(-50%,-50%); }
.sol-mini-about-trigger:focus-visible { outline: 1px dashed var(--sol-accent); outline-offset: -12px; }
.sol-min-links { position: absolute; left: 50%; top: calc(50% + var(--sol-menu-gap,100px)); z-index: 4; width: min(calc(100% - 36px),680px); margin: 0; display: grid; gap: 11px; counter-reset: min-link 0; transform: translate(-50%,-50%); }
.sol-min-links a { min-height: 72px; box-sizing: border-box; display: grid; grid-template-columns: 42px 1fr 30px; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid color-mix(in srgb,var(--mini-color,var(--sol-accent)) 62%,transparent); color: var(--sol-accent) !important; background: color-mix(in srgb,var(--sol-bg) 92%,var(--sol-accent)); text-decoration: none !important; transition: background .16s,color .16s,transform .16s,box-shadow .16s; }
.sol-min-index { align-self: stretch; display: grid; place-items: center; border-right: 1px solid color-mix(in srgb,var(--sol-accent) 26%,transparent); font: 700 9px/1 monospace; letter-spacing: .1em; }
.sol-min-copy { min-width: 0; display: grid; gap: 5px; align-content: center; }
.sol-min-title { font-size: clamp(20px,3vw,32px); font-weight: 800; line-height: .95; letter-spacing: -.035em; text-transform: uppercase; }
.sol-min-description { min-width: 0; overflow: hidden; color: currentColor; opacity: .68; font: italic 13px/1.1 "Iowan Old Style",Baskerville,Georgia,"Times New Roman",serif; letter-spacing: .025em; white-space: nowrap; text-overflow: ellipsis; }
.sol-min-arrow { position: relative; justify-self: end; width: 18px; height: 18px; color: currentColor; }
.sol-min-arrow::before { content: ""; position: absolute; left: 1px; top: 9px; width: 17px; border-top: 1px solid currentColor; transform: rotate(-45deg); transform-origin: center; }
.sol-min-arrow::after { content: ""; position: absolute; right: 0; top: 0; width: 8px; height: 8px; box-sizing: border-box; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.sol-min-links a:hover, .sol-min-links a:focus-visible { background: var(--mini-color,var(--sol-accent)); color: var(--sol-bg) !important; box-shadow: 0 0 20px color-mix(in srgb,var(--mini-color,var(--sol-accent)) 18%,transparent); transform: translateY(-2px); outline: none; }
.sol-min-links a:hover .sol-min-index, .sol-min-links a:focus-visible .sol-min-index { border-right-color: color-mix(in srgb,var(--sol-bg) 30%,transparent); }
.sol-min-foot { position: absolute; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); width: min(calc(100% - 36px),680px); margin: 0; transform: translateX(-50%); color: color-mix(in srgb,var(--sol-accent) 52%,transparent); font: 700 7px/1 monospace; letter-spacing: .14em; text-align: right; }

@media (max-width: 700px) {
  .sol-app:not(.sol-minimalist) { overscroll-behavior: none; touch-action: none; }
  .sol-app:not(.sol-minimalist)::before { opacity: .3; mix-blend-mode: normal; background-image: radial-gradient(rgba(255,255,255,.09) .55px, transparent .75px), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 4px 4px, 80px 80px, 80px 80px; }
  .sol-about-dialog::backdrop { backdrop-filter: none; }
  .sol-header { right: 25px; }
  .sol-header h1 { font-size: clamp(44px,13vw,68px); }
  .sol-stage { inset: 78px 0 72px; transform: translateY(-28px) scale(.6); touch-action: none; overscroll-behavior: none; }
  .sol-planet { min-width: 74px; min-height: 74px; }
  .sol-planet-sphere { width: 70%; height: 70%; margin: 15%; }
  .sol-label { display: block; left: 50%; top: calc(100% + 8px); width: 82px; white-space: normal; overflow-wrap: anywhere; text-align: center; font-size: 9px; line-height: 1.08; transform: translateX(-50%); }
  .sol-planet:hover .sol-label, .sol-planet:focus-visible .sol-label { transform: translateX(-50%) translateY(2px); }
  .sol-list { left: 25px; right: 25px; bottom: 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 18px; }
  .sol-list a { display: block; min-height: 44px; padding-top: 9px; box-sizing: border-box; border-top: 1px solid rgba(243,240,231,.3); font-size: 9px; }
  .sol-hint { bottom: 130px; }
  .sol-sun { left: -34px; top: -34px; width: 67px; height: 67px; }
  .sol-pulsar-map { transform: scale(.9); }
  .sol-hydrogen { display: none; }
  .sol-minimalist { padding: 27px 18px max(20px,env(safe-area-inset-bottom)); touch-action: pan-y; overscroll-behavior-y: contain; }
  .sol-min-header { padding-left: 5px; box-sizing: border-box; }
  .sol-mini-visual { min-height: 185px; }
  .sol-mini-perspective { width: 230px; height: 180px; }
  .sol-mini-system { width: 166px; height: 166px; transform: rotateX(32deg) rotateZ(-10deg) scale(1.4872); }
  .sol-mini-maximalist { min-height: 220px; }
  .sol-mini-maximalist .sol-stage { inset: 0; transform: scale(var(--sol-mini-scale,.28)); }
  .sol-mini-maximalist .sol-planet { min-width: 0; min-height: 0; }
  .sol-mini-maximalist .sol-planet-sphere { width: 100%; height: 100%; margin: 0; }
  .sol-min-links { gap: 9px; }
  .sol-min-links a { min-height: 63px; grid-template-columns: 34px 1fr 24px; gap: 10px; padding: 10px 14px; }
  .sol-min-title { font-size: clamp(18px,5.6vw,25px); }
  .sol-min-copy { gap: 4px; }
  .sol-min-description { font-size: 12px; }
  .sol-min-arrow { width: 18px; height: 18px; }
  .sol-min-foot { margin-top: 14px; }
}
@media (max-width: 480px) { .sol-hydrogen { display: none; } }
@media (max-height: 500px) and (orientation: landscape) {
  .sol-planet-sphere { width: 70%; height: 70%; margin: 15%; }
  .sol-label { display: block; left: 50%; top: calc(100% + 7px); width: 82px; white-space: normal; overflow-wrap: anywhere; text-align: center; font-size: 9px; line-height: 1.08; transform: translateX(-50%); }
  .sol-planet:hover .sol-label, .sol-planet:focus-visible .sol-label { transform: translateX(-50%) translateY(2px); }
  .sol-stage { inset: 118px 0 48px; transform: translateY(-50px); }
  .sol-list a { min-height: 32px; padding-top: 10px; box-sizing: border-box; }
}
@media (prefers-reduced-motion: reduce) { .sol-camera, .sol-planet-sphere, .sol-label { transition: none !important; } .sol-mini-comet-orbit i { animation: none !important; } }