*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1100px; margin:0 auto; padding:28px 28px 60px}

.masthead{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:24px; margin-bottom:8px;
}
.wordmark{
  font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1;
  margin:0; color:var(--ink);
}
.masthead-meta{font-size:13px; color:var(--muted); text-align:right; white-space:nowrap}
.masthead-meta a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule-strong)}
.masthead-meta a:hover{color:var(--ink)}

.usage{font-size:13px; color:var(--muted); margin:0 0 36px}

.empty{color:var(--muted); font-size:13px; margin:0}

.tools-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.tile{
  display:flex; flex-direction:column; gap:8px;
  padding:22px 22px 20px; min-height:140px;
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
  position:relative; color:var(--ink);
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.tile:hover{background:var(--surface-hover); border-color:var(--rule-strong); transform:translateY(-1px)}
.tile-name{font-size:16px; font-weight:600; letter-spacing:-.01em}
.tile-status{
  position:absolute; top:18px; right:18px;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase;
}
.tile[data-status="running"] .tile-status{color:var(--good)}
.tile[data-status="failed"] .tile-status{color:var(--bad)}
.tile[data-status="provisioning"] .tile-status{color:var(--soon)}
.tile-links{margin-top:auto; display:flex; gap:14px; font-size:13px}
.tile-links a{color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--rule-strong)}
.tile-links a:hover{color:var(--ink)}

.btn{
  display:inline-block; padding:9px 16px; border:none; border-radius:var(--radius-sm);
  background:var(--ink); color:#fff; font:inherit; font-size:13px; font-weight:600;
  cursor:pointer; text-decoration:none; text-align:center;
  transition:background .15s ease;
}
.btn:hover{background:#000}

.intro-stage{
  min-height:100vh; padding:48px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px;
}
.intro-line{
  font-size:clamp(18px, 2.2vw, 24px); font-weight:500; letter-spacing:-.01em;
  line-height:1.4; min-height:1.4em; margin:0; color:var(--ink);
}
.intro-caret{
  display:inline-block; width:1ch; height:1em; vertical-align:text-bottom;
  background:var(--ink); animation:caret-blink .85s step-end infinite;
}
@keyframes caret-blink{50%{opacity:0}}

.signin{
  max-width:380px; margin:0 auto; padding:0 24px; text-align:center;
  opacity:0; transform:translateY(8px);
  transition:opacity var(--dur-morph) var(--ease-morph), transform var(--dur-morph) var(--ease-morph);
}
.signin.is-ready{opacity:1; transform:translateY(0)}
.signin .wordmark{font-size:34px; margin-bottom:24px}
.signin .btn{display:inline-block}
.signin .muted{color:var(--muted); font-size:13px; margin-top:18px}

.masthead-orb{width:36px; height:36px; vertical-align:middle; margin-right:10px}

.tile[data-status="provisioning"] .tile-status::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--soon); margin-right:6px; vertical-align:middle;
  animation:dot-pulse 1.6s ease-in-out infinite;
}
@keyframes dot-pulse{50%{opacity:.35}}

.empty-state{margin:0}
.empty-title{font-size:15px; font-weight:500; margin:0 0 4px}
.empty-hint{font-size:13px; color:var(--muted); margin:0}

