:root{
  color-scheme:dark;
  --ground:#08090a;
  --s1:#111215;
  --s2:#18191d;
  --s3:#202127;
  --hairline:rgba(255,255,255,.07);
  --hairline-strong:rgba(255,255,255,.12);
  --text:#f2f3f4;
  --text-2:#a3a8b0;
  --text-3:#82888f;
  --accent:#7c86e8;
  --sans:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--ground);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,dl,dd,ol{margin:0}
ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--ground)}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:0}
.dim{color:var(--text-3)}

.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--text);color:var(--ground);padding:8px 12px;border-radius:6px}
.skip:focus{top:12px}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

.top{display:flex;align-items:center;gap:32px;height:64px;border-bottom:1px solid var(--hairline)}
.name{font-weight:600;font-size:15px;letter-spacing:-.01em}
.top nav{display:flex;gap:24px;margin-left:auto;font-size:14px;color:var(--text-2)}
.top nav a{padding:6px 0;transition:color .15s var(--ease)}
.top nav a:hover,.top nav a[aria-current]{color:var(--text)}

.btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:6px;font-size:14px;font-weight:500;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
.btn.small{min-height:32px;padding:0 12px;font-size:13px}
.primary{background:var(--text);color:var(--ground)}
.primary:hover{background:#fff}
.ghost{border:1px solid var(--hairline-strong);color:var(--text)}
.ghost:hover{background:var(--s2);border-color:rgba(255,255,255,.2)}
.btn:active{transform:translateY(1px)}

.hero{padding:120px 0 24px}
h1{font-weight:600;font-size:clamp(44px,7vw,84px);line-height:1;letter-spacing:-.035em}
.lead{margin-top:28px;max-width:56ch;font-size:18px;color:var(--text-2);text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

.panel{border:1px solid var(--hairline-strong);border-radius:12px;background:var(--s1);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.group{padding:20px 20px 8px;color:var(--text-3);font-size:13px;font-weight:500;border-top:1px solid var(--hairline)}

.item{border-top:1px solid var(--hairline)}
.group+.item,.panel>.item:first-child{border-top:0}
.item summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:14px 20px;cursor:pointer;list-style:none;transition:background .15s var(--ease)}
.item summary::-webkit-details-marker{display:none}
.item summary:hover{background:var(--s2)}
.item[open] summary{background:var(--s2)}
.title{font-size:15px;font-weight:500}
.tags{display:flex;gap:6px}
.tags span{background:var(--s3);border-radius:4px;padding:2px 7px;color:var(--text-2);font-size:12px}
.body{display:grid;gap:14px;padding:4px 20px 22px;background:var(--s2)}
.body p{max-width:68ch;color:var(--text-2);font-size:15px}
.body .flow{color:var(--text);font-size:12.5px}
.links{display:flex;gap:20px}
.link{width:max-content;font-size:14px;font-weight:500;color:var(--text);border-bottom:1px solid var(--hairline-strong);padding-bottom:2px;transition:border-color .15s var(--ease)}
.link:hover{border-color:var(--accent)}
.item[open] .body{animation:open .35s var(--ease)}
@keyframes open{from{opacity:0;transform:translateY(-4px)}}

.section{padding-top:120px}
.hero+.section{padding-top:72px}
.section>h2,.about h2{font-weight:600;font-size:28px;letter-spacing:-.02em;margin-bottom:32px}

.timeline>li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:24px 0;border-top:1px solid var(--hairline)}
.timeline>li:last-child{border-bottom:1px solid var(--hairline)}
.when{color:var(--text-3);padding-top:3px}
.timeline h3{font-weight:500;font-size:17px;letter-spacing:-.01em;margin-bottom:6px}
.timeline h3 span{color:var(--text-3);font-weight:400;margin-left:6px}
.timeline p:not(.when){color:var(--text-2);max-width:68ch}

.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px}
.about .big{font-size:22px;line-height:1.4;letter-spacing:-.01em;color:var(--text);margin-bottom:20px;text-wrap:pretty}
.about p:not(.big){color:var(--text-2)}
.specs{border-top:1px solid var(--hairline);margin-top:64px}
.specs div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.specs dt{color:var(--text-3);font-size:14px}
.specs dd{color:var(--text-2);font-size:15px}

.contact{padding-bottom:120px}
.contact-note{color:var(--text-2);max-width:56ch}
.contact .actions{margin-top:24px}

.foot{display:flex;justify-content:space-between;gap:16px;padding:20px 0 32px;border-top:1px solid var(--hairline);color:var(--text-3);font-size:13px}


@media (max-width:820px){
  .top{flex-wrap:wrap;height:auto;padding:14px 0 0;row-gap:10px}
  .top nav{order:3;width:100%;margin:0;justify-content:space-between;padding-bottom:6px}
  .top nav a{padding:8px 0}
  .hero{padding:64px 0 8px}
  .lead{font-size:17px}
  .item summary{grid-template-columns:1fr;gap:12px;padding:14px 16px}
  .tags{display:none}
  .group{padding:18px 16px 6px}
  .body{padding:4px 16px 20px}
  .section{padding-top:88px}
  .timeline>li{grid-template-columns:1fr;gap:6px}
  .about{grid-template-columns:1fr;gap:8px}
  .specs{margin-top:32px}
  .specs div{grid-template-columns:1fr;gap:4px}
  .contact{padding-bottom:88px}
  .contact .btn.primary{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.points{margin:12px 0 0;padding-left:18px;color:var(--text-2);display:grid;gap:6px;max-width:68ch}
.points li::marker{color:var(--text-3)}

.query{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:16px;padding:12px 16px;border:1px solid var(--hairline-strong);border-radius:8px;background:var(--s1);color:var(--text-2);font-size:14px}
.query label{color:var(--text-2)}
.q-val{display:inline-flex;align-items:center;gap:2px;color:var(--accent)}
.query select{appearance:none;-webkit-appearance:none;font:inherit;color:var(--text);background:var(--s3);border:1px solid var(--hairline-strong);border-radius:4px;padding:3px 26px 3px 8px;cursor:pointer;min-height:32px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a3a8b0' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.query select:hover{border-color:rgba(255,255,255,.24)}
.rows{margin-left:auto;color:var(--text-3)}
.item[hidden],.group[hidden]{display:none}
.panel>.first-visible{border-top:0}

.activity{border:1px solid var(--hairline-strong);border-radius:12px;background:var(--s1);padding:20px}
.cal-scroll{overflow-x:auto;scrollbar-width:thin;container-type:inline-size}
.cal{--c:clamp(11px,calc((100cqw - 156px) / 53),17px);display:grid;grid-auto-flow:column;grid-template-rows:16px repeat(7,var(--c));grid-auto-columns:var(--c);gap:3px;width:max-content}
.cal .m{grid-row:1;font:400 11px/16px var(--sans);color:var(--text-3);white-space:nowrap}
.cal .d{border-radius:2px;background:var(--s3)}
.cal .l1{background:#2f3466}.cal .l2{background:#454da3}.cal .l3{background:#5f69c8}.cal .l4{background:#8a93ef}
.cal-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:16px;color:var(--text-2);font-size:14px}