:root { color-scheme: light; background: #fff; font-family: Arial, Helvetica, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #fff; }
.stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.letter { position: absolute; top: 1.48%; height: 97.04%; will-change: transform; mix-blend-mode: multiply; user-select: none; }
.letter img { display: block; width: 100%; height: 100%; pointer-events: none; }
.letter-b { left: .8854%; width: 16.667%; }
.letter-a { left: 49.01%; width: 31.771%; }
.letter-d { left: 82.292%; width: 16.667%; }
.dock { position: fixed; z-index: 10; top: clamp(8px, .78125vw, 15px); left: 0; width: 100%; height: 3.7535vw; min-height: 32px; }
.dock-art { display: block; width: 100%; height: auto; pointer-events: none; }
.dock nav { position: absolute; inset: 0; }
.dock a, .dock .about { position: absolute; top: 0; height: 85%; display: block; border-radius: 1px; }
.dock a:focus-visible { outline: 2px solid #b2b2b2; outline-offset: 4px; }
.brand { left: 1.85%; width: 17%; }
.index { left: 77.8%; width: 8%; }
.about { left: 87.7%; width: 9.1%; }
/* Landing cursor: a small dot; difference blend keeps it black on white and white over letters. */
.cursor-dot { display: none; }
@media (pointer: fine) {
  html:has(.cursor-dot), html:has(.cursor-dot) a { cursor: none; }
  .cursor-dot { display: block; position: fixed; z-index: 2147483647; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; transition: width .15s, height .15s, margin .15s, opacity .15s; }
  .cursor-dot.visible { opacity: 1; }
  .cursor-dot.over-link { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
}
@media (max-width: 600px) {
  .dock { top: 10px; height: 40px; border-bottom: 1px solid #b2b2b2; }
  .dock-art { visibility: hidden; }
  .dock a, .dock .about { height: 30px; color: #b2b2b2; text-decoration: none; font-size: 18px; letter-spacing: -1px; }
  .brand { left: 12px; width: 145px; }
  .brand::before { content: 'BAD STUDIO'; }
  .index { left: auto; right: 86px; width: 56px; }
  .index::before { content: 'INDEX'; }
  .about { left: auto; right: 12px; width: 62px; }
  .about::before { content: 'ABOUT'; }
}