@font-face{font-family:"Fraunces";src:url("../shell/fonts/fraunces-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("../shell/fonts/fraunces-italic-latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight";src:url("../shell/fonts/inter-tight-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../shell/fonts/plex-mono.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#070b13;--paper:#0c121d;--paper-2:#101724;--paper-3:#151d2c;
  --ink:#dde3ee;--ink-dim:#9aa4b8;--ink-faint:#6b7688;
  --gold:#f4b942;--gold-hi:#f7cc6e;--gold-dk:#e8a317;
  --rule:rgba(221,227,238,.13);--rule-gold:rgba(244,185,66,.3);
  --serif:"Fraunces",Georgia,serif;--mono:"IBM Plex Mono","Courier New",monospace;--sans:"Inter Tight",system-ui,sans-serif;
  --glass:rgba(10,15,25,.78);
  --io:#e9c46a;--europa:#d6dde8;--ganymede:#b9a58a;--callisto:#8e7d6d;
  --pad:22px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-text-size-adjust:100%}
body{overflow:hidden}
button,select,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.app{position:fixed;inset:0}
.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;background:var(--bg)}
#gl,#ov{position:absolute;inset:0;width:100%;height:100%;display:block}
#ov{pointer-events:none}


.bar{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:16px var(--pad);pointer-events:none}
.bar>*{pointer-events:auto}
.brand{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.26em;color:var(--ink);text-decoration:none;white-space:nowrap;display:inline-flex;gap:6px;align-items:center;opacity:.9}
.brand .star{color:var(--gold);letter-spacing:0}

body:has(.ttm-hdr) .bar .brand{visibility:hidden}

