@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');

:root{
  --bg:#03050b;
  --panel:rgba(12,16,29,.86);
  --panel-soft:rgba(19,24,42,.68);
  --line:rgba(225,232,255,.12);
  --line-bright:rgba(225,232,255,.22);
  --text:#edf1ff;
  --muted:#9ca7c4;
  --silver:#dce5ff;
  --glow:rgba(190,207,255,.18);
  --shadow:0 24px 70px rgba(0,0,0,.48);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(circle at 50% -10%,rgba(104,121,188,.15),transparent 38%),
    radial-gradient(circle at 8% 35%,rgba(83,100,165,.08),transparent 28%),
    var(--bg);
  font-family:Inter,system-ui,sans-serif;
  overflow-x:hidden;
}

button,a,input,select,textarea{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent }
button{cursor:pointer}
a{color:inherit;text-decoration:none}

.stars,.stars-two{
  position:fixed;inset:0;pointer-events:none;z-index:-3;
  opacity:.8;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(207,220,255,.55) 0 1px,transparent 1.5px);
  background-size:137px 151px,211px 187px;
  background-position:18px 21px,87px 53px;
}
.stars-two{opacity:.28;transform:scale(1.12);background-size:263px 239px,173px 201px;filter:blur(.2px)}
.nebula{
  position:fixed;inset:auto -20% 5% -20%;height:55vh;pointer-events:none;z-index:-2;
  background:radial-gradient(ellipse at center,rgba(82,100,177,.08),transparent 64%);
  filter:blur(25px);
}

