/* Wakeshift · Morning Paper. System fonts only; no external requests. */
:root{
  --paper:#F5F1E8; --paper-2:#EDE7DA; --card:#FFFDF8; --ink:#1D1B17; --ink-2:#4A463E; --ink-3:#8A8477;
  --rule:#DDD5C4; --accent:#C25418; --accent-soft:#F6E2D3; --sage:#3E6B55; --sage-soft:#DFEBE2;
  --caution:#9A5B00; --caution-bg:#FBF0D9; --caution-rule:#E9C98A;
  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --round:ui-rounded,"SF Pro Rounded","Nunito","Varela Round",-apple-system,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --gutter:clamp(20px,6.67vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter);width:100%}
.kicker{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.logo{display:flex;align-items:center;gap:10px;font:600 19px var(--serif);letter-spacing:-.01em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px var(--sans);padding:12px 20px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn.ghost:hover{border-color:var(--ink-3)}
.btn.sm{padding:8px 14px;font-size:13px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.av{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font:600 13px var(--sans);color:#fff;flex:none}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}
.dot.accent{color:var(--accent)} .dot.sage{color:var(--sage)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-block:28px;border-bottom:1px solid var(--rule)}
.nav-links{display:flex;gap:var(--s6);list-style:none;font-size:14px;color:var(--ink-2);align-items:center}
.nav-links a:hover{color:var(--ink)}
.beta{font:600 10px var(--mono);letter-spacing:.06em;color:var(--sage);background:var(--sage-soft);padding:3px 7px;border-radius:999px;margin-left:6px;text-transform:uppercase}
.nav-actions{display:flex;gap:12px}

/* hero */
.hero{padding-block:var(--s9) var(--s8);display:grid;grid-template-columns:1fr 380px;gap:var(--s8);align-items:end}
.hero h1{font:400 84px/1 var(--serif);letter-spacing:-.025em;margin:var(--s4) 0 var(--s5)}
.hero h1 em,.sect-hd h2 em{font-style:italic;color:var(--accent)}
.lede{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:640px}
.cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.install{border:1px solid var(--rule);border-radius:12px;background:var(--card);padding:var(--s4) var(--s5)}
.install small{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.install code{display:block;font:14px var(--mono);margin-top:8px;color:var(--ink)}
.install code b{color:var(--accent);font-weight:400}
.install p{font-size:13px;color:var(--ink-3);margin-top:var(--s3);line-height:1.5}

/* code */
.codewrap{padding-bottom:var(--s8);display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s7);align-items:start}
.code{background:var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(40,25,5,.7);min-width:0}
.code .tabs{display:flex;align-items:center;gap:2px;padding:10px 14px;border-bottom:1px solid #34312B;font:12px var(--mono);color:#8E887B}
.code .tabs span{padding:6px 12px;border-radius:7px}
.code .tabs .on{background:#2B2924;color:var(--paper)}
.code .tabs .file{margin-left:auto}
.code pre{font:13.5px/1.75 var(--mono);color:#E9E3D6;padding:var(--s5) var(--s6) var(--s6);counter-reset:l;overflow-x:auto;white-space:pre}
.code pre .ln{display:block;min-height:1.75em}
.code pre .ln::before{counter-increment:l;content:counter(l);display:inline-block;width:28px;margin-right:16px;text-align:right;color:#55514A}
.kw{color:#E89A6A}.st{color:#B9D3A8}.cm{color:#8E887B;font-style:italic}.fn{color:#F2C879}.ty{color:#A9C2DE}.pk{color:#C9B6E4}
.steps-kicker{margin-bottom:var(--s4)}
.steps{list-style:none;border-top:1px solid var(--ink)}
.steps li{display:grid;grid-template-columns:40px 1fr;padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.steps .n{font:italic 400 22px var(--serif);color:var(--accent)}
.steps b{font-size:16px;display:block;margin-bottom:4px}
.steps p{font-size:14.5px;line-height:1.55;color:var(--ink-2)}

/* sections */
.sect{padding-block:var(--s8);border-top:1px solid var(--rule)}
.sect-hd{display:flex;justify-content:space-between;align-items:end;gap:var(--s5);margin-bottom:var(--s6)}
.sect-hd h2{font:400 44px/1.1 var(--serif);letter-spacing:-.01em;margin-top:12px}
.sect-hd p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:420px}

/* features */
.prims{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.prim{padding:var(--s6) var(--s6) var(--s6) 0;border-bottom:1px solid var(--rule)}
.prim:not(:nth-child(3n+1)){padding-left:var(--s6);border-left:1px solid var(--rule)}
.prim .pi{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:var(--s4)}
.prim h3{font:400 24px/1.2 var(--serif)}
.prim p{font-size:15px;line-height:1.55;color:var(--ink-2);margin-top:8px}
.prim code{font:12px var(--mono);color:var(--ink-3)}

/* works with */
.works{border-top:1px solid var(--rule);background:var(--paper-2)}
.works-in{display:grid;grid-template-columns:200px repeat(4,1fr);gap:var(--s5);padding-block:var(--s6);align-items:center}
.works h2{font:400 22px/1.2 var(--serif)}
.wk{display:flex;gap:var(--s3);align-items:center}
.wk b{font:600 15px var(--mono);display:block}
.wk span{font-size:13px;color:var(--ink-3)}
.wk .av{width:36px;height:36px}
.av-cc{background:#1D1B17}
.av-cx{background:#3B3833;border-radius:50%}
.av-gpt{background:#5A4FA0}
.av-more{background:transparent;border:1.5px dashed var(--ink-3);color:var(--ink-3)}

/* featured apps */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.fcard{display:block;border:1px solid var(--rule);border-radius:18px;background:var(--card);overflow:hidden}
a.fcard{transition:transform .2s,box-shadow .2s}
a.fcard:hover{transform:translateY(-2px);box-shadow:0 24px 40px -28px rgba(60,40,10,.45)}
.fcard .pv{height:340px;position:relative;overflow:hidden}
.fcard .cap{padding:var(--s4) var(--s5);display:flex;justify-content:space-between;align-items:center;gap:var(--s3);border-top:1px solid var(--rule)}
.fcard .cap b{font:400 21px var(--serif);display:block}
.fcard .cap span{font-size:14px;color:var(--ink-2)}
.built{font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule);border-radius:999px;padding:5px 9px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.fcard .cap .built{font-size:10px;color:var(--ink-3)}

/* Agent Chat · Confetti */
.cf{background:#FFF8F1;font-family:var(--round);color:#1F1B2E;padding:20px}
.cf .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cf .ch{font:800 17px var(--round)}
.cf .ch i{color:#7B5CFF;font-style:normal}
.cf .awake{background:#FFD84D;font:700 11px var(--round);padding:5px 10px;border-radius:999px}
.cf .m{display:flex;gap:10px;margin-bottom:12px;align-items:flex-start}
.cf .m svg{flex:none}
.cf .m .bub{background:#fff;border:2px solid #1F1B2E;border-radius:4px 16px 16px 16px;padding:8px 12px;font:500 13.5px/1.4 var(--round);box-shadow:3px 3px 0 #1F1B2E;max-width:270px}
.cf .m .who{font:800 11px var(--round);margin-bottom:3px;display:block}
.cf .at{color:#7B5CFF;font-weight:800}
.cf .typing{display:flex;gap:4px;padding:10px 14px;background:#EFE8FF;border-radius:999px;width:max-content;margin-left:42px}
.cf .typing i{width:6px;height:6px;border-radius:50%;background:#7B5CFF}
.cf .conf{position:absolute;border-radius:3px}
.cf .c1{width:10px;height:10px;background:#FFD84D;right:30px;top:62px;transform:rotate(20deg)}
.cf .c2{width:8px;height:8px;background:#7B5CFF;right:70px;top:300px;border-radius:50%}
.cf .c3{width:12px;height:5px;background:#FF6633;left:14px;top:300px;transform:rotate(-30deg)}

/* Secret Agent · the agents */
.sa{background:#14161C;color:#E9E6DF;padding:22px 22px 0;display:flex;flex-direction:column;background-image:radial-gradient(120% 70% at 50% 0%,rgba(242,138,84,.16),transparent 60%)}
.sa-top{display:flex;justify-content:space-between;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#F28A54}
.sa-top span:last-child{color:#8F919B}
.sa-art{margin-top:20px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(242,138,84,.35),0 18px 36px -18px rgba(0,0,0,.8)}
.sa-art img{width:100%;height:auto;aspect-ratio:3/1;object-fit:cover}
.sa-names{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;margin-top:10px;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#B9BBC4}
.sa-brief{margin-top:auto;margin-bottom:22px;padding-top:14px;border-top:1px solid #2A2D36;font:400 15px/1.5 var(--serif);color:#D9D6CF}

/* Nightfall · Lantern & Moonglow */
.nf{background:linear-gradient(170deg,#12153A 0%,#24204F 55%,#3F2A66 100%);font-family:var(--round);color:#F6EDD3}
.nf .moon{position:absolute;right:38px;top:30px;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#FFF8E6,#F6EDD3 60%,#E9DAB0);box-shadow:0 0 30px 8px rgba(246,237,211,.28),0 0 90px 30px rgba(246,237,211,.12)}
.nf .star{position:absolute;width:3px;height:3px;border-radius:50%;background:#F6EDD3;opacity:.7}
.nf .s1{left:180px;top:40px}.nf .s2{left:240px;top:90px}.nf .s3{left:150px;top:150px;width:2px;height:2px}.nf .s4{left:330px;top:150px}.nf .s5{left:60px;top:190px;width:2px;height:2px}
.nf .night{position:absolute;left:26px;top:30px;font:700 11px var(--round);letter-spacing:.14em;text-transform:uppercase;color:#F6B867}
.nf .night b{display:block;font:800 26px var(--round);letter-spacing:0;text-transform:none;color:#F6EDD3;margin-top:6px}
.nf .role{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:200px;background:#F6EDD3;color:#12153A;border-radius:24px;padding:12px 16px 14px;text-align:center;box-shadow:0 0 0 6px rgba(246,184,103,.18),0 20px 40px -12px rgba(0,0,0,.55)}
.nf .role svg{display:block;margin:0 auto;width:36px;height:36px}
.nf .role small{font:700 10px var(--round);letter-spacing:.14em;text-transform:uppercase;color:#3F2A66}
.nf .role b{display:block;font:800 22px var(--round);margin:2px 0 6px}
.nf .role p{font:600 12px/1.4 var(--round);color:#3F2A66}
.nf .role .go{display:inline-block;margin-top:8px;background:#F6B867;color:#12153A;font:800 12px var(--round);padding:7px 14px;border-radius:999px}
.nf .players{position:absolute;left:26px;top:104px;display:flex;gap:6px}
.nf .players i{width:22px;height:22px;border-radius:50%;border:2px solid #F6B867;background:#2C2660}
.nf .players i.me{border-color:#F6EDD3}

/* row 2 */
.feat2{display:grid;grid-template-columns:2fr 1fr;gap:var(--s5);margin-top:var(--s5)}
.src{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--s6);padding:var(--s5) var(--s6);align-items:center}
.src-name{margin-top:14px}
.src b{font:400 24px var(--serif)}
.src p{font-size:14px;color:var(--ink-2);line-height:1.5;margin:6px 0 12px}
.ev{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);margin-bottom:8px}
.ev:last-child{margin-bottom:0}
.ev .av{width:28px;height:28px;font-size:12px}
.av-slack{background:#ECE9F7;color:#5A4FA0}
.av-mail{background:var(--accent-soft);color:var(--accent)}
.av-ok{background:var(--sage-soft);color:var(--sage)}
.ev code{font:12.5px var(--mono);color:var(--ink);overflow-wrap:anywhere}
.ev span{font-size:12.5px;color:var(--ink-3)}
.ev time{font:11px var(--mono);color:var(--ink-3)}
.yours{border:1.5px dashed var(--ink-3);border-radius:18px;padding:var(--s6);display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5)}
.yours b{font:400 30px/1.15 var(--serif)}
.yours p{font-size:14px;color:var(--ink-2);line-height:1.5;margin-top:8px}
.yours a{font:600 15px var(--sans);color:var(--accent)}
.yours a:hover{text-decoration:underline}

/* closing */
.close{background:var(--ink);color:var(--paper)}
.close-in{padding-block:var(--s8);display:flex;justify-content:space-between;align-items:center;gap:var(--s6)}
.close h2{font:400 48px/1.08 var(--serif);letter-spacing:-.01em}
.close h2 em{font-style:italic;color:#E89A6A}
.close .meta{font:600 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#BDB6A6;margin-bottom:var(--s4)}
.close-cta{display:flex;flex-wrap:wrap;gap:12px}
.close .btn{background:var(--paper);color:var(--ink);border-color:var(--paper);padding:14px 24px;font-size:15px}
.close .btn.ghost{background:transparent;color:var(--paper);border-color:#4A463E}
.close .btn.ghost:hover{border-color:#8A8477}

/* footer */
.ft{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding-block:var(--s5);font-size:13px;color:var(--ink-3)}
.ft .logo{font-size:15px;color:var(--ink)}
.ft ul{display:flex;gap:var(--s5);list-style:none}
.ft ul a:hover{color:var(--ink)}
.page-legal .ft,.page-notfound .ft{border-top:1px solid var(--rule)}

/* legal */
.legal{padding-block:var(--s7) var(--s8);max-width:calc(760px + 2 * var(--gutter))}
.draft{background:var(--caution-bg);border:1px solid var(--caution-rule);color:#6E4200;border-radius:12px;padding:var(--s4) var(--s5);font-size:15px;line-height:1.5;margin-bottom:var(--s7)}
.draft strong{color:var(--caution)}
.prose{font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose h1{font:400 52px/1.05 var(--serif);letter-spacing:-.02em;color:var(--ink);margin-bottom:var(--s3)}
.prose h1+p{font:13px var(--mono);color:var(--ink-3);margin-bottom:var(--s6)}
.prose h1+p em{font-style:normal}
.prose h2{font:400 28px/1.2 var(--serif);color:var(--ink);margin:var(--s7) 0 var(--s3);padding-top:var(--s5);border-top:1px solid var(--rule)}
.prose h3{font:600 17px/1.4 var(--sans);color:var(--ink);margin:var(--s5) 0 var(--s2)}
.prose p,.prose ul,.prose ol{margin-bottom:var(--s4)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose code{font:.85em var(--mono);background:var(--paper-2);padding:1px 5px;border-radius:4px;color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:var(--s6) 0}
.prose blockquote{border-left:3px solid var(--accent);padding-left:var(--s4);color:var(--ink-3)}

/* 404 */
.notfound{padding-block:var(--s9)}
.notfound h1{font:400 64px/1.05 var(--serif);letter-spacing:-.02em;margin:var(--s4) 0 var(--s4)}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1180px){
  .hero{grid-template-columns:1fr;gap:var(--s6)}
  .hero h1{font-size:68px}
  .install{max-width:480px}
  .codewrap{grid-template-columns:1fr}
  .works-in{grid-template-columns:repeat(2,1fr)}
  .works-in h2{grid-column:1/-1}
  .feat{grid-template-columns:repeat(2,1fr)}
  .feat2{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav-links{display:none}
  .prims{grid-template-columns:1fr 1fr}
  .prim,.prim:not(:nth-child(3n+1)){padding:var(--s5) var(--s5) var(--s5) 0;border-left:0}
  .prim:nth-child(2n){padding-left:var(--s5);border-left:1px solid var(--rule)}
  .sect-hd{flex-direction:column;align-items:start}
  .src{grid-template-columns:1fr;gap:var(--s4)}
  .close-in{flex-direction:column;align-items:start}
  .close h2{font-size:40px}
}
@media (max-width:640px){
  .nav{padding-block:18px}
  .nav-actions .ghost{display:none}
  .hero{padding-block:var(--s7) var(--s7)}
  .hero h1{font-size:46px}
  .hero h1 br{display:none}
  .lede{font-size:17px}
  .cta .btn,.close-cta .btn{flex:1 1 auto}
  .code pre{font-size:12px;padding:var(--s4) var(--s4) var(--s5)}
  .code pre .ln::before{width:20px;margin-right:10px}
  .code .tabs .file{display:none}
  .sect{padding-block:var(--s7)}
  .sect-hd h2{font-size:34px}
  .prims{grid-template-columns:1fr}
  .prim,.prim:nth-child(2n),.prim:not(:nth-child(3n+1)){padding:var(--s5) 0;border-left:0}
  .works-in{grid-template-columns:1fr}
  .feat{grid-template-columns:1fr}
  .fcard .cap{flex-direction:column;align-items:start}
  .fcard .pv.sa{height:auto}
  .sa-top span:last-child{display:none}
  .sa-brief{margin-top:18px}
  .yours{padding:var(--s5)}
  .ev{grid-template-columns:28px minmax(0,1fr)}
  .ev time{display:none}
  .close h2{font-size:32px}
  .ft{flex-direction:column;align-items:start}
  .legal{padding-block:var(--s6) var(--s7)}
  .prose{font-size:16px}
  .prose h1{font-size:38px}
  .prose h2{font-size:24px;margin-top:var(--s6)}
  .notfound h1{font-size:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none}}