.scene-sky-control{position:absolute;top:17px;left:8vw;z-index:25}
#local-sky-open{min-height:44px;padding:12px 0;border:0;background:none;color:#8e9ca9;font:400 12px/1.5 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:color .15s,opacity .15s}
#local-sky-open:hover,#local-sky-open:focus-visible{color:var(--ink)}
#local-sky-open:focus-visible{outline:2px solid var(--teal);outline-offset:5px}
@media(prefers-reduced-motion:no-preference){.scene-sky-control{animation:sky-control-arrive 900ms 1600ms both cubic-bezier(.2,.8,.25,1)}.scene-sky-control:focus-within{animation:none}@keyframes sky-control-arrive{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}}
#local-sky-open.is-open{opacity:0;pointer-events:none}
.is-playing .scene-sky-control,.is-docking .scene-sky-control,.is-compact .scene-sky-control{visibility:hidden;pointer-events:none}
.local-sky-dialog[hidden],.local-sky-dialog [hidden]{display:none!important}
.local-sky-dialog{position:absolute;inset:0 auto auto 0;width:min(420px,calc(100vw - 48px));max-height:calc(100svh - 36px);padding:0;color:var(--ink);isolation:isolate;font:400 13px/1.5 Inter,system-ui,sans-serif}
.local-sky-surface{position:absolute;inset:0;border:1px solid #f0dcc82b;border-radius:22px;background:linear-gradient(145deg,#4a3a3052,#0d1a3359);backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);box-shadow:0 12px 38px #0005,inset 0 1px #ffffff12;transform-origin:0 0;z-index:-1;pointer-events:none}
.local-sky-body{padding:10px 18px 17px;max-height:inherit;overflow:auto;overscroll-behavior:contain}
.local-sky-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 -8px 6px 0}
.local-sky-dialog h2{font:500 12px/1.5 Inter,system-ui,sans-serif;margin:0;color:var(--dim)}
.local-sky-dialog button{font:inherit;cursor:pointer}
.local-sky-dialog header button{min-width:44px;min-height:44px;border:0;background:none;color:var(--dim);border-radius:50%}
.local-sky-dialog header button:hover{background:#edf4fc0d;color:var(--ink)}
.local-sky-dialog header svg{display:block;width:16px;height:16px;margin:auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.local-sky-choices{display:flex;align-items:center;gap:14px}
#local-sky-location{min-height:44px;flex:1;min-width:0;padding:11px 14px;border:1px solid #e7f2ff3d;border-radius:12px;background:#dceaf01a;color:var(--ink);text-align:left;font-weight:500}
#local-sky-location:hover{background:#dceaf029;border-color:#e7f2ff66}
#local-sky-location:disabled{opacity:.55;cursor:progress}
#local-sky-manual,#local-sky-reset{min-height:44px;padding:10px 0;border:0;background:none;color:var(--dim);font-size:12px;text-underline-offset:4px}
#local-sky-manual:hover,#local-sky-reset:hover{color:var(--ink);text-decoration:underline}
#local-sky-manual{flex:none}
#local-sky-manual-fields{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:0;padding:0;transform-origin:right center}
#local-sky-manual-fields label{display:block;margin-bottom:6px;color:var(--dim);font-size:12px}
#local-sky-city{width:100%;min-height:44px;padding:10px 12px;border:1px solid #e7f2ff36;border-radius:10px;background:#121d28;color:var(--ink);font:inherit}
#local-sky-status{margin:12px 0 0;font-size:13px;color:var(--ink)}
#local-sky-status:empty{display:none}
.local-sky-privacy{margin:13px 0 0;color:var(--dim);font:400 11px/1.55 Inter,system-ui,sans-serif;max-width:40ch}
#local-sky-reset{padding-bottom:0;min-height:36px}
@media(max-width:699px){.scene-sky-control{top:62px;left:25px}#local-sky-open{font-size:11px}.local-sky-dialog{width:calc(100vw - 50px);max-height:calc(100svh - 85px)}.local-sky-body{padding:8px 14px 15px}.local-sky-choices{gap:12px}#local-sky-location{font-size:12px;padding:10px 11px}#local-sky-manual{font-size:11px}}
@media(prefers-reduced-motion:reduce){#local-sky-open{transition:none}}

#local-sky-manual-fields #local-sky-city{flex:1;min-width:0}
#local-sky-manual-cancel{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:var(--dim)}
#local-sky-manual-cancel:hover{color:var(--ink);background:#edf4fc0d}
#local-sky-manual-cancel svg{width:16px;height:16px}

/* One uninterrupted highlight moves between stable actions; the label/input
   share one slot, so manual entry never pushes a new row into the scene. */
.local-sky-choices{position:relative;isolation:isolate;gap:10px;align-items:stretch}
.local-sky-choice-surface{position:absolute;inset:0 auto 0 0;width:60%;z-index:-1;border:1px solid #e7f2ff3d;border-radius:12px;background:#dceaf01a;pointer-events:none;transition:transform 320ms cubic-bezier(.22,.8,.22,1),width 320ms cubic-bezier(.22,.8,.22,1)}
#local-sky-location{display:flex;align-items:center;gap:9px;background:none;border-color:transparent;padding:11px 12px}
#local-sky-location:hover{background:none;border-color:transparent}
.local-sky-location-icon{width:18px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.local-sky-choices[data-manual=true] #local-sky-location{color:var(--dim)}
#local-sky-manual-slot{position:relative;display:grid;flex:0 0 136px;min-width:0;align-items:stretch}
#local-sky-manual-slot>*{grid-area:1/1}
#local-sky-manual{width:100%;padding:10px 8px;text-align:center}
#local-sky-manual-fields{gap:0;min-height:44px}
#local-sky-manual-fields #local-sky-city{padding:10px 0 10px 10px;background:none;border:0;border-radius:12px;font-size:12px;box-shadow:none}
#local-sky-manual-cancel{flex-basis:36px;width:36px;min-height:44px}
@media(max-width:699px){#local-sky-manual-slot{flex-basis:124px}#local-sky-location{padding:9px 8px;gap:6px}.local-sky-location-icon{width:16px;height:18px}.local-sky-choices{gap:6px}}
/* The entered city needs the row, not a label-sized slot. Keep the location
   control recognizable and named while its text makes room for editing. */
.local-sky-choices[data-manual=true] #local-sky-location{flex:0 0 44px;justify-content:center;padding:9px 0}
.local-sky-choices[data-manual=true] #local-sky-location span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.local-sky-choices[data-manual=true] #local-sky-manual-slot{flex:1}
#local-sky-manual-fields #local-sky-city{font-size:16px}
#local-sky-manual-cancel{flex-basis:44px;width:44px}
@media(prefers-reduced-motion:reduce){.local-sky-choice-surface{transition:none}}

/* Opened from the small header: the same panel hangs under the band and
   stays while the page scrolls. Over project pictures it needs more body. */
.scene-sky-control.is-header{position:fixed;top:calc(var(--site-header-height) + 8px);left:auto;right:6vw;visibility:visible;pointer-events:auto;animation:none}
.scene-sky-control.is-header #local-sky-open{visibility:hidden;pointer-events:none}
.scene-sky-control.is-header .local-sky-dialog{inset:0 0 auto auto;max-height:calc(100svh - var(--site-header-height) - 24px)}
.scene-sky-control.is-header .local-sky-surface{background:linear-gradient(145deg,#2c2730d9,#0d1626e6)}
@media(max-width:699px){.scene-sky-control.is-header{left:25px;right:auto}.scene-sky-control.is-header .local-sky-dialog{inset:0 auto auto 0}}

/* ---- The panel ----------------------------------------------------------------
   The panel is thin glass, tinted with the sky's own blues, so the stars
   show through it. Opened from the small header it keeps more body, because
   project pictures can be under it. */
.local-sky-surface{background:linear-gradient(160deg,#2a3d7430,#0a14303b);border-color:#cfe0ff2e}
.scene-sky-control.is-header .local-sky-surface{background:linear-gradient(160deg,#1c2a50b3,#0a1226c2)}
/* The link offered when this window cannot ask for a location. */
.local-sky-browser{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;color:var(--ink);font-size:14px;text-underline-offset:5px}
/* Phone: readable type in the control and the panel. */
#local-sky-open{font-size:13px}
@media(max-width:699px){
 #local-sky-open{font-size:14px}
 .local-sky-dialog{font-size:14px}
 .local-sky-dialog h2{font-size:14px}
 #local-sky-location{font-size:14px}
 #local-sky-manual,#local-sky-reset{font-size:14px}
 #local-sky-status{font-size:14px}
 .local-sky-privacy{font-size:13px}
}

/* ---- See your sky on a phone --------------------------------------------------
   On a phone "See your sky" is one button that travels (navigation.js, driven
   by the title shrink's own progress) from under the wordmark to a small quiet
   place in the compact header. It is never a page link: the header's own
   "Your sky" entry stays out of the phone row, so the links keep their order.
   Where it lands is SKY_COMPACT_PLACE in navigation.js. */
@media(max-width:699px){
 .has-traveling-header:not([data-sky-place=links-row]) .navigation .nav-sky{display:none!important}
 .has-traveling-header:not([data-sky-place=links-row]) .scene-sky-control{position:fixed;top:calc(var(--safe-top) + 138px);left:25px}
 .has-traveling-header:not([data-sky-place=links-row]).is-docking:not(.is-playing) .scene-sky-control,.has-traveling-header:not([data-sky-place=links-row]).is-compact:not(.is-playing) .scene-sky-control{visibility:visible}
 /* The control's own box is the button's resting place, over the links row: only the button and the open panel take taps. */
 .has-traveling-header:not([data-sky-place=links-row]) .scene-sky-control{pointer-events:none}
 .has-traveling-header:not([data-sky-place=links-row]) #local-sky-open:not(.is-open),.has-traveling-header:not([data-sky-place=links-row]) .local-sky-dialog{pointer-events:auto}
 .has-traveling-header:not([data-sky-place=links-row]) #local-sky-open{transform:var(--sky-transform,none);transform-origin:0 0;will-change:transform;color:#8e9ca9;font-size:12px;transition:color .15s;opacity:calc((1 - var(--sky-progress,0) * .22) * var(--sky-give,1));white-space:nowrap}
 .has-traveling-header:not([data-sky-place=links-row]) #local-sky-open.is-open{opacity:0}
 /* Compact: the look stays small, the tap area does not. The hit area reaches past the text by 6 px above and below and 14 px right (before the 12/14 scale), clear of the links row. */
 .has-traveling-header:not([data-sky-place=links-row]).is-compact #local-sky-open{position:relative}
 .has-traveling-header:not([data-sky-place=links-row]).is-compact #local-sky-open::after{content:"";position:absolute;inset:-6px -14px -6px -8px}
 /* Opened from the compact header the panel hangs under the band, while the control stays put. */
 .has-traveling-header:not([data-sky-place=links-row]) .scene-sky-control.is-header{top:calc(var(--safe-top) + 138px);left:25px;right:auto}
 .has-traveling-header:not([data-sky-place=links-row]) .scene-sky-control.is-header .local-sky-dialog{inset:calc(var(--site-header-height) + 8px - var(--safe-top) - 138px) auto auto 0}
}
@media(max-width:359px){.has-traveling-header:not([data-sky-place=links-row]) .scene-sky-control,.has-traveling-header:not([data-sky-place=links-row]) .scene-sky-control.is-header{left:16px}}
@media(prefers-reduced-motion:reduce){.has-traveling-header:not([data-sky-place=links-row]) #local-sky-open{will-change:auto}}

/* ---- links-row (default) -----------------------------------------------------
   See your sky is the first entry of the links row, immediately left of Projects,
   small and quiet, at rest and shrunk alike, on phones and on desktop. It never
   travels, never adds a row, and the scene's own button is out of the way on phones. */
.navigation .nav-sky{font-size:12px;color:#8e9ca9;letter-spacing:0}
.navigation .nav-sky:hover,.navigation .nav-sky:focus-visible{color:var(--ink)}
@media(max-width:699px){
 .has-traveling-header[data-sky-place=links-row] .navigation .nav-sky{display:inline-flex;flex:none;width:74px;justify-content:flex-start;min-width:0;white-space:nowrap}
 .has-traveling-header[data-sky-place=links-row] .scene-sky-control:not(.is-header){display:none}
 /* The panel hangs from the links row, wherever the row is. */
 .has-traveling-header[data-sky-place=links-row] .scene-sky-control.is-header{position:fixed;top:var(--sky-panel-top,calc(var(--nav-y,calc(var(--safe-top) + 138px)) + 50px));left:25px;right:auto}
 .has-traveling-header[data-sky-place=links-row] .scene-sky-control.is-header .local-sky-dialog{inset:0 auto auto 0}
}