/* Cutscene Labs - cutscene.me
   Fonts: Geist and Geist Mono (SIL Open Font License), self-hosted in /fonts. */

@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/geist-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/geist-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/geist-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/geist-mono-latin-600-normal.woff2) format("woff2")}

:root{
  --font-sans:"Geist",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --background:#f6f7f8;
  --foreground:#121417;
  --card:#fff;
  --primary:#3b6fe0;
  --primary-hover:#2e5ccb;
  --primary-foreground:#fff;
  --accent:#eef0f2;
  --muted:#eef0f2;
  --muted-foreground:#5b616b;
  --border:#e1e4e8;
  --rail:#d3d7dd;
  --radius:.5rem;
  --lane-0:#d9480f;
  --lane-1:#2f9e44;
  --lane-2:#9c36b5;
  --lane-3:#0c8599;
  --lane-4:#c2255c;
  --lane-5:#b7791f;
  --sidebar-width:16rem;
  --rail-width:4rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#d3d7dd transparent}
body{
  margin:0;
  background:var(--background);
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:15px;
  line-height:1.5;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(59,111,224,.5);border-radius:6px}
img{display:block}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- frame ---- */
.shell{display:flex;justify-content:center;width:100%;max-width:1264px;min-height:100svh;margin:0 auto}
.side{display:none}
.col{flex:1;min-width:0;background:var(--card);padding-bottom:3rem}

@media (min-width:768px){
  .side{display:block;position:sticky;top:0;height:100svh;flex-shrink:0;width:var(--sidebar-width)}
  .col{max-width:620px;border-left:1px solid var(--border);border-right:1px solid var(--border);padding-bottom:0}
}

/* ---- sidebar (desktop) ---- */
.side-in{display:flex;flex-direction:column;align-items:stretch;height:100%;padding:1.5rem .875rem;white-space:nowrap;overflow:hidden}
.brand{display:grid;grid-template-columns:36px 1fr;grid-template-rows:36px auto;column-gap:.625rem;row-gap:.375rem;align-items:center;padding:0 .75rem;margin-bottom:2rem;border-radius:6px}
.brand .mark{grid-column:1;grid-row:1;width:36px;height:36px;object-fit:contain}
.brand .word{grid-column:2;grid-row:1;font-size:1.375rem;font-weight:700;letter-spacing:-.03em;line-height:36px}
.brand .tag{grid-column:1 / span 2;grid-row:2;font-size:.8125rem;line-height:1.35;color:var(--muted-foreground);white-space:normal}
.sidenav{display:flex;flex-direction:column;gap:.25rem;min-height:0;flex:1}
.sidenav a{display:flex;align-items:center;gap:.75rem;height:2.75rem;padding:.75rem .75rem .75rem 1rem;border-radius:var(--radius);font-size:15px;line-height:20px;font-weight:500;color:var(--muted-foreground);transition:color .15s,background-color .15s}
.sidenav a:hover{background:var(--accent);color:var(--foreground)}
.sidenav a.is-active{color:var(--foreground)}
.sidenav svg{width:20px;height:20px;flex-shrink:0}
.sidenav .btn{margin-top:.5rem;background:var(--primary);color:var(--primary-foreground)}
.sidenav .btn:hover{background:var(--primary-hover);color:var(--primary-foreground)}
.side-foot{margin-top:auto;padding:0 1rem;font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--muted-foreground);white-space:normal}
.side-foot a:hover{color:var(--foreground);text-decoration:underline}

