/* ───────────────────────────────────────────────
   Showcase shell - the constant top bar + stage.
   Each site lives in sites/<name>/ and is loaded
   into the iframe so styles never collide.
   ─────────────────────────────────────────────── */
:root{
  --bar-h: 56px;
  --bg: #0e0e10;
  --bg-2: #16161a;
  --fg: #f4f4f2;
  --muted: #8d8d93;
  --line: #26262b;
  --accent: #ffffff;
}
*{ box-sizing:border-box }
html,body{ height:100%; margin:0 }
body{
  background:var(--bg); color:var(--fg);
  font: 13px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden;
  -webkit-font-smoothing: antialiased;
}

/* Bar */
.bar{
  flex:none; height:var(--bar-h);
  display:grid; grid-template-columns: auto auto 1fr auto; align-items:center; gap:20px;
  padding: 0 18px; border-bottom:1px solid var(--line); background:var(--bg);
  position:relative; z-index:2;
}
.bar__brand{ display:flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--fg) }
.bar__mark{ width:10px; height:10px; border-radius:2px; background:var(--dot, #fff); align-self:center; transition: background .4s }
.bar__name{ font-weight:600; letter-spacing:.02em }
.bar__sub{ color:var(--muted); font-size:12px }

.bar__tabs{ display:flex; gap:4px; justify-content:center; overflow-x:auto; scrollbar-width:none; padding:0 4px }
.bar__tabs::-webkit-scrollbar{ display:none }
.tab{
  appearance:none; border:0; background:transparent; color:var(--muted); cursor:pointer;
  font:inherit; padding: 8px 14px; border-radius:8px; white-space:nowrap;
  display:flex; align-items:center; gap:9px; position:relative; transition: color .2s, background .2s;
}
.tab:hover{ color:var(--fg); background:var(--bg-2) }
.tab__num{ font-size:10px; letter-spacing:.08em; opacity:.6; font-variant-numeric: tabular-nums }
.tab__dot{ width:7px; height:7px; border-radius:50%; background:var(--dot); box-shadow:0 0 0 0 var(--dot); transition: box-shadow .3s }
.tab[aria-selected="true"]{ color:var(--fg); background:var(--bg-2) }
.tab[aria-selected="true"] .tab__dot{ box-shadow:0 0 0 3px color-mix(in srgb, var(--dot) 30%, transparent) }
.tab[aria-selected="true"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:2px; background:var(--dot); border-radius:2px;
}

.bar__meta{ display:flex; align-items:center; gap:16px; justify-content:flex-end }
.bar__open{
  color:var(--fg); text-decoration:none; font-size:12px; padding:7px 12px; border:1px solid var(--line); border-radius:999px;
  transition: border-color .2s, background .2s;
}
.bar__open:hover{ border-color:var(--muted); background:var(--bg-2) }

/* View toggle (desktop / mobile mockup) */
.view-toggle{ display:flex; border:1px solid var(--line); border-radius:999px; padding:2px; gap:2px }
.view-toggle button{
  appearance:none; border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px;
  padding:5px 11px; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:6px; transition: background .2s, color .2s;
}
.view-toggle button:hover{ color:var(--fg) }
.view-toggle button[aria-pressed="true"]{ background:var(--bg-2); color:var(--fg) }

/* The one button on the left that opens the main (about & process) page */
.bar__left{ display:flex }
.tab--home{ border:1px solid var(--line); gap:8px }
.tab--home:hover, .tab--home[aria-selected="true"]{ border-color:var(--dot); }
.tab--home[aria-selected="true"]::after{ display:none }

/* Stage */
.stage{ flex:1; position:relative; background:#000; min-height:0; transition: background .4s }
.device{ position:absolute; inset:0; transition: border-radius .35s }
.stage iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff;
  opacity:1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease;
}

/* Mobile mockup: the iframe becomes a 390×844 phone, scaled to fit the stage.
   The top 44px is a status bar that belongs to the device (time, camera, battery),
   so the page never renders underneath it. */
.stage.is-mobile{
  background: #141417 radial-gradient(80% 60% at 50% 40%, rgba(255,255,255,.06), transparent);
}
.stage.is-mobile .device{
  inset:auto; left:50%; top:50%; width:390px; height:844px;
  transform: translate(-50%, -50%) scale(var(--phone-scale, 1));
  border-radius:48px; overflow:hidden; background:#0b0b0c;
  box-shadow: 0 0 0 11px #1a1a1d, 0 0 0 13px #35353b, 0 40px 100px rgba(0,0,0,.7);
}
.stage.is-mobile iframe{ top:44px; height:calc(100% - 44px) }
.stage.is-mobile .device::before{
  content:"9:41"; position:absolute; top:0; left:0; right:0; height:44px; z-index:3; pointer-events:none;
  background-color:#0b0b0c; color:#fff; font: 600 14px/44px ui-sans-serif, system-ui, sans-serif; padding-left:30px; letter-spacing:.01em;
  background-image:
    radial-gradient(circle at center, #26262b 0 5px, #141417 5.5px 7px, transparent 7.5px), /* camera */
    linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), linear-gradient(#fff,#fff), /* signal bars */
    linear-gradient(#fff,#fff), linear-gradient(#fff,#fff);                                                          /* battery body + nub */
  background-repeat:no-repeat;
  background-size: 16px 16px, 3px 4px, 3px 7px, 3px 10px, 3px 13px, 24px 12px, 2px 5px;
  background-position: center 14px, 292px 25px, 297px 22px, 302px 19px, 307px 16px, 326px 16px, 351px 19.5px;
}
.stage.is-mobile .device::after{
  content:""; position:absolute; bottom:8px; left:50%; width:134px; height:5px; border-radius:5px;
  background:rgba(128,128,128,.55); transform:translateX(-50%); z-index:3; pointer-events:none;
}

/* Keyboard hint */
.hint{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(10px);
  background:rgba(14,14,16,.9); border:1px solid var(--line); color:var(--muted);
  padding:8px 14px; border-radius:999px; font-size:12px; opacity:0; transition: opacity .4s, transform .4s; pointer-events:none;
  backdrop-filter: blur(8px);
}
.hint.is-visible{ opacity:1; transform:translateX(-50%) translateY(0) }
kbd{ font:inherit; background:var(--bg-2); border:1px solid var(--line); border-radius:4px; padding:1px 5px; color:var(--fg) }

@media (max-width: 1600px){ .tab__num{ display:none } .tab{ padding:8px 11px } .bar{ gap:14px } }
@media (max-width: 1300px){
  .tab{ padding:8px 9px; font-size:12px; gap:7px }
  .bar__tabs{ gap:2px }
  .view-toggle__label, .bar__open-label{ display:none }
  .view-toggle button{ padding:6px 9px }
  .bar__sub{ display:none }
  .bar{ gap:10px }
}
@media (max-width: 860px){
  .bar{ grid-template-columns: auto auto 1fr; gap:10px; padding:0 12px }
  .bar__meta{ display:none }
  .stage.is-mobile .device{ inset:0; left:0; top:0; width:auto; height:auto; transform:none; border-radius:0; box-shadow:none }
  .stage.is-mobile .device::before, .stage.is-mobile .device::after{ display:none }
  .stage.is-mobile iframe{ top:0; height:100% }
  .bar__sub{ display:none }
  .bar__tabs{ justify-content:flex-start }
  .tab{ padding:8px 10px }
  .tab__num{ display:none }
  .hint{ display:none }
}