@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@500&family=Space+Grotesk:wght@500;700&display=swap');

:root { --ink: #f8f2e9; --paper: #17130f; --orange: #f0a35b; --blue: #8db9cc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; color: var(--ink); background: var(--paper); background-image: radial-gradient(circle at 20% 20%, rgba(240,163,91,.08) 1px, transparent 1px), radial-gradient(circle at 80% 70%, rgba(141,185,204,.08) 1px, transparent 1px); background-size: 23px 23px, 31px 31px; }
.joke-page { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 8vh 24px 12vh; }
.retro-banner { margin-bottom: 24px; padding: 7px 14px; color: var(--paper); background: var(--blue); border: 2px outset var(--ink); font: 700 .68rem 'DM Mono', monospace; letter-spacing: .12em; text-transform: uppercase; animation: banner-blink 3.6s steps(2, end) infinite; }
h1 { position: relative; z-index: 3; margin: 0 0 56px; color: var(--orange); font: 700 clamp(3rem, 9vw, 8rem)/.9 'Space Grotesk', sans-serif; letter-spacing: -.09em; text-align: center; animation: headline-wobble 4s ease-in-out infinite; }
.photo-orbit { position: relative; width: min(88vw, 520px); animation: orbit-float 5s ease-in-out infinite; }
.photo-orbit::before, .photo-orbit::after { position: absolute; inset: 0; content: ''; pointer-events: none; }
.photo-orbit::before { inset: 12px -18px -18px 18px; border: 2px solid var(--orange); transform: rotate(-5deg); animation: outline-spin 9s ease-in-out infinite; }
.photo-orbit::after { inset: -18px 18px 18px -18px; border: 2px solid var(--blue); transform: rotate(5deg); animation: outline-spin 7s ease-in-out infinite reverse; }
figure { position: relative; z-index: 1; margin: 0; padding: 10px; background: var(--ink); box-shadow: 18px 18px 0 var(--orange); transform: rotate(2deg); }
img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.85) contrast(1.08); }
.floaty { position: absolute; z-index: 4; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font-size: 1.7rem; font-style: normal; user-select: none; }
.quote { position: absolute; z-index: 5; padding: 8px 10px; color: var(--paper); background: var(--ink); font: 500 .68rem 'DM Mono', monospace; letter-spacing: .02em; white-space: nowrap; box-shadow: 4px 4px 0 var(--orange); }
.quote-top { top: -32px; left: 50%; transform: translateX(-50%) rotate(-4deg); animation: quote-top-bob 3.2s ease-in-out infinite; }
.quote-left { top: 39%; left: -20%; transform: rotate(-9deg); animation: quote-left-bob 3.8s ease-in-out infinite; }
.quote-right { right: -24%; bottom: 35%; transform: rotate(8deg); animation: quote-right-bob 4.1s ease-in-out infinite; }
.retro-sticker { position: absolute; z-index: 6; padding: 9px 10px; color: var(--paper); background: var(--cream); border: 3px outset var(--ink); font: 700 .62rem/1.05 'DM Mono', monospace; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.sticker-left { left: -26%; bottom: 3%; transform: rotate(-8deg); animation: sticker-shake 5s ease-in-out infinite; }
.sticker-right { right: -25%; top: 3%; color: var(--paper); background: var(--orange); transform: rotate(7deg); animation: sticker-shake 4.5s ease-in-out infinite reverse; }
.floaty-heart { top: 3%; left: -10%; color: var(--ink); background: var(--orange); animation: bob-a 2.8s ease-in-out infinite; }
.floaty-spark { top: 14%; right: -9%; color: var(--paper); background: var(--blue); animation: spin-b 3.4s ease-in-out infinite; }
.floaty-disk { right: -12%; bottom: 18%; background: var(--orange); animation: bob-b 3.8s ease-in-out infinite; }
.floaty-computer { left: -12%; bottom: 14%; background: var(--blue); animation: spin-b 4.2s ease-in-out infinite reverse; }
.floaty-star { left: 42%; bottom: -11%; color: var(--orange); font-size: 2.7rem; animation: star-pop 1.4s ease-in-out infinite alternate; }
.stack-zone { width: min(88vw, 520px); margin-top: 150px; text-align: center; }
.stack-zone h2 { margin: 0 0 28px; color: var(--blue); font: 700 clamp(2.3rem, 7vw, 4.5rem)/.9 'Space Grotesk', sans-serif; letter-spacing: -.09em; transform: rotate(-2deg); }
.linux-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -8px 0 22px; color: var(--ink); font: .68rem 'DM Mono', monospace; }
.terminal-prompt { color: var(--orange); font-weight: 700; }
.linux-badge { padding: 4px 6px; color: var(--paper); background: var(--blue); border: 1px solid var(--ink); font-size: .58rem; transform: rotate(-2deg); }
.linux-badge:last-child { background: var(--cream); transform: rotate(2deg); }

