/* Layout: portfolio pinned to a design canvas: ruler + grid, a scaled hero
   artboard of draggable stickers, stacked folder-tab project cards. */
:root{
  --paper:#FFFFFF; --ink:#111111; --ink-2:#5E5E5E; --grid:#F0F0F0; --line:#DCDCDC;
  --cyan:#38C5F0; --mint:#A8E5C6; --green:#2EBF7F; --cream:#F6DFA0; --navy:#15235E;
  --yellow:#F0B22F; --pink:#E5245E; --brown:#4E2C25; --orange:#D9441C;
  --pixel:"Pixelify Sans","Silkscreen",ui-monospace,monospace;
  --sans:"Inter Tight","Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",monospace;
  --hand:"Gochi Hand","Comic Sans MS",cursive;
  color-scheme:light;
  --text:#111111;--text-2:#333333;--box:#000000;--boxt:#FFFFFF;--chip:#EDEDED;--hover:#F3F3F3;--tick:#BDBDBD;
}
/* dark mode, switched on by pulling the bulb */
html.night{--paper:#111113;--grid:#1C1C21;--line:#2E2E34;--text:#F2F0EA;--text-2:#B9B6AE;--ink-2:#9C9890;
  --box:#F2F0EA;--boxt:#111111;--chip:#26262B;--hover:#1C1C21;--tick:#4A4A51;color-scheme:dark}
body{transition:background-color .45s ease,color .45s ease}
*{box-sizing:border-box}
body{background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:100px 100px;background-position:18px 0;
  color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:49;background:var(--paper)}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}