/* Observatory motion: app timing tokens, trail geometry and telescope framing. */
:root{--ease:cubic-bezier(.215,.61,.355,1);--fast:120ms;--normal:160ms;--slow:300ms}
::selection{background:#e86a6a40;color:#fff}
.hub-header{background:#0b0d12e8;backdrop-filter:blur(18px);position:relative;z-index:5}
.hub-header nav>a{position:relative;transition:color var(--fast)}
.hub-header nav>a:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--normal) var(--ease)}
.hub-header nav>a:hover:after,.hub-header nav>a[aria-current="page"]:after{transform:scaleX(1)}
.button{position:relative;isolation:isolate;transition:background var(--normal),border-color var(--normal),transform var(--normal) var(--ease),box-shadow var(--normal);overflow:hidden}
.button.primary{box-shadow:inset 0 1px 0 #ffffff25,0 2px 5px #0004}
.button.primary:hover{background:#ef7c7c;box-shadow:inset 0 1px 0 #ffffff40,0 6px 25px #e86a6a24;transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button span,.text-link span{display:inline-block;transition:transform var(--normal) var(--ease)}
.button:hover span,.text-link:hover span{transform:translate(2px,2px)}
.motion-toggle{flex:none;width:30px;height:30px;border:1px solid var(--line);background:transparent;border-radius:50%;font:12px var(--mono);color:var(--dim);transition:color var(--fast),border-color var(--fast)}
.motion-toggle:hover{color:var(--text);border-color:var(--accent)}
.reading-progress{position:fixed;left:0;top:0;height:2px;background:linear-gradient(90deg,#b43c3c,#e86a6a,#ffd9a8);width:100%;transform:scaleX(0);transform-origin:left;z-index:100;pointer-events:none}
.intro{overflow:visible;padding-top:38px}
.intro-top,.intro-main,.night-band{position:relative;z-index:1}
.observatory-art{position:absolute;inset:-30px -40px -15px;pointer-events:none;overflow:hidden;mask-image:linear-gradient(#000 80%,transparent)}
.star-chart{height:100%;width:100%;min-height:400px;transform:translate(var(--sky-x,0px),var(--sky-y,0px));transition:transform 1s var(--ease)}
.chart-grid{stroke:#e86a6a;stroke-width:.65;opacity:.15}
.chart-stars{fill:#eadfe1}.chart-stars circle{opacity:var(--alpha);animation:star-breathe 7s ease-in-out var(--delay) infinite alternate}
.chart-orbit{stroke:#e86a6a;stroke-width:1;opacity:.5}.chart-orbit>path:first-child{opacity:.15}.orbit-trace{stroke-dasharray:12 88;animation:orbit-trace 18s linear infinite}
.chart-target{fill:none;stroke:#e86a6a;stroke-width:.7;opacity:.25}
.hero-brand{position:relative;padding:46px 0 16px}
.hero-trails{position:absolute;left:-20px;top:-38px;width:144px;height:144px;opacity:.95}
.hero-trails path{stroke-dasharray:220;stroke-dashoffset:220;animation:trail-arrive 1.8s var(--ease) forwards}
.hero-trails path:nth-child(2){animation-delay:.12s}.hero-trails path:nth-child(3){animation-delay:.24s}.hero-trails path:nth-child(4){animation-delay:.36s}.hero-trails path:nth-child(5){animation-delay:.48s}
.intro-main{padding:50px 0 48px;gap:60px;align-items:center;min-height:330px}
.intro-main h1{font-size:clamp(88px,9vw,148px);font-weight:600;letter-spacing:-8px;line-height:1.05;color:#edeff3}
.intro-main h1 span{background:linear-gradient(125deg,#f8dada,#e86a6a 65%,#b43c3c);background-clip:text;color:transparent}
.hero-register{display:flex;gap:12px;align-items:center;margin-top:23px;font:8px var(--mono);letter-spacing:1px;color:#9b858b}
.hero-register i{width:24px;height:1px;background:#6d3b41}
.intro-copy{padding-top:28px;max-width:440px}.intro-copy>p:first-child{font-size:25px;line-height:1.4}
.intro-copy .muted{color:#9ca5b3;line-height:1.75;margin-top:18px}
.night-band{padding:10px 0 24px;gap:20px}.night-band div{height:28px;background:none;border-bottom:1px solid #542c33}
.night-band div:after{display:none}.night-band svg{width:100%;height:28px;fill:none;stroke:#e86a6a25;stroke-width:1.2}
.night-band .night-track{stroke:#e86a6a;stroke-dasharray:28 72;animation:orbit-trace 24s linear infinite}
.night-band i{position:absolute;bottom:-4px;left:50%;width:7px;height:7px;background:var(--warm);border-radius:50%;box-shadow:0 0 12px #ffd9a84d}
.app-tour{border-color:#414049;border-radius:12px;box-shadow:0 0 0 5px #121318,0 0 0 6px #23242b,0 35px 100px #0008,0 -20px 100px #e86a6a06;position:relative}
.tour-header{background:linear-gradient(110deg,#191b24,#12151b)}
.tour-tabs button{position:relative;transition:color var(--normal),background var(--normal)}
.tour-tabs button[aria-selected=true]{background:linear-gradient(#e86a6a04,#e86a6a14)}
.tour-tabs button[aria-selected=true]:after{content:"";position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--accent);box-shadow:0 0 12px #e86a6a60}
.app-titlebar{border-top:1px solid #ffffff06}
#app-screen{display:block;will-change:auto}
.screen-description{background:linear-gradient(120deg,#191b23,#11141a);border-top:1px solid var(--line)}
.guide-card,.start-path,.note-box,.platform-section,.support-shortcuts>a{transition:transform var(--normal) var(--ease),border-color var(--normal),box-shadow var(--normal)}
.guide-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#191b23,#101319)}
.guide-card:before{content:"";position:absolute;top:0;left:22px;width:32px;height:1px;background:var(--accent);opacity:.5;transition:width var(--slow) var(--ease)}
.guide-card:hover{transform:translateY(-4px);border-color:#735055;box-shadow:0 14px 30px #0003}.guide-card:hover:before{width:calc(100% - 44px)}
.tools{position:relative}.tools-list article{transition:background var(--normal);position:relative}.tools-list article:hover{background:linear-gradient(90deg,#e86a6a08,transparent)}
.tool-number{transition:color var(--normal)}.tools-list article:hover .tool-number{color:var(--accent)}
.sequence-art{display:flex;align-items:center;max-width:320px;margin-top:36px;gap:0}
.sequence-node{display:grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid #4b333b;background:#1c161e;border-radius:10px;color:var(--accent);font-size:23px;box-shadow:inset 0 1px 0 #ffffff06}
.sequence-wire{height:1px;flex:1;min-width:14px;background:#4b333b;position:relative;overflow:hidden}
.sequence-wire:after{content:"";position:absolute;inset:0;background:var(--warm);transform:translateX(-100%);animation:wire-travel 4s var(--ease) infinite}
.sequence-wire:nth-child(4):after{animation-delay:1s}.sequence-wire:nth-child(6):after{animation-delay:2s}
.image-section{position:relative}.image-top{border-top:1px solid #352b32}.image-field>img{transition:transform 1s var(--ease)}
.image-field:hover>img{transform:scale(1.012)}
.image-heading:before,.image-heading:after{content:"";position:absolute;width:23px;height:23px;border-color:#e86a6a66;border-style:solid;pointer-events:none}
.image-heading:before{left:-20px;top:-20px;border-width:1px 0 0 1px}.image-heading:after{right:-25px;bottom:-20px;border-width:0 1px 1px 0}
.image-expand{backdrop-filter:blur(12px);transition:border-color var(--normal),background var(--normal)}
.about{position:relative;background:radial-gradient(ellipse at 0 100%,#38202755,transparent 65%),#101319;border:1px solid #342c34;box-shadow:inset 0 1px 0 #ffffff04}
.about:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-radial-gradient(circle at 0 100%,transparent 0 70px,#e86a6a06 71px 72px);mask-image:linear-gradient(90deg,#000,transparent 60%)}
.hub-intro h1{letter-spacing:-2.5px}.hub-intro{background:radial-gradient(ellipse at 5% 0,#e86a6a0b,transparent 55%)}
.doc-toc a,.docs-sidebar a{transition:color var(--fast),background var(--fast)}
.hub-footer{background:linear-gradient(180deg,transparent,#e86a6a04)}
@keyframes star-breathe{to{opacity:.1}}
@keyframes orbit-trace{to{stroke-dashoffset:-100}}
@keyframes trail-arrive{to{stroke-dashoffset:0}}
@keyframes wire-travel{50%,100%{transform:translateX(100%)}}
html[data-motion=paused] *,html[data-motion=paused] *:before,html[data-motion=paused] *:after{animation-play-state:paused!important;transition:none!important;scroll-behavior:auto!important}
[data-visual-paused] *,[data-visual-paused] *:before,[data-visual-paused] *:after{animation-play-state:paused!important}
@media(max-width:1100px){.intro-main{gap:30px}.intro-main h1{font-size:100px;letter-spacing:-5px}.intro-copy>p:first-child{font-size:21px}.hero-register{font-size:7px;gap:8px}.hero-trails{width:120px;height:120px;top:-38px}.intro-copy>.text-link{display:block;margin:16px 0 0}}
@media(max-width:800px){.intro-main{padding:25px 0 25px;gap:18px;min-height:0}.hero-brand{padding:60px 0 0}.hero-trails{top:-27px;left:-18px;width:120px;height:120px}.intro-main h1{font-size:clamp(78px,18vw,120px);letter-spacing:-4px}.hero-register{font-size:7px;margin-top:14px;gap:8px;flex-wrap:wrap}.intro-copy{padding:0}.intro-copy>p:first-child{font-size:22px}.intro-copy>.text-link{display:inline-block;margin-left:18px}.intro-copy .muted{margin-top:12px}.observatory-art{inset:0 -20px;opacity:.8}.night-band{padding-bottom:20px}.night-band div{height:20px}.night-band svg{height:20px}.app-tour{border-radius:8px}.motion-toggle{width:28px;height:28px}.hero-register span:last-child{letter-spacing:0}.hub-intro h1{letter-spacing:-1.5px}.image-heading:before{left:-10px;top:-10px}.image-heading:after{right:-10px}.sequence-art{margin-top:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-trails path{stroke-dashoffset:0}.star-chart{transform:none}}
.hero-brand{padding-top:70px}.hero-trails{width:96px;height:96px;left:-12px;top:-14px}
html[data-motion=paused] .hero-trails path{animation:none!important;stroke-dashoffset:0}
@media(max-width:800px){.hero-brand{padding-top:78px}.hero-trails{width:96px;height:96px;left:-12px;top:-9px}.intro-copy>p:first-child br{display:none}}
@view-transition{navigation:auto}
::view-transition-old(root){animation:page-out 120ms ease both}
::view-transition-new(root){animation:page-in 220ms var(--ease) both}
@keyframes page-out{to{opacity:0}}
@keyframes page-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
dialog[open]{animation:dialog-in 220ms var(--ease)}
@keyframes dialog-in{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none!important}}