/* About · Quern: this page's own pieces. */
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.65}
.b1{width:700px;height:520px;left:-4%;top:10%;background:radial-gradient(closest-side,rgb(var(--sage-glow) / .18),transparent);animation:drift 20s ease-in-out infinite alternate}
.b2{width:420px;height:420px;right:10%;top:20%;background:radial-gradient(closest-side,rgb(var(--ink-rgb) / .12),transparent);animation:drift 26s ease-in-out infinite alternate-reverse}
.sc{position:absolute;width:120px;height:84px;border-radius:14px;border:1px solid rgb(var(--fg) / .12);box-shadow:0 10px 30px rgb(var(--shade) / calc(.4 * var(--shade-k)))}
.sc1{animation:sc1 7s cubic-bezier(.5,0,.3,1) infinite}
.sc2{animation:sc2 7s cubic-bezier(.5,0,.3,1) infinite}
.sc3{animation:sc3 7s cubic-bezier(.5,0,.3,1) infinite}
.sc4{animation:sc4 7s cubic-bezier(.5,0,.3,1) infinite}
.sc5{animation:sc5 7s cubic-bezier(.5,0,.3,1) infinite}
@keyframes sc1{0%,15%{left:4%;top:8%;transform:rotate(-14deg)}45%,85%{left:56%;top:30%;transform:rotate(0)}100%{left:4%;top:8%;transform:rotate(-14deg)}}
@keyframes sc2{0%,15%{left:22%;top:52%;transform:rotate(10deg)}45%,85%{left:56%;top:36%;transform:rotate(0)}100%{left:22%;top:52%;transform:rotate(10deg)}}
@keyframes sc3{0%,15%{left:2%;top:62%;transform:rotate(-6deg)}45%,85%{left:56%;top:42%;transform:rotate(0)}100%{left:2%;top:62%;transform:rotate(-6deg)}}
@keyframes sc4{0%,15%{left:30%;top:14%;transform:rotate(18deg)}45%,85%{left:56%;top:48%;transform:rotate(0)}100%{left:30%;top:14%;transform:rotate(18deg)}}
@keyframes sc5{0%,15%{left:14%;top:34%;transform:rotate(-20deg)}45%,85%{left:56%;top:54%;transform:rotate(0)}100%{left:14%;top:34%;transform:rotate(-20deg)}}
@media (max-width:640px){.sc{width:90px;height:64px}}
.draw{stroke-dasharray:900;animation:draw 3s var(--ease-enter) both}
@keyframes draw{from{stroke-dashoffset:900}to{stroke-dashoffset:0}}
.turn{transform-origin:150px 150px;animation:turn 30s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.grain{animation:grain 3s ease-in infinite}
@keyframes grain{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(var(--gx,40px),60px)}}
.road-pulse{animation:rp 2s ease-in-out infinite}
@keyframes rp{0%,100%{box-shadow:0 0 0 0 rgb(var(--ink-rgb) / .5)}50%{box-shadow:0 0 0 10px rgb(var(--ink-rgb) / 0)}}
.scx{display:flex;align-items:center;gap:8px;padding:0 12px;width:auto !important;height:44px !important;border-radius:14px !important;font-size:13px;color:var(--ink);white-space:nowrap}
.scx i{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:rgb(var(--fg) / .08)}
.scnote{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;width:150px !important;height:96px !important;padding:12px 14px;background:rgb(var(--k-254-254-252) / .9) !important;color:var(--paper-ink);backdrop-filter:blur(16px)}
.scnote b{font-size:15px;font-weight:500}
.scnote em{display:block;height:5px;width:100%;border-radius:3px;background:var(--paper-line)}
.feedvs{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:28px}
.feed{position:relative;width:120px;height:150px;border-radius:18px;border:1px solid rgb(var(--fg) / .14);padding:14px;display:flex;flex-direction:column;gap:8px;opacity:.55}
.feed i{display:block;height:24px;border-radius:6px;background:rgb(var(--fg) / .1)}
.fdot{position:absolute;right:-6px;top:-6px;width:14px;height:14px;border-radius:50%;background:var(--k-c9c8c1)}
.streak{font-size:10px;color:var(--ink-2);align-self:flex-start;padding:3px 7px;border-radius:999px;border:1px solid rgb(var(--fg) / .2)}
.feed::after{content:"";position:absolute;left:-10px;right:-10px;top:50%;height:2px;background:var(--accent);transform:rotate(-30deg);box-shadow:0 0 12px rgb(var(--glow) / .7)}
.vs{font-size:22px;color:var(--ink-4b)}
.shelf{width:140px;height:150px;display:flex;align-items:flex-end;gap:8px;padding:12px;border-bottom:2px solid rgb(var(--fg) / .25)}
.shelf i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgb(var(--glow) / .45),rgb(var(--sage-glow) / .35))}

/* the road (Now / On the way / Planned): names shrink on phones so "Android", "iPhone" and "Web" never run together */
.road{gap:12px}
@media (max-width:480px){.road .mono{white-space:nowrap;letter-spacing:.06em}}
.road-name{font-size:clamp(18px, 4.6vw, 36px);font-weight:500;overflow-wrap:anywhere}