/* Full-screen lab pages. Each page hosts the same lab element its article uses,
   so the lab itself is styled in /assets/js/labs/; this file only draws the page:
   paper with a faint grid, in the reader's light or dark theme. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--page-bg:#FAF7F2;--page-grid:#E2D9C6;color-scheme:light}
html[data-theme="dark"]{--page-bg:#16161F;--page-grid:#30304A;color-scheme:dark}
html,body{background:var(--page-bg);min-height:100vh}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--page-grid) 1px,transparent 1px),linear-gradient(90deg,var(--page-grid) 1px,transparent 1px);
  background-size:60px 60px;opacity:.18}
.lab-page{position:relative;z-index:1}
/* the lab paints its own paper inside an article; on its own page the grid shows through */
.lab-page > *{background:transparent}
/* phones: room above the lab's title for the corner badge */
@media (max-width:640px){.lab-page{padding-top:44px}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}}