:root{
  --bg:#06080a; /* terminal background */
  --card:#0c1113; /* card background (terminal window) */
  --accent:#ffd166; /* warm accent for terminal */
  --muted:#9aa4b2; /* muted text */
  --glass: rgba(255,255,255,0.02);
}
*{box-sizing:border-box;font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Menlo, Monaco, 'Courier New', monospace}
body{margin:0;background:var(--bg);color:#cfe7ff}
header{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,0.03)}
header h1{margin:0;font-size:1.6rem}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tag{margin:6px 0 0;color:var(--muted)}
.controls button{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted);padding:6px 10px;border-radius:6px;cursor:pointer}
.controls button:hover{background:rgba(255,255,255,0.02);color:var(--accent);border-color:rgba(255,209,102,0.18)}
.container{max-width:1200px;margin:0 auto;padding:14px}
#page-main{display:grid;grid-template-columns:1fr;gap:18px;padding:0}
.card{background:linear-gradient(180deg, rgba(12,17,19,0.98), rgba(6,10,14,0.98));border-radius:12px;padding:14px;box-shadow:0 18px 60px rgba(2,6,15,0.7);border:1px solid rgba(255,255,255,0.03);backdrop-filter: blur(4px);transform-origin:center;animation:cardIn .45s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(6px) scale(0.995)}to{opacity:1;transform:none}}
/* Terminal-style header for cards */
.card .term-top{height:28px;display:flex;align-items:center;gap:8px;padding:6px 10px;margin:-8px -8px 8px -8px;border-bottom:1px solid rgba(255,255,255,0.02);background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-top-left-radius:12px;border-top-right-radius:12px}
#term-dots{display:flex;gap:6px;align-items:center}
.term-dots span{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot-red{background:#ff5f56}
.dot-yellow{background:#ffbd2e}
.dot-green{background:#27c93f}
/* globe terminal window styling */
#globeViz{width:100%;aspect-ratio:16/9;min-height:280px;border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02), 0 6px 20px rgba(0,0,0,0.6);background:linear-gradient(180deg, rgba(2,6,10,0.6), rgba(0,0,0,0.6));overflow:hidden}
#globeStatus{margin-top:8px;color:var(--muted);font-size:0.95rem}
#iss-info{margin-top:10px;color:var(--muted);font-size:0.95rem}
/* make sure fallback canvas fills the globe area */
#globeViz canvas{display:block;width:100%;height:auto;border-radius:8px}

.live-grid{display:grid;grid-template-columns:1fr;gap:12px}
.embed-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:6px}
.embed-wrap{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:8px}
.embed-wrap iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;min-height:420px;border-radius:8px}
.live-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:8px}
.stream-fallback{margin-top:10px;color:var(--muted);font-size:0.95rem}
.stream-fallback a{color:var(--accent);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,0.05)}
.stream-fallback a:hover{opacity:0.95}

.apod img{max-width:100%;border-radius:6px;display:block}
#fact-section{background:var(--glass);padding:14px;border-radius:8px}
#fact{font-size:1.05rem;margin-bottom:8px}
button{background:var(--accent);color:#052036;border:0;padding:8px 12px;border-radius:6px;cursor:pointer}

/* Responsive layout */
@media (min-width:900px){
  /* two-column layout: main content and sidebar */
  #page-main{grid-template-columns:1fr 420px;align-items:start;grid-auto-rows:auto;grid-column-gap:24px}
  #live-section{grid-column:1;grid-row:1}
  #globe-section{grid-column:2;grid-row:1}
  #fact-section{grid-column:1 / -1}
  /* slightly larger card padding on desktop */
  #live-section .card, #globe-section .card{padding:18px}
  #globeViz{aspect-ratio:16/10;min-height:420px;border-radius:8px}
  .embed-wrap iframe{min-height:520px;border-radius:8px}
}

@media (min-width:1200px){
  /* wider sidebar on large screens */
  #page-main{grid-template-columns:1fr 560px}
  #globeViz{min-height:520px}
  .embed-wrap iframe{min-height:560px}
}

/* Focus swap variants */
body.focus-map #page-main{grid-template-columns:420px 1fr}
@media (min-width:1200px){
  body.focus-map #page-main{grid-template-columns:560px 1fr}
}

/* Small screens adjustments */
@media (max-width:599px){
  .card{border-radius:10px;padding:12px}
  .term-top{margin:-8px -8px 8px -8px}
  h2{font-size:1.2rem}
  .embed-wrap{padding-bottom:56.25%}
  .embed-wrap iframe{min-height:260px}
  #globeViz{aspect-ratio:16/9;min-height:220px}
  .stream-fallback{font-size:0.95rem}
}

/* small animations */
.status{transition:color .25s ease,opacity .25s ease}
.controls button{transition:all .18s ease}
.controls button:active{transform:scale(0.98)}

/* Typography and responsive type */
h2{font-size:clamp(1.05rem, 1.6vw, 1.45rem);color:#cbe8ff;margin:8px 0 12px}
h3{font-size:clamp(0.95rem, 1.2vw, 1.05rem);color:#cbe8ff;margin:6px 0 10px}
p, .tag, .status, .stream-fallback{font-size:clamp(0.85rem, 1.3vw, 0.98rem);color:var(--muted)}

/* Make buttons larger for touch devices */
button, .controls button{min-height:40px;padding:10px 12px}

footer{padding:12px 18px;color:var(--muted);font-size:0.9rem}