/* ---- top bar (phone) ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.brand-sm{display:grid;grid-template-columns:32px 1fr;column-gap:.5rem;align-items:center;min-width:0}
.brand-sm img{grid-row:1 / span 2;width:32px;height:32px;object-fit:contain}
.brand-sm .word{font-size:1.125rem;font-weight:600;letter-spacing:-.025em;line-height:1.3}
.brand-sm .tag{font-size:.8125rem;line-height:1.3;color:var(--muted-foreground)}
.btn-sm{display:inline-flex;align-items:center;flex-shrink:0;height:2rem;padding:0 .75rem;border-radius:6px;background:var(--primary);color:var(--primary-foreground);font-size:.875rem;font-weight:500;white-space:nowrap}
.btn-sm:hover{background:var(--primary-hover)}
@media (min-width:768px){.topbar{display:none}}

/* ---- tabs ---- */
.tabs-wrap{position:sticky;top:0;z-index:10;background:var(--card)}
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tabs a{position:relative;display:flex;flex:1;justify-content:center;padding:.875rem 0;font-size:15px;line-height:1.5;font-weight:500;color:var(--muted-foreground);transition:color .15s,background-color .15s}
.tabs a:hover{background:var(--accent);color:var(--foreground)}
.tabs a[aria-current="page"]{color:var(--foreground)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--primary)}

/* ---- feed ---- */
section,article{scroll-margin-top:3.5rem}
.day{display:flex}
.day .spacer{position:relative;flex-shrink:0;width:var(--rail-width)}
.day h3{flex:1;display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem .5rem 0;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:12px;line-height:1.35;font-weight:400;color:var(--muted-foreground)}

.entry{display:grid;grid-template-columns:var(--rail-width) minmax(0,1fr);transition:background-color .3s ease-out}
.entry:hover{background:rgba(238,240,242,.5)}
.rail{position:relative;width:var(--rail-width);min-height:6rem}
.rail .tail{position:absolute;top:calc(2rem - 1px);bottom:1.25rem;left:50%;width:2px;transform:translateX(-50%);background:var(--lane)}
.rail .node{position:absolute;top:2rem;left:50%;display:flex;transform:translate(-50%,-50%);border-radius:9999px;background:var(--card)}
.rail .node-ring{display:flex;padding:.125rem;border:2px solid var(--lane);border-radius:9999px}
.rail .node-in{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:9999px;background:var(--muted);font-family:var(--font-mono);font-size:.8rem;color:var(--muted-foreground);overflow:hidden;flex-shrink:0}
.rail .node-in img{width:2.5rem;height:2.5rem;object-fit:contain;padding:4px}
.rail .end{position:absolute;bottom:1.25rem;left:50%;width:.875rem;height:.875rem;transform:translate(-50%,50%);border-radius:9999px;background:var(--lane);border:3px solid var(--card);box-shadow:0 0 0 2px var(--lane)}

.body{min-width:0;padding:.75rem 1rem .75rem 0;border-bottom:1px solid var(--border)}
.head{display:flex;align-items:baseline;gap:.375rem;font-size:15px}
.head .name{display:flex;min-width:0;align-items:baseline;gap:.375rem}
.head .title{min-width:0;font-size:15px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head .title a:hover{text-decoration:underline}
.head .handle{flex-shrink:4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-mono);font-size:13px;color:var(--muted-foreground)}
.head .sep{color:var(--muted-foreground)}
.head time,.head .when{flex-shrink:0;font-family:var(--font-mono);font-size:13px;color:var(--muted-foreground)}
.head .code{margin-left:auto;flex-shrink:0;align-self:center;font-family:var(--font-mono);font-size:13px;color:var(--muted-foreground);transition:color .15s}
.entry:hover .code{color:var(--foreground)}
.text{margin-top:.125rem;font-size:15px;overflow-wrap:anywhere}
.text + .text{margin-top:.75rem}
.text a{color:var(--primary)}
.text a:hover{text-decoration:underline}
.links{display:flex;flex-wrap:wrap;gap:.25rem .5rem;margin:.375rem 0 0 -.5rem;font-family:var(--font-mono);font-size:13px}
.links a{display:inline-flex;align-items:center;gap:.375rem;padding:.125rem .5rem;border-radius:6px;color:var(--primary);transition:background-color .15s}
.links a:hover{background:var(--accent);text-decoration:underline}
.links .quiet{display:inline-flex;align-items:center;padding:.125rem .5rem;color:var(--muted-foreground)}

@media (max-width:639px){
  .head .handle{display:none}
  .head .title{white-space:normal}
  .head .code{align-self:baseline}
}
@media (min-width:640px){
  :root{--rail-width:4.5rem}
}

