:root{
  --bg:#f7f6f2;--fg:#15161a;--muted:#6b6e76;--line:#e1ded5;--card:#ffffff;--accent:#c2336a;--accent2:#2a6df4;--chip:#efece4;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --w:1080px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e0f12;--fg:#ececf0;--muted:#9a9ca6;--line:#26282f;--card:#16181d;--accent:#ff6b9a;--accent2:#7aa2ff;--chip:#1c1e24}}
:root[data-theme="dark"]{--bg:#0e0f12;--fg:#ececf0;--muted:#9a9ca6;--line:#26282f;--card:#16181d;--accent:#ff6b9a;--accent2:#7aa2ff;--chip:#1c1e24}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--card);padding:.5rem 1rem;z-index:9}
.top{display:flex;align-items:center;gap:1.5rem;max-width:var(--w);margin:0 auto;padding:1.1rem 1.25rem;flex-wrap:wrap}
.brand{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--fg);display:flex;align-items:center;gap:.6rem}
.brand:hover{text-decoration:none}
.mark{width:.9rem;height:.9rem;border-radius:3px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:inline-block}
.nav{display:flex;gap:1.1rem;flex-wrap:wrap;margin-left:auto;font-size:.95rem}
.nav a{color:var(--muted);padding:.15rem 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--fg);text-decoration:none}
.nav a[aria-current]{color:var(--fg);border-color:var(--accent)}
.tools{display:flex;gap:.6rem;align-items:center}
.lang{font-size:.85rem;border:1px solid var(--line);border-radius:999px;padding:.15rem .7rem;color:var(--muted)}
.theme{background:none;border:1px solid var(--line);color:var(--muted);border-radius:50%;width:2rem;height:2rem;cursor:pointer;font-size:1rem}
main{max-width:var(--w);margin:0 auto;padding:0 1.25rem 4rem}
section{margin:3.5rem 0}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);margin:.2em 0}
h2{font-size:1.6rem;margin:0 0 1rem;padding-top:.4rem;border-top:1px solid var(--line)}
h3{font-size:1.1rem;margin:1.2rem 0 .5rem}
.count{font-family:var(--sans);font-size:1rem;color:var(--muted);font-weight:400}
.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;margin:0}
.lead{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.35;max-width:26ch;margin:.4rem 0 1.4rem}
.prose{max-width:68ch}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;margin-top:1.5rem}
.hero-art{aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.sketch{width:100%;height:100%;display:block}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{background:var(--chip);color:var(--fg);border-radius:999px;padding:.3rem .9rem;font-size:.88rem}
.chip:hover{background:var(--accent);color:#fff;text-decoration:none}
.interests{columns:2 18rem;padding-left:1.1rem;margin:.5rem 0}
.interests li{margin:.2rem 0;break-inside:avoid}
.pubs{list-style:none;padding:0;margin:0}
.pub{padding:1rem 0;border-bottom:1px solid var(--line);position:relative}
.pub[hidden]{display:none}
.pub .authors{color:var(--muted)}
.pub .ptitle{display:block;font-family:var(--serif);font-size:1.18rem;line-height:1.3;margin:.1rem 0}
.pub .venue{color:var(--muted)}
.pub .note{display:block;font-size:.9rem;color:var(--muted);margin-top:.2rem}
.plinks{display:flex;gap:.9rem;margin-top:.3rem;font-size:.9rem}
.badge{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--accent);color:var(--accent);padding:0 .5rem;border-radius:4px;margin-bottom:.25rem}
.pub[data-review] .ptitle::after{content:" \00b7 needs review";font-family:var(--sans);font-size:.7rem;color:#c78a00}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.filters button{background:none;border:1px solid var(--line);color:var(--fg);padding:.25rem .9rem;border-radius:999px;cursor:pointer;font:inherit;font-size:.9rem}
.filters button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.6rem 0 0}
.tabs button{background:none;border:1px solid var(--line);color:var(--fg);padding:.4rem 1.1rem;border-radius:999px;cursor:pointer;font:inherit;font-size:.95rem}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[role="tabpanel"][hidden]{display:none}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.3rem;color:var(--fg);transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--accent);text-decoration:none}
.card.has-extra:hover{transform:none}.card-main{color:inherit;display:block}.card-main:hover{text-decoration:none}.card-main:hover h3{color:var(--accent)}.card .card-extra{font-size:.88rem;margin:0 0 .8rem}.card h3{margin:.3rem 0 .5rem;font-size:1.3rem}.card p{margin:0 0 .8rem;color:var(--muted);font-size:.95rem}
.kind{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.tags i{font-style:normal;font-size:.75rem;background:var(--chip);padding:.1rem .55rem;border-radius:999px;margin-right:.3rem;color:var(--muted)}
.more{font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.2rem}
.tile{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tile canvas,.tile video,.tile img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;background:#000}
.tile figcaption{padding:.6rem 1rem 1rem;font-size:.88rem;color:var(--muted)}
.tile figcaption b{color:var(--fg);display:block;font-family:var(--serif);font-size:1rem}
.about{display:grid;grid-template-columns:200px 1fr;gap:2rem;margin-top:2rem}
.photo{width:190px;height:auto;border-radius:12px;display:block}
.photo.mono{height:242px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font:600 3rem var(--serif)}
.timeline{list-style:none;padding:0}.timeline li{display:grid;grid-template-columns:6.5rem 1fr;gap:1rem;padding:.4rem 0}.yr{color:var(--muted)}
address{font-style:normal}
.muted{color:var(--muted);font-size:.9rem}
.foot{max-width:var(--w);margin:0 auto;padding:2rem 1.25rem 3rem;border-top:1px solid var(--line);display:grid;gap:.4rem;font-size:.88rem;color:var(--muted)}
.foot a{color:var(--muted);text-decoration:underline}
@media (max-width:760px){.hero{grid-template-columns:1fr}.about{grid-template-columns:1fr}.nav{margin-left:0;width:100%;order:3}.hero-art{order:-1;max-width:420px}}
.playbtn{position:absolute;right:.6rem;top:.6rem;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:999px;padding:.35rem .9rem;font:inherit;font-size:.85rem;cursor:pointer;opacity:.92}
.tile{position:relative}
.tile .mlabel{display:block;padding:.8rem 1rem 0;text-align:center;color:var(--fg);font-size:1rem;line-height:1.3;overflow-x:auto}
.lb-body .mlabel{display:block;text-align:center;color:#fff;font-size:1.25rem;max-width:min(92vw,700px);overflow-x:auto}
@media (max-height:520px){.lb-body .mlabel{display:none}}
.cubectl{display:grid;gap:.5rem;padding:.8rem 1rem 0;font-size:.85rem;color:var(--muted);cursor:default}
.cubectl label{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;align-items:center}
.cubectl input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--accent);margin:.2rem 0 0}
.cubectl .chk{display:flex;gap:.5rem;align-items:center}
.cubectl output{font-variant-numeric:tabular-nums;color:var(--fg)}
.cubehint{margin:0;font-size:.8rem;color:var(--accent)}
.cubereset{justify-self:start;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:.15rem .8rem;font:inherit;font-size:.8rem;cursor:pointer}
.lb-body .cubectl{color:#d8d8e0;width:min(92vw,700px);grid-template-columns:1fr 1fr;column-gap:1.4rem}
.lb-body .cubectl output{color:#fff}
.lb-body .cubereset{color:#d8d8e0;border-color:rgba(255,255,255,.4)}
.lb-body .cubectl .chk,.lb-body .cubehint,.lb-body .cubereset{grid-column:1/-1}
.lb-ctl .lb-stage{width:max(260px,min(92vw,calc(100vh - 22rem),1000px))}
.tile.zoomable{cursor:zoom-in}
.tile.zoomable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lb{position:fixed;inset:0;overflow:auto;z-index:50;background:rgba(10,10,14,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;padding:1rem;animation:lbin .18s ease-out}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb-body{display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:100%;margin:auto}
.lb-body>*{flex-shrink:0}
.lb-stage{position:relative;width:min(92vw,calc(100vh - 15rem),1000px);flex-shrink:0;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lb-stage canvas,.lb-stage video{width:100%;height:100%;display:block;background:#000}
.lb-cap{max-width:min(92vw,700px);color:#e8e8ee;font-size:.92rem;text-align:center;line-height:1.45}
.lb-cap b{display:block;font-family:var(--serif);font-size:1.15rem;color:#fff}
.lb-x{position:absolute;top:.8rem;right:.9rem;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;z-index:2}
.lb-x:hover,.lb-x:focus-visible{background:var(--accent);border-color:var(--accent);outline:none}
@media (max-height:520px){.lb-cap{display:none}.lb-stage{width:min(92vw,calc(100vh - 2rem))}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media print{.lb,.top,.tools,.filters,.hero-art,.theme{display:none}body{background:#fff;color:#000}}

/* page 2 of the mathematical sketches */
.pager{display:flex;flex-wrap:wrap;gap:.4rem;margin:1.2rem 0 0}
.pager button{background:none;border:1px solid var(--line);color:var(--fg);padding:.25rem .85rem;border-radius:8px;cursor:pointer;font:inherit;font-size:.88rem}
.pager button[aria-current="page"]{border-color:var(--accent);color:var(--accent);font-weight:600}
.sk2-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem;align-items:start;margin:1.6rem 0;padding:1.1rem;background:var(--card);border:1px solid var(--line);border-radius:14px}
.sk2-view canvas{width:100%;aspect-ratio:1;height:auto;display:block;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.sk2-side h3{margin:.1rem 0 .4rem;font-size:1.25rem}
.sk2-side .mlabel{text-align:left;padding:.2rem 0 .6rem;overflow-x:auto}
.sk2-ctl{display:grid;gap:.55rem}
.sk2-row{display:grid;grid-template-columns:1fr auto;gap:.1rem .6rem;font-size:.88rem;color:var(--muted)}
.sk2-row output{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--fg)}
.sk2-row input{grid-column:1/-1;width:100%;accent-color:var(--accent)}
.sk2-checks{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem}
.sk2-chk{display:flex;gap:.4rem;align-items:center;font-size:.88rem;cursor:pointer}
.sk2-ctl button{justify-self:start;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);padding:.35rem .9rem;font:inherit;font-size:.88rem;cursor:pointer}
.sk2-ctl button:hover{border-color:var(--accent)}
.sk2-stat{font-size:.82rem;color:var(--muted);margin:.2rem 0 0;font-family:ui-monospace,Menlo,Consolas,monospace}
#sk-p2[hidden],#sk-p1[hidden],#sk-p5[hidden],#sk-p6[hidden],#sk-p7[hidden],#sk-p8[hidden],#sk-p9[hidden]{display:none}
@media (max-width:820px){.sk2-card{grid-template-columns:1fr}}

/* share buttons (assets/js/share.js) */
.share-btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.8rem;font-weight:600;line-height:1;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.42rem .75rem;cursor:pointer}
.share-btn:hover{border-color:var(--accent);color:var(--accent)}
.share-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile .share-btn{position:absolute;top:.6rem;right:.6rem;z-index:3;background:rgba(10,12,18,.62);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.tile .share-btn:hover{background:rgba(10,12,18,.85);color:#fff;border-color:#fff}
.share-row{margin-top:.9rem}
.app-stage>.share-btn{float:right;margin:1.15rem 0 0}
.share-menu{position:fixed;z-index:1000;min-width:11rem;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.28);padding:.35rem;display:flex;flex-direction:column}
.share-menu[hidden]{display:none}
.share-item{display:block;text-align:left;font:inherit;font-size:.9rem;color:var(--fg);background:none;border:0;border-radius:8px;padding:.55rem .8rem;cursor:pointer;text-decoration:none}
.share-item:hover,.share-item:focus-visible{background:var(--chip);color:var(--accent);outline:none;text-decoration:none}
.share-toast{position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--fg);color:var(--bg);font-size:.9rem;padding:.6rem 1.1rem;border-radius:999px;z-index:1100;transition:opacity .2s,transform .2s}
.share-toast.on{opacity:1;transform:translate(-50%,0)}
.share-flash{animation:share-flash 2.4s ease-out}
@keyframes share-flash{0%,60%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}}
.moved-note{font-size:.92rem}
@media (prefers-reduced-motion:reduce){.share-flash{animation:none}.share-toast{transition:none}}

/* page 2 of the sketches: thumbnails that open the interactive card in a lightbox */
.sk2-slot{position:relative}
.sk2-slot .sk2-card{display:block;margin:0;padding:0;border:0;border-radius:0;background:none}
.sk2-slot .sk2-side{display:none}
.sk2-slot .sk2-view canvas{border:0;border-radius:0}
.sk2-open{position:absolute;inset:0;z-index:2;width:100%;height:100%;border:0;background:transparent;cursor:zoom-in;padding:0}
.sk2-open:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}
.sk2-tile .mlabel{overflow-x:auto}
.sk2-lb .lb-body{width:min(96vw,1100px,calc((100vh - 5rem)*2));max-width:96vw}
.sk2-lb .sk2-card{width:100%;margin:0;box-shadow:0 20px 60px rgba(0,0,0,.5)}
@media (max-width:820px){.sk2-lb .lb-body{width:min(96vw,560px)}}
.tile .playbtn{right:6.2rem}

/* share button inside a lightbox */
.lb-share{position:static!important;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.4)}
.lb-share:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* permalinks, QR and embed (share.js) */
.share-dlg{border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--fg);padding:0;max-width:min(92vw,34rem);width:100%}
.share-dlg::backdrop{background:rgba(0,0,0,.5)}
.share-dlg-box{padding:1.2rem 1.4rem}
.share-dlg-box h3{margin:0 0 .8rem;font-size:1.05rem}
.share-dlg-row{display:flex;gap:.5rem;align-items:center;margin:.4rem 0;font-size:.92rem}
.share-dlg-row select{font:inherit;padding:.2rem .4rem}
.share-qr{display:block;width:min(70vw,280px);height:auto;margin:.8rem auto;image-rendering:pixelated;border-radius:6px}
.share-code{width:100%;box-sizing:border-box;font:.78rem/1.4 ui-monospace,Menlo,Consolas,monospace;background:var(--chip);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:.6rem;margin:.6rem 0;resize:vertical}
.share-dlg-note{font-size:.82rem;color:var(--muted,var(--fg));opacity:.85;margin:.4rem 0}
.share-dlg-url{font:.72rem ui-monospace,Menlo,Consolas,monospace;word-break:break-all;opacity:.7;margin:.2rem 0}
.share-dlg-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.8rem}
.share-dlg-btn{font:inherit;font-size:.88rem;font-weight:600;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.45rem .95rem;cursor:pointer}
.share-dlg-btn:hover,.share-dlg-btn:focus-visible{border-color:var(--accent);color:var(--accent)}
html.embed .skip,html.embed header.top,html.embed footer.foot,html.embed .app-back,html.embed #app-cats,html.embed .share-btn,html.embed .share-row{display:none!important}
html.embed body{padding:0}
html.embed main{padding-top:.5rem;max-width:none}
html.embed-solo-on body>*:not(.embed-solo):not(.share-toast):not(.embed-credit):not(script):not(dialog){display:none!important}
html.embed-solo-on main{display:none}
.embed-solo{padding:.5rem;max-width:960px;margin:0 auto}
.embed-credit{display:block;text-align:right;font-size:.72rem;opacity:.65;padding:.3rem .8rem;color:var(--fg)}

/* Record 10 s (record.js) */
.rec-btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.8rem;font-weight:600;line-height:1;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.42rem .75rem;cursor:pointer;margin-left:.4rem}
.rec-btn:hover{border-color:#d1495b;color:#d1495b}
.rec-btn:disabled{opacity:.75;cursor:progress;border-color:#d1495b;color:#d1495b}
.rec-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile .rec-btn{position:absolute;top:.6rem;left:.6rem;margin:0;z-index:3;background:rgba(10,12,18,.62);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(4px)}
.tile .rec-btn:hover,.tile .rec-btn:disabled{background:rgba(10,12,18,.85);color:#fff;border-color:#ff7a8a}
.lb-body>.rec-btn{margin:0;align-self:center;background:rgba(10,12,18,.62);color:#fff;border-color:rgba(255,255,255,.28)}
html.embed .rec-btn{display:none!important}

/* sound toggles (sound.js) */
.snd-chk{display:inline-flex;align-items:center;gap:.35rem;font-size:.82rem;color:var(--muted,var(--fg));margin:.35rem 0 0 .2rem;cursor:pointer}
.tile>.snd-chk,.lb-stage>.snd-chk{display:flex;justify-content:center;margin:.4rem 0 0}
.lb-stage>.snd-chk{color:#d8d8e0}

/* plain-language math note in the expanded view */
.tile>.story{display:none}
.story{margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.93rem;line-height:1.5;text-align:left}
.story h4{margin:0 0 .3rem;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.story p{margin:0}
.lb-body>.story{max-width:min(92vw,700px);color:#e8e8ee;border-top-color:rgba(255,255,255,.25)}
.lb-body>.story h4{color:#9fb4ff}
@media (max-height:520px){.lb-body>.story{display:none}}
.ra-slot{display:none}
.ra-lb .ra-item{width:min(96vw,1100px);background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.4rem 1.6rem;box-sizing:border-box;text-align:left}
.ra-lb .ra-item h2{margin-top:.2rem}
.ra-lb .ra-item h2{border-top:0;padding-top:0}
.ra-code{margin:1.6rem 0 0;max-width:46rem;border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem}
.ra-code summary{cursor:pointer;font-family:var(--serif);font-size:1.05rem;font-weight:600}
.ra-code pre{max-height:26rem;overflow:auto;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:.8rem;font-size:.78rem;line-height:1.5;margin:.6rem 0 0}
.ra-code code{font-family:var(--mono,ui-monospace,monospace);white-space:pre}
.ra-copy{font:inherit;font-size:.85rem;margin-left:.6rem;padding:.2rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--fg);cursor:pointer}
.ra-lb .share-row{margin-top:.4rem}

/* quiet motion (assets/js/bg.js) */
.bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.5}
.bgfx[hidden]{display:none}
.glow{position:fixed;left:0;top:0;width:520px;height:520px;z-index:-1;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .4s;background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 11%,transparent),transparent 62%);will-change:transform}
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.bgtog{background:none;border:1px solid var(--line);color:var(--muted);border-radius:50%;width:2rem;height:2rem;cursor:pointer;font-size:.85rem;line-height:1;padding:0}
.bgtog[aria-pressed="true"]{color:var(--accent2);border-color:var(--accent2)}
.bgtog:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mo-on .mo{opacity:0;transform:translateY(16px);transition:opacity .75s ease var(--d,0s),transform .75s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.mo-on .mo.in{opacity:1;transform:none}
.hero-art{transition:transform .18s ease-out;transform-style:preserve-3d}
.mark{animation:markspin 14s linear infinite}
@keyframes markspin{to{filter:hue-rotate(360deg)}}
.nav a{transition:color .2s,border-color .2s}
.top{position:relative}
@media (prefers-reduced-motion:reduce){.mark{animation:none}.bgtog{display:none}}
@media print{.bgfx,.glow,.progress,.bgtog{display:none!important}}
.cubectl .prow{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.lb-body .cubectl .prow,.lb-body .cubectl .hdrnote,.lb-body .cubectl .slownote{grid-column:1/-1}
/* social-media dialog (phones) */
.soc-fmts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:.6rem 0}
.soc-fmt{display:flex;flex-direction:column;gap:.15rem;align-items:center;font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.55rem .3rem;cursor:pointer}
.soc-fmt b{font-size:.95rem}.soc-fmt span{font-size:.72rem;opacity:.8}
.soc-fmt.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.soc-fmt:disabled{opacity:.6;cursor:progress}
.soc-prev{display:flex;justify-content:center;margin:.3rem 0}
.soc-prev:empty{display:none}
.soc-prev img,.soc-prev video{max-width:100%;max-height:38vh;border-radius:10px;background:#000}
.social-dlg .share-code{width:100%;box-sizing:border-box;font:inherit;font-size:.88rem}
.social-dlg .share-dlg-actions{flex-wrap:wrap}
.share-dlg-btn.soc-go,.share-dlg-btn.soc-go:hover,.share-dlg-btn.soc-go:focus-visible{background:var(--accent);color:#fff;border-color:var(--accent)}
.soc-go:disabled{opacity:.5}
.social-dlg{max-height:94vh;overflow:auto}

.cubectl .zopts{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin:.4rem 0;font-size:.85rem}.cubectl .zopts label{display:inline-flex;align-items:center;gap:.3rem}.cubectl .zopts input[type=number]{width:4.6rem;font:inherit;padding:.15rem .3rem}.cubectl .zinfo{margin:.2rem 0 .4rem}

/* palette drop-down of the particle systems */
.cubectl .palsel{grid-template-columns:1fr auto}.cubectl .palsel>span{grid-column:1;grid-row:1}.cubectl .palsel select{grid-column:2;grid-row:1;font:inherit;color:var(--fg,inherit);background:transparent;border:1px solid var(--border,#555);border-radius:6px;padding:.15rem .4rem;max-width:11rem}
.cubectl .palsel .palbar{grid-column:1/-1;grid-row:2;display:block;height:.5rem;border-radius:.3rem;margin-top:.2rem}
.lb-body .cubectl .palsel select{color:#fff}.lb-body .cubectl .palsel select option{background:#1a1a22;color:#fff}

.now-list{list-style:none;padding:0;margin:.6rem 0;display:grid;gap:.9rem}
.now-list li{padding:.8rem 1rem;border:1px solid var(--line,rgba(127,127,127,.25));border-radius:12px;line-height:1.55}
.now-list li b{display:block;margin-bottom:.2rem}
.now-list .more{white-space:nowrap}

/* identifier popup on the ORCID, Scholar and MathSciNet chips */
.chipw{position:relative;display:inline-block}
.idpop{position:absolute;left:0;top:100%;margin-top:.45rem;z-index:30;display:none;align-items:center;gap:.55rem;white-space:nowrap;padding:.6rem .8rem;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 22px rgba(0,0,0,.22)}
.idpop::after{content:"";position:absolute;left:0;right:0;top:-.5rem;height:.5rem}
.chipw:hover .idpop,.chipw:focus-within .idpop{display:flex}
.idpop .idl{font-size:.78rem;color:var(--muted)}
.idpop code{font-size:.9rem;user-select:all}
.idcopy{font:inherit;font-size:.8rem;border:1px solid var(--line);background:var(--chip);color:var(--fg);border-radius:999px;padding:.15rem .7rem;cursor:pointer}
.idcopy:hover,.idcopy:focus-visible{background:var(--accent);color:#fff;border-color:transparent}

/* recording length slider on the shaders tiles */
.rec-len{padding:.35rem .9rem .1rem}
.rec-len label{display:flex;align-items:center;gap:.6rem;font-size:.85rem}
.rec-len .rl-t{flex:none;color:var(--muted)}
.rec-len .rl-w{position:relative;flex:1;display:block;height:1.7rem}
.rec-len input[type=range]{position:absolute;left:0;right:0;top:.15rem;width:100%;margin:0}
.rec-len .rl-marks{position:absolute;left:0;right:0;bottom:0;height:.45rem;pointer-events:none}
.rec-len .rl-marks i{position:absolute;bottom:0;width:2px;height:.45rem;margin-left:-1px;border-radius:1px;background:var(--accent);opacity:.85}
.rec-len output{flex:none;min-width:3.2rem;text-align:right;font-variant-numeric:tabular-nums}
.rec-len .rl-note{margin:.15rem 0 .2rem;font-size:.78rem;line-height:1.4;color:var(--muted)}

.zopts .zlen input[type=range]{width:9rem;vertical-align:middle}.zopts .zlen output{display:inline-block;min-width:3.2em;font-variant-numeric:tabular-nums}
.rec-len .rl-rst{display:flex;align-items:center;gap:.45rem;font-size:.85rem;margin-top:.25rem;color:var(--muted)}
.imark{display:inline-block;height:.62em;width:1.24em;vertical-align:-.04em;margin-right:.28em;overflow:visible}
.tile figcaption,.lb-cap,.sk2-side>p{cursor:copy}