@media (max-width: 600px) {
  .joke-page { width: calc(100% - 20px); margin: 10px auto; padding: 22px 12px 34px; }
  .retro-banner { max-width: 100%; padding: 6px 8px; font-size: .57rem; letter-spacing: .04em; }
  h1 { width: 100%; min-width: 0; margin-bottom: 36px; font-size: clamp(2.35rem, 13vw, 4.8rem); text-align: center; }
  .photo-orbit { width: min(100%, 390px); }
  .quote { max-width: 42%; padding: 6px 7px; font-size: .52rem; white-space: normal; }
  .quote-left { left: -2%; }
  .quote-right { right: -2%; }
  .retro-sticker { padding: 6px 7px; font-size: .47rem; }
  .sticker-left { left: 0; }
  .sticker-right { right: 0; }
  .floaty { width: 40px; height: 40px; font-size: 1.15rem; }
  .floaty-heart { left: -3%; }
  .floaty-spark { right: -3%; }
  .floaty-disk { right: -4%; }
  .floaty-computer { left: -4%; }
  .stack-zone { width: 100%; margin-top: 96px; }
  .stack-zone { justify-self: stretch; }
  .stack-zone h2 { width: 100%; min-width: 0; font-size: clamp(2rem, 11vw, 3.6rem); text-align: center; }
  .linux-note { gap: 5px; padding: 7px 5px; font-size: .56rem; line-height: 1.8; }
  .linux-badge { font-size: .5rem; }
  .stack-game { padding: 7px 7px 12px; }
  .stack-canvas { height: min(68vw, 290px); min-height: 220px; }
  .stack-status { top: 15px; left: 17px; font-size: .62rem; }
  #drop-button { min-height: 44px; padding: 10px 18px; font-size: .68rem; }
}