/* ---- footer ---- */
.foot{display:flex;flex-wrap:wrap;gap:.25rem 1rem;padding:1rem;font-family:var(--font-mono);font-size:12px;color:var(--muted-foreground)}
.foot a:hover{color:var(--foreground);text-decoration:underline}
@media (min-width:768px){.foot{padding:1rem 1rem 1.5rem}}

/* ---- daily log entries ---- */
.pushed{margin:.25rem 0 0;padding:0;list-style:none;font-size:15px}
.pushed li{position:relative;padding-left:1.125rem;overflow-wrap:anywhere}
.pushed li::before{content:"+";position:absolute;left:0;top:0;font-family:var(--font-mono);font-weight:600;color:var(--lane)}
.pushed li + li{margin-top:.25rem}
.pushed a{color:var(--primary)}
.pushed a:hover{text-decoration:underline}
.rail .node-in.day{font-size:.95rem;font-weight:500;color:var(--foreground)}

/* ---- labs (circles) and their products (nodes) ---- */
.dept-head .title{font-size:1.0625rem}
.dept-head .rail .tail{top:2rem;bottom:0}
.dept-head .rail .end{display:none}
.dept-head .text{margin-top:.25rem}
.product .rail{min-height:0}
.product .rail .tail{top:0;bottom:0}
.product .rail .dot{position:absolute;top:1.45rem;left:50%;width:.875rem;height:.875rem;transform:translate(-50%,-50%);border-radius:9999px;background:var(--lane);border:3px solid var(--card);box-shadow:0 0 0 2px var(--lane)}
.product.last .rail .tail{bottom:auto;height:1.45rem}
.status{margin-left:auto;flex-shrink:0;align-self:center;display:inline-flex;align-items:center;gap:.375rem;font-family:var(--font-mono);font-size:12px;color:var(--muted-foreground);white-space:nowrap}
.status::before{content:"";width:.5rem;height:.5rem;border-radius:9999px;background:var(--s,var(--rail))}
.status.live{--s:#2f9e44}
.status.soon{--s:#b7791f}
.status.dev{--s:#9aa0a6}
.legend{display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-left:auto}
.legend .status{margin-left:0}
@media (max-width:639px){.legend{display:none}}

/* ---- v3: welcome, unfolding labs, no handles or codes ---- */
.head .handle,.head .code{display:none}
.legend{display:none}
.welcome{padding:2rem 1rem 1.5rem 1rem;border-bottom:1px solid var(--border)}
.welcome h1{margin:0;font-size:1.75rem;line-height:1.2;font-weight:700;letter-spacing:-.03em}
.welcome p{margin-top:.375rem;font-size:1.125rem;color:var(--muted-foreground)}
.lab{border-bottom:1px solid var(--border)}
.lab > summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lab > summary::-webkit-details-marker{display:none}
.lab > summary.entry{display:grid}
.lab > summary .body{border-bottom:0;position:relative;padding-right:2.5rem}
.lab > summary .body::after{content:"";position:absolute;right:1.125rem;top:1.05rem;width:.5rem;height:.5rem;border-right:2px solid var(--muted-foreground);border-bottom:2px solid var(--muted-foreground);transform:rotate(45deg);transition:transform .2s}
.lab[open] > summary .body::after{transform:rotate(-135deg);top:1.3rem}
.lab > summary:hover{background:rgba(238,240,242,.5)}
.lab .count{margin-top:.25rem;font-family:var(--font-mono);font-size:12px;color:var(--muted-foreground)}
.dept-head .rail .tail{display:none}
.lab[open] .dept-head .rail .tail{display:block;top:2rem;bottom:0}
.lab .product .body{border-bottom:1px solid var(--border)}
.lab .product.last .body{border-bottom:0}
.lab[open]{padding-bottom:.5rem}
.welcome h1{font-size:1.75rem;line-height:1.2;font-weight:700;letter-spacing:-.03em}
.node-in svg{width:1.375rem;height:1.375rem;color:var(--lane)}