/* Abid Labs: the paper look from the videos. Crumpled paper, marker text, red stamps, taped prints. */
:root{
  --ink:#2b2724; --muted:#5a5550; --red:#b8261d; --green:#1f7a32; --yellow:#ffe880; --hi:#ffd400;
  --card:#fffdf7; --tape:rgba(255,236,170,.75); --rule:#d9d2c3;
  --w12:#2563eb; --wgnd:#201e22; --w5:#c9a10a; --wstb:#d63027; --w24:#e0701a; --wena:#1f7a32; --wdim:#7a4fc2;
  --marker:"Marker Felt","Kalam","Comic Sans MS",cursive;
  --stamp:"Arial Black","Archivo Black",Impact,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:17px/1.6 var(--body);background:#eee7da}
/* fixed layer, because background-attachment:fixed does nothing on iPhone */
body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(246,242,234,.68),rgba(246,242,234,.68)),#eee7da url(/paper.jpg) center/cover}
img{max-width:100%;display:block}
::selection{background:var(--hi);color:var(--ink)}
html{scrollbar-color:var(--ink) transparent;accent-color:var(--red);caret-color:var(--red)}
a{color:var(--red);text-decoration-thickness:2px;text-underline-offset:3px}
h1,h2,h3{font-family:var(--marker);font-weight:700;line-height:1.1;margin:0;text-wrap:balance}
h1{font-size:clamp(2.2rem,8vw,3.8rem)}
h2{font-size:clamp(1.9rem,6vw,2.7rem);margin-bottom:6px}
h3{font-size:1.45rem}
p{margin:0 0 12px;max-width:65ch}
.red{color:var(--red)} .green{color:var(--green)}
.hl{background:linear-gradient(transparent 55%,var(--hi) 55%,var(--hi) 90%,transparent 90%);padding:0 2px}
.wrap{max-width:920px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-right))}
section{padding:46px 0 10px}
.lede{font:1.3rem/1.45 var(--marker);max-width:40ch}
.small{font-size:.9rem;color:var(--muted)}
.facts{margin:6px 0 0;padding-left:20px;display:grid;gap:6px;max-width:60ch}
.facts li::marker{color:var(--red)}
/* (i) tooltips for edge-case detail. Shown as a fixed toast so table scrollers never clip it; tap focuses on touch */
.tip{display:inline-grid;place-items:center;width:18px;height:18px;border:2px solid var(--muted);border-radius:50%;font:700 11px/1 var(--body);
  font-style:italic;color:var(--muted);cursor:help;position:relative;vertical-align:2px;margin-left:4px}
.tip:hover,.tip:focus{border-color:var(--ink);color:var(--ink);outline:none}
.tip::after{content:attr(data-tip);position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:max-content;max-width:min(420px,calc(100vw - 32px));background:var(--ink);color:#fff;font:400 14px/1.45 var(--body);font-style:normal;
  padding:10px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .12s;z-index:30;text-align:left}
.tip:hover::after,.tip:focus::after{opacity:1}

/* top bar */
.bar{position:sticky;top:0;z-index:20;background:rgba(250,246,236,.94);backdrop-filter:blur(6px);
  border-bottom:3px solid var(--ink)}
.bar .wrap{display:flex;align-items:center;gap:14px;height:56px}
.logo{font:700 1.5rem var(--marker);color:var(--ink);text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px}
.logo svg{width:26px;height:34px}
.nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.nav::-webkit-scrollbar{display:none}
.nav a{font:1.05rem var(--marker);color:var(--ink);text-decoration:none;padding:4px 10px;border-radius:20px;white-space:nowrap}
.nav a:hover{background:var(--yellow)}

/* paper bits */
.stamp{display:inline-block;font:1.05rem/1 var(--stamp);color:var(--red);border:4px solid var(--red);padding:7px 12px 8px;
  text-transform:uppercase;transform:rotate(-4deg);background:rgba(255,255,255,.35);letter-spacing:.02em}
.stamp.green{color:var(--green);border-color:var(--green)}
.stamp.big{font-size:1.6rem;border-width:5px}
.print{background:#fff;padding:10px 10px 12px;box-shadow:6px 8px 14px rgba(0,0,0,.28);position:relative;transform:rotate(var(--r,-2deg))}
.print::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:26px;background:var(--tape);transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 1px 2px rgba(0,0,0,.1)}
.print img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover}
.print figcaption,.print .cap{font:1.1rem/1.2 var(--marker);margin-top:8px;text-align:center}
.note{background:var(--yellow);padding:14px 16px;box-shadow:6px 8px 12px rgba(0,0,0,.22);font:1.12rem/1.4 var(--marker);transform:rotate(-1deg);max-width:560px}
.note.warn{background:#ffd9d4}
.note b{font-family:var(--stamp);font-weight:400;color:var(--red);letter-spacing:.02em}
.sheet{background:var(--card);border:3px solid var(--ink);border-radius:4px;padding:18px;box-shadow:6px 8px 16px rgba(32,30,34,.18);min-width:0}
.btn{display:inline-flex;align-items:center;gap:8px;font:1.15rem var(--marker);color:var(--ink);background:#fff;border:3px solid var(--ink);
  border-radius:30px;padding:7px 16px;text-decoration:none;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-1px,-2px);box-shadow:4px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.red{background:var(--red);color:#fff}
.btn svg{width:18px;height:18px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.grid{display:grid;gap:22px}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px 16px;margin:22px 0}
.photos .print:nth-child(3n+2){--r:2deg}
.photos .print:nth-child(3n){--r:-1deg}

/* stick figure */
.stick{width:110px;height:auto;overflow:visible}
.stick line,.stick circle,.stick path{stroke:var(--ink);stroke-width:5;stroke-linecap:round;fill:none}
.stick .arm{transform-origin:50px 62px;animation:point 1.6s steps(4) infinite alternate}
@keyframes point{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
@media (prefers-reduced-motion:reduce){.stick .arm{animation:none}html{scroll-behavior:auto}}

/* tables */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.95rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:8px 10px;border-bottom:2px dashed var(--rule);vertical-align:top}
th{font:1.05rem var(--marker);color:var(--muted)}
td b{font-family:var(--mono)}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 .85rem var(--mono);white-space:nowrap}
.chip i{width:16px;height:7px;border-radius:4px;display:inline-block;background:var(--c)}
code{font-family:var(--mono);font-size:.88em;background:rgba(32,30,34,.07);padding:1px 4px;border-radius:3px}

footer{margin-top:60px;padding:30px 0 50px;border-top:3px solid var(--ink);background:rgba(250,246,236,.9)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* opening: a crumpled ball of paper opens up and flattens into the page (intro.js drives the filter) */
.intro{position:fixed;inset:0;z-index:100;background:#cfc7b6;display:grid;place-items:center;cursor:pointer;overflow:hidden;transition:opacity .3s}
.intro .sheet-in{width:100vw;height:100vh;background:#eee7da url(/paper.jpg) center/cover;filter:url(#crumple);
  display:grid;place-items:center;will-change:transform}
.intro .word{font:700 clamp(2.6rem,11vw,5.5rem)/1 var(--marker);white-space:nowrap}
.intro .word span{color:var(--red)}
.intro.gone{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.intro{display:none}}