@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
:root{--bg:#111;--paper:#eee7da;--ink:#171717;--text:#f5f2eb;--muted:#aaa39a;--red:#ad2525;--yellow:#e1c33d;--line:rgba(255,255,255,.16)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Sans",sans-serif;overflow-x:hidden}img{display:block;width:100%;height:auto}button{font:inherit;cursor:pointer}.grain{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.boot,.chapter{min-height:100dvh;padding:22px 18px 52px;border-bottom:1px solid var(--line)}.boot{display:grid;place-items:center;background:#090909}.wrap{width:min(100%,520px);margin:auto}.narrow{width:min(100%,440px)}.boot-wrap{display:flex;min-height:calc(100dvh - 44px);flex-direction:column;justify-content:center}.eyebrow{margin:0 0 20px;color:var(--muted);font:600 11px/1.4 ui-monospace,monospace;letter-spacing:.14em}.hero,.title,.profile h2,.bigfinal,.birthday{font-family:"Bebas Neue",sans-serif;font-weight:400;text-transform:uppercase}.hero{font-size:clamp(88px,29vw,142px);line-height:.77;margin:0}.hero span{display:block}.scrape{margin-top:12px!important;color:var(--red);font-size:.46em;letter-spacing:-.08em;transform:skewX(-7deg)}.primary,.secondary{position:relative;width:100%;min-height:58px;margin-top:34px;border:2px solid var(--text);background:transparent;color:var(--text);font-weight:700;letter-spacing:.1em}.primary i{position:absolute;left:0;bottom:0;width:0;height:4px;background:var(--red);transition:width 1.2s}.primary.loading i{width:100%}.terminal{margin-top:26px;border:1px solid #4d4d4d;background:#050505;color:#a7ff7a}.terminal b{display:block;padding:8px 10px;border-bottom:1px solid #274623;font:10px ui-monospace,monospace}.terminal pre{min-height:150px;margin:0;padding:12px;font:12px/1.7 ui-monospace,monospace;white-space:pre-wrap}.label{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--muted);font:600 12px ui-monospace,monospace;letter-spacing:.12em}.label span{display:grid;place-items:center;width:34px;height:24px;background:var(--red);color:#fff}.title{font-size:clamp(58px,18vw,94px);line-height:.82;margin:10px 0 28px}.reveal{opacity:0;transform:translateY(22px);transition:.65s}.reveal.in{opacity:1;transform:none}.poster{position:relative;margin:0;background:var(--paper);padding:10px 10px 34px;color:var(--ink);box-shadow:0 16px 40px #0008;transform:rotate(-1.2deg)}.poster img{aspect-ratio:4/5;object-fit:cover}.poster figcaption{position:absolute;left:12px;bottom:10px;font:700 11px ui-monospace,monospace}.tape{position:absolute;width:96px;height:27px;left:50%;top:-13px;transform:translateX(-50%) rotate(-2deg);background:#d8c69cdd}.profile h2{font-size:clamp(64px,21vw,98px);line-height:.82;margin:28px 0 18px}.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{padding:7px 9px;border:1px solid var(--line);font:600 11px ui-monospace,monospace}.grid{display:grid;grid-template-columns:1fr 1fr;margin-top:20px;border-left:1px solid var(--line);border-top:1px solid var(--line)}.grid div{padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font:10px ui-monospace,monospace;color:var(--muted)}.grid b{display:block;margin-top:7px;color:#fff;font:700 16px "IBM Plex Sans"}.readme{display:grid;align-items:center}.paper{padding:30px 24px;background:var(--paper);color:var(--ink);border-left:8px solid var(--red);box-shadow:0 20px 50px #0006;transform:rotate(.4deg)}.paper small{font:700 10px ui-monospace,monospace;color:var(--red)}.paper h2{font:400 58px/.88 "Bebas Neue";margin:24px 0}.paper p{line-height:1.55}.paper strong{display:block;margin-top:25px;font-size:21px}.versions{display:grid;gap:13px}.card{position:relative;padding:18px;border:1px solid var(--line);border-left:5px solid var(--red);background:#1a1a1a}.card small{font:700 11px ui-monospace,monospace}.card h3{font:400 42px/.9 "Bebas Neue";margin:18px 0 10px}.card p{margin:0;color:#c9c4ba}.final-card{background:var(--red)}.final-card h3{font-size:53px;margin-bottom:0}.stats{border-top:1px solid var(--line)}.stats div{padding:16px 0;border-bottom:1px solid var(--line)}.stats span{display:block;color:var(--muted);font:600 11px ui-monospace,monospace}.stats b{display:block;margin:8px 0 10px;font-size:20px}.stats i{display:block;height:8px;background:#2e2e2e}.stats i:after{content:"";display:block;width:var(--w);height:100%;background:var(--red)}.sleep{margin-top:24px;padding:20px;border:2px solid var(--yellow)}.sleep small{color:var(--yellow);font:600 11px ui-monospace,monospace}.sleep b{display:block;margin:10px 0;font-size:25px}.sleep span{color:var(--muted)}.twophotos{display:grid;grid-template-columns:1fr 1fr;gap:12px}.twophotos .poster{padding:7px 7px 29px}.twophotos .poster img{aspect-ratio:3/4}.left{transform:rotate(-3deg)}.right{transform:rotate(3deg);margin-top:30px}blockquote{margin:30px 0 18px;padding:16px 0;border-block:1px solid var(--line);font:400 35px/1 "Bebas Neue"}.copy{font-size:17px;line-height:1.55;color:#d2cdc4}.carousel{overflow:hidden}.track{display:flex;transition:transform .45s}.track figure{min-width:100%;margin:0;padding:10px 10px 36px;background:var(--paper);color:var(--ink)}.track img{aspect-ratio:4/5;object-fit:cover}.track figcaption{padding-top:10px;font-weight:700}.controls{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.controls button{width:54px;height:44px;border:1px solid var(--line);background:#1a1a1a;color:#fff;font-size:22px}.controls span{font:600 12px ui-monospace,monospace;color:var(--muted)}.friendcopy p{font-size:17px;line-height:1.5}.friendcopy strong{display:block;margin-top:20px;color:var(--yellow);font-size:23px}.family{background:#e7e1d6;color:var(--ink)}.family .label{color:#665f56}.familygrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.familygrid img{aspect-ratio:1;object-fit:cover}.familygrid .wide{grid-column:1/-1;aspect-ratio:16/10}.familycopy p{line-height:1.5}.familycopy strong{display:block;margin-top:20px;font:400 34px/1 "Bebas Neue"}.winamp{margin-top:24px;border:3px solid #706f67;background:#303028;color:#b8ff74;box-shadow:inset 0 0 0 2px #111,0 15px 45px #0007;font-family:ui-monospace,monospace}.bar{display:flex;justify-content:space-between;padding:7px 9px;background:#4b4b42;color:#fff;font-size:11px}.display{display:grid;grid-template-columns:92px 1fr;gap:10px;margin:8px;padding:8px;background:#071205;border:2px inset #777}.eq{height:62px;display:flex;align-items:flex-end;gap:4px}.eq i{flex:1;height:20%;background:#78ff4b}.winamp.playing .eq i{animation:eq .65s ease-in-out infinite alternate}.eq i:nth-child(2n){animation-delay:.12s}.eq i:nth-child(3n){animation-delay:.24s}@keyframes eq{to{height:90%}}.display small,.display b{display:block}.display b{height:30px;margin:7px 0;color:#ffe55a;font-size:12px}.progress{height:9px;margin:8px;background:#111}.progress i{display:block;width:0;height:100%;background:#78ff4b}.buttons{display:flex;gap:7px;align-items:center;padding:0 8px 9px}.buttons button{width:43px;height:31px;border:2px outset #d4d4ca;background:#aaa99e;color:#111}.buttons span{margin-left:auto;color:#ddd;font-size:10px}.options{display:grid;gap:9px;margin-top:18px}.option{min-height:52px;padding:10px 13px;text-align:left;border:1px solid var(--line);background:#1a1a1a;color:#fff;font-weight:600}.option.correct{background:#173b17;border-color:#69c95b}.option.wrong{background:#461919;border-color:#e35454}.feedback{min-height:42px;padding-top:14px;font-weight:700}.result{margin-top:20px;padding:22px;background:var(--red);font:400 34px/1 "Bebas Neue"}.note{margin-top:30px;padding:17px;border:1px dashed var(--muted);font-size:13px;color:#c9c4ba}.final{display:grid;align-items:center;background:#080808}.center{text-align:center}.bigfinal{font-size:clamp(52px,17vw,84px);line-height:.88;margin:20px 0 28px}.finalimg{width:75%;max-width:330px;margin:auto;aspect-ratio:4/5;object-fit:cover;clip-path:polygon(3% 0,100% 2%,96% 100%,0 97%)}.qualities{margin:24px auto;max-width:390px;color:var(--muted);font-size:12px;line-height:1.7;letter-spacing:.08em}.birthday{font-size:53px;line-height:.9}.birthday span{color:var(--red)}.answer{max-width:360px;margin:22px auto;padding:18px;border:1px solid var(--line)}.answer p{margin:9px 0;font:400 25px/1 "Bebas Neue"}.stamp{display:inline-block;margin-top:40px;padding:8px 11px;border:2px solid var(--red);color:var(--red);font:700 11px ui-monospace,monospace;transform:rotate(-3deg)}@media(min-width:760px){.wrap{width:min(100%,680px)}.narrow{width:min(100%,520px)}.versions{grid-template-columns:1fr 1fr}.final-card{grid-column:1/-1}.familygrid{grid-template-columns:2fr 1fr 1fr}.familygrid .wide{grid-column:auto;aspect-ratio:3/4}.familygrid img{aspect-ratio:3/4}}@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}}

/* iPhone / mobile horizontal overflow fix */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  position: relative;
}