.hero{max-width:920px;margin:0 auto;padding:92px 24px 55px;text-align:center}
.eyebrow,.section-kicker{letter-spacing:.28em;font-size:.68rem;font-weight:700;color:#8e9abd;margin:0 0 14px}
h1{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(3.7rem,11vw,7.8rem);line-height:.88;letter-spacing:-.045em;margin:0}
h1 span{font-style:italic;color:#cfd9ff}
.intro{max-width:590px;margin:28px auto 28px;color:var(--muted);line-height:1.8;font-size:.94rem}
.phase-legend{display:flex;justify-content:center;gap:7px;opacity:.75;font-size:1.15rem;filter:drop-shadow(0 0 9px rgba(210,220,255,.1))}

main{width:min(900px,calc(100% - 34px));margin:0 auto 100px}
.archive-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:0 3px 18px;border-bottom:1px solid var(--line)}
.archive-head h2{font-family:'Playfair Display',serif;font-weight:500;margin:0;font-size:1.8rem}
.archive-head h2 span{font-family:Inter,sans-serif;font-size:1rem;color:var(--muted);vertical-align:middle;margin-right:5px}
.archive-status{font-size:.72rem;color:#727d9c;text-align:right}

.timeline{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:16px;padding-top:22px}
.phase-card{
  position:relative;min-height:142px;padding:22px 14px 18px;
  border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(145deg,rgba(19,24,42,.72),rgba(7,10,19,.7));
  box-shadow:0 10px 40px rgba(0,0,0,.22);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
  overflow:hidden;
}
.phase-card::before{content:"";position:absolute;inset:-60%;background:radial-gradient(circle,rgba(211,221,255,.07),transparent 50%);opacity:0;transition:opacity .25s ease}
.phase-card:hover,.phase-card:focus-visible{transform:translateY(-5px);border-color:var(--line-bright);box-shadow:0 18px 55px rgba(0,0,0,.42),0 0 25px rgba(160,180,255,.06);outline:none}
.phase-card:hover::before{opacity:1}
.phase-icon{position:relative;font-size:2.05rem;line-height:1;margin-bottom:16px;letter-spacing:-.12em;filter:drop-shadow(0 0 10px rgba(220,228,255,.12))}
.phase-date{position:relative;font-family:'Playfair Display',serif;font-size:1.04rem;color:#e7ebfa;line-height:1.25}
.phase-time{position:relative;margin-top:6px;color:#7e89a6;font-size:.68rem}

.empty{text-align:center;padding:75px 20px;color:var(--muted)}
.empty.hidden{display:none}
.empty-moons{font-size:2rem;margin-bottom:18px}
.empty h2{font-family:'Playfair Display',serif;color:var(--text);font-weight:500}
.empty p{line-height:1.7}
code{color:#d5ddff;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px}

.site-orb,.add-orb{
  position:fixed;z-index:20;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);color:#e9edff;background:rgba(9,13,24,.78);backdrop-filter:blur(15px);
  box-shadow:0 10px 35px rgba(0,0,0,.35),inset 0 0 18px rgba(210,220,255,.04);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.site-orb{right:22px;bottom:24px}
.add-orb{left:22px;bottom:24px;font-size:1.45rem;font-weight:300}
.site-orb:hover,.add-orb:hover{transform:translateY(-3px) rotate(8deg);border-color:var(--line-bright);box-shadow:0 14px 40px rgba(0,0,0,.48),0 0 22px rgba(190,207,255,.1)}
.site-orb span{display:block;line-height:1}

.site-panel{position:fixed;inset:0;z-index:40;visibility:hidden;opacity:0;transition:opacity .25s ease,visibility .25s ease}
.site-panel.open{visibility:visible;opacity:1}
.panel-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(7px)}
.panel-card{position:absolute;right:16px;bottom:16px;width:min(440px,calc(100% - 32px));padding:28px;border:1px solid var(--line-bright);border-radius:28px;background:rgba(7,10,19,.96);box-shadow:var(--shadow);transform:translateY(20px);transition:transform .25s ease}
.site-panel.open .panel-card{transform:translateY(0)}
.panel-close,.close{position:absolute;right:16px;top:14px;border:0;background:transparent;color:#8994b0;font-size:1.6rem;width:35px;height:35px}
.panel-card h2{font-family:'Playfair Display',serif;font-weight:500;margin:0 0 8px;font-size:1.8rem;max-width:340px}
.panel-subtitle,.modal-hint{color:var(--muted);font-size:.78rem;line-height:1.7;margin:0 0 20px}
.site-grid{display:grid;gap:10px}
.site-card{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:17px;background:var(--panel-soft);transition:.2s ease}
.site-card:hover{border-color:var(--line-bright);transform:translateX(-2px)}
.site-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:rgba(220,228,255,.06);font-size:1.2rem}
.site-card strong{display:block;font-size:.83rem;font-weight:600}.site-card small{display:block;color:#7e89a6;font-size:.68rem;margin-top:3px}.arrow{color:#8995b3}
.panel-actions{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.text-button{border:0;background:transparent;color:#77839f;font-size:.68rem;padding:4px}.text-button:hover{color:#cfd8f6}

.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px;visibility:visible;opacity:1;transition:opacity .2s ease,visibility .2s ease}
.modal.hidden{visibility:hidden;opacity:0;pointer-events:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(9px)}
.modal-card{position:relative;width:min(720px,100%);max-height:min(82vh,760px);overflow:auto;padding:36px 34px 34px;border:1px solid var(--line-bright);border-radius:28px;background:linear-gradient(145deg,rgba(16,21,37,.98),rgba(5,8,15,.98));box-shadow:var(--shadow)}
.note-card{text-align:center}
.modal-icon{font-size:2rem;letter-spacing:-.13em;margin:0 0 15px}
.modal-date{font-family:'Playfair Display',serif;font-size:2.25rem;color:#eef2ff}
.modal-time{color:#8792ae;font-size:.75rem;margin-top:6px}
.modal-notes{margin-top:26px;text-align:left;display:grid;gap:12px}
.note-line{padding:14px 16px;border-left:2px solid rgba(213,222,255,.24);border-radius:0 13px 13px 0;background:rgba(255,255,255,.035);color:#dce2f4;line-height:1.75;font-size:.88rem;white-space:pre-wrap}
.category-pill{display:inline-block;margin-top:13px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;color:#8f9ab7;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase}

.add-card{width:min(560px,100%)}
.add-card h2{font-family:'Playfair Display',serif;font-weight:500;font-size:2rem;margin:0 0 8px}
.add-card label{display:block;color:#b9c2da;font-size:.72rem;margin-top:15px}
.optional{color:#68738f}
.add-card input,.add-card select,.add-card textarea{width:100%;margin-top:7px;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035);color:var(--text);padding:11px 12px;outline:none}
.add-card textarea{resize:vertical;min-height:130px;line-height:1.6}
.add-card input:focus,.add-card select:focus,.add-card textarea:focus{border-color:rgba(215,224,255,.35);box-shadow:0 0 0 3px rgba(180,195,255,.05)}
.save-button{width:100%;margin-top:20px;padding:13px;border:1px solid rgba(220,228,255,.2);border-radius:13px;background:#dfe6ff;color:#080b14;font-weight:700}
.save-button:hover{background:#fff}

footer{text-align:center;color:#59647f;font-size:.65rem;letter-spacing:.08em;padding:0 20px 28px}

@media(max-width:560px){
  .hero{padding-top:70px;padding-bottom:42px}
  .timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .phase-card{min-height:126px;border-radius:18px}
  .phase-icon{font-size:1.7rem}
  .archive-head{align-items:start;flex-direction:column;gap:8px}
  .archive-status{text-align:left}
  .panel-card{right:10px;bottom:10px;width:calc(100% - 20px);padding:24px}
  .site-orb{right:16px;bottom:16px}.add-orb{left:16px;bottom:16px}
  .modal-card{padding:32px 20px 24px;border-radius:22px}
}