.shell{
  max-width:1000px;
  margin:0 auto;
  padding:0 28px;
  position:relative;
  z-index:1;
}
@media(min-width:1600px){.shell{max-width:1160px}}
@media(max-width:620px){.shell{padding:0 20px}}

/* status bar — waybar-style floating glass pill */
.statusbar{
  position:fixed;top:8px;left:10px;right:10px;z-index:5;
  display:flex;align-items:center;gap:14px;
  height:44px;padding:0 16px;
  background:var(--bar-bg);
  border:1px solid var(--bar-border);
  border-radius:14px;
  font-size:12px;color:var(--dim);
  overflow:hidden;
  box-shadow:0 0 16px -8px var(--accent-glow);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.statusbar a{text-decoration:none}
.statusbar.scrolled{
  border-color:var(--accent);
  box-shadow:0 12px 36px -14px rgba(0,0,0,.65),0 0 26px -6px var(--accent-glow);
}
.launcher{
  display:flex;flex:none;color:var(--accent);
  filter:drop-shadow(0 0 6px var(--accent-glow));
  transition:color .3s,transform .3s var(--ease);
}
.launcher:hover,.launcher:focus-visible{color:var(--purple);transform:translateY(-1px)}
.wsp{display:flex;gap:6px}
.ws{
  display:flex;align-items:baseline;gap:6px;
  padding:2px 11px;border-radius:999px;
  text-decoration:none;color:var(--purple);
  background:var(--pill-bg);
  border:1px solid var(--pill-border);
  transition:color .3s,border-color .3s,background .3s,box-shadow .3s;
}
.ws:hover,.ws:focus-visible{color:var(--fg);border-color:var(--accent)}
.ws.on{
  background:var(--accent);border-color:var(--accent);
  color:#fff;font-weight:600;
  box-shadow:0 0 12px -3px var(--accent-glow);
}
.ws .wnum{letter-spacing:.06em}
.ws .wlabel{font-size:11px}
.statusbar .right{margin-left:auto;display:flex;align-items:center;gap:14px}
.sensor{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sensor::before{content:"● ";color:var(--green);text-shadow:0 0 6px var(--glow-green)}
.tray{display:flex;color:var(--muted);transition:color .3s}
.tray:hover,.tray:focus-visible{color:var(--purple)}
.clock{
  display:flex;flex-direction:column;justify-content:center;
  line-height:1.3;text-align:right;font-variant-numeric:tabular-nums;
}
.clock b{color:var(--fg);font-weight:600}
.clock i{font-style:normal;color:var(--dim);font-size:10px}
@media(max-width:620px){
  .ws .wlabel{display:none}
  .ws{padding:2px 9px}
  .sensor,.tray{display:none}
  .statusbar{gap:10px;padding:0 14px}
}
@media(min-width:769px){
  body:not(.lite-root) .statusbar{
    background:rgba(13,11,20,.6);
    backdrop-filter:blur(16px) saturate(1.5);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
  }
}

/* scroll progress — pure CSS scroll-timeline, no JS */
.scrollprogress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--purple),var(--green));
  transform-origin:0 50%;transform:scaleX(0);
  pointer-events:none;
}
@supports (animation-timeline:scroll()){
  .scrollprogress{animation:pagegrow linear both;animation-timeline:scroll()}
  @keyframes pagegrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}

main{padding-top:clamp(96px,12vh,140px)}

section{padding:0}
.block{padding:14px 0 40px}

/* ---- HERO ---- */
.hero{padding:9vh 0 8vh;border-bottom:1px solid var(--line);position:relative}
@media(min-width:769px){
  body:not(.lite-root) .hero::before,body:not(.lite-root) .hero::after{
    content:"";position:absolute;pointer-events:none;z-index:-1;border-radius:50%;
  }
  body:not(.lite-root) .hero::before{
    top:-18%;left:-12%;width:62%;height:115%;
    background:radial-gradient(circle,rgba(124,58,237,.16),transparent 65%);
    filter:blur(48px);
    animation:breathe 7s ease-in-out infinite alternate;
  }
  body:not(.lite-root) .hero::after{
    top:6%;right:-14%;width:48%;height:90%;
    background:radial-gradient(circle,rgba(167,139,250,.08),transparent 65%);
    filter:blur(56px);
    animation:breathe 9s ease-in-out 1.2s infinite alternate-reverse;
  }
  @keyframes breathe{from{opacity:.5;transform:scale(.94)}to{opacity:1;transform:scale(1.06)}}
}
.cmdline{font-size:15px;margin-bottom:26px}
#typed{color:var(--fg)}
.hero h1{
  font-weight:700;
  font-size:clamp(30px,5.4vw,72px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--fg);
  max-width:18ch;
  margin:.35em 0 .6em;
  text-wrap:balance;
}
.hero h1 .accent{
  color:var(--accent);
  text-decoration:none;
  text-shadow:0 0 20px var(--accent-glow),0 0 60px rgba(124,58,237,.25);
}
.hero .sub{color:var(--muted);max-width:62ch;text-wrap:pretty}
.hero .sub a{
  color:var(--purple);text-decoration:none;border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s,text-shadow .25s;
}
.hero .sub a:hover{background:var(--sel);border-bottom-color:var(--purple);text-shadow:0 0 12px var(--glow-purple)}
.meta-row{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:30px;
  font-size:13px;color:var(--dim);
}
.meta-row b{color:var(--muted);font-weight:400}
.meta-row .k{color:var(--purple)}

/* ---- section header prompt ---- */
.sechead{
  display:flex;align-items:baseline;gap:10px;
  padding:34px 0 22px;
  font-size:15px;flex-wrap:wrap;
}
.sechead .prompt{white-space:nowrap}
.sechead .note{color:var(--dim);font-size:12px;margin-left:auto}
@media(max-width:620px){.sechead .note{display:none}}

.foot{
  margin-top:64px;padding-top:20px;border-top:1px solid var(--line);
  font-size:12px;color:var(--dim);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}