/* DedZedoffishal was here, if you are looking here you missed the ID-10-T error */
/* FISH HWB */
:root{
  --paper:#f3efe6; --paper-2:#e9e3d6; --ink:#161413; --ink-2:#4a4540; --ink-3:#8a837a;
  --pink:#ff2b91; --cyan:#12b3d6; --yellow:#ffcf3f; --card:#fff; --shadow:var(--ink);
  --max:1160px;
  --head:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:linear-gradient(var(--paper) 50%,#02060e 50%)}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--head);font-variation-settings:"wdth" 100}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(var(--max),calc(100% - 32px));margin:auto}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--ink);color:var(--paper);padding:8px 14px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
::selection{background:var(--pink);color:#fff}
p{margin:0 0 14px}

/* header */
.site-head{border-bottom:2px solid var(--ink);background:var(--paper);color:var(--ink);position:sticky;top:0;z-index:20;transition:background .4s,color .4s,border-color .4s}
.site-head.deep{background:#06152a}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:900 1.25rem/1 var(--head);font-variation-settings:"wdth" 80;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.brand img{width:36px;height:36px}
.links{display:flex;flex-wrap:wrap;justify-content:flex-end}
.links a{font:500 .82rem/1 var(--mono);text-transform:lowercase;text-decoration:none;padding:8px 10px}
.links a:hover{background:var(--ink);color:var(--paper)}

/* intro */
.intro{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;padding:72px 0 64px}
.intro h1{font:900 clamp(2.8rem,7.5vw,6rem)/.9 var(--head);font-variation-settings:"wdth" 72;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 28px}
/* DED ZED: blue water sloshing inside the letters */
.wave{color:#0d4fb8;-webkit-text-stroke:2px #0a3a8a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 38 Q25 22 50 38 T100 38 T150 38 T200 38 V100 H0Z' fill='%231a6fe0'/%3E%3C/svg%3E") 0 0/200px 100% repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q25 44 50 30 T100 30 T150 30 T200 30 V100 H0Z' fill='%2362b6ff'/%3E%3C/svg%3E") 0 0/260px 100% repeat-x,
    #cfe9ff;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  display:inline-block;padding:0 .04em;will-change:background-position;
  animation:slosh 3.2s linear infinite}
@keyframes slosh{to{background-position:200px 0,-260px 0,0 0}}
.intro p{font-size:1.2rem;max-width:36rem;color:var(--ink-2)}
.intro p b{color:var(--ink)}
.intro .lead{font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.35;color:var(--ink);font-weight:600;max-width:32rem}
.facts{display:grid;grid-template-columns:1fr 1fr;margin:30px 0 0;max-width:36rem;border-top:2px solid var(--ink)}
.facts div{padding:12px 0;border-bottom:2px solid var(--ink)}
.facts div:nth-child(odd){padding-right:16px}
.facts dt{font:400 .75rem/1 var(--mono);color:var(--ink-3);margin-bottom:6px}
.facts dd{margin:0;font-weight:800}
.facts a{text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.sticker{position:relative;justify-self:center;width:min(360px,100%)}
.sticker img{transform:rotate(-7deg);filter:drop-shadow(6px 8px 0 rgba(22,20,19,.18))}
.sticker figcaption{font:400 .78rem/1.4 var(--mono);color:var(--ink-3);text-align:center;margin-top:14px}

.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.button{display:inline-block;font:700 .95rem/1 var(--head);text-decoration:none;padding:14px 20px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--pink);transition:transform .12s,box-shadow .12s}
.button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pink)}
.button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pink)}
.button.alt{background:transparent;color:var(--ink);box-shadow:4px 4px 0 var(--shadow)}
.button.alt:hover{box-shadow:6px 6px 0 var(--shadow)}