@media (min-width:761px){body:has(.ttm-hdr) .app{top:var(--ttm-hdr,65px);z-index:1}}
.planet-seg{margin-left:auto}
.loc{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 15px;border-radius:999px;border:1px solid var(--rule);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);max-width:46vw}
.loc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc:hover{border-color:var(--rule-gold)}
.loc .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--ink-faint);box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.loc .dot[data-k="night"]{background:#7aa2ff}
.loc .dot[data-k="astro"]{background:#5f86d8}
.loc .dot[data-k="nautical"]{background:#c79bff}
.loc .dot[data-k="civil"]{background:#ff9f6e}
.loc .dot[data-k="day"]{background:var(--gold)}


.seg{display:inline-flex;padding:3px;border-radius:999px;border:1px solid var(--rule);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.seg button{border:0;background:none;height:30px;padding:0 13px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--gold);color:#16120a}


.title{position:absolute;left:var(--pad);top:64px;z-index:3;pointer-events:none}
.title h1{margin:0;font-family:var(--serif);font-weight:600;font-size:clamp(28px,3.2vw,44px);letter-spacing:-.025em;line-height:1;color:#fff;font-variation-settings:"opsz" 144}
.title h1 em{font-style:italic;font-weight:400;color:var(--gold-hi)}
.title .sub{margin:8px 0 0;font-size:14px;color:var(--ink-dim)}


.now{position:absolute;left:var(--pad);top:150px;z-index:3;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:44vw}
.now li{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:rgba(10,15,25,.55);border:1px solid var(--rule);border-radius:999px;padding:6px 12px;width:max-content;max-width:100%}
.now li i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--gold));flex:0 0 auto}
.now li.sh i{background:#05070b;box-shadow:0 0 0 1.5px var(--c,var(--gold))}

.view-seg{position:absolute;right:var(--pad);top:64px;z-index:4}
.zoom{position:absolute;right:var(--pad);top:112px;z-index:4;display:flex;flex-direction:column;gap:6px}
.zoom button{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule);background:var(--glass);color:var(--ink);font-size:18px;line-height:1;display:grid;place-items:center}
.zoom button:hover{border-color:var(--rule-gold);color:var(--gold)}
.zoom button[data-z="fit"]{font-size:14px}
.app[data-view="scope"] .zoom{display:none}

.scope{position:absolute;right:var(--pad);top:112px;z-index:4;display:none;flex-direction:column;gap:12px;width:300px;padding:14px 16px;border-radius:16px;border:1px solid var(--rule);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.app[data-view="scope"] .scope{display:flex}
.sl{display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.sl span{display:flex;justify-content:space-between}
.sl output{color:var(--ink)}
.sl input{width:100%;accent-color:var(--gold);height:24px;margin:0}
.orient{width:100%}
.orient button{flex:1 1 auto;padding:0 7px;font-size:9px;letter-spacing:.06em}

.fieldstop{position:absolute;inset:0;pointer-events:none;display:none;z-index:1}
.app[data-view="scope"] .fieldstop{display:block}

.skyline{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.foot{display:flex;align-items:baseline;flex:0 0 auto}
.credits-btn{border:0;background:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);padding:4px 0;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.credits-btn:hover{color:var(--gold)}


.dock{position:absolute;z-index:6;left:0;right:0;bottom:0;width:auto;padding:10px var(--pad) 8px;border-top:1px solid var(--rule);background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;box-shadow:0 -14px 40px rgba(0,0,0,.35)}
.timerow,.nextrow{display:contents}
.play{width:38px;height:38px;border-radius:50%;border:1px solid var(--rule-gold);background:transparent;display:grid;place-items:center;flex:0 0 auto}
.play span{width:0;height:0;border-left:11px solid var(--gold);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.play[aria-pressed="true"] span{width:11px;height:13px;border:0;margin:0;background:linear-gradient(90deg,var(--gold) 0 35%,transparent 35% 65%,var(--gold) 65%)}
.play:hover{background:rgba(244,185,66,.08)}
.clock{border:0;background:none;padding:0 4px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;text-align:left;flex:0 0 auto}
.clock .tz{display:flex;align-items:baseline;gap:7px}
.clock .d{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.clock .t{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.clock .z{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-faint)}
.clock:hover .t{color:var(--gold-hi)}
.speed{flex:0 0 auto}
.speed button{height:28px;padding:0 9px;font-size:9.5px;letter-spacing:.08em}
.nowbtn{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--rule);background:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);flex:0 0 auto}
.nowbtn:hover{border-color:var(--gold);color:var(--gold)}

.tl-wrap{position:relative;height:52px;flex:1 1 220px;min-width:0;border-radius:10px;overflow:hidden;border:1px solid var(--rule);cursor:grab;touch-action:none}
.tl-wrap:active{cursor:grabbing}
#tl{width:100%;height:100%;display:block}

.sel{height:34px;border-radius:999px;border:1px solid var(--rule);background:var(--paper);padding:0 32px 0 14px;font-size:13px;min-width:0;flex:0 1 190px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-dim) 50%),linear-gradient(135deg,var(--ink-dim) 50%,transparent 50%);background-position:calc(100% - 17px) 14px,calc(100% - 12px) 14px;background-size:5px 5px;background-repeat:no-repeat}
.tog{height:34px;border-radius:999px;border:1px solid var(--rule);background:none;padding:0 14px 0 34px;font-size:13px;color:var(--ink-dim);position:relative;white-space:nowrap;flex:0 0 auto}
.tog::before{content:"";position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:4px;border:1.5px solid var(--ink-faint)}
.tog[aria-pressed="true"]{color:var(--ink);border-color:var(--rule-gold)}
.tog[aria-pressed="true"]::before{background:var(--gold);border-color:var(--gold);box-shadow:inset 0 0 0 2px #16120a}
.jump{display:flex;gap:6px;flex:0 0 auto}
.jump button{height:34px;border-radius:999px;border:1px solid var(--rule);background:none;padding:0 14px;font-size:15px;color:var(--ink)}
.jump .go{background:var(--gold);border-color:var(--gold);color:#16120a;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.jump .go span{font-size:16px;letter-spacing:0;font-family:var(--sans)}
.jump button:hover{border-color:var(--gold)}
.jump .go:hover{background:var(--gold-hi)}


.subrow{flex:1 1 100%;min-width:0;display:flex;align-items:center;gap:6px 18px;padding-top:7px;border-top:1px solid var(--rule)}
.card{margin:0;flex:1 1 0;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.card .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-right:10px}
.card h2{display:inline;margin:0 10px 0 0;font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:-.01em;color:#fff}
.card .l{display:none}
.card .w{font-size:13px;color:var(--ink-dim)}
.card .w b{font-weight:600;color:var(--gold-hi)}
.card .w.no{color:var(--ink-faint)}
.rule{margin:0;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);line-height:1.5}


.sheet{border:1px solid var(--rule-gold);border-radius:20px;background:var(--paper);color:var(--ink);padding:0;width:min(440px,calc(100% - 24px));max-height:calc(100% - 40px)}
.sheet.wide{width:min(720px,calc(100% - 24px))}
.sheet::backdrop{background:rgba(3,5,10,.7);backdrop-filter:blur(3px)}
.sheet-in{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.sheet header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sheet h2{margin:0;font-family:var(--serif);font-weight:600;font-size:22px;letter-spacing:-.015em;color:#fff}
.sheet .x{border:0;background:none;font-size:26px;line-height:1;color:var(--ink-dim);width:40px;height:40px;border-radius:50%}
.sheet .x:hover{color:var(--gold)}
.sheet .note{margin:0;font-size:13.5px;color:var(--ink-dim);line-height:1.5}
.fld{display:flex;flex-direction:column;gap:6px}
.fld span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.fld input,.fld select{height:46px;border-radius:12px;border:1px solid var(--rule);background:var(--bg);padding:0 14px;font-size:15px;width:100%;min-width:0;color-scheme:dark}
.fld input:focus,.fld select:focus{border-color:var(--gold);outline:none}
.results{list-style:none;margin:-6px 0 0;padding:0;display:flex;flex-direction:column}
.results button{width:100%;text-align:left;border:0;border-bottom:1px solid var(--rule);background:none;padding:11px 4px;display:flex;justify-content:space-between;gap:10px;font-size:15px}
.results button small{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);letter-spacing:.08em}
.results button:hover{color:var(--gold)}
.geo,.apply{height:44px;border-radius:999px;border:1px solid var(--rule-gold);background:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.apply{background:var(--gold);color:#16120a;border-color:var(--gold);font-weight:600;padding:0 22px}
.geo:hover{background:rgba(244,185,66,.08)}
.ll{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acts{display:flex;justify-content:flex-end}
#credits{display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.5;color:var(--ink-dim)}
#credits h3{margin:6px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:400}
#credits ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
#credits li b{color:var(--ink);font-weight:600}
#credits a{color:var(--ink)}
#credits p{margin:0}


@media (max-width:1199px){
  .dock{gap:8px 10px}
  .tl-wrap{order:3;flex:1 1 100%}
  .subrow{order:4}
  .sel{flex:1 1 130px;max-width:240px}
}
@media (max-width:1359px){
  .subrow{flex-wrap:wrap}
  .card{flex:1 1 100%}
  .skyline{flex:1 1 0}
  .foot{margin-left:auto}
}

@media (max-width:760px){
  :root{--pad:14px}
  body{overflow:auto}
  .app{position:static;display:flex;flex-direction:column;min-height:100svh}
  .bar{position:relative;padding:10px var(--pad);gap:8px;flex-wrap:nowrap;background:var(--bg)}
  .brand{font-size:0;gap:0}
  .brand .star{font-size:16px}
  .planet-seg{margin-left:4px}
  .seg button{height:30px;padding:0 10px;font-size:10px;letter-spacing:.1em}
  .loc{margin-left:auto;height:36px;padding:0 12px;font-size:10px;letter-spacing:.08em;max-width:40vw}
  .stage{position:relative;inset:auto;height:min(60svh,540px);min-height:340px;flex:0 0 auto}
  .title{top:12px}
  .title h1{font-size:25px}
  .title .sub{display:none}
  .now{top:auto;bottom:12px;max-width:64%;gap:4px}
  .now li{font-size:9px;padding:4px 9px;letter-spacing:.08em}
  .now li:nth-child(n+4){display:none}
  .view-seg{top:12px}
  .zoom{top:auto;bottom:12px;flex-direction:row}
  .zoom button{width:36px;height:36px}
  .scope{top:auto;bottom:10px;right:10px;left:10px;width:auto;padding:10px 12px;gap:6px 14px;display:none;grid-template-columns:1fr 1fr}
  .app[data-view="scope"] .scope{display:grid}
  .scope .orient{grid-column:1/-1}
  .orient button{font-size:9px;letter-spacing:.06em;padding:0 4px}
  .dock{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:0;border:0;border-top:1px solid var(--rule);background:var(--bg);box-shadow:none;padding:10px var(--pad) 14px;gap:8px 8px;backdrop-filter:none;-webkit-backdrop-filter:none;align-items:center}
  .play{width:36px;height:36px}
  .clock{flex:1 1 auto;padding:0 2px}
  .clock .d{font-size:9px;letter-spacing:.06em}
  .clock .t{font-size:21px}
  .speed{padding:2px}
  .speed button{height:28px;padding:0 6px;font-size:9px;letter-spacing:.02em}
  .tl-wrap{order:1;height:50px}
  .nowbtn{order:2;height:34px;padding:0 11px;letter-spacing:.1em}
  .sel{order:2;flex:1 1 0;height:34px;padding-left:12px}
  .jump{display:contents}
  .jump button{order:2;height:34px;padding:0 12px}
  .tog{order:4;height:32px;padding-right:10px;font-size:12px}
  .subrow{display:contents}
  .card{order:3;flex:1 1 100%;white-space:normal;overflow:visible;padding-top:2px}
  .card h2{font-size:17px;display:block;margin:2px 0 0}
  .card .k{margin:0;display:block}
  .card .w{display:block;margin-top:2px;font-size:13px;line-height:1.4}
  .foot{order:4;margin-left:auto}
  .skyline{display:block;order:5;flex:1 1 100%;white-space:normal;font-size:9.5px;line-height:1.5}
  #credits ul{grid-template-columns:1fr}
}
@media (max-width:760px){ .app[data-view="scope"] .now{display:none} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }


.scope .seg{display:flex;width:100%}
.eps button,.bls button{flex:1 1 0;min-width:0;padding:0 4px;font-size:10px;letter-spacing:.08em}
.eps i{font-style:normal}
@media (max-width:760px){
  .app[data-view="scope"] .stage{height:min(calc(60svh + 62px),602px);min-height:402px}   
  .scope{grid-template-columns:minmax(0,1fr) auto}
  .scope>.sl:first-child{grid-column:1/-1}
  .eps button,.bls button{font-size:9.5px;letter-spacing:.04em;padding:0 3px}
  .bls button{flex:1 0 auto;padding:0 7px}
}
@media (max-width:420px){ .eps i{display:none} }

@media (max-width:520px){ .title h1 em{display:block} }

.m7-grain{position:absolute;inset:0;pointer-events:none;display:none;background-repeat:repeat;opacity:.224;mix-blend-mode:overlay;
  -webkit-mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#000 calc(var(--gr,30%) - 2px),transparent var(--gr,30%));
  mask-image:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#000 calc(var(--gr,30%) - 2px),transparent var(--gr,30%))}
.app[data-view="scope"] .m7-grain{display:block}

@media (min-width:761px){ .f2-torch{left:auto!important;right:22px!important;bottom:118px!important} .f2-torch .tip{left:auto!important;right:48px!important} }