@keyframes tile-in{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
@media (prefers-reduced-motion: no-preference){
  .tile{animation:tile-in var(--dur-pop) var(--ease-pop) backwards}
  .tile:nth-child(1){animation-delay:calc(var(--stagger-step) * 1)}
  .tile:nth-child(2){animation-delay:calc(var(--stagger-step) * 2)}
  .tile:nth-child(3){animation-delay:calc(var(--stagger-step) * 3)}
  .tile:nth-child(4){animation-delay:calc(var(--stagger-step) * 4)}
  .tile:nth-child(5){animation-delay:calc(var(--stagger-step) * 5)}
  .tile:nth-child(6){animation-delay:calc(var(--stagger-step) * 6)}
  .tile:nth-child(7){animation-delay:calc(var(--stagger-step) * 7)}
  .tile:nth-child(8){animation-delay:calc(var(--stagger-step) * 8)}
}
@media (prefers-reduced-motion: reduce){
  .intro-caret{animation:none}
  .signin{opacity:1; transform:none; transition:none}
  .tile[data-status="provisioning"] .tile-status::before{animation:none}
}

@media (max-width:960px){ .tools-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){
  .wrap{padding:18px}
  .tools-grid{grid-template-columns:1fr}
  .masthead{flex-direction:column}
  .masthead-meta{text-align:left}
}

.spaces-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}
.space-card{position:relative;display:flex;flex-direction:column;background:var(--surface);padding:22px 20px 18px;min-height:260px;text-decoration:none;color:inherit;transition:background var(--dur-pop) var(--ease-pop)}
.space-card:hover{background:var(--surface-hover)}
.space-card:hover .sc-blob{transform:scale(1.06)}
.space-card>.sc-tl,.space-card>.sc-tr,.space-card>.sc-bl,.space-card>.sc-br{position:absolute;width:12px;height:12px;pointer-events:none}
.space-card>.sc-tl{top:0;left:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.space-card>.sc-tr{top:0;right:0;border-top:1px solid var(--ink);border-right:1px solid var(--ink)}
.space-card>.sc-bl{bottom:0;left:0;border-bottom:1px solid var(--ink);border-left:1px solid var(--ink)}
.space-card>.sc-br{bottom:0;right:0;border-bottom:1px solid var(--ink);border-right:1px solid var(--ink)}
.sc-meta{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.sc-blob{display:flex;align-items:center;justify-content:center;height:84px;margin-bottom:14px;transition:transform var(--dur-pop) var(--ease-pop)}
.sc-blob-canvas{width:72px;height:72px;display:block}
.sc-name{font-size:22px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-align:center;margin:0 0 8px}
.sc-apps{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.55;margin:0 0 14px;flex:1 0 auto}
.sc-sources{border-top:1px solid var(--rule);padding-top:10px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.sc-source{display:inline-flex;align-items:center;gap:5px}
.sc-dot-ok,.sc-dot-pending{width:5px;height:5px;border-radius:50%}
.sc-dot-ok{background:var(--good)}
.sc-dot-pending{background:var(--soon)}
@media (max-width:960px){.spaces-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.spaces-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: no-preference){
.space-card{animation:tile-in var(--dur-pop) var(--ease-pop) backwards}
.spaces-grid .space-card:nth-child(1){animation-delay:calc(var(--stagger-step) * 1)}
.spaces-grid .space-card:nth-child(2){animation-delay:calc(var(--stagger-step) * 2)}
.spaces-grid .space-card:nth-child(3){animation-delay:calc(var(--stagger-step) * 3)}
.spaces-grid .space-card:nth-child(4){animation-delay:calc(var(--stagger-step) * 4)}
.spaces-grid .space-card:nth-child(n+5){animation-delay:calc(var(--stagger-step) * 5)}
}

.wordmark a{color:inherit;text-decoration:none}
.space-hero{display:flex;align-items:center;gap:16px;margin:28px 0 18px}
.sp-blob{width:44px;height:44px;display:block}
.sp-name{font-size:28px;font-weight:600;letter-spacing:-.01em;margin:0}
.sp-meta{font-size:13px;color:var(--muted);margin:2px 0 0}
.sp-meta a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.sp-meta a:hover{color:var(--ink)}
.sp-sources{margin-left:auto;border-top:none;padding-top:0}
.sp-back{display:inline-block;font-size:12px;color:var(--ink-soft);text-decoration:none;margin:18px 0 0}
.sp-back:hover{text-decoration:underline}
.tile-by{font-size:11px;color:var(--muted)}

@view-transition{navigation:auto}
@media (prefers-reduced-motion: reduce){
@view-transition{navigation:none}
}