/* what I do strip */
.does{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.does a{display:block;padding:26px 24px 28px;text-decoration:none;border-right:2px solid var(--ink)}
.does a:last-child{border-right:0}
.does a:hover{background:var(--ink);color:var(--paper)}
.does a:hover span{color:var(--yellow)}
.does span{font:500 .75rem/1 var(--mono);color:var(--pink)}
.does h2{font:900 2rem/1 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;margin:12px 0 8px}
.does p{margin:0;font-size:.95rem;opacity:.8}

/* sections */
section{position:relative;padding:90px 0;scroll-margin-top:62px;color:var(--ink)}

/* the dive: each band picks up where the last one left off */
.deep{--ink:#eef4f5;--ink-2:rgba(238,244,245,.8);--ink-3:rgba(238,244,245,.55);--paper:#06152a;--paper-2:rgba(255,255,255,.1);--card:rgba(255,255,255,.05);--shadow:rgba(0,0,0,.5)}
.surface{background:linear-gradient(var(--paper),#e3eee8);padding-bottom:70px}
#stream{background:linear-gradient(#e3eee8,#b4dcda)}
#videos{background:linear-gradient(#2b7c95,#1d5f7c)}
#music{background:linear-gradient(#1d5f7c,#14476a)}
#models{background:linear-gradient(#0c2c4c,#0a2440)}
#code{background:linear-gradient(#0a2440,#08203a)}
#devlog{background:linear-gradient(#08203a,#071a31)}
#discord{background:linear-gradient(#040d1c,#02060e)}
.zone{height:220px;display:grid;place-items:center;font:500 .8rem/1.5 var(--mono);text-align:center;letter-spacing:.04em}
.zone span{display:block;padding:10px 16px;border-top:1.5px dashed currentColor;border-bottom:1.5px dashed currentColor}
.zone b{display:block;font:900 1.3rem/1.1 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;letter-spacing:0}
.zone-1{background:linear-gradient(#b4dcda,#2b7c95);color:#0d2e3a}
.zone-2{background:linear-gradient(#14476a,#0c2c4c);color:#cfe3ea}
.zone-3{background:linear-gradient(#071a31,#040d1c);color:#9fb3c4}
/* marine snow */
.snow:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#fff,transparent),radial-gradient(1.5px 1.5px at 160px 60px,#cfe,transparent),radial-gradient(1px 1px at 230px 170px,#fff,transparent);
  background-size:260px 220px}
.snow>.wrap{position:relative}
.sec-head{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:24px;margin-bottom:34px}
.num{font:500 .85rem/1 var(--mono);color:var(--pink);padding-bottom:8px}
.sec-head h2{font:900 clamp(2.2rem,5.5vw,4rem)/.9 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;margin:0}
.sec-head p{margin:0;max-width:24rem;color:var(--ink-2);font-size:.98rem;text-align:right}
.more{font:500 .85rem/1 var(--mono);text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:3px}
.more:hover{background:var(--pink);color:#fff}

.frame{border:2px solid var(--ink);background:#000;box-shadow:8px 8px 0 var(--shadow)}
iframe{display:block;width:100%;border:0}
.ratio{aspect-ratio:16/9}
.ratio iframe{height:100%}

.stream{display:grid;grid-template-columns:1fr 320px;gap:24px}
.stream .chat iframe{height:100%;min-height:400px}
.caption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 .8rem/1.4 var(--mono);color:var(--ink-3);margin-top:18px}

.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.artist h3{font:800 1.4rem/1 var(--head);margin:0 0 4px}
.artist .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.artist small{font:400 .78rem/1 var(--mono);color:var(--ink-3)}
.artist iframe{height:352px;background:#121212}

/* 3d */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.piece{border:2px solid var(--ink);background:var(--card)}
.piece img{aspect-ratio:1;object-fit:cover;width:100%;border-bottom:2px solid var(--ink);background:var(--paper-2)}
.piece div{padding:12px 14px;display:flex;justify-content:space-between;gap:10px;font:400 .8rem/1.3 var(--mono)}
.piece b{font-family:var(--head);font-size:.95rem}
.soon{grid-column:1/-1;border:2px dashed var(--ink-3);display:grid;place-items:center;text-align:center;padding:30px;aspect-ratio:auto;min-height:200px;color:var(--ink-2);font:400 .88rem/1.5 var(--mono)}
.soon strong{display:block;font:800 1.2rem/1.2 var(--head);color:var(--ink);margin-bottom:6px}

/* code */
.projects{display:grid;grid-template-columns:1.3fr 1fr;gap:28px}
.project{border:2px solid var(--ink);background:var(--card);padding:28px;box-shadow:8px 8px 0 var(--cyan)}
.project h3{font:900 2.2rem/1 var(--head);font-variation-settings:"wdth" 80;text-transform:uppercase;margin:0 0 6px}
.project .tags{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.project .tags span{font:500 .72rem/1 var(--mono);border:1.5px solid var(--ink);padding:5px 8px}
.project p{color:var(--ink-2)}
.list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.list a{display:grid;grid-template-columns:1fr auto;gap:12px;padding:18px 4px;border-bottom:2px solid var(--ink);text-decoration:none}
.list a:hover{background:var(--ink);color:var(--paper)}
.list b{font-weight:800}
.list small{display:block;color:var(--ink-3);font:400 .8rem/1.4 var(--mono);margin-top:3px}
.list a:hover small{color:var(--paper-2)}
.list .go{font-family:var(--mono);align-self:center}

/* crew */
.crew{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.crew h3{font:900 2.4rem/.95 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;margin:0 0 18px}
.crew p{color:var(--ink-2);max-width:34rem}
.signed{margin-top:26px;padding-top:16px;border-top:2px solid var(--ink);display:inline-block;font:400 .82rem/1.5 var(--mono)}
.signed b{display:block;font:800 1.05rem/1.3 var(--head)}
.crew .frame iframe{height:440px;background:#2b2d31}

/* footer */
footer{padding:36px 0 44px;font:400 .8rem/1.5 var(--mono);color:var(--ink-2)}
.floor{background:#02060e;border-top:2px dashed rgba(238,244,245,.25);padding-top:60px}
.floor .bottom{text-align:center;margin-bottom:50px}
.floor .bottom img{width:64px;margin:0 auto 14px;transform:rotate(8deg)}
.floor .bottom b{display:block;font:900 1.6rem/1.1 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot a{margin-left:16px;text-decoration:none}
.foot a:hover{color:var(--pink)}

/* sub pages (developer, legal, callbacks, 404) */
.eyebrow{font:500 .8rem/1 var(--mono);color:var(--pink);margin-bottom:16px}
.legal main{padding:70px 0 90px}
.legal article{max-width:780px}
.legal h1{font:900 clamp(2.6rem,7vw,4.4rem)/.92 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;margin:0 0 24px}
.legal h2{font:800 1.5rem/1.2 var(--head);margin:44px 0 10px;padding-top:18px;border-top:2px solid var(--ink)}
.legal h3{font:800 1.15rem/1.3 var(--head);margin:26px 0 8px}
.legal p,.legal li{color:var(--ink-2)}
.legal article a{color:var(--ink);text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.legal footer{border-top:2px solid var(--ink)}
code,pre{font-family:var(--mono);font-size:.88em}
code{background:var(--paper-2);padding:2px 6px;border:1px solid rgba(22,20,19,.15)}
pre{background:var(--ink);color:var(--paper);padding:16px 18px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.callback{min-height:80vh;display:grid;place-items:center;padding:60px 0}
.callback-card{max-width:680px;margin:auto;padding:36px;border:2px solid var(--ink);background:var(--card);box-shadow:10px 10px 0 var(--ink)}
.callback-card h1{font:900 clamp(2.2rem,6vw,3.4rem)/.95 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;margin:0 0 16px}
.small{font-size:.9rem;color:var(--ink-3)}

/* responsive */
@media (max-width:960px){
  .intro{grid-template-columns:1fr;gap:20px;padding-top:40px}
  .sticker{order:-1;width:200px;justify-self:start}
  .stream,.projects,.crew{grid-template-columns:1fr}
  .stream .chat{display:none}
  .gallery,.repo-grid{grid-template-columns:1fr 1fr}
  .sec-head{grid-template-columns:auto 1fr}
  .sec-head p,.sec-head .more{grid-column:1/-1;justify-self:start;text-align:left}
}
@media (max-width:680px){
  body{font-size:16px}
  section{padding:64px 0}
  .links a:nth-child(2),.links a:nth-child(3),.links a:nth-child(6),.links a:nth-child(7){display:none}
  .links{flex-wrap:nowrap}
  .links a{padding:8px 5px;font-size:.78rem}
  .does{grid-template-columns:1fr}
  .does a{border-right:0;border-bottom:2px solid var(--ink)}
  .does a:last-child{border-bottom:0}
  .two,.gallery,.repo-grid{grid-template-columns:1fr}
  .sound span{display:none}
  .sound{padding:5px 7px}
  .abyss .bottle span{max-width:9em}
  .frame{box-shadow:5px 5px 0 var(--shadow)}
  .zone{height:170px}
  .foot{flex-direction:column;align-items:flex-start}
  .foot a{margin:0 16px 0 0}
  .callback-card{padding:24px;box-shadow:6px 6px 0 var(--ink)}
  .legal .links a{display:inline-block}
}
/* sea life */
section>.wrap{position:relative;z-index:1}
.critters{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.critter{position:absolute;left:0;width:var(--size);animation:swim linear infinite}
.critter.back{animation-name:swimback}
.critter svg{display:block;width:100%;height:auto;overflow:visible;animation:wiggle 1.6s ease-in-out infinite alternate}
.critter .tail,.angler .tail{transform-box:fill-box;transform-origin:100% 50%;animation:tail .45s ease-in-out infinite alternate}
.critter .fin,.angler .fin{transform-box:fill-box;transform-origin:100% 0;animation:fin .7s ease-in-out infinite alternate}
.critter.lantern .tail{animation-duration:.35s}
.angler .tail{animation-duration:.9s}
.critter .bell{transform-box:fill-box;transform-origin:50% 0;animation:pulse 2.4s ease-in-out infinite}
.critter .tentacles{transform-box:fill-box;transform-origin:50% 0;animation:sway 3.2s ease-in-out infinite alternate}
.critter.jelly{filter:drop-shadow(0 0 10px rgba(255,120,200,.35))}
.critter .lights{filter:drop-shadow(0 0 3px #7ff6ff) drop-shadow(0 0 6px rgba(127,246,255,.6));animation:twinkle 3s ease-in-out infinite}
.critter.clown,.critter.tang{filter:drop-shadow(3px 4px 0 rgba(22,20,19,.18))}
@keyframes tail{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes fin{from{transform:rotate(-10deg)}to{transform:rotate(18deg)}}
@keyframes pulse{0%,100%{transform:scale(1,1)}40%{transform:scale(1.07,.9)}}
@keyframes sway{from{transform:skewX(-6deg)}to{transform:skewX(6deg)}}
@keyframes twinkle{50%{opacity:.6}}
.critter.jelly svg{animation:bob 4s ease-in-out infinite alternate}
@keyframes swim{from{transform:translateX(-140px)}to{transform:translateX(calc(100vw + 140px))}}
@keyframes swimback{from{transform:translateX(calc(100vw + 140px)) scaleX(-1)}to{transform:translateX(-140px) scaleX(-1)}}
@keyframes wiggle{from{transform:rotate(-3deg) translateY(-2px)}to{transform:rotate(3deg) translateY(2px)}}
@keyframes bob{from{transform:translateY(-14px) scaleY(1.05)}to{transform:translateY(14px) scaleY(.94)}}
.swarm{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
.swarm .critter{animation-iteration-count:1;animation-fill-mode:both;transform:translateX(-140px)}

/* the abyss: pitch black apart from the anglerfish's lure */
.abyss{position:relative;height:max(90vh,560px);overflow:hidden;background:linear-gradient(#071a31,#02050c 18%,#02050c 82%,#040d1c);touch-action:pan-y}
.abyss .found{position:absolute;z-index:1}
.abyss .bones{width:120px}
.abyss .bottle{display:flex;align-items:center;gap:10px;font:400 .8rem/1.3 var(--mono);color:#cfe0d6}
.abyss .bottle svg{width:90px}
.abyss .coin-lost{width:16px;height:16px;border-radius:50%;background:#e0b64a;box-shadow:inset -3px -3px 0 #a07a1a}
.abyss .glow{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle 200px at var(--lx,50%) var(--ly,50%),rgba(255,226,140,.16),transparent 70%)}
.abyss .dark{position:absolute;inset:0;z-index:2;pointer-events:none;background:#010208;
  -webkit-mask:radial-gradient(circle 170px at var(--lx,50%) var(--ly,50%),transparent 30%,#000 100%);
  mask:radial-gradient(circle 170px at var(--lx,50%) var(--ly,50%),transparent 30%,#000 100%)}
.abyss .label{position:absolute;z-index:3;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;text-align:center;font:500 .8rem/1.5 var(--mono);color:rgba(159,179,196,.4);pointer-events:none}
.abyss .label b{display:block;font:900 1.3rem/1.1 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase}
.angler{position:absolute;left:0;top:0;width:180px;height:110px;transform-origin:0 0;z-index:3;pointer-events:none}
.angler .lure{filter:drop-shadow(0 0 6px #ffe27a) drop-shadow(0 0 14px rgba(255,226,122,.7));animation:flicker 2.6s ease-in-out infinite}
@keyframes flicker{50%{opacity:.75}}

/* treasure on the sea floor */
.floor{position:relative}
.seabed{position:absolute;left:0;right:0;top:-2px;height:34px;background:radial-gradient(60% 100% at 20% 100%,#1c1a16 60%,transparent 61%),radial-gradient(50% 100% at 78% 100%,#1c1a16 60%,transparent 61%);pointer-events:none}
.chest{position:absolute;right:max(16px,calc(50% - 560px));top:-44px;width:78px;padding:0;border:0;background:none;cursor:pointer;z-index:2}
.chest svg{display:block;width:100%;overflow:visible}
.chest .lid{transform-origin:8px 34px;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.chest.open .lid{transform:rotate(-38deg)}
.chest:hover .lid{transform:rotate(-8deg)}
.chest.open:hover .lid{transform:rotate(-38deg)}
.coin{position:absolute;left:44%;top:30%;width:12px;height:12px;border-radius:50%;background:#ffd24a;box-shadow:inset -2px -2px 0 #b8860b;animation:coin 1.4s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes coin{to{transform:translate(var(--dx),var(--dy));opacity:0}}

/* ID10T */
.glitch{animation:glitch .6s steps(2) 1}
@keyframes glitch{0%{transform:translate(0)}20%{transform:translate(-6px,3px);filter:hue-rotate(90deg)}40%{transform:translate(5px,-2px);filter:invert(1)}60%{transform:translate(-3px,-4px);filter:hue-rotate(-90deg)}80%{transform:translate(4px,2px)}100%{transform:none;filter:none}}

/* sound toggle */
.nav{position:relative}
.sound{font:500 .8rem/1 var(--mono);background:none;color:inherit;border:2px solid currentColor;padding:6px 9px;cursor:pointer;white-space:nowrap}
.sound[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* schedule */
.schedule{margin-top:36px;padding-top:18px;border-top:2px solid var(--ink)}
.schedule h3{font:900 1.5rem/1 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;margin:0 0 14px}
.slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.slots li{display:grid;gap:3px;padding:12px 14px;border:2px solid var(--ink);background:var(--card)}
.slots b{font-weight:800}
.slots span{font:500 .88rem/1.3 var(--mono)}
.slots small{font:500 .72rem/1.3 var(--mono);color:var(--pink);min-height:1em}
.slots li.next{box-shadow:5px 5px 0 var(--pink)}
.slots li.now{background:var(--pink);color:#fff}
.slots li.now small{color:#fff}
.schedule .tz{font:400 .78rem/1.4 var(--mono);color:var(--ink-3);margin:14px 0 0}

/* repos */
.repos{margin-top:44px}
.repos .sub{font:900 1.5rem/1 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;margin:0 0 16px}
.repo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.repo{display:grid;align-content:start;gap:6px;padding:16px 18px;border:2px solid var(--ink);background:var(--card);text-decoration:none}
.repo:hover{background:var(--ink);color:var(--paper)}
.repo b{font-weight:800;word-break:break-word}
.repo p{margin:0;font-size:.92rem;color:var(--ink-2)}
.repo:hover p,.repo:hover small{color:var(--paper)}
.repo small{font:400 .75rem/1.4 var(--mono);color:var(--ink-3)}
.book{max-width:780px}

/* dev log + patreon */
.devlog{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:start}
.patreon{border:2px solid var(--ink);background:var(--card);padding:26px;box-shadow:8px 8px 0 #ff424d;position:sticky;top:90px}
.patreon h3{font:900 2rem/1 var(--head);font-variation-settings:"wdth" 75;text-transform:uppercase;margin:0 0 12px}
.patreon p{color:var(--ink-2);margin:0 0 18px}
.patreon .button{box-shadow:4px 4px 0 #ff424d}
.patreon .button:hover{box-shadow:6px 6px 0 #ff424d}
.patreon small{display:block;margin-top:14px;font:400 .75rem/1.4 var(--mono);color:var(--ink-3)}
.log-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.log-tags button{font:500 .75rem/1 var(--mono);background:none;color:var(--ink);border:1.5px solid var(--ink);padding:6px 10px;cursor:pointer}
.log-tags button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.posts{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.post{padding:20px 0 22px;border-bottom:2px solid var(--ink)}
.post-meta{display:flex;gap:12px;align-items:center;font:500 .75rem/1 var(--mono);color:var(--ink-3);margin-bottom:8px}
.post-meta .tag{color:var(--paper);background:var(--pink);padding:3px 7px}
.post-meta .tag.locked{background:#ff424d;color:#fff}
.posts-empty{margin:0;padding:20px 0;border-bottom:2px solid var(--ink);color:var(--ink-2);font:400 .9rem/1.5 var(--mono)}
.post h3{font:800 1.3rem/1.2 var(--head);margin:0 0 6px}
.post p{margin:0;color:var(--ink-2);white-space:pre-line}
.post a{display:inline-block;margin-top:10px}
.posts-more{margin-top:18px}
@media (max-width:960px){.devlog{grid-template-columns:1fr}.patreon{position:static}}

/* depth gauge */
.gauge{position:fixed;right:18px;top:50%;z-index:15;transform:translateY(-50%);display:flex;align-items:center;gap:10px;font:500 .72rem/1.3 var(--mono);color:var(--ink);pointer-events:none;transition:color .4s}
.gauge.deep{color:#eef4f5}
.gauge .track{position:relative;width:2px;height:220px;background:currentColor;opacity:.35}
.gauge .dot{position:absolute;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--pink);border:2px solid currentColor}
.gauge .read{order:-1;text-align:right;min-width:8.5em}
@media (min-width:1481px){.gauge{top:40%}}
.gauge .read b{display:block;font:900 1.25rem/1 var(--head);font-variation-settings:"wdth" 75}
@media (max-width:1480px){.gauge{top:auto;bottom:14px;right:auto;left:14px;transform:none;padding:8px 10px;background:var(--paper);border:2px solid currentColor}.gauge.deep{background:#06152a}.gauge .track{display:none}.gauge .read{min-width:0;text-align:left}}
/* Cube'z, the head in the corner */
.buddy{position:fixed;right:16px;bottom:16px;z-index:40;width:120px;height:120px;transition:opacity .6s,transform .6s}
.buddy.gone{opacity:0;transform:translateY(40px);pointer-events:none}
.buddy.dragging{transition:none}
.buddy-head{position:relative;width:100%;height:100%;padding:0;border:0;background:none;cursor:grab;border-radius:50%;touch-action:none}
.buddy.dragging .buddy-head{cursor:grabbing}
.buddy-head canvas{width:100%;height:100%;display:none;filter:drop-shadow(3px 4px 0 rgba(22,20,19,.35))}
.buddy-head img{width:78%;margin:11%;transform:rotate(-6deg)}
.buddy.ready:not(.flat) canvas{display:block}
.buddy.ready:not(.flat) img{display:none}
.buddy.live .buddy-head:after{content:"LIVE";position:absolute;top:6px;left:0;font:700 .65rem/1 var(--mono);letter-spacing:.08em;background:#1a6fe0;color:#fff;padding:4px 6px}
.bubble{position:absolute;right:20px;bottom:calc(100% + 10px);width:max-content;max-width:260px;background:#f3efe6;color:#161413;border:2px solid #161413;box-shadow:4px 4px 0 #1a6fe0;padding:12px 34px 12px 14px;font:400 .82rem/1.45 var(--mono)}
.bubble:after{content:"";position:absolute;right:26px;bottom:-9px;width:14px;height:14px;background:#f3efe6;border-right:2px solid #161413;border-bottom:2px solid #161413;transform:rotate(45deg)}
.buddy.below .bubble{bottom:auto;top:calc(100% + 10px)}
.buddy.below .bubble:after{bottom:auto;top:-9px;transform:rotate(225deg)}
.buddy.lefty .bubble{right:auto;left:20px}
.buddy.lefty .bubble:after{right:auto;left:26px}
.bubble[hidden]{display:none}
.bubble p{margin:0 0 8px}
.bubble p:only-of-type:last-of-type{margin:0}
.bubble-link[hidden]{display:none}
.bubble-link{font-weight:500;color:#0d4fb8;text-decoration-color:#1a6fe0;text-decoration-thickness:2px;text-underline-offset:3px}
.bubble-link:after{content:" →"}
.bubble-x{position:absolute;top:4px;right:6px;border:0;background:none;font:400 1.2rem/1 var(--mono);color:#161413;cursor:pointer;padding:4px}
@media (max-width:680px){.buddy{right:10px;bottom:10px;width:88px;height:88px}.bubble{max-width:min(230px,calc(100vw - 40px))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.wave{animation-duration:9s}.critters,.swarm{display:none}.glitch{animation:none}}