@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

  :root{
    --bg: #05060a;
    --bg-deep: #020204;
    --panel: #0b0d16;
    --hairline: rgba(234,242,255,0.10);
    --star: #eaf2ff;
    --gold: #f0b429;
    --gold-dim: rgba(240,180,41,0.35);
    --grey: #9aa0ac;
    --grey-glow: rgba(154,200,255,0.35);
    --ash: #55525f;
    --text: #eef0f6;
    --text-mute: #9a9aa8;
  }

  *{ box-sizing: border-box; }
  html{ scroll-behavior: smooth; }
  body{
    margin:0;
    background: radial-gradient(ellipse 120% 80% at 50% -10%, #0d1224 0%, var(--bg) 45%, var(--bg-deep) 100%);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  }
  a{ color: inherit; }
  .mono{ font-family:'JetBrains Mono', monospace; }

  .bg-stars{
    position: absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  }
  .bg-stars circle{ animation: bgTwinkle ease-in-out infinite; }
  .bg-stars circle.wander{
    transform-box: fill-box;
    transform-origin: center;
    animation: bgTwinkle ease-in-out infinite, wander ease-in-out infinite;
  }
  @keyframes bgTwinkle{ 0%,100%{ opacity: var(--tw-min,0.15); } 50%{ opacity: var(--tw-max,0.9); } }
  @keyframes wander{
    0%{ transform: translate(0,0); }
    25%{ transform: translate(var(--dx1,4px), var(--dy1,-3px)); }
    50%{ transform: translate(var(--dx2,-3px), var(--dy2,4px)); }
    75%{ transform: translate(var(--dx3,3px), var(--dy3,3px)); }
    100%{ transform: translate(0,0); }
  }

  header{
    position: relative; z-index: 5;
    display:flex; align-items:center; justify-content:space-between;
    padding: 20px 48px;
    border-bottom: 1px solid var(--hairline);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif; font-weight:600; font-size:19px; letter-spacing:0.01em;
  }
  .brand .mark{ color: var(--gold); font-size: 17px; }
  .brand .domain{ font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-mute); font-weight:400; margin-left:2px; }
  nav.links{ display:flex; gap:32px; font-size:14px; color: var(--text-mute); }
  nav.links a{ text-decoration:none; transition: color .2s; }
  nav.links a:hover{ color: var(--text); }
  .nav-cta{
    font-size:13px; font-family:'JetBrains Mono',monospace; color: var(--bg);
    background: var(--gold); padding:9px 16px; border-radius:2px; text-decoration:none;
  }
  @media (max-width: 760px){ header{ padding: 16px 18px; } nav.links{ display:none; } }

  /* ---------- minimal hero: one line only ---------- */
  .hero-line{
    position: relative; z-index:5; text-align:center;
    padding: 22px 20px 14px;
  }
  .hero-line h1{
    font-family:'Fraunces', serif; font-weight:500; font-style:italic;
    font-size:clamp(22px, 3.4vw, 34px); margin:0; letter-spacing:-0.01em;
  }
  .hero-line h1 em{ font-style: normal; color: var(--gold); }

  /* ---------- sky canvas ---------- */
  .sky-wrap{
    position: relative; z-index: 2;
    height:1050px;
    margin: 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(139,124,246,0.05), transparent 40%);
  }
  .sky{ position:absolute; inset:0; transition: transform 0.35s ease-out; }

  .star-node{
    position:absolute;
    transform: translate(-50%,-50%) scale(var(--node-scale, 1));
    transform-origin:center;
    cursor:pointer;
    transition:left .35s ease, top .35s ease;
  }
  .star-node svg{ display:block; overflow: visible; }
  .star-node .core-glow{ filter: blur(2.5px); }

  .label-claimed{ fill: var(--gold); }
  .label-unclaimed{ fill: var(--grey); }
  .star-node text{
    font-family:'JetBrains Mono', monospace; letter-spacing:0.04em; text-transform:uppercase;
    paint-order: stroke;
    stroke: rgba(2,3,6,0.9); stroke-width: 2px; stroke-linejoin: round;
  }
  .star-owner-primary-label{ font-size:clamp(12px, 1vw, 15px); }
  .star-name-label{ font-size:clamp(11.5px, 1vw, 14px); font-weight:500; }
  .star-status-label{
    font-size:clamp(8px, 0.7vw, 9.5px);
    text-transform:lowercase;
    letter-spacing:0.08em;
    opacity:0.72;
  }
  .ring{ fill:none; stroke-linecap:round; }
  .ring.claimed-ring{ stroke: var(--gold); }
  .ring-back{ opacity:0.45; }
  .ring-front{ opacity:0.95; filter: drop-shadow(0 0 2px var(--gold-dim)); }

  .curve-group{ animation: spinCW linear infinite; animation-duration: var(--spin-dur, 40s); }
  .curve-group.ccw{ animation-name: spinCCW; }
  @keyframes spinCW{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
  @keyframes spinCCW{ from{ transform: rotate(0deg); } to{ transform: rotate(-360deg); } }

  .interaction-hint{
    position:relative; z-index:3;
    padding:12px 20px;
    border-bottom:1px solid var(--hairline);
    text-align:center;
    font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--text-mute);
    letter-spacing:0.05em; opacity:0.7;
  }
  .legend{
    position:absolute; top:14px; left:16px; z-index:3;
    display:flex; gap:16px; font-family:'JetBrains Mono',monospace; font-size:10.5px; color: var(--text-mute);
  }
  .legend span{ display:flex; align-items:center; gap:6px; }
  .legend i{ width:8px;height:8px;border-radius:50%; display:inline-block; }
  .legend .lg-gold{ background: var(--gold); box-shadow: 0 0 6px var(--gold); }
  .legend .lg-grey{ background: var(--grey); }
  .legend .lg-ring{ width:11px; height:7px; border-radius:50%; border:1.4px solid var(--gold); background:none; }
  @media (max-width:1000px){
    .sky-wrap{ height:1250px; }
  }
  @media (max-width:760px){
    .sky-wrap{ height:1520px; min-height:0; }
    .legend{ display:none; }
    .star-owner-primary-label{ font-size:18px; }
    .star-name-label{ font-size:16px; }
    .star-status-label{ font-size:11px; }
    .interaction-hint{ font-size:10px; padding:10px 14px; }
  }
  @media (max-width:480px){
    .sky-wrap{ height:2300px; }
    .star-owner-primary-label{ font-size:19px; }
    .star-name-label{ font-size:16.5px; }
    .star-status-label{ font-size:11.5px; }
  }

  /* ---------- below-canvas intro ---------- */
  .intro{
    position:relative; z-index:2;
    max-width: 760px; margin: 0 auto; padding: 56px 48px 20px; text-align:center;
  }
  .eyebrow{
    font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.12em;
    color: var(--gold); text-transform: uppercase; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center; gap:10px;
  }
  .eyebrow::before, .eyebrow::after{ content:''; width:6px;height:6px;border-radius:50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
  .intro p{ font-size:16px; line-height:1.65; color:var(--text-mute); margin:0 0 30px; }
  .hero-actions{ display:flex; gap:14px; justify-content:center; flex-wrap: wrap; margin-bottom: 46px; }
  .btn-primary, .btn-ghost{
    font-family:'JetBrains Mono', monospace; font-size:13px;
    padding: 13px 22px; border-radius: 2px; text-decoration:none; cursor:pointer; border:none;
  }
  .btn-primary{ background: var(--gold); color: var(--bg); }
  .btn-ghost{ background: transparent; color: var(--text); border:1px solid var(--hairline); }
  .btn-ghost:hover{ border-color: rgba(234,242,255,0.3); }

  .stat-strip{
    position: relative; z-index:5;
    display:flex; gap:36px; justify-content:center;
    padding:0 48px 54px; font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-mute);
    flex-wrap: wrap; border-bottom: 1px solid var(--hairline);
  }
  .stat-strip b{ color: var(--text); font-weight:500; }
  @media (max-width:760px){ .intro, .stat-strip{ padding-left:20px; padding-right:20px; } }

  .how{ position:relative; z-index:2; max-width: 980px; margin: 0 auto; padding: 70px 48px 60px; }
  .section-label{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.12em; color: var(--text-mute); text-transform:uppercase; margin-bottom: 10px; }
  .section-title{ font-family:'Fraunces',serif; font-weight:500; font-size:clamp(24px,3vw,32px); margin:0 0 44px; }
  .steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 36px; }
  .step .num{ font-family:'JetBrains Mono',monospace; color: var(--gold); font-size:13px; margin-bottom:14px; }
  .step h3{ font-family:'Fraunces',serif; font-weight:500; font-size:19px; margin:0 0 10px; }
  .step p{ color: var(--text-mute); font-size:14.5px; line-height:1.6; margin:0; }
  @media (max-width: 760px){ .how{ padding: 50px 20px; } .steps{ grid-template-columns: 1fr; gap:28px; } }

  .graveyard{ position:relative; z-index:2; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35)); border-top: 1px solid var(--hairline); padding: 64px 48px 90px; }
  .gy-inner{ max-width: 980px; margin:0 auto; }
  .gy-row{ display:grid; grid-template-columns: 22px 1.4fr 1fr 1fr 1fr; align-items:center; gap:16px; padding: 15px 0; border-bottom: 1px solid var(--hairline); font-size: 14px; }
  .gy-row:first-child{ border-top: 1px solid var(--hairline); }
  .gy-row .dot{ width:6px;height:6px;border-radius:50%; background: var(--ash); }
  .gy-name{ color: var(--text-mute); text-decoration: line-through; text-decoration-color: var(--ash); }
  .gy-star{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color: rgba(234,242,255,0.55); }
  .gy-amt{ font-family:'JetBrains Mono',monospace; font-size:12.5px; color: var(--ash); }
  .gy-by{ font-size:12.5px; color: var(--text-mute); }
  .gy-head{ display:grid; grid-template-columns: 22px 1.4fr 1fr 1fr 1fr; gap:16px; font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--text-mute); text-transform:uppercase; letter-spacing:0.06em; padding-bottom: 10px; }
  @media (max-width:760px){ .graveyard{ padding: 50px 20px 64px; } .gy-row, .gy-head{ grid-template-columns: 14px 1.3fr 0.8fr; } .gy-by{ display:none; } }

  footer{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 48px; border-top:1px solid var(--hairline); font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-mute); }
  footer a{ color: var(--gold); text-decoration: none; }
  footer a:hover{ text-decoration: underline; }
  @media (max-width:760px){ footer{ flex-direction:column; gap:8px; padding: 20px 20px; text-align:center; } }

  .overlay{ position:fixed; inset:0; background: rgba(2,2,4,0.72); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; z-index:50; opacity:0; pointer-events:none; transition: opacity .15s ease; }
  .overlay.open{ opacity:1; pointer-events:auto; }
  .modal{ width: min(420px, 88vw); background: var(--panel); border: 1px solid var(--hairline); border-radius: 4px; padding: 28px; transform: translateY(6px); transition: transform .15s ease; }
  .overlay.open .modal{ transform: translateY(0); }
  .modal-close{ float:right; background:none; border:none; color: var(--text-mute); font-size:18px; cursor:pointer; line-height:1; }
  .modal-star{ font-family:'JetBrains Mono',monospace; font-size:11px; color: var(--gold); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; }
  .modal-title{ font-family:'Fraunces',serif; font-size:23px; font-weight:500; margin:0 0 4px; }
  .modal-meta{ font-family:'JetBrains Mono',monospace; font-size:12px; color: var(--text-mute); margin-bottom: 18px; display:flex; align-items:center; gap:8px; }
  .ring-badge{ font-size:10.5px; background: var(--gold-dim); color: var(--gold); padding:2px 7px; border-radius: 10px; border: 1px solid var(--gold-dim); }
  .modal-owner{ display:flex; align-items:center; gap:12px; padding:14px; background: rgba(255,255,255,0.02); border:1px solid var(--hairline); border-radius:3px; margin-bottom:16px; }
  .owner-logo{ width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg, var(--gold), #8a5a1f); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; color:#1a1102; font-size:16px; flex-shrink:0; }
  .owner-name{ font-size:14.5px; font-weight:500; }
  .owner-tag{ font-size:12.5px; color: var(--text-mute); }
  .modal-row{ display:flex; justify-content:space-between; font-size:13.5px; padding:9px 0; border-top:1px solid var(--hairline); }
  .modal-row span:first-child{ color: var(--text-mute); }
  .modal-row span:last-child{ font-family:'JetBrains Mono',monospace; }
  .modal-actions{ display:flex; gap:10px; margin-top:18px; }
  .modal-actions .btn-primary, .modal-actions .btn-ghost{ flex:1; text-align:center; }
  .ring-note{ font-size:11.5px; color: var(--text-mute); margin-top:10px; text-align:center; }

  .tooltip{
    position: fixed; z-index: 60; pointer-events: none;
    background: var(--panel); border: 1px solid var(--hairline); border-radius: 3px;
    padding: 7px 11px; font-family:'JetBrains Mono', monospace; font-size: 11.5px;
    color: var(--text); white-space: nowrap; opacity: 0; transition: opacity .1s ease;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  }
  .tooltip.show{ opacity: 1; }
  .tooltip .tt-status{ color: var(--text-mute); }
  .tooltip .tt-gold{ color: var(--gold); }
  .checkout-status{
    position:relative; z-index:6; display:none; padding:12px 20px; text-align:center;
    border-bottom:1px solid var(--hairline); background:rgba(240,180,41,0.08);
    color:var(--text); font-size:13px;
  }
  .checkout-status.show{ display:block; }
  .checkout-status.error{ background:rgba(214,74,74,0.10); color:#ffb4b4; }
  .modal-actions button:disabled{ opacity:.6; cursor:wait; }