main,
section,
.wrap,
.narrow {
  max-width: 100%;
  min-width: 0;
}

img,
svg,
video,
audio,
canvas {
  max-width: 100%;
}

pre,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.terminal,
.paper,
.poster,
.card,
.sleep,
.winamp,
.note,
.answer,
.stats,
.carousel,
.track,
.familygrid,
.twophotos {
  min-width: 0;
  max-width: 100%;
}

.hero,
.title,
.profile h2,
.bigfinal,
.birthday {
  overflow-wrap: anywhere;
}

.scrape {
  max-width: 100%;
  overflow: hidden;
}

.poster,
.left,
.right,
.paper,
.stamp {
  transform-origin: center center;
}

.carousel {
  width: 100%;
  touch-action: pan-y;
}

.track {
  width: 100%;
  will-change: transform;
}

.track figure {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.controls,
.buttons,
.tags,
.grid,
.versions,
.familygrid,
.twophotos {
  width: 100%;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 430px) {
  .boot,
  .chapter {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero {
    font-size: clamp(76px, 27vw, 116px);
  }

  .profile h2 {
    font-size: clamp(58px, 19vw, 88px);
  }

  .title {
    font-size: clamp(52px, 17vw, 82px);
  }

  .bigfinal {
    font-size: clamp(48px, 15.5vw, 74px);
  }

  .birthday {
    font-size: clamp(43px, 13vw, 58px);
  }

  .twophotos {
    gap: 8px;
  }

  .left {
    transform: rotate(-1.5deg);
  }

  .right {
    transform: rotate(1.5deg);
    margin-top: 22px;
  }

  .paper {
    transform: none;
  }

  .poster {
    transform: rotate(-0.6deg);
  }

  .stamp {
    transform: rotate(-1.5deg);
  }

  .display {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .display b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .buttons span {
    white-space: nowrap;
  }
}

/* ===== MOBILE TYPO FIX ===== */

@media (max-width:430px){

  .hero{
    font-size:clamp(54px,18vw,84px);
    line-height:.9;
  }

  h2,
  .title{
    font-size:clamp(42px,11vw,64px);
    line-height:.92;
    letter-spacing:.02em;
    word-break:keep-all;
    overflow-wrap:normal;
    hyphens:none;
  }

  .bigfinal{
    font-size:clamp(38px,10vw,56px);
    line-height:.92;
  }

  .birthday{
    font-size:clamp(34px,9vw,48px);
    line-height:.95;
  }

  .profile h2{
    font-size:clamp(52px,14vw,74px);
  }

  .hero span,
  h2 br,
  .title br,
  .bigfinal br,
  .birthday br{
    display:block;
  }
}