:root{
  --ink:#132338; --ink-2:#3F5570; --ink-3:#77899E;
  --line:#D6E0EB; --line-2:#C2D1E0;
  --nv:#76B900; --nv-d:#639B00; --leaf:#17260C;
  --disp:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1220px; --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#fff;color:var(--ink);font-family:var(--disp);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative}
body>*{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
::selection{background:var(--nv);color:#fff}
:focus-visible{outline:2px solid var(--nv);outline-offset:3px}
.w{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}

/* nav: the pricing page's, which is the homepage's */
#nav{position:sticky;top:0;z-index:60;height:64px;transition:padding .5s cubic-bezier(.25,.46,.45,.94)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);height:64px;display:flex;align-items:center;gap:34px;
  transition:max-width .5s cubic-bezier(.25,.46,.45,.94),height .5s,border-radius .5s,background-color .3s,box-shadow .3s}
#nav.s{padding:8px 16px 0}
#nav.s .nav-in{max-width:1040px;height:52px;padding:0 8px 0 14px;border-radius:16px;background:rgba(255,255,255,.74);
  backdrop-filter:blur(16px) saturate(1.6);-webkit-backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:0 2px 20px rgba(19,35,56,.08),0 1px 2px rgba(19,35,56,.08),0 0 0 1px rgba(19,35,56,.08)}
.logo{display:flex;align-items:center;gap:6px;font-size:30px;line-height:1}
.logo img{width:1em;height:1em;image-rendering:pixelated}
.logo .wn{font-family:'Jersey 10',var(--disp);font-size:1.33em;letter-spacing:.01em}
.fslot{position:relative;display:inline-block;width:1em;height:1em;flex:0 0 auto}
#logofx{position:absolute;left:-.1em;top:50%;margin-top:-.7em;pointer-events:none;z-index:2;image-rendering:pixelated}
.nav-inc{display:flex;margin-left:-22px}
.nav-inc img{height:38px;opacity:.85}
.nav-l{display:flex;gap:14px;margin-left:auto;font-size:15px;color:var(--ink-2)}
.nav-l a{padding:8px 10px;border-radius:8px;transition:background-color .2s,color .2s}
.nav-l a:hover,.nav-l a[aria-current]{background:rgba(118,185,0,.1);color:var(--ink)}
#nav.s .nav-inc{opacity:0;pointer-events:none}

@property --g1{syntax:'<color>';inherits:false;initial-value:#8FCC1F}
@property --g2{syntax:'<color>';inherits:false;initial-value:#76B900}
.pill{--g1:#8FCC1F;--g2:#76B900;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;
  padding:9px 18px;font:600 14.5px/1.2 var(--disp);color:#fff;cursor:pointer;background:linear-gradient(180deg,var(--g1),var(--g2));
  box-shadow:0 0 0 5px rgba(118,185,0,.18),0 1px 2px rgba(19,35,56,.1),0 0 0 1px rgba(79,118,12,.45);
  transition:--g1 .2s,--g2 .2s,transform .16s cubic-bezier(.25,.46,.45,.94)}
.pill:hover{--g2:#639B00}
.pill:active{--g1:#76B900;--g2:#4F7A00;transform:translateY(1px) scale(.98)}
.pill.white{--g1:#FFFFFF;--g2:#EEF2E7;color:var(--ink);box-shadow:0 0 0 5px rgba(19,35,56,.05),0 1px 2px rgba(19,35,56,.1),0 0 0 1px rgba(19,35,56,.16)}
.pill.white:hover{--g2:#E0E8D2}

/* The changelog: the landing's pixel panel on top in the dashboard's sky blue, then each entry with its date beside it, its
   film set on the same pixel ground the landing sets the Claude Code session on. */
.hero{padding:clamp(8px,1.2vw,14px) clamp(8px,1.2vw,14px) 0}
.panel{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:min(340px,48svh);padding:clamp(48px,6vw,84px) var(--gut);
  border-radius:clamp(14px,1.8vw,22px);text-align:center;color:#06283C;background:url('/assets/changelog-ground.png') center/cover no-repeat,#0A97D5;image-rendering:pixelated}
.panel h1{font-family:'Jersey 10',var(--disp);font-size:clamp(64px,9vw,120px);line-height:.9;font-weight:400;letter-spacing:.01em;color:#fff;text-shadow:0 .05em 0 #08476A}
.panel .sub{margin-top:14px;font-size:clamp(17px,1.6vw,21px);font-weight:500;color:rgba(6,40,60,.85)}
.log{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,72px) var(--gut) 24px}
.entry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px) minmax(0,1fr);column-gap:32px;padding:0 0 64px}
.entry+.entry{padding-top:64px;border-top:1px solid var(--line)}
.entry .when{grid-row:1/span 30;position:sticky;top:96px;align-self:start;padding-top:6px}
.entry time{display:block;font-family:'Jersey 10',var(--disp);font-size:24px;line-height:1;color:var(--nv-d)}
/* The phase an update shipped in: alpha in grey, private beta in the chips' purple. */
.ph{display:inline-block;margin-top:8px;padding:2px 8px;border-radius:6px;font-size:12.5px;line-height:18px;font-weight:600}
.ph-alpha{background:#EEF2F6;color:#3F5570}.ph-private-beta{background:#EFEAFD;color:#4B2BB5}
/* The text keeps one reading column; the film takes the room beside it too. */
.body{display:contents}
.body>*{grid-column:2}
.body>.film{grid-column:2/4}
.body h2{font-family:'Jersey 10',var(--disp);font-size:48px;line-height:1;font-weight:400;letter-spacing:.01em}
.body h2 a{text-decoration:none}
/* The run page's chart line under each title, and the dashboard's chips on each change. */
.body h2::after{content:'';display:block;width:56px;height:4px;margin-top:14px;border-radius:2px;background:linear-gradient(90deg,#0A97D5,#33BDF7)}
.kind{display:inline-block;margin-right:10px;padding:2px 8px;border-radius:6px;font-size:12.5px;line-height:18px;font-weight:600;vertical-align:3px}
.kind-new{background:#E0F0FF;color:#00527C}
.kind-improved{background:#EFEAFD;color:#4B2BB5}
.kind-fixed{background:#E3F3EA;color:#067E46}
.body h3{margin-top:30px;font-size:20px;line-height:1.3;font-weight:650;letter-spacing:-.005em}
.body p{margin-top:8px;font-size:16.5px;line-height:26px;color:var(--ink-2)}
.body a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px;transition:text-decoration-color .2s}
.body a:hover{text-decoration-color:var(--ink)}
.film{position:relative;margin-top:24px;padding:clamp(12px,1.8vw,24px);border-radius:clamp(14px,1.8vw,22px);background:url('/assets/changelog-ground.png') center/cover no-repeat,#0A97D5;image-rendering:pixelated}
.film iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:12px;background:#F1F1EF;box-shadow:0 0 0 1px rgba(19,35,56,.12),0 24px 48px -20px rgba(17,32,6,.6);image-rendering:auto}
@media(max-width:1000px){.entry{grid-template-columns:minmax(0,1fr)}.entry .when{grid-row:auto;position:static;padding-top:0;margin-bottom:8px}.entry time{display:inline}.entry .ph{margin:0 0 0 10px;vertical-align:3px}.body>*,.body>.film{grid-column:1}}
@media(max-width:560px){.body h2{font-size:38px}}
.copies{max-width:660px;margin:0 auto;padding-top:8px;font-size:15px;color:var(--ink-3)}
/* Every other update, further down: the commits behind them since opening, drawn one column a week in
   the header's blues, three figures, then each update as a date and a name with what changed. */
.earlier{max-width:var(--wrap);margin:40px auto 0;padding:56px 0 24px;border-top:1px solid var(--line)}
.earlier-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px) minmax(0,1fr);column-gap:32px}
.earlier-h>div{grid-column:2}
.earlier h2{font-family:'Jersey 10',var(--disp);font-size:40px;line-height:1;font-weight:400;letter-spacing:.01em}
.earlier .lede{margin-top:10px;font-size:16.5px;line-height:26px;color:var(--ink-2)}
.pulse{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px 36px;align-items:start;margin:28px 0 8px;padding:22px 24px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(19,35,56,.06)}
.graph{--cell:20px;--gap:4px;display:grid;grid-template-columns:30px 1fr;column-gap:8px;row-gap:6px;font-size:12px;line-height:1;color:var(--ink-3)}
.months{grid-column:2;display:grid;grid-auto-flow:column;grid-auto-columns:var(--cell);column-gap:var(--gap);height:12px}
.days{display:grid;grid-template-rows:repeat(7,var(--cell));row-gap:var(--gap);align-items:center}
.days span:nth-child(even){visibility:hidden}
.cells{display:grid;grid-auto-flow:column;grid-auto-columns:var(--cell);grid-template-rows:repeat(7,var(--cell));gap:var(--gap)}
.c{position:relative;border-radius:4px;background:#EAF3FA}
.c.off{background:transparent}
.c.l1{background:#BFE3F8}.c.l2{background:#73C7F1}.c.l3{background:#22A6E3}.c.l4{background:#0A6FA6}
.c:not(.off):hover{outline:2px solid var(--ink);outline-offset:1px;z-index:2}
.c:not(.off):hover::after{content:attr(data-l);position:absolute;left:0;bottom:calc(100% + 8px);white-space:nowrap;
  padding:6px 9px;border-radius:7px;background:var(--ink);color:#fff;font-size:12.5px;line-height:1.2;font-weight:500;pointer-events:none}
.key{grid-column:2;display:flex;align-items:center;gap:var(--gap);margin-top:4px}
.key i{display:block;width:14px;height:14px;border-radius:3px}
.key span{margin:0 4px}
.figs{display:grid;gap:0;align-self:stretch}
.figs div{padding:10px 0}
.figs div+div{border-top:1px solid var(--line)}
.figs b{display:block;font-family:'Jersey 10',var(--disp);font-size:36px;line-height:1;font-weight:400;color:#0A6FA6}
.figs span{display:block;margin-top:4px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.list{margin-top:36px}
.small{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,660px) minmax(0,1fr);column-gap:32px;padding:18px 0;border-top:1px solid var(--line)}
.small .when{justify-self:end;text-align:right}
.small time{display:block;padding-top:3px;font-family:'Jersey 10',var(--disp);font-size:19px;line-height:1;color:var(--nv-d)}
.small .ph{margin-top:6px;font-size:11.5px;line-height:16px;padding:1px 6px}
.small>div{grid-column:2}
.small h3{font-size:17px;line-height:1.4;font-weight:650}
.small ul,.body p{font-variant-ligatures:none}
.small ul{margin-top:6px;list-style:none;font-size:15.5px;line-height:24px;color:var(--ink-2)}
.small li+li{margin-top:4px}
.small b{font-weight:600;color:var(--ink)}
@media(max-width:1000px){.small,.earlier-h{grid-template-columns:minmax(0,1fr)}.small .when{justify-self:start;text-align:left;margin-bottom:6px}.small time{display:inline}.small .ph{margin:0 0 0 8px;vertical-align:2px}.small>div,.earlier-h>div{grid-column:1}}
@media(max-width:560px){.pulse{grid-template-columns:minmax(0,1fr);padding:16px}.graph{--cell:16px;--gap:3px}}
.copies a{text-decoration:underline;text-underline-offset:3px}
footer{margin-top:40px;border-top:1px solid var(--line);padding:26px 0 40px;font-size:14px;color:var(--ink-3)}
.f-in{display:flex;align-items:center;gap:18px}
.f-in .logo{font-size:20px;color:var(--ink)}
.f-l{margin-left:auto;display:flex;gap:18px}
.f-l a:hover{color:var(--ink)}

@media(max-width:940px){.nav-l{display:none}.nav-in>.pill{margin-left:auto}}
@media(max-width:900px){.nav-inc{display:none}}
@media(max-width:560px){
  .nav-in{gap:12px}.logo{font-size:24px}
  .panel{text-align:left;align-items:stretch;padding-bottom:150px}
  .panel .sub{margin-left:0;font-size:17px}
  .ways{align-items:stretch;gap:18px}.go{padding:14px 18px;font-size:16px}.mail{align-self:flex-start;font-size:16px}
  .f-in{flex-wrap:wrap}.f-l{margin-left:0;flex-wrap:wrap;gap:10px 16px}
}