/* DYOR Collective Labs: shared skin for the homepage and info pages (matches live /hello v3). In-house, no CDN. */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:300 800;font-stretch:75% 100%;font-display:swap;src:url(/fonts/bricolage-var.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-700.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jbmono-500.woff2) format('woff2')}
:root{
  --green:#1F4D3A;--forest:#173D2E;--pine:#0F2A1F;--night:#0C2219;
  --leaf:#EEF5EF;--sage:#B9D4C4;--rule:#3A6E57;--honey:#F2B65E;--ink:#0F241A;--studio:#FF6A13;
  --display:'Bricolage Grotesque',Georgia,sans-serif;--body:'Atkinson Hyperlegible',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5vw,72px);--ease:cubic-bezier(.2,.8,.2,1);--snap:cubic-bezier(.7,0,.2,1)
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--night)}
body{background:var(--forest);color:var(--leaf);font:17px/1.6 var(--body);overflow-x:hidden}
a{color:inherit}img,svg{display:block}
:focus-visible{outline:3px solid var(--honey);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:20;background:var(--leaf);color:var(--green);padding:10px 14px;border-radius:8px;font-weight:700}
.skip:focus{left:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font:700 16px/1 var(--body);text-decoration:none;border:0;cursor:pointer;background:var(--leaf);color:var(--green);transition:background .2s,color .2s,transform .2s var(--ease)}
.btn:hover{background:var(--honey);color:var(--pine);transform:translateY(-2px)}
.txt{font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.txt:hover{text-decoration-thickness:3px;text-decoration-color:var(--honey)}
.mono{font:500 12.5px/1.4 var(--mono);color:var(--sage)}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(238,245,239,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(238,245,239,.06) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
/* top bar */
.bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px var(--pad)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 17px/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.mark svg{width:30px;height:34px;flex:none}
.mark small{font:500 15px/1 var(--display);color:var(--sage)}
.bar nav{display:flex;align-items:center;gap:22px;font-size:15px}
.bar nav a{text-decoration:none;color:var(--sage);white-space:nowrap}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--leaf);text-decoration:underline;text-underline-offset:4px}
.bar nav a.pill{color:var(--green);background:var(--leaf);padding:9px 16px;border-radius:999px;font-weight:700;transition:background .2s}
.bar nav a.pill:hover{background:var(--honey);color:var(--pine);text-decoration:none}
/* footer */
footer{background:var(--night);color:var(--sage);border-top:1px solid #23463A;padding:28px var(--pad) 36px;display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;font-size:15px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{text-decoration:none}
footer a:hover{color:var(--leaf);text-decoration:underline}
/* info pages */
.page-top{position:relative;background:var(--green);overflow:hidden;padding-bottom:clamp(40px,6vw,84px)}
.page-top .title{position:relative;z-index:2;padding:clamp(28px,6vw,90px) var(--pad) 0}
.page-top h1{font:800 clamp(44px,8.5vw,120px)/.92 var(--display);letter-spacing:-.045em;max-width:14ch}
.page-top .w{display:inline-block}
.page-top .peek{position:absolute;z-index:1;right:var(--pad);bottom:-38px;width:clamp(110px,14vw,190px);transform:rotate(-8deg)}
.doc{max-width:68ch;margin:0 auto;padding:clamp(40px,6vw,80px) var(--pad) clamp(64px,8vw,110px);box-sizing:content-box}
.doc h1{display:none}
.doc h2{font:800 clamp(26px,3vw,34px)/1.1 var(--display);letter-spacing:-.025em;margin:2em 0 .5em}
.doc h2:first-child{margin-top:0}
.doc p,.doc ul,.doc ol{margin:0 0 1.05em}
.doc ul,.doc ol{padding-left:1.3em}
.doc li{margin:.35em 0}
.doc li::marker{color:var(--honey)}
.doc a{color:var(--leaf);text-decoration:underline;text-decoration-color:var(--honey);text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.doc a:hover{text-decoration-thickness:3px}
.doc strong{color:var(--leaf)}
.doc p{color:#DCE9E0}
.doc .back{margin-top:2.4em;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center}
.doc .back a.btn{text-decoration:none;color:var(--green)}
@keyframes letter{0%{opacity:0;transform:translateY(.3em) scaleY(1.4)}60%{opacity:1;transform:translateY(-.03em) scaleY(.94)}100%{opacity:1;transform:none}}
@keyframes blink{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}
@media (prefers-reduced-motion:no-preference){
  .page-top .w{animation:letter .5s var(--snap) both;animation-delay:calc(var(--i) * 70ms + 120ms)}
  .page-top .peek{animation:peek .9s var(--ease) .5s both}
  .robot .eye.blink{animation:blink .2s ease-in-out}
}
@keyframes peek{from{transform:translateY(70%) rotate(-8deg)}to{transform:rotate(-8deg)}}
.robot{overflow:visible;width:100%;height:auto}
.robot .head{fill:#EEF5EF;stroke:#0F241A;stroke-width:9}
.robot .halo{fill:var(--honey);transform-box:fill-box;transform-origin:center;opacity:0}
.robot .body{transform-box:view-box;transform-origin:125px 250px}
.robot .eye{transform-box:view-box;transform-origin:125px 125px}
.robot .iris{transition:transform .35s var(--ease)}
@media (max-width:640px){
  .bar{padding-top:14px;padding-bottom:6px}
  .bar nav{gap:14px}
  .bar nav .hide-s{display:none}
  .mark small{display:none}
  .page-top .peek{width:74px;bottom:-30px}
  .page-top .title{padding-right:96px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}