@media (max-width: 380px) {
  .joke-page { padding-left: 8px; padding-right: 8px; }
  .quote { font-size: .47rem; }
  .retro-sticker { font-size: .42rem; }
  .floaty { width: 34px; height: 34px; font-size: .95rem; }
  .stack-canvas { min-height: 200px; }
}
.stack-game { position: relative; padding: 14px 14px 18px; border: 2px solid var(--blue); background: #201b17; box-shadow: 12px 12px 0 var(--blue); }
.stack-canvas { width: 100%; height: 360px; overflow: hidden; cursor: pointer; }
.stack-canvas canvas { display: block; width: 100%; height: 100%; }
.stack-status { position: absolute; top: 24px; left: 27px; z-index: 2; color: var(--ink); font: 500 .72rem 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
#drop-button { border: 0; padding: 12px 18px; color: var(--paper); background: var(--orange); cursor: pointer; font: 700 .78rem 'DM Mono', monospace; text-transform: uppercase; transition: transform .15s ease, background .15s ease; }
#drop-button:hover { background: var(--ink); transform: rotate(-2deg) scale(1.04); }
#drop-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.retro-footer { margin: 86px 0 0; color: var(--muted); font: .65rem 'DM Mono', monospace; letter-spacing: .03em; text-align: center; }
.retro-footer span { color: var(--orange); }
@keyframes headline-wobble { 0%, 100% { transform: rotate(-1deg) scale(1); } 50% { transform: rotate(1deg) scale(1.025); } }
@keyframes orbit-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }
@keyframes outline-spin { 0%, 100% { border-radius: 2% 8% 4% 7%; } 50% { border-radius: 8% 2% 9% 3%; } }
@keyframes bob-a { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-13px) rotate(9deg); } }
@keyframes bob-b { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(12px) rotate(-13deg); } }
@keyframes spin-b { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(18deg) scale(1.15); } }
@keyframes star-pop { from { transform: scale(.8) rotate(-12deg); } to { transform: scale(1.2) rotate(12deg); } }
@keyframes quote-top-bob { 0%, 100% { transform: translateX(-50%) rotate(-4deg) translateY(0); } 50% { transform: translateX(-50%) rotate(3deg) translateY(-7px); } }
@keyframes quote-left-bob { 0%, 100% { transform: rotate(-9deg) translate(0, 0); } 50% { transform: rotate(-4deg) translate(-5px, -8px); } }
@keyframes quote-right-bob { 0%, 100% { transform: rotate(8deg) translate(0, 0); } 50% { transform: rotate(13deg) translate(5px, -8px); } }
@keyframes banner-blink { 0%, 75% { opacity: 1; } 76%, 82% { opacity: .45; } 83%, 100% { opacity: 1; } }
@keyframes sticker-shake { 0%, 90%, 100% { translate: 0 0; } 93% { translate: -3px 1px; } 96% { translate: 3px -1px; } }
@media (max-width: 600px) {
  .joke-page { padding-top: 10vh; }
  h1 { margin-bottom: 42px; }
  .floaty { width: 46px; height: 46px; font-size: 1.35rem; }
  .quote { font-size: .57rem; }
  .quote-left { left: -7%; }
  .quote-right { right: -8%; }
  .retro-sticker { font-size: .5rem; }
  .sticker-left { left: -4%; }
  .sticker-right { right: -4%; }
  .floaty-heart { left: -6%; }
  .floaty-spark, .floaty-disk { right: -5%; }
  .floaty-computer { left: -6%; }
  .stack-zone { margin-top: 120px; }
  .stack-canvas { height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 600px) {
  body { min-width: 0; }
  .joke-page { width: calc(100% - 20px); margin: 10px auto; padding: 22px 12px 34px; }
  .retro-banner { max-width: 100%; margin-bottom: 18px; padding: 6px 8px; font-size: .57rem; letter-spacing: .04em; }
  h1 { max-width: 100%; margin-bottom: 36px; font-size: clamp(2.6rem, 14vw, 4.8rem); line-height: .92; letter-spacing: -.1em; overflow-wrap: anywhere; }
  .photo-orbit { width: min(100%, 390px); }
  figure { padding: 5px; box-shadow: 6px 6px 0 #000080; }
  .quote { max-width: 42%; padding: 6px 7px; font-size: .52rem; white-space: normal; }
  .quote-top { top: -29px; }
  .quote-left { left: -2%; }
  .quote-right { right: -2%; }
  .retro-sticker { padding: 6px 7px; font-size: .47rem; }
  .sticker-left { left: 0; bottom: 2%; }
  .sticker-right { right: 0; top: 2%; }
  .floaty { width: 40px; height: 40px; font-size: 1.15rem; }
  .floaty-heart { left: -3%; }
  .floaty-spark { right: -3%; }
  .floaty-disk { right: -4%; }
  .floaty-computer { left: -4%; }
  .floaty-star { left: 40%; bottom: -9%; font-size: 2rem; }
  .stack-zone { width: 100%; margin-top: 96px; }
  .stack-zone h2 { margin-bottom: 22px; font-size: clamp(2.1rem, 11vw, 3.6rem); }
  .linux-note { gap: 5px; margin-bottom: 16px; padding: 7px 5px; font-size: .56rem; line-height: 1.8; }
  .linux-badge { font-size: .5rem; }
  .stack-game { padding: 7px 7px 12px; box-shadow: 5px 5px 0 #000080; }
  .stack-canvas { height: min(68vw, 290px); min-height: 220px; }
  .stack-status { top: 15px; left: 17px; font-size: .62rem; }
  #drop-button { min-height: 44px; padding: 10px 18px; font-size: .68rem; }
}

@media (max-width: 380px) {
  .joke-page { padding-left: 8px; padding-right: 8px; }
  .quote { font-size: .47rem; }
  .retro-sticker { font-size: .42rem; }
  .floaty { width: 34px; height: 34px; font-size: .95rem; }
  .stack-canvas { min-height: 200px; }
}

/* early-2000s web mode */
:root { --ink: #000033; --paper: #c0c0c0; --orange: #ffff00; --blue: #000080; --cream: #ffffff; }
body { color: var(--ink); background: #008080; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px); font-family: Tahoma, Verdana, Arial, sans-serif; }
.joke-page { width: min(92vw, 760px); margin: 24px auto; padding: 28px 28px 44px; border: 4px ridge #eeeeee; background: var(--paper); box-shadow: 8px 8px 0 #003333; }
.retro-banner { margin: 0 auto 18px; padding: 6px 12px; color: #ffffff; background: linear-gradient(#3366cc, #000066); border: 3px outset #eeeeee; font-family: 'Courier New', monospace; letter-spacing: .08em; }
h1 { margin-bottom: 44px; color: #000099; font-family: Arial Black, Impact, sans-serif; font-size: clamp(2.8rem, 8vw, 6.6rem); letter-spacing: -.08em; text-shadow: 3px 3px 0 #ffffff; }
.photo-orbit { width: min(82vw, 460px); }
.photo-orbit::before, .photo-orbit::after { border-style: dashed; }
figure { padding: 8px; background: #eeeeee; border: 4px ridge #ffffff; box-shadow: 10px 10px 0 #000080; transform: rotate(1deg); }
img { border: 2px solid #000033; filter: saturate(.75) contrast(1.08); }
.quote { color: #000033; background: #ffff99; border: 2px outset #ffffff; box-shadow: 3px 3px 0 #000033; font-family: Arial, sans-serif; font-weight: 700; }
.retro-sticker { color: #000033; background: #ffff00; border: 3px outset #ffffff; box-shadow: 3px 3px 0 #000033; }
.floaty { border: 2px outset #ffffff; border-radius: 0; }
.floaty-heart, .floaty-disk { background: #ff66cc; }
.floaty-spark, .floaty-computer { background: #66ffff; }
.floaty-star { color: #000080; }
.stack-zone { margin-top: 120px; padding-top: 18px; border-top: 4px ridge #ffffff; }
.stack-zone h2 { color: #000099; font-family: Arial Black, Impact, sans-serif; text-shadow: 2px 2px #ffffff; }
.linux-note { color: #00ff00; padding: 8px; background: #000000; border: 3px inset #eeeeee; font-family: 'Courier New', monospace; }
.linux-badge { color: #000000; background: #00ff00; border: 2px outset #eeeeee; }
.stack-game { padding: 10px 10px 14px; border: 4px ridge #ffffff; background: #222222; box-shadow: 7px 7px 0 #000080; }
.stack-status { color: #00ff00; font-family: 'Courier New', monospace; }
#drop-button { border: 3px outset #ffffff; color: #000033; background: #dddddd; font-family: Tahoma, sans-serif; font-weight: 700; }
#drop-button:active { border-style: inset; }

@media (max-width: 600px) {
  .joke-page { width: calc(100% - 20px); margin: 10px auto; padding: 22px 12px 34px; }
  h1 { width: 100%; min-width: 0; margin-bottom: 36px; font-size: clamp(2.35rem, 13vw, 4.8rem); line-height: .95; letter-spacing: -.025em; word-spacing: .02em; text-align: center; overflow-wrap: anywhere; }
  .stack-zone { width: 100%; justify-self: stretch; }
  .stack-zone h2 { width: 100%; min-width: 0; margin-bottom: 22px; font-size: clamp(2rem, 11vw, 3.6rem); line-height: .98; letter-spacing: -.025em; word-spacing: .02em; text-align: center; }
  .photo-orbit { width: min(100%, 390px); }
  .quote { max-width: 42%; padding: 6px 7px; font-size: .52rem; white-space: normal; }
  .quote-left { left: -2%; }
  .quote-right { right: -2%; }
  .retro-sticker { padding: 6px 7px; font-size: .47rem; }
  .sticker-left { left: 0; }
  .sticker-right { right: 0; }
  .floaty { width: 40px; height: 40px; font-size: 1.15rem; }
  .floaty-heart { left: -3%; }
  .floaty-spark { right: -3%; }
  .floaty-disk { right: -4%; }
  .floaty-computer { left: -4%; }
  .linux-note { gap: 5px; padding: 7px 5px; font-size: .56rem; line-height: 1.8; }
  .linux-badge { font-size: .5rem; }
  .stack-game { padding: 7px 7px 12px; }
  .stack-canvas { height: min(68vw, 290px); min-height: 220px; }
  .stack-status { top: 15px; left: 17px; font-size: .62rem; }
  #drop-button { min-height: 44px; padding: 10px 18px; font-size: .68rem; }
}