@font-face{font-family:"Onest";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/onest-500.woff2) format("woff2")}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/onest-600.woff2) format("woff2")}
@font-face{font-family:"Fragment Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/fragment-mono-400.woff2) format("woff2")}
:root{color-scheme:light;--paper:#F6F6F4;--ink:#141414;--mid:#9A9A96;--acc:#C2255C;--m:#5F5F5B;--line:rgba(20,20,20,.16);--sel:rgba(20,20,20,.1);--solid:rgba(246,246,244,.94);
  --k:#B21D52;--s:#0B6E63;--t:#2A4FB8;--n:#8A5A00;
  --sans:"Onest","Helvetica Neue",Arial,sans-serif;--mono:"Fragment Mono",Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--paper:#101010;--ink:#F2F2EF;--mid:#6C6C69;--acc:#FF8FB1;--m:#A9A9A4;--line:rgba(255,255,255,.16);--sel:rgba(255,255,255,.14);--solid:rgba(16,16,16,.94);
  --k:#FF8FB1;--s:#6FE0CF;--t:#9DB7FF;--n:#F2C063}}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:13px/1.7 var(--mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
/* the glass itself is drawn by the canvas, under each of these; without WebGL they are plain panes */
.nogl [data-glass]{background:var(--solid);border:1px solid var(--line)}
.cap{position:fixed;z-index:3;display:flex;align-items:center;gap:2px;height:40px;padding:4px;border-radius:20px;white-space:nowrap}
.cap>*{display:flex;align-items:center;height:32px;padding:0 13px;border-radius:16px}
.cap a:hover,.cap button:hover{background:var(--sel)}
.mark{left:max(12px,3vw);top:12px;font:600 15px var(--sans)}
.nav{right:max(12px,3vw);top:12px}
.rate{left:max(12px,3vw);bottom:12px;font-size:12px}
.add{right:max(12px,3vw);bottom:12px;font-size:12.5px}
/* One pane of glass. The page's scroll first raises it (--g 0 to 1), then moves the content inside it. */
.pane{position:absolute;--g:0;--e:0;left:50%;width:min(860px,calc(100% - 2*max(12px,3vw)));transform:translateX(-50%) translateY(calc(-1px*var(--e)));
  top:calc(56vh - var(--g)*(56vh - 66px));bottom:calc(-60px + var(--g)*74px);border-radius:28px;overflow:hidden}
.scroll{position:absolute;inset:0;overflow:hidden;padding:26px 30px 90px;
  -webkit-mask-image:linear-gradient(#0000 6px,#000 30px,#000 calc(100% - 40px),#0000 calc(100% - 10px));mask-image:linear-gradient(#0000 6px,#000 30px,#000 calc(100% - 40px),#0000 calc(100% - 10px))}
.track{position:fixed;inset:0;z-index:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:none}
.track::-webkit-scrollbar{display:none}
.view{position:sticky;top:0;height:100%;overflow:hidden}
#content{will-change:transform}
.scroll::-webkit-scrollbar{display:none}
/* past the content's end the pane leaves by the top, and these are what is under it */
.end{position:absolute;left:0;right:0;top:80%;margin-top:-26px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;padding:0 16px;visibility:hidden}
.end a{display:flex;align-items:center;height:52px;padding:0 24px;border-radius:26px;font-size:14px}
.end a:hover{color:var(--k)}
.part+.part{margin-top:30px;padding-top:28px;border-top:1px solid var(--line)}
.file{margin:0}.file+.file,.demo+.demo{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
figcaption{color:var(--m);margin-bottom:12px}
pre{margin:0;font:inherit}
pre,.ln,.ps{white-space:pre-wrap;overflow-wrap:anywhere}
.ps{display:block;width:100%;text-align:left;padding-left:2ch;text-indent:-2ch;margin-bottom:6px}
.ps:hover{color:var(--k)}
.ln{display:block}.ln[hidden]{display:none}
.c{color:var(--m)}.k,.at{color:var(--k)}.s{color:var(--s)}.t,.p{color:var(--t)}.n,.lt{color:var(--n)}
@media (max-width:820px){body{font-size:11.5px;line-height:1.65}
  .nav a:nth-child(-n+3){display:none}.rate,.add{display:none}
  
  /* on a phone the risen pane is larger than the screen: its rim is off every edge, and the text has the whole width */
  .pane{left:calc(12px - var(--g)*64px);right:calc(12px - var(--g)*64px);width:auto;transform:translateY(calc(-1px*var(--e)));top:calc(52vh - var(--g)*(52vh + 52px));bottom:-60px;border-radius:22px}
  .scroll{padding:calc(18px + var(--g)*100px) calc(16px + var(--g)*62px) 120px;-webkit-mask-image:linear-gradient(#0000 calc(var(--g)*104px + 1px*var(--e)),#000 calc(var(--g)*130px + 4px + 1px*var(--e)));mask-image:linear-gradient(#0000 calc(var(--g)*104px + 1px*var(--e)),#000 calc(var(--g)*130px + 4px + 1px*var(--e)))}
  .part+.part{margin-top:22px;padding-top:20px}
  .file+.file,.demo+.demo{margin-top:20px;padding-top:18px}}