@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/instrument-serif.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Instrument Serif';font-style:italic;src:url('/assets/fonts/instrument-serif-italic.woff2') format('woff2');font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono.woff2') format('woff2');font-display:swap}
:root{--ink:#F5F5ED;--bg:#000;--go:#84F800;--dim:#F5F5EDa6;--line:#F5F5ED2e;--pad:clamp(18px,4vw,56px)}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font:400 16px/1.5 'JetBrains Mono',ui-monospace,monospace;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--go);outline-offset:3px}
.top{display:flex;align-items:center;gap:22px;padding:14px var(--pad);min-height:68px}
.top nav{display:flex;gap:18px}
.top nav a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;font-size:14px;color:var(--dim)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top nav a[aria-current]{box-shadow:inset 0 -1px 0 var(--go)}
.mark{display:block;line-height:0}
main{padding:0 var(--pad)}
h1,h2{font-family:'Instrument Serif',serif;font-weight:400;margin:0}
h1{font-size:clamp(46px,7vw,104px);line-height:.98;letter-spacing:-.01em}
h1 em{color:var(--go)}
h2{font-size:clamp(30px,3.6vw,48px);line-height:1.05;margin-bottom:22px}

/* Hero: the count sits above a garden that runs the full width of the page. */
.hero{padding:clamp(16px,4vh,44px) 0 clamp(20px,4vh,40px)}
.count{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px 48px}
.install{max-width:44ch}
.install p{margin:0 0 16px;color:var(--dim)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.cmd{appearance:none;display:inline-flex;align-items:center;min-height:48px;padding:0 20px;background:var(--go);color:#000;border:0;border-radius:3px;font:500 15px/1 'JetBrains Mono',ui-monospace,monospace;text-decoration:none;cursor:pointer}
.cmd:hover{background:var(--ink)}
.rss{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--dim);text-underline-offset:4px}
.rss:hover{color:var(--go)}
.defs{position:absolute}
.garden{list-style:none;margin:clamp(10px,3vh,30px) 0 0;padding:0;display:grid;grid-template-columns:repeat(15,minmax(0,1fr))}
.cell{position:relative;min-width:0}
.cell svg{display:block;width:100%;height:auto;overflow:visible}
.day{position:absolute;left:0;right:0;top:72%;text-align:center;font-size:11px;color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.seed{opacity:.5}
.next .seed{opacity:1;animation:pulse 1.8s ease-in-out infinite}
.next .day{color:var(--go)}
@keyframes pulse{50%{opacity:.35}}
.hint{margin:6px 0 0;font-size:13px;color:var(--dim)}

/* Growth on load. Plants start grown, so nothing depends on the script running. */
.plant{display:block;cursor:pointer}
.plant .head,.plant .leaf{transform-box:fill-box;transform-origin:50% 100%;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.plant .head *{transition:stroke .2s}
.plant:hover .head,.plant:focus-visible .head{transform:scale(1.22)}
.plant:hover .leaf,.plant:focus-visible .leaf{transform:rotate(-8deg)}
.plant:hover .stem,.plant:focus-visible .stem{stroke:var(--go)}
.grown .stem,.grown .root{stroke-dasharray:1;animation:draw .9s cubic-bezier(.3,.7,.2,1) both;animation-delay:var(--delay,0s)}
.grown .plant .head,.grown .plant .leaf{animation:pop .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--delay,0s) + .6s)}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}

/* Shipped: big names, because the clip travels with the pointer. */
.fresh,.log,.group{border-top:1px solid var(--line);padding:clamp(28px,5vh,52px) 0}
.ships{list-style:none;margin:0;padding:0}
.ship{border-top:1px solid var(--line)}
.ship:last-child{border-bottom:1px solid var(--line)}
.ship a{display:grid;grid-template-columns:84px minmax(0,1fr) minmax(0,34ch);gap:8px 24px;align-items:baseline;padding:clamp(14px,2.2vh,24px) 0;text-decoration:none;transition:padding .3s cubic-bezier(.2,.8,.2,1)}
.group .ship a{grid-template-columns:minmax(0,1fr) minmax(0,34ch)}
.ship .d{font-size:13px;color:var(--dim)}
.ship .h{font:400 clamp(38px,6.4vw,92px)/1 'Instrument Serif',serif;letter-spacing:-.01em;transition:color .2s}
.ship .p{font-size:14px;color:var(--dim)}
.ship a:hover,.ship a:focus-visible{padding-left:14px}
.ship a:hover .h,.ship a:focus-visible .h{color:var(--go)}
video.inline{display:none}
.empty{color:var(--dim);margin:0}

/* The carried preview. */
.float{position:fixed;left:0;top:0;z-index:50;width:420px;margin:0;pointer-events:none;background:#000;border:1px solid var(--ink);opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s}
.float.on{opacity:1;visibility:visible}
.float video{display:none;width:100%;aspect-ratio:16/9;object-fit:contain;background:#000}
.float.has-clip video{display:block}
.float p{margin:0;padding:9px 12px;font-size:13px;color:var(--ink)}

/* Log, which is also what the RSS feed carries. */
.log ol{list-style:none;margin:0;padding:0}
.log li{display:grid;grid-template-columns:84px minmax(0,3fr) minmax(0,5fr);gap:4px 24px;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.log time{color:var(--dim)}
.log a{text-underline-offset:4px}
.log a:hover{color:var(--go)}
.log span{color:var(--dim)}

.hero.work{max-width:1000px}
.hero.work p{max-width:52ch;margin:24px 0;color:var(--dim)}
.packs{list-style:none;margin:0;padding:0}
.pack{display:grid;grid-template-columns:minmax(0,1fr) 150px 300px;gap:6px 24px;align-items:baseline;padding:16px 0;border-top:1px solid var(--line)}
.pack:last-child{border-bottom:1px solid var(--line)}
.pack-t{font:400 clamp(24px,3vw,38px)/1.1 'Instrument Serif',serif;color:var(--ink);text-decoration:none}
.pack-t:hover{color:var(--go)}
.pack-l{font-size:13px;color:var(--dim)}
.pack-d{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}
.pack-d a{display:inline-flex;align-items:center;min-height:40px;color:var(--go);text-underline-offset:4px}
@media (max-width:680px){.pack{grid-template-columns:minmax(0,1fr)}}
.end{display:flex;flex-wrap:wrap;gap:18px;padding:26px var(--pad) 40px;border-top:1px solid var(--line);font-size:13px}
.end a{display:inline-flex;align-items:center;min-height:40px;color:var(--dim);text-decoration:none}
.end a:hover{color:var(--ink)}

@media (max-width:820px){
  .garden{grid-template-columns:repeat(10,minmax(0,1fr))}
  .garden svg *{stroke-width:5}
  .garden svg .head *,.garden svg [id^=h-] *{stroke-width:4}
  .day{font-size:10px}
  .hint{display:none}
  .ship a,.group .ship a{grid-template-columns:minmax(0,1fr);gap:6px}
  .log li{grid-template-columns:minmax(0,1fr)}
  .top{padding-right:190px}
}
@media (hover:none),(pointer:coarse){
  .float{display:none}
  video.inline{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;margin-top:10px;background:#000}
  .ship a{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){.top{padding-right:var(--pad);padding-top:64px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}