:root {
  --paper: #f7f5ee;
  --ink: #292738;
  --blue: #514be7;
  --muted: #625e6f;
  --line: #29273826;
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-in-out: cubic-bezier(.77,0,.175,1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; scrollbar-color: #898393 var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'DM Sans', 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }
::selection { background: #f7d559; color: var(--ink); }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
header { height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 5%; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 9px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -.04em; }
.logo-mark { width: 35px; height: 35px; color: var(--blue); }
.dot { margin-left: -8px; color: var(--blue); }
nav { display: flex; gap: 30px; font-size: 14px; font-weight: 500; }
nav a { padding: 12px 0; }

.hero { position: relative; min-height: 640px; padding: 42px 20px 105px; overflow: hidden; text-align: center; }
h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: clamp(72px, 7.6vw, 96px); line-height: 1; letter-spacing: -.035em; margin: 35px auto 0; position: relative; z-index: 2; pointer-events: none; max-width: 760px; text-wrap: balance; }
.color-word { color: var(--blue); display: inline-block; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 400; letter-spacing: -.035em; }
.intro { font-size: 16px; line-height: 1.6; margin: 28px auto 24px; position: relative; z-index: 2; color: var(--muted); }
.primary { background: var(--ink); color: white; border: 0; padding: 8px 8px 8px 24px; border-radius: 40px; display: inline-flex; align-items: center; gap: 28px; font-weight: 500; font-size: 14px; position: relative; z-index: 3; transition: transform 160ms var(--ease-out); }
.primary > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #c9d98e; color: var(--ink); }
.primary:active { transform: scale(.97); }
.hero-bottom { position: absolute; bottom: 27px; left: 5%; right: 5%; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; color: var(--muted); }
.hero-bottom p { margin: 0; }
.hero-bottom a { display: flex; align-items: center; gap: 12px; color: var(--ink); padding: 10px 0; }

/* The four shapes are color controls, with their own playful silhouette. */
.toy { position: absolute; border: 0; background: transparent; z-index: 1; padding: 0; transition: transform 220ms var(--ease-out); animation: float 6s var(--ease-in-out) infinite alternate; }
.flower { width: 170px; height: 170px; left: 9%; top: 105px; transform: rotate(-15deg); }
.petals { position: absolute; inset: 0; background: #a9b7fa; clip-path: polygon(50% 0,60% 16%,75% 7%,79% 27%,98% 25%,91% 45%,100% 58%,81% 65%,83% 84%,63% 82%,51% 100%,42% 82%,22% 92%,23% 71%,3% 72%,11% 51%,0 37%,21% 30%,21% 10%,41% 17%); }
.face { position: absolute; left: 50%; top: 50%; width: 65px; height: 65px; transform: translate(-50%,-50%); display: flex; gap: 17px; justify-content: center; padding-top: 19px; }
.face i { display: block; width: 7px; height: 12px; background: var(--face-ink, var(--ink)); border-radius: 50%; }
.face b { position: absolute; left: 21px; top: 37px; width: 26px; height: 13px; border: 3px solid var(--face-ink, var(--ink)); border-top: 0; border-radius: 0 0 30px 30px; }
.flower .face { background: #f7d559; border-radius: 50%; width: 75px; height: 75px; padding-top: 24px; }
.flower .face b { left: 25px; top: 43px; }
.orange { width: 160px; height: 160px; right: 9%; top: 220px; border-radius: 50%; background: #ff8952; box-shadow: inset -12px -12px 18px #2927380d; animation-delay: -2s; }
.orange::after { content: ''; position: absolute; width: 36px; height: 15px; border-radius: 50%; background: #ffffff75; top: 29px; left: 29px; transform: rotate(-35deg); }
.orange .face { transform: translate(-50%,-50%) rotate(10deg); }
.squiggle { width: 145px; height: 125px; left: 16%; top: 395px; display: flex; align-items: center; transform: rotate(-22deg); animation-delay: -3s; }
.squiggle span { width: 32px; flex-shrink: 0; border-radius: 30px; background: #f39aba; margin-left: -5px; height: 65px; }
.squiggle span:nth-child(even) { height: 120px; }
.star { right: 20%; top: 420px; animation-delay: -1s; }
.star span { display: block; color: #b3c873; transform: rotate(12deg); }
.star svg { display: block; width: 110px; height: 110px; fill: currentColor; }
@keyframes float { from { translate: 0 -6px; rotate: -3deg; } to { translate: 0 6px; rotate: 3deg; } }
.toy.toy-is-pressed { transform: rotate(-6deg) scale(.94); }

.palette-section { padding: 48px 5% 42px; border-top: 1px solid var(--line); }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 28px; }
h2 { font-family: 'Space Grotesk', sans-serif; font-size: 42px; font-weight: 500; letter-spacing: -.03em; line-height: 1.14; margin: 0; text-wrap: balance; }
em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; }
.text-button { border: 0; border-bottom: 1px solid var(--ink); padding: 11px 0; background: transparent; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.swatches { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.swatch { min-height: 250px; border: 0; border-radius: 12px; padding: 22px 18px 17px; text-align: left; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; transition: transform 180ms var(--ease-out); }
.swatch-symbol { display: block; width: 88px; height: 88px; max-width: 85%; margin: auto; fill: currentColor; transition: transform 200ms var(--ease-out); }
.swatch-bottom { display: flex; align-items: center; justify-content: space-between; gap: 5px; font-size: 13px; font-weight: 500; font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
.swatch-bottom .icon { width: 17px; height: 17px; }
.small-note { font-size: 13px; margin: 17px 0 0; color: var(--muted); }

.sticker-section { display: grid; grid-template-columns: minmax(160px,240px) minmax(220px,1fr) minmax(160px,240px); align-items: center; gap: 30px; max-width: 1060px; margin: 0 auto; padding: 22px 5% 62px; }
.sticker-copy { text-align: center; }
.sticker-copy h2 { font-size: clamp(30px,3.5vw,43px); }
.sticker-copy p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 17px 0 0; }
.meme-sticker { display: block; width: 100%; padding: 0; border: 0; background: transparent; border-radius: 16px; transition: transform 160ms var(--ease-out); }
.meme-sticker img { display: block; width: 100%; height: auto; animation: sticker-sway 6s var(--ease-in-out) infinite alternate; pointer-events: none; }
.sticker-frog img { animation-delay: -3s; animation-direction: alternate-reverse; }
@keyframes sticker-sway { from { transform: translateY(-3px) rotate(-3deg); } to { transform: translateY(3px) rotate(3deg); } }
.meme-sticker.sticker-is-pressed { transform: scale(.97); }

.lab { margin: 0 5% 65px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; border-top: 1px solid var(--line); padding-top: 48px; }
.lab-copy { padding: 18px 0 24px; max-width: 440px; }
.lab h2 { font-size: 62px; }
.lab-copy p { font-size: 15px; line-height: 1.7; margin: 23px 0; color: var(--muted); }
.color-inputs { display: flex; gap: 22px; align-items: center; margin: 28px 0 32px; }
.color-inputs label { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.color-inputs > span { font-size: 21px; color: var(--muted); }
input[type=color] { width: 44px; height: 44px; border: 1px solid var(--line); padding: 4px; border-radius: 50%; overflow: hidden; background: var(--paper); cursor: pointer; flex-shrink: 0; }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 50%; }
.range-label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 500; }
.range-label output { font-family: 'Space Grotesk', sans-serif; font-variant-numeric: tabular-nums; }
input[type=range] { appearance: none; width: 100%; margin: 20px 0 26px; cursor: pointer; height: 26px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg,var(--mix-a),var(--mix-b)); }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--paper); background: var(--ink); box-shadow: 0 2px 5px #29273833; margin-top: -8px; }
input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg,var(--mix-a),var(--mix-b)); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--paper); background: var(--ink); }
.mix-stage { position: relative; background: #eeebf6; min-height: 500px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 16px; }
.mix-orbit { position: absolute; width: 330px; height: 330px; border: 1px solid #2529511a; border-radius: 50%; animation: spin 24s linear infinite; }
.orbit-two { width: 440px; height: 440px; animation-direction: reverse; }
.mix-orbit::before { content: ''; position: absolute; width: 15px; height: 15px; background: var(--mix-a,#ff7547); border: 3px solid #ffffff80; border-radius: 50%; left: 40px; top: 40px; box-shadow: 0 3px 4px #29273812; }
.orbit-two::before { background: var(--mix-b,#7467ee); left: 61px; top: 61px; }
@keyframes spin { to { transform: rotate(360deg); } }
#mixBlob { height: 235px; width: 245px; border-radius: 43% 57% 60% 40% / 48% 42% 58% 52%; background: #ba6e9b; position: relative; transform: rotate(-9deg); box-shadow: inset -17px -17px 22px #29273810,0 20px 25px #2927380a; }
#mixBlob::after { content: ''; position: absolute; width: 47px; height: 18px; background: #ffffff38; border-radius: 50%; top: 32px; left: 39px; transform: rotate(-28deg); }
#mixBlob .face { transform: translate(-50%,-50%) rotate(9deg); }
.mix-tag { position: absolute; bottom: 34px; background: var(--paper); padding: 12px 24px; border-radius: 8px; transform: rotate(-4deg); box-shadow: 0 6px 15px #29273813; }
.mix-tag strong { font-family: 'Space Grotesk', sans-serif; font-size: 23px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
footer { margin: 0 5%; padding: 28px 0; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
footer .logo { font-size: 26px; }
footer p { font-size: 13px; color: var(--muted); margin: 0; }
.back-top { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; white-space: nowrap; padding: 10px 0; }
#notice { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%,12px); opacity: 0; background: var(--ink); color: white; border-radius: 12px; padding: 16px 22px; font-size: 13px; pointer-events: none; transition: transform 180ms var(--ease-out),opacity 180ms var(--ease-out); z-index: 10; box-shadow: 0 6px 25px #29273820; max-width: 90vw; text-align: center; }
#notice.show { opacity: 1; transform: translate(-50%,0); }
#notice.copy-fallback { pointer-events: auto; }
#notice input { display: block; width: 150px; margin: 12px auto 0; padding: 8px; border: 1px solid #ffffff55; border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; text-align: center; }

@media(hover:hover) and (pointer:fine) {
  .primary:hover { transform: translateY(-2px); }
  .swatch:hover { transform: translateY(-4px); }
  .swatch:hover .swatch-symbol { transform: rotate(-6deg); }
  .toy:hover { transform: rotate(8deg) scale(1.04); }
  .meme-sticker:hover { transform: translateY(-3px); }
  nav a:hover, .text-button:hover, .hero-bottom a:hover, .back-top:hover { text-decoration: underline; }
}
@media(min-width:1500px) {
  header, footer { max-width: 1440px; margin-left: auto; margin-right: auto; }
  .palette-section { max-width: 1600px; margin: auto; }
  .lab { max-width: 1440px; margin-left: auto; margin-right: auto; }
  .flower { left: calc(50% - 590px); }
  .orange { right: calc(50% - 580px); }
  .squiggle { left: calc(50% - 500px); }
  .star { right: calc(50% - 460px); }
}
@media(max-width:1100px) {
  h1 { font-size: 80px; }
  .flower { width: 130px; height: 130px; left: 3%; }
  .orange { width: 125px; height: 125px; right: 3%; }
  .squiggle { left: 7%; scale: .8; }
  .star { right: 10%; }
  .star svg { width: 100px; height: 100px; }
  .lab { gap: 32px; }
  .lab h2 { font-size: 54px; }
  .color-inputs { gap: 14px; }
  .color-inputs label { flex-direction: column; }
  .swatch { min-height: 220px; padding: 18px 13px 14px; }
  .swatch-symbol { width: 76px; height: 76px; }
  .swatch-bottom { font-size: 11px; }
  .section-top h2 { font-size: 36px; }
}
@media(max-width:760px) {
  header { height: 84px; }
  .logo { font-size: 28px; }
  .logo-mark { width: 30px; height: 30px; }
  nav { gap: 20px; font-size: 12px; }
  .hero { padding-top: 32px; min-height: 690px; }
  h1 { font-size: 72px; margin-top: 158px; }
  .flower { top: 47px; left: 20%; width: 106px; height: 106px; }
  .orange { top: 58px; right: 22%; width: 98px; height: 98px; }
  .flower .face { width: 65px; height: 65px; padding-top: 19px; }
  .flower .face b { left: 21px; top: 37px; }
  .squiggle { top: 490px; left: 12%; scale: .72; }
  .star { top: 518px; right: 16%; }
  .star svg { width: 90px; height: 90px; }
  .hero-bottom { font-size: 11px; }
  .hero-bottom p { max-width: 220px; text-align: left; line-height: 1.5; }
  .section-top h2 { font-size: 32px; }
  .swatches { gap: 7px; }
  .swatch { min-height: 190px; padding: 14px 10px; }
  .swatch-symbol { width: 60px; height: 60px; }
  .swatch-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sticker-section { grid-template-columns: repeat(2,minmax(0,200px)); justify-content: center; gap: 24px; padding: 24px 5% 48px; }
  .sticker-copy { grid-column: 1/-1; grid-row: 1; }
  .sticker-copy h2 { font-size: 36px; }
  .meme-sticker { grid-row: 2; }
  .lab { grid-template-columns: 1fr; gap: 22px; padding-top: 34px; margin-bottom: 40px; }
  .lab-copy { max-width: none; padding: 0; }
  .lab h2 { font-size: 56px; }
  .color-inputs label { flex-direction: row; }
  .mix-stage { min-height: 430px; }
  footer { flex-wrap: wrap; }
  footer p { order: 3; flex-basis: 100%; }
}
@media(max-width:480px) {
  header { gap: 12px; }
  .hero { min-height: 650px; padding-left: 18px; padding-right: 18px; }
  h1 { font-size: clamp(58px,16vw,68px); margin-top: 155px; }
  .flower { left: 15%; top: 42px; width: 100px; height: 100px; }
  .orange { right: 17%; top: 58px; width: 90px; height: 90px; }
  .intro { font-size: 15px; line-height: 1.65; margin-top: 25px; }
  .squiggle { left: 6%; top: 465px; scale: .6; }
  .star { right: 13%; top: 490px; }
  .star svg { width: 80px; height: 80px; }
  .hero-bottom { bottom: 17px; gap: 18px; }
  .hero-bottom p { max-width: 175px; }
  .hero-bottom a { white-space: nowrap; gap: 7px; }
  .palette-section { padding-top: 32px; padding-bottom: 30px; }
  .section-top { align-items: start; gap: 18px; margin-bottom: 22px; }
  .section-top h2 { font-size: 28px; max-width: 215px; text-align: left; }
  .section-top h2 em { display: block; }
  .section-top .text-button { font-size: 11px; gap: 7px; }
  .section-top .icon { width: 16px; height: 16px; }
  .swatches { gap: 4px; }
  .swatch { min-height: 155px; padding: 10px 6px; border-radius: 8px; }
  .swatch-symbol { width: 42px; height: 42px; }
  .swatch-bottom { font-size: 10px; }
  .swatch-bottom .icon { width: 14px; height: 14px; }
  .small-note { font-size: 12px; }
  .sticker-section { gap: 16px; }
  .sticker-copy h2 { font-size: 33px; }
  .lab h2 { font-size: 50px; }
  .lab-copy p { font-size: 15px; }
  .color-inputs { gap: 16px; }
  .color-inputs label { font-size: 12px; gap: 8px; flex-direction: column-reverse; }
  .mix-stage { min-height: 395px; }
  #mixBlob { width: 213px; height: 207px; }
  .mix-orbit { width: 290px; height: 290px; }
  .orbit-two { width: 380px; height: 380px; }
  .mix-tag { bottom: 27px; }
  footer { padding: 23px 0; gap: 17px; }
  footer p { max-width: 36ch; line-height: 1.6; }
}

/* All decorative loops share the same pause, visibility and motion preference gates. */
.motion-offscreen, .motion-offscreen img, .motion-hidden .toy, .motion-hidden .mix-orbit, .motion-hidden .meme-sticker img { animation-play-state: paused; }
html.motion-reduced { scroll-behavior: auto; }
.motion-reduced button, .motion-reduced .swatch-symbol, .motion-reduced #notice { transition: none; }
.motion-reduced .toy, .motion-reduced .mix-orbit, .motion-reduced .meme-sticker img { animation: none; }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .toy, .mix-orbit, .meme-sticker img { animation: none; }
  button, .swatch-symbol, #notice { transition: none; }
  .primary:hover, .primary:active, .swatch:hover, .swatch:hover .swatch-symbol, .toy:hover, .toy.toy-is-pressed, .meme-sticker:hover, .meme-sticker.sticker-is-pressed { transform: none; }
  .flower:hover, .flower.toy-is-pressed { transform: rotate(-15deg); }
  .squiggle:hover, .squiggle.toy-is-pressed { transform: rotate(-22deg); }
}

@font-face { font-family: 'Permanent Marker'; src: url('assets/permanent-marker.ttf') format('truetype'); font-display: swap; }
:root { --paper: #f0ebdd; --ink: #1d1b24; --muted: #56505e; }
body { background: var(--paper); }
header { border-color: var(--ink); height: 94px; }
.logo { font-family: 'Permanent Marker', sans-serif; font-weight: 400; font-size: 34px; transform: rotate(-3deg); }
.logo-mark { color: var(--ink); }
nav { align-items: center; }
.reset-stickers { border: 1px solid var(--ink); border-radius: 6px; background: #d7ff38; padding: 11px 15px; font-size: 12px; transform: rotate(2deg); }
.physics-zone { position: relative; overflow: hidden; }
.hero { min-height: 800px; padding: 74px 20px 115px; }
.hero-content { position: relative; z-index: 3; width: min(650px,65%); margin: 0 auto; padding: 20px 10px 28px; }
h1 { font-size: clamp(54px,7.1vw,90px); font-weight: 700; margin: 0; }
.color-word { font-family: 'Permanent Marker', sans-serif; font-size: 1.05em; font-style: normal; color: #f52b8d; line-height: 1.35; transform: rotate(-6deg); }
.intro { margin-top: 20px; font-size: 16px; }
.primary { border-radius: 6px; padding: 10px 10px 10px 22px; transform: rotate(-2deg); }
.primary > span { background: #d7ff38; border-radius: 4px; }
.hero-bottom { z-index: 4; color: var(--ink); font-size: 13px; }
.hero-bottom p { text-align: left; font-weight: 500; line-height: 1.5; }
.loose-sticker { position: absolute; padding: 0; border: 0; background: transparent; border-radius: 8px; width: 150px; z-index: 5; }
.loose-sticker img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.hero-bruh { width: 175px; left: 3%; top: 95px; transform: rotate(-13deg); }
.hero-vibe { width: 155px; right: 4%; top: 145px; transform: rotate(12deg); }
.hero-grass { width: 145px; left: 10%; top: 420px; transform: rotate(9deg); }
.hero-thoughts { width: 185px; right: 8%; top: 470px; transform: rotate(-12deg); }
.hero-chaos { width: 110px; left: 1%; top: 300px; transform: rotate(8deg); }
.hero-whatever { width: 115px; right: 1%; top: 325px; transform: rotate(-9deg); }
.hero .flower { width: 78px; height: 78px; left: 37%; top: 590px; }
.hero .flower .face { width: 54px; height: 54px; padding-top: 14px; }
.hero .flower .face i { width: 5px; height: 9px; }
.hero .flower .face b { left: 16px; top: 29px; width: 22px; height: 12px; }
.hero .orange { width: 82px; height: 82px; right: 33%; top: 618px; }
.hero .orange::after { width: 20px; height: 8px; top: 13px; left: 16px; }
.hero .squiggle { width: 108px; height: 86px; left: 8%; top: 608px; scale: none; }
.hero .squiggle span { width: 24px; height: 46px; }
.hero .squiggle span:nth-child(even) { height: 82px; }
.hero .star { right: 11%; top: 675px; }
.hero .star svg { width: 64px; height: 64px; }
.physics-object { touch-action: none; user-select: none; cursor: grab; animation: none !important; transition: none !important; }
.physics-object img { animation: none !important; }
.physics-object.is-grabbed { cursor: grabbing; z-index: 20; filter: drop-shadow(0 10px 8px #1d1b2433); }
.physics-object:focus-visible { outline: 3px dashed var(--ink); outline-offset: 5px; }
.palette-section { padding-top: 180px; padding-bottom: 35px; border-color: var(--ink); }
.palette-error { width: 105px; left: 9%; top: 24px; transform: rotate(-14deg); }
.palette-grass { width: 110px; right: 12%; top: 22px; transform: rotate(14deg); }
.palette-weird { width: 125px; left: 32%; top: 24px; transform: rotate(9deg); }
.palette-brain { width: 125px; right: 32%; top: 20px; transform: rotate(-7deg); }
.palette-content { position: relative; z-index: 3; }
h2 em { font-family: 'Permanent Marker', sans-serif; font-size: .87em; font-style: normal; }
.swatch { border-radius: 5px; }
.sticker-section { display: block; max-width: none; min-height: 385px; padding: 35px 5%; margin: 0; }
.sticker-copy { position: relative; width: 38%; margin: 72px auto 0; padding: 15px 0; z-index: 3; }
.sticker-copy h2 { font-size: 39px; }
.sticker-cat { position: absolute; width: 230px; left: 8%; top: 55px; }
.sticker-frog { position: absolute; width: 220px; right: 8%; top: 65px; }
.lab { border-color: var(--ink); }
.mix-stage { background: #dad1ef; border-radius: 6px; min-height: 540px; }
#mixBlob { border: 0; padding: 0; position: absolute; left: calc(50% - 122px); top: 175px; z-index: 4; }
.mix-tag { z-index: 3; bottom: 25px; }
footer { display: block; min-height: 240px; padding-top: 165px; border-color: var(--ink); }
.footer-content { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; position: relative; z-index: 3; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (min-width:1500px) { .hero { max-width: 1600px; margin: auto; } }
@media (max-width:1000px) {
  .hero-content { width: 57%; }
  .hero-bruh { width: 145px; }
  .hero-vibe { width: 125px; }
  .hero-grass { width: 130px; left: 6%; }
  .hero-thoughts { width: 155px; right: 4%; }
  .sticker-cat, .sticker-frog { width: 170px; }
  .sticker-copy h2 { font-size: 33px; }
  .hero .flower { left: 35%; }
  .hero .orange { right: 29%; }
}
@media (max-width:760px) {
  header { height: 108px; align-items: center; gap: 14px; }
  .logo { font-size: 28px; }
  nav { gap: 15px; flex-wrap: wrap; justify-content: flex-end; }
  nav a { padding: 4px 0; }
  .reset-stickers { font-size: 11px; padding: 9px 11px; }
  .hero { min-height: 1105px; padding-top: 190px; }
  .hero-content { width: 92%; max-width: 420px; }
  h1 { font-size: clamp(54px,10.5vw,72px); margin: 0; }
  .hero-bruh { top: 35px; left: 8%; width: 125px; }
  .hero-vibe { top: 35px; right: 10%; width: 110px; }
  .hero-grass { top: 550px; left: 7%; width: 130px; }
  .hero-thoughts { top: 580px; right: 4%; width: 150px; }
  .hero-chaos { width: 130px; left: 7%; top: 735px; }
  .hero-whatever { width: 140px; right: 4%; top: 750px; }
  .hero .flower { top: 920px; left: 21%; }
  .hero .orange { top: 943px; right: 20%; }
  .hero .squiggle { top: 700px; left: 43%; width: 100px; }
  .hero .star { top: 988px; right: 5%; }
  .hero-bottom { bottom: 14px; font-size: 12px; gap: 15px; }
  .hero-bottom p { max-width: 180px; }
  .palette-section { padding-top: 280px; }
  .palette-error { width: 100px; left: 10%; top: 22px; }
  .palette-grass { width: 97px; right: 12%; top: 16px; }
  .palette-weird { width: 115px; left: 12%; top: 155px; }
  .palette-brain { width: 105px; right: 13%; top: 145px; }
  .sticker-section { min-height: 440px; padding: 22px 5%; }
  .sticker-copy { width: 92%; margin-top: 0; padding: 16px 0; }
  .sticker-copy h2 { font-size: 34px; }
  .sticker-cat { width: 170px; left: 4%; top: 204px; }
  .sticker-frog { width: 162px; right: 3%; top: 216px; }
  .mix-stage { min-height: 540px; }
  #mixBlob { top: 190px; left: calc(50% - 106px); }
  .footer-content { flex-wrap: wrap; gap: 14px; }
  .footer-content p { flex-basis: 100%; order: 3; }
  footer { padding-top: 300px; }
}
@media (max-width:480px) {
  .logo-mark { display: none; }
  .logo { font-size: 30px; }
  nav { gap: 12px; max-width: 225px; }
  .sticker-cat { width: 145px; }
  .sticker-frog { width: 140px; }
}
@media (prefers-reduced-motion:reduce) { .physics-object { animation: none; } }

@font-face {
  font-family: 'Anton';
  src: url('assets/anton.ttf') format('truetype');
  font-display: swap;
}
:root {
  --paper: #fffdf5;
  --ink: #171515;
  --muted: #171515;
  --line: #171515;
  --acid: #d7ff38;
  --yellow: #ffe538;
  --pink: #ff76bd;
  --lilac: #b99cff;
  --rule: 3px solid var(--ink);
  --block-shadow: 6px 6px 0 var(--ink);
}
html { scrollbar-color: var(--ink) var(--acid); scroll-padding-top: 24px; }
body { font-family: Arial, Helvetica, sans-serif; color: var(--ink); background: var(--paper); }
::selection { background: var(--ink); color: var(--acid); }
button, a, input { outline-color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px dashed var(--ink); outline-offset: 7px; }
.icon { stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }
header {
  margin: 0; max-width: none; padding: 20px 5%; height: 100px;
  background: var(--acid); border-bottom: 4px solid var(--ink); gap: 20px;
}
.logo { font-size: 36px; letter-spacing: -.03em; }
.logo-mark, .dot { color: var(--ink); }
.logo .logo-mark { display: block; width: 43px; height: 43px; flex: 0 0 auto; overflow: visible; }
nav { font-size: 13px; font-weight: 700; gap: 13px; }
nav a, .reset-stickers {
  padding: 12px 16px; border: var(--rule); border-radius: 0;
  background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.reset-stickers { background: var(--pink); transform: none; font-size: inherit; font-weight: inherit; }
.hero {
  max-width: none; min-height: 810px; padding: 70px 20px 110px;
  background: var(--yellow); border-bottom: 4px solid var(--ink);
}
.hero-content {
  width: min(640px,58%); padding: 32px 30px 35px;
  background: var(--paper); border: 4px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink); transform: rotate(-2deg);
}
h1, h2 { font-family: 'Anton', sans-serif; text-transform: uppercase; font-weight: 400; letter-spacing: -.015em; }
h1 { font-size: clamp(56px,7.3vw,96px); line-height: 1.05; margin: 0; }
.color-word {
  display: inline-block; font-family: 'Permanent Marker', sans-serif;
  font-size: .98em; line-height: 1.3; padding: 0 15px 8px;
  color: var(--pink); background: var(--ink); transform: rotate(-3deg);
  margin: 13px 0 0; letter-spacing: -.025em;
}
.intro { margin: 24px 0; color: var(--ink); font-size: 16px; line-height: 1.45; }
.primary {
  background: var(--acid); color: var(--ink); border: var(--rule);
  border-radius: 0; box-shadow: var(--block-shadow); transform: none;
  padding: 9px 9px 9px 20px; font-size: 16px; font-weight: 700; gap: 22px;
  transition: box-shadow 150ms ease-out, transform 150ms ease-out;
}
.primary > span { border: 2px solid var(--ink); background: var(--paper); border-radius: 0; width: 40px; height: 40px; }
.hero-bottom { bottom: 22px; align-items: end; }
.hero-bottom p { font-weight: 700; color: var(--ink); font-size: 13px; }
.hero-bottom a, .back-top {
  padding: 12px 16px; border: var(--rule); background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink); font-size: 13px; font-weight: 700;
}
.loose-sticker, .meme-sticker { border-radius: 0; }
.physics-object.is-grabbed { filter: drop-shadow(5px 6px 0 #17151570); }
.hero .flower .face { border: 2px solid var(--ink); }
.hero .orange { border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.hero .orange::after { display: none; }
.hero .squiggle span { border: 2px solid var(--ink); }
.hero .star { top: 659px; }
.hero .star svg { stroke: var(--ink); stroke-width: 2px; }
.palette-section { max-width: none; background: var(--pink); border: 0; border-bottom: 4px solid var(--ink); padding: 48px 5% 36px; }
.palette-content { max-width: 1160px; margin: 0 auto; }
.palette-tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.theme-control { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.theme-control select { max-width: 220px; min-height: 46px; padding: 10px 32px 10px 12px; border: var(--rule); border-radius: 0; background: var(--paper); color: var(--ink); font: inherit; box-shadow: 3px 3px 0 var(--ink); }
.seed-color { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 7px 10px; background: var(--paper); color: var(--ink); border: var(--rule); font-size: 12px; }
.seed-color[hidden] { display: none; }
#seed-sample { width: 25px; height: 25px; border: 2px solid var(--ink); }
.seed-color code { font-weight: 700; }
.palette-hint { font-size: 13px; margin: 0 0 20px; line-height: 1.4; }
.section-top { align-items: center; margin-bottom: 28px; gap: 24px; }
.section-top h2 { font-size: clamp(32px,3.5vw,46px); }
h2 em { font-family: 'Permanent Marker', sans-serif; font-style: normal; font-size: .85em; }
.section-top h2 em { display: inline-block; background: var(--ink); color: var(--paper); padding: 5px 12px 7px; transform: rotate(-3deg); margin-left: 7px; }
.text-button {
  background: var(--paper); padding: 13px 15px; border: var(--rule);
  border-radius: 0; font-size: 13px; font-weight: 700; box-shadow: 4px 4px 0 var(--ink);
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.swatches { gap: 14px; padding: 0 7px 7px 0; }
.swatch { min-height: 240px; border: var(--rule); border-radius: 0; box-shadow: var(--block-shadow); padding: 22px 14px 15px; }
.swatch-symbol { width: 85px; height: 85px; }
.swatch-bottom { font-family: 'Courier New', monospace; font-weight: 700; font-size: 13px; }
.small-note { margin-top: 17px; color: var(--ink); font-weight: 700; font-size: 12px; }
.sticker-section { background: var(--acid); border-bottom: 4px solid var(--ink); min-height: 395px; }
.sticker-copy { margin-top: 45px; padding: 18px 0; width: 40%; }
.sticker-copy h2 { font-size: 42px; line-height: 1.2; }
.sticker-copy h2 em { display: inline-block; padding: 3px 9px 7px; background: var(--ink); color: var(--acid); margin-top: 10px; transform: rotate(3deg); }
.sticker-copy p { color: var(--ink); line-height: 1.5; font-size: 14px; margin-top: 20px; }
.lab {
  margin: 0; max-width: none; padding: 52px 5%; border-top: 0;
  border-bottom: 4px solid var(--ink); background: var(--lilac);
  grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 55px;
}
.lab-copy { padding: 8px 0 16px; max-width: 460px; }
.lab h2 { font-size: clamp(54px,5vw,68px); line-height: 1.1; }
.lab h2 em { color: var(--paper); background: var(--ink); display: inline-block; padding: 0 10px 8px; transform: rotate(-3deg); margin-top: 10px; }
.lab-copy p { color: var(--ink); font-size: 16px; line-height: 1.6; margin: 24px 0; }
.color-inputs { gap: 20px; margin: 24px 0 30px; }
.color-inputs label { font-size: 13px; font-weight: 700; gap: 12px; }
.color-inputs > span { color: var(--ink); font-weight: 700; }
input[type=color] { width: 58px; height: 58px; border: var(--rule); border-radius: 0; padding: 5px; box-shadow: 3px 3px 0 var(--ink); background: var(--paper); }
input[type=color]::-webkit-color-swatch { border-radius: 0; border: 0; }
input[type=color]::-moz-color-swatch { border-radius: 0; border: 0; }
.range-label { font-size: 13px; font-weight: 700; gap: 15px; }
.range-label output { font-family: 'Courier New', monospace; font-weight: 700; white-space: nowrap; }
input[type=range] { height: 34px; margin: 20px 0 28px; }
input[type=range]::-webkit-slider-runnable-track { height: 14px; border: 2px solid var(--ink); border-radius: 0; }
input[type=range]::-webkit-slider-thumb { height: 30px; width: 22px; border: 3px solid var(--ink); border-radius: 0; background: var(--acid); box-shadow: 3px 3px 0 var(--ink); margin-top: -10px; }
input[type=range]::-moz-range-track { height: 10px; border: 2px solid var(--ink); border-radius: 0; }
input[type=range]::-moz-range-thumb { height: 25px; width: 17px; border: 3px solid var(--ink); border-radius: 0; background: var(--acid); box-shadow: 3px 3px 0 var(--ink); }
.mix-stage { background: var(--paper); border: 4px solid var(--ink); border-radius: 0; box-shadow: 9px 9px 0 var(--ink); min-height: 540px; }
#mixBlob { border: 4px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); border-radius: 42% 58% 53% 47% / 59% 46% 54% 41%; }
#mixBlob::after { display: none; }
.mix-tag { background: var(--acid); border: var(--rule); border-radius: 0; box-shadow: 4px 4px 0 var(--ink); padding: 12px 22px; bottom: 25px; }
.mix-tag strong { font-family: 'Courier New', monospace; font-weight: 700; font-size: 24px; letter-spacing: 0; }
.mix-tag { display: grid; gap: 3px; text-align: center; max-width: calc(100% - 40px); }
.mixed-name { font-size: 18px; font-weight: 700; line-height: 1.3; }
footer { margin: 0; max-width: none; background: var(--yellow); padding: 35px 5% 25px; min-height: 0; border-top: 0; }
.footer-content { gap: 25px; padding: 10px 0; }
footer .logo { font-size: 32px; }
footer p { color: var(--ink); font-size: 13px; font-weight: 700; }
#notice { color: var(--ink); background: var(--acid); border: var(--rule); border-radius: 0; box-shadow: 5px 5px 0 var(--ink); font-weight: 700; z-index: 50; }
#notice input { border: 2px solid var(--ink); border-radius: 0; font-family: 'Courier New', monospace; caret-color: var(--ink); }
@media (hover:hover) and (pointer:fine) {
  nav a:hover, .reset-stickers:hover, .text-button:hover, .hero-bottom a:hover, .back-top:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); text-decoration: none; }
  .primary:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
  .swatch:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
}
.primary:active, .text-button:active, nav a:active, .reset-stickers:active, .swatch:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--ink); }
@media (max-width:1000px) {
  .hero-content { width: 57%; padding: 28px 22px 32px; }
  .section-top h2 { font-size: 36px; }
  .swatch-bottom { font-size: 11px; }
  .swatch-symbol { width: 65px; height: 65px; }
  .sticker-copy h2 { font-size: 34px; }
  .lab { gap: 30px; }
  .color-inputs label { flex-direction: column; }
}
@media (max-width:760px) {
  header { height: auto; min-height: 110px; padding: 18px 5%; gap: 18px; }
  .logo { font-size: 30px; }
  nav { max-width: 230px; gap: 9px; font-size: 11px; }
  nav a, .reset-stickers { padding: 9px 10px; font-size: inherit; border-width: 2px; }
  .hero { min-height: 1120px; padding: 195px 18px 110px; }
  .hero-content { width: 92%; max-width: 430px; padding: 25px 18px 30px; box-shadow: 7px 7px 0 var(--ink); }
  h1 { font-size: clamp(46px,11vw,76px); margin: 0; }
  .color-word { margin-top: 13px; padding: 0 12px 6px; font-size: 1.1em; }
  .intro { font-size: 15px; margin: 22px 0; }
  .primary { font-size: 14px; gap: 20px; }
  .hero-bottom { bottom: 20px; gap: 18px; }
  .hero-bottom p { font-size: 11px; max-width: 145px; }
  .hero-bottom a { padding: 9px 11px; font-size: 11px; gap: 8px; }
  .hero .star { top: 982px; }
  .palette-section { padding: 280px 5% 35px; }
  .section-top { align-items: flex-start; flex-direction: column; gap: 22px; }
  .section-top h2 { font-size: 36px; max-width: none; }
  .section-top h2 em { display: inline-block; margin: 7px 0 0; }
  .section-top .text-button { font-size: 12px; padding: 10px 13px; }
  .swatches { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 13px; }
  .swatch { grid-column: span 2; min-height: 145px; padding: 15px 10px 12px; }
  .swatch:nth-child(n+4) { grid-column: span 3; min-height: 145px; }
  .swatch-symbol { width: 48px; height: 48px; }
  .swatch-bottom { flex-direction: row; align-items: center; font-size: 11px; gap: 6px; }
  .swatch-bottom .icon { width: 13px; height: 13px; }
  .sticker-section { min-height: 480px; padding: 30px 5%; }
  .sticker-copy { width: 92%; margin: 0 auto; padding: 10px 0; }
  .sticker-copy h2 { font-size: 37px; }
  .sticker-cat { top: 250px; }
  .sticker-frog { top: 257px; }
  .lab { grid-template-columns: 1fr; padding: 40px 5% 48px; gap: 35px; }
  .lab-copy { max-width: none; padding: 0; }
  .lab h2 { font-size: 56px; }
  .color-inputs label { flex-direction: row; font-size: 12px; gap: 10px; }
  .mix-stage { min-height: 540px; }
  #mixBlob { top: 190px; left: calc(50% - 106px); }
  footer { padding: 35px 5% 25px; }
  .footer-content { align-items: center; gap: 22px; }
}
@media (max-width:480px) {
  .hero-content { width: 94%; }
  .hero .squiggle { left: 38%; }
  .hero-grass { width: 120px; }
  .hero-chaos { width: 125px; }
  .color-inputs { gap: 15px; }
  .color-inputs label { flex-direction: column-reverse; }
  .lab h2 { font-size: 50px; }
  .sticker-copy h2 { font-size: 33px; }
  .back-top { padding: 10px 11px; font-size: 12px; }
}
@media (prefers-reduced-motion:reduce) {
  .primary, .text-button, nav a, .reset-stickers { transition: none; }
}

/* Notebook paper is a place to collect stickers, alongside the street posters. */
:root { --paper-rule: #a9c4de; --paper-margin: #ef8392; }
.notebook-sheet {
  background-color: var(--paper);
  position: relative;
  isolation: isolate;
}
.ruled-sheet {
  min-height: 520px;
  background-image: linear-gradient(90deg,transparent 68px,var(--paper-margin) 68px,var(--paper-margin) 70px,transparent 70px), repeating-linear-gradient(0deg,transparent 0 31px,var(--paper-rule) 31px 32px);
  border-top: 4px solid var(--ink);
}
.graph-sheet {
  background-image: linear-gradient(90deg,transparent 39px,var(--paper-margin) 39px,var(--paper-margin) 41px,transparent 41px), linear-gradient(var(--paper-rule) 1px,transparent 1px), linear-gradient(90deg,var(--paper-rule) 1px,transparent 1px);
  background-size: 100% 100%,24px 24px,24px 24px;
}
.paper-holes { position: absolute; left: 20px; top: 42px; bottom: 42px; width: 18px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; z-index: 1; }
.paper-holes i { width: 16px; height: 16px; border: 2px solid var(--ink); border-radius: 50%; background: var(--acid); box-shadow: inset 2px 2px 0 #17151540; }
.graph-sheet .paper-holes { left: 10px; width: 14px; }
.graph-sheet .paper-holes i { width: 13px; height: 13px; background: var(--lilac); }
.ruled-sheet .sticker-copy { background: transparent; padding: 20px 8px; }
.ruled-sheet .sticker-copy h2 em { color: var(--pink); }
.paper-note { position: absolute; bottom: 24px; right: 6%; font: 20px/1.4 'Permanent Marker',sans-serif; transform: rotate(-3deg); background: var(--paper); padding: 2px 8px; z-index: 3; }
.notebook-sheet.is-drop-target { outline: 4px dashed var(--pink); outline-offset: -10px; }
[data-sticker-paper].is-drop-target { outline: 4px dashed var(--pink); outline-offset: -10px; }
.physics-object[data-physics-state="pasted"] { filter: drop-shadow(1px 2px 0 #17151530); }
.physics-object.is-grabbed { filter: drop-shadow(8px 12px 3px #17151555); }
@media (max-width:760px) {
  .ruled-sheet { min-height: 600px; background-image: linear-gradient(90deg,transparent 34px,var(--paper-margin) 34px,var(--paper-margin) 36px,transparent 36px),repeating-linear-gradient(0deg,transparent 0 27px,var(--paper-rule) 27px 28px); }
  .ruled-sheet .paper-holes { left: 10px; width: 14px; }
  .ruled-sheet .paper-holes i { width: 12px; height: 12px; }
  .ruled-sheet .sticker-copy { width: 86%; margin-left: 10%; }
  .paper-note { font-size: 17px; right: 7%; bottom: 22px; }
}

/* A movable collage: small accents, large characters, and two tucked layers. */
.hero-bruh { width: 220px; left: calc(50% - min(320px,29%) - 180px); top: 105px; }
.hero-vibe { width: 155px; right: calc(50% - min(320px,29%) - 112px); top: 170px; }
.hero-grass { width: 170px; left: 9%; top: 450px; }
.hero-thoughts { width: 215px; right: 7%; top: 450px; }
.hero-chaos { width: 92px; top: 340px; left: 3%; }
.hero-whatever { width: 110px; top: 340px; right: 2%; }
.hero-bruh[data-physics-state="stuck"], .hero-vibe[data-physics-state="stuck"] { z-index: 2; }
.hero-bruh:focus-visible, .hero-vibe:focus-visible { z-index: 6; }
.palette-error { width: 90px; }
.palette-weird { width: 145px; }
.palette-brain { width: 110px; }
.palette-grass { width: 125px; }
.reset-stickers {
  position: relative;
  display: flex; align-items: center; gap: 16px; min-height: 76px;
  padding: 12px 24px 12px 14px; font: 700 18px/1.2 Arial,Helvetica,sans-serif;
  background: var(--pink); border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink);
}
.reset-controls { position: fixed; right: 24px; bottom: 24px; z-index: 60; display: flex; gap: 14px; pointer-events: none; }
.reset-controls button { pointer-events: auto; }
.reset-stickers.reset-colors { background: var(--acid); }
.reset-stickers .icon { width: 42px; height: 42px; padding: 7px; background: var(--paper); border: 2px solid var(--ink); stroke-width: 2.3; }
.hero-bottom { right: calc(5% + 245px); }
#notice { bottom: 116px; }
footer { padding-bottom: 120px; }
@media (hover:hover) and (pointer:fine) {
  .reset-stickers:hover { box-shadow: 9px 9px 0 var(--ink); }
}
@media (max-width:1000px) and (min-width:761px) {
  .hero-bruh { width: 185px; left: calc(50% - 28.5% - 145px); }
  .hero-vibe { width: 140px; right: calc(50% - 28.5% - 105px); }
  .hero-grass { width: 155px; left: 6%; }
  .hero-thoughts { width: 180px; right: 5%; }
}
@media (max-width:760px) {
  .hero-bruh { width: 145px; left: 7%; top: 85px; }
  .hero-vibe { width: 105px; right: 9%; top: 120px; }
  .hero-grass { width: 150px; top: 590px; left: 5%; }
  .hero-thoughts { width: 165px; top: 610px; right: 3%; }
  .hero-chaos { width: 92px; top: 780px; left: 9%; }
  .hero-whatever { width: 115px; top: 800px; right: 5%; }
  .palette-weird { width: 130px; }
  .palette-grass { width: 110px; }
  .reset-controls { right: 16px; bottom: 16px; left: 16px; gap: 10px; }
  .reset-stickers { flex: 1; justify-content: center; min-width: 0; min-height: 64px; padding: 10px 8px; gap: 8px; font-size: 14px; border-width: 3px; box-shadow: 5px 5px 0 var(--ink); }
  .reset-stickers .icon { flex-shrink: 0; width: 32px; height: 32px; padding: 5px; }
  .hero-bottom { right: auto; flex-direction: column; align-items: flex-start; gap: 10px; }
  footer { padding-bottom: 115px; }
  #notice { bottom: 100px; }
}

/* Animate the artwork; its outer button still belongs to the physics world. */
.physics-object img { transform-origin: 50% 65%; }
.physics-object[data-physics-state="stuck"] img {
  animation: sticker-rock 6s var(--ease-in-out) var(--sticker-delay,0s) infinite !important;
}
.hero-grass[data-physics-state="stuck"] img,
.palette-grass[data-physics-state="stuck"] img,
.sticker-cat[data-physics-state="stuck"] img { animation-name: sticker-hop !important; }
.hero-thoughts[data-physics-state="stuck"] img,
.hero-chaos[data-physics-state="stuck"] img,
.palette-brain[data-physics-state="stuck"] img { animation-name: sticker-twitch !important; }
.hero-bruh { --sticker-delay: -1.2s; }
.hero-vibe { --sticker-delay: -3.8s; }
.hero-grass { --sticker-delay: -2.4s; }
.hero-thoughts { --sticker-delay: -.7s; }
.hero-chaos { --sticker-delay: -4.5s; }
.hero-whatever { --sticker-delay: -3.2s; }
.palette-error { --sticker-delay: -.3s; }
.palette-weird { --sticker-delay: -3s; }
.palette-brain { --sticker-delay: -1.9s; }
.palette-grass { --sticker-delay: -4.2s; }
.sticker-cat { --sticker-delay: -2.7s; }
.sticker-frog { --sticker-delay: -4.8s; }
@keyframes sticker-rock {
  0%,60%,100% { transform: rotate(0deg); }
  70% { transform: rotate(-4deg); }
  82% { transform: rotate(3deg); }
  92% { transform: rotate(-1deg); }
}
@keyframes sticker-hop {
  0%,62%,100% { transform: translateY(0) rotate(0deg); }
  72% { transform: translateY(-6px) rotate(-2deg); }
  83% { transform: translateY(0) rotate(2deg); }
  93% { transform: translateY(-2px) rotate(0deg); }
}
@keyframes sticker-twitch {
  0%,68%,86%,100% { transform: rotate(0deg) scale(1); }
  72% { transform: rotate(-3deg) scale(1.025); }
  77% { transform: rotate(3deg) scale(1.025); }
  81% { transform: rotate(-2deg) scale(1); }
}
.physics-object.motion-offscreen img,
.motion-hidden .physics-object img { animation-play-state: paused !important; }
@media (hover:hover) and (pointer:fine) {
  .physics-object[data-physics-state="stuck"]:hover img { animation-play-state: paused !important; }
}
.physics-object[data-physics-state="stuck"]:focus-visible img { animation-play-state: paused !important; }
.motion-reduced .physics-object[data-physics-state="stuck"] img { animation: none !important; }
@media (prefers-reduced-motion:reduce) {
  .physics-object[data-physics-state="stuck"] img { animation: none !important; }
}

/* Scatter the color toys through the upper collage instead of a bottom row. */
.hero .flower { width: 140px; height: 140px; left: 4%; top: 12px; }
.hero .flower .face { width: 96px; height: 96px; padding-top: 27px; gap: 24px; border-width: 3px; }
.hero .flower .face i { width: 8px; height: 15px; }
.hero .flower .face b { left: 29px; top: 53px; width: 37px; height: 21px; border-width: 4px; }
.hero .orange { width: 142px; height: 142px; right: 2.5%; top: 25px; }
.hero .orange .face { width: 88px; height: 88px; padding-top: 23px; gap: 24px; }
.hero .orange .face i { width: 9px; height: 16px; }
.hero .orange .face b { left: 26px; top: 48px; width: 36px; height: 20px; border-width: 4px; }
.hero .squiggle { width: 152px; height: 120px; left: 2%; top: 270px; }
.hero .squiggle span { width: 34px; height: 65px; }
.hero .squiggle span:nth-child(even) { height: 115px; }
.hero .star { right: 12%; top: 310px; }
.hero .star svg { width: 112px; height: 112px; }
@media (max-width:760px) {
  .hero { padding-top: 315px; min-height: 1260px; }
  .hero .flower { width: 118px; height: 118px; left: 2%; top: 20px; }
  .hero .flower .face { width: 82px; height: 82px; padding-top: 23px; gap: 21px; }
  .hero .flower .face b { left: 23px; top: 45px; width: 32px; height: 18px; }
  .hero .orange { width: 126px; height: 126px; right: 3%; top: 10px; }
  .hero .squiggle { width: 134px; height: 110px; left: 36%; top: 40px; }
  .hero .squiggle span { width: 30px; height: 58px; }
  .hero .squiggle span:nth-child(even) { height: 104px; }
  .hero .star { right: 40%; top: 165px; }
  .hero .star svg { width: 96px; height: 96px; }
  .hero-bruh { top: 205px; }
  .hero-vibe { top: 240px; }
  .hero-grass { top: 720px; }
  .hero-thoughts { top: 750px; }
  .hero-chaos { top: 910px; }
  .hero-whatever { top: 940px; }
}

/* The palette's former stickers now join the main collage. */
.hero { min-height: 1100px; }
.hero .palette-error { width: 80px; left: 23%; top: 15px; transform: rotate(12deg); }
.hero .palette-brain { width: 95px; left: auto; right: 7%; top: 190px; transform: rotate(-10deg); }
.hero .palette-weird { width: 120px; left: 18%; top: 750px; transform: rotate(9deg); }
.hero .palette-grass { width: 90px; right: 27%; top: 780px; transform: rotate(-14deg); }
/* Ink lives under the stickers and paper labels, on the actual notebook. */
.hero .emoji-lol { width: 108px; left: 31%; top: 640px; transform: rotate(-9deg); --emoji-delay: -1s; }
.hero .emoji-oof { width: 86px; left: 2%; top: 620px; transform: rotate(8deg); --emoji-delay: -3s; }
.hero .emoji-wow { width: 105px; right: 2%; top: 620px; transform: rotate(10deg); --emoji-delay: -4.5s; }
.hero .emoji-ez { width: 98px; left: 56%; top: 610px; transform: rotate(-5deg); --emoji-delay: -2.3s; }
.ruled-sheet .emoji-love { width: 110px; left: 15%; top: 520px; transform: rotate(-12deg); --emoji-delay: -.7s; }
.emoji-art { width: 100%; height: auto; display: block; overflow: visible; pointer-events: none; }
.color-art { width: 100%; height: auto; display: block; overflow: visible; pointer-events: none; }
.color-wordmark { font: 23px 'Permanent Marker',sans-serif; fill: #171515; letter-spacing: -1px; }
.can-wordmark { font-size: 19px; }
.hero .color-cassette { width: 130px; left: 14%; top: 650px; transform: rotate(-12deg); --emoji-delay: -2s; }
.hero .color-cloud { width: 135px; left: 45%; top: 655px; transform: rotate(6deg); --emoji-delay: -4s; }
.hero .color-can { width: 110px; right: 15%; top: 645px; transform: rotate(12deg); --emoji-delay: -1s; }
.hero .color-heart { width: 95px; left: 44%; top: 755px; transform: rotate(-7deg); --emoji-delay: -3s; }
.cassette-reel { animation-name: cassette-rewind; }
.spray-puffs { animation-name: emoji-glint; }
@keyframes cassette-rewind { 0%,60% { transform: rotate(0deg); } 85%,100% { transform: rotate(-180deg); } }
.emoji-word { font: 28px 'Permanent Marker',sans-serif; fill: #171515; letter-spacing: -1px; }
.emoji-animated { transform-box: fill-box; transform-origin: center; animation-duration: 6s; animation-timing-function: var(--ease-in-out); animation-delay: var(--emoji-delay,0s); animation-iteration-count: infinite; animation-play-state: paused; }
.emoji-blink { animation-name: emoji-blink; }
.laugh-face { animation-name: emoji-chuckle; }
.laugh-mouth { animation-name: emoji-mouth; }
.emoji-tear { animation-name: emoji-teardrop; }
.tear-right { animation-delay: calc(var(--emoji-delay,0s) - .3s); }
.oof-eyes { animation-name: emoji-dizzy; }
.wow-brows { animation-name: emoji-surprise; }
.wow-mouth { animation-name: emoji-mouth; }
.glasses-glint { animation-name: emoji-glint; }
.ez-smirk { animation-name: emoji-smirk; }
.love-hearts { animation-name: emoji-hearts; }
.emoji-sticker:is([data-physics-state="stuck"],[data-physics-state="pasted"],[data-physics-state="resting"]) .emoji-animated { animation-play-state: running; }
.emoji-sticker.motion-offscreen .emoji-animated,
.motion-hidden .emoji-sticker .emoji-animated,
.emoji-sticker:focus-visible .emoji-animated { animation-play-state: paused !important; }
@media (hover:hover) and (pointer:fine) { .emoji-sticker:hover .emoji-animated { animation-play-state: paused !important; } }
.motion-reduced .emoji-sticker .emoji-animated { animation: none !important; }
@media (prefers-reduced-motion:reduce) { .emoji-sticker .emoji-animated { animation: none !important; } }
@keyframes emoji-blink { 0%,46%,53%,100% { transform: scaleY(1); } 49% { transform: scaleY(.15); } }
@keyframes emoji-chuckle { 0%,54%,82%,100% { transform: translateY(0) rotate(0deg); } 61%,73% { transform: translateY(-2px) rotate(-4deg); } 67%,78% { transform: translateY(1px) rotate(3deg); } }
@keyframes emoji-mouth { 0%,55%,82%,100% { transform: scaleY(1); } 63%,75% { transform: scaleY(1.15); } 69% { transform: scaleY(.95); } }
@keyframes emoji-teardrop { 0%,54%,82%,100% { transform: translateY(0); opacity: 0; } 61% { transform: translateY(2px); opacity: 1; } 76% { transform: translateY(15px); opacity: 0; } }
@keyframes emoji-dizzy { 0%,55%,83%,100% { transform: rotate(0deg); } 62%,75% { transform: rotate(-7deg); } 68% { transform: rotate(7deg); } }
@keyframes emoji-surprise { 0%,55%,85%,100% { transform: translateY(0); } 64%,74% { transform: translateY(-5px); } }
@keyframes emoji-glint { 0%,60%,82%,100% { transform: translateX(-6px); opacity: 0; } 69% { transform: translateX(4px); opacity: 1; } 79% { transform: translateX(12px); opacity: 0; } }
@keyframes emoji-smirk { 0%,58%,86%,100% { transform: rotate(0deg); } 70% { transform: rotate(-7deg); } }
@keyframes emoji-hearts { 0%,55%,88%,100% { transform: scale(1); } 63%,79% { transform: scale(1.14); } 71% { transform: scale(.96); } }
.ruled-sheet { min-height: 780px; }
.ruled-sheet .physics-object { z-index: 5; }
#graffiti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; touch-action: pan-y; }
.ruled-sheet[data-ink-tool="draw"] #graffiti-canvas { pointer-events: auto; touch-action: none; cursor: crosshair; }
.ruled-sheet[data-ink-tool="erase"] #graffiti-canvas { pointer-events: auto; touch-action: none; cursor: cell; }
.ruled-sheet[data-ink-tool="spray"] #graffiti-canvas { pointer-events: auto; touch-action: none; cursor: crosshair; z-index: 8; }
.ruled-sheet[data-ink-tool="erase"] #graffiti-canvas { z-index: 8; }
#spray-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.ruled-sheet[data-ink-tool="tear"] .loose-sticker,
.ruled-sheet[data-ink-tool="tear"] .meme-sticker { cursor: ew-resize; touch-action: none; }
.physics-object.is-torn { cursor: default; }
.physics-object.is-torn > img, .physics-object.is-torn > svg { visibility: hidden; }
.physics-object.is-torn > img, .physics-object.is-torn > svg, .physics-object.is-torn > svg * { animation: none !important; }
.tear-part { position: absolute; inset: 0; display: block; pointer-events: none; transform-origin: center; }
.tear-left { clip-path: polygon(0 0,52% 0,48% 10%,53% 20%,47% 30%,52% 40%,48% 50%,53% 60%,47% 70%,52% 80%,48% 90%,51% 100%,0 100%); }
.tear-right { clip-path: polygon(52% 0,100% 0,100% 100%,51% 100%,48% 90%,52% 80%,47% 70%,53% 60%,48% 50%,52% 40%,47% 30%,53% 20%,48% 10%); }
#sticker-book .tear-part > img, #sticker-book .tear-part > svg { width: 100%; height: 100%; object-fit: contain; }
#sticker-book .tear-part, #sticker-book .tear-part * { animation: none !important; transition: none !important; }
.drawing-controls button[data-ink-tool="spray"][aria-pressed="true"] { background: var(--pink); }
.drawing-controls button[data-ink-tool="tear"][aria-pressed="true"] { background: var(--lilac); }
#graffiti-canvas:focus-visible { outline: 3px dashed var(--pink); outline-offset: -8px; }
#ink-cursor { position: absolute; width: 18px; height: 18px; border: 2px solid var(--ink); background: var(--pink); border-radius: 50%; transform: translate(-50%,-50%); z-index: 2; pointer-events: none; }
.drawing-tools { position: absolute; top: 330px; left: 8%; right: 5%; z-index: 4; padding: 12px; background: var(--paper); border: var(--rule); box-shadow: 5px 5px 0 var(--ink); text-align: left; }
.drawing-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drawing-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 10px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 12px; font-weight: 700; }
.drawing-controls button[aria-pressed="true"] { background: var(--acid); box-shadow: inset 2px 2px 0 var(--ink); }
.drawing-controls button, .drawing-controls input { scroll-margin-bottom: 130px; }
.drawing-controls button[data-ink-tool="draw"][aria-pressed="true"] { background: var(--pink); }
.drawing-controls button[data-ink-tool="erase"][aria-pressed="true"] { background: var(--lilac); }
.drawing-controls button:active:not(:disabled) { transform: translate(2px,2px); box-shadow: none; }
.drawing-controls button:disabled { opacity: .45; cursor: default; box-shadow: none; }
.drawing-controls .icon { width: 22px; height: 22px; }
.drawing-controls label { font-size: 11px; font-weight: 700; }
.ink-color-label { display: flex; align-items: center; gap: 6px; }
.drawing-controls input[type=color] { width: 42px; height: 42px; padding: 3px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
.ink-size-label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 74px; }
.ink-size-label output { font-family: 'Courier New',monospace; }
.drawing-controls input[type=range] { grid-column: 1/-1; width: 74px; margin: 0; height: 25px; }
.drawing-controls input[type=range]::-webkit-slider-runnable-track { background: var(--pink); height: 8px; }
.drawing-controls input[type=range]::-webkit-slider-thumb { width: 14px; height: 20px; margin-top: -8px; border-width: 2px; }
.drawing-controls input[type=range]::-moz-range-track { background: var(--pink); height: 6px; }
.drawing-controls input[type=range]::-moz-range-thumb { width: 10px; height: 16px; border-width: 2px; }
#ink-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.4; }
/* A personal notebook page with a taped photo and a coffee cutout. */
.maker-section { padding: 74px 5% 88px; border-bottom: 4px solid var(--ink); background-color: var(--paper); background-image: repeating-linear-gradient(to bottom,transparent 0,transparent 39px,#9ab7d070 39px,#9ab7d070 40px); }
.maker-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0,1fr) 225px; gap: 48px; align-items: center; }
.maker-portrait { position: relative; margin: 0; padding: 12px 12px 18px; background: var(--paper); border: var(--rule); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-5deg); }
.maker-portrait::before { content: ''; position: absolute; z-index: 1; width: 140px; height: 50px; top: -27px; left: 50%; background: url('assets/portrait-tape-real-6fe5832834.webp') center / contain no-repeat; transform: translateX(-50%) rotate(8deg); pointer-events: none; opacity: .82; }
.portrait-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; aspect-ratio: 4/5; background: var(--lilac); border: 2px solid var(--ink); color: var(--ink); }
.portrait-placeholder .icon { width: 60px; height: 60px; }
.portrait-placeholder span { font-size: 12px; font-weight: 700; }
.maker-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border: 2px solid var(--ink); }
.maker-portrait figcaption { padding-top: 16px; font: 18px/1.4 'Permanent Marker',sans-serif; text-align: center; }
/* A quick, reversible response when the taped portrait is hovered. */
@media (hover:hover) and (pointer:fine) {
  .maker-portrait { transition: transform 200ms var(--ease-out); }
  .maker-portrait img { transition: transform 200ms var(--ease-out); }
  .maker-portrait::before { transition: transform 200ms var(--ease-out); }
  .maker-portrait figcaption { transition: transform 160ms var(--ease-out); }
  .maker-portrait:hover { transform: translateY(-5px) rotate(-2deg); }
  .maker-portrait:hover img { transform: scale(1.025) rotate(-1deg); }
  .maker-portrait:hover::before { transform: translateX(-50%) rotate(5deg); }
  .maker-portrait:hover figcaption { transform: translateY(-2px) rotate(2deg); }
}
@media (prefers-reduced-motion:reduce) {
  .maker-portrait, .maker-portrait img, .maker-portrait::before, .maker-portrait figcaption { transition: none; }
  .maker-portrait:hover { transform: rotate(-5deg); }
  .maker-portrait:hover img, .maker-portrait:hover figcaption { transform: none; }
  .maker-portrait:hover::before { transform: translateX(-50%) rotate(8deg); }
}
.maker-kicker { margin: 0 0 12px; font: 700 11px/1.4 'Courier New',monospace; letter-spacing: .08em; text-transform: uppercase; }
.maker-copy h2 { font-size: clamp(40px,4.5vw,58px); line-height: 1.15; margin: 0 0 22px; }
.maker-copy h2 em { display: inline-block; padding: 2px 12px 6px; margin-top: 6px; background: var(--ink); color: var(--pink); transform: rotate(-3deg); }
.maker-name { font-size: 20px; font-weight: 700; margin: 0 0 5px; }
.maker-role { font-size: 12px; margin: 0 0 15px; }
.maker-bio { max-width: 36ch; font-size: 15px; line-height: 1.6; margin: 0 0 22px; }
.maker-linkedin { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-height: 46px; }
.maker-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.maker-social { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 230px; max-width: 100%; min-height: 46px; }
@media (max-width:760px) { .maker-links { justify-content: center; } }
.maker-coffee { text-align: center; }
.coffee-note { margin: 0 0 8px; font: 26px/1.4 'Permanent Marker',sans-serif; transform: rotate(-8deg); }
.coffee-sticker { display: block; width: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; color: var(--ink); text-decoration: none; transform: rotate(7deg); cursor: pointer; }
.coffee-art { display: block; width: 200px; max-width: 100%; margin: 0 auto; overflow: visible; }
.coffee-wordmark { font: 29px 'Permanent Marker',sans-serif; fill: #171515; letter-spacing: -1px; }
.coffee-sticker > span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 12px; background: var(--acid); border: var(--rule); box-shadow: 4px 4px 0 var(--ink); font-size: 13px; font-weight: 700; }
.coffee-via { margin: 24px 0 0; font-size: 11px; line-height: 1.5; }
.coffee-via span { display: inline-block; margin-top: 5px; font-weight: 700; }
.coffee-open { display: inline-block; margin-top: 8px; padding: 6px; color: var(--ink); font-size: 12px; font-weight: 700; text-underline-offset: 3px; }
.coffee-steam { animation-name: coffee-steam; }
@keyframes coffee-steam { 0%,55%,100% { transform: translateY(0); opacity: 1; } 75% { transform: translateY(-6px); opacity: .35; } }
@media (hover:hover) and (pointer:fine) { .maker-social:hover, .coffee-sticker:hover > span { box-shadow: 6px 6px 0 var(--ink); } }
@media (max-width:1000px) { .maker-inner { grid-template-columns: 190px minmax(0,1fr) 180px; gap: 26px; } .coffee-art { width: 165px; } .coffee-sticker > span { font-size: 12px; gap: 6px; } }
@media (max-width:760px) { .maker-section { padding: 56px 8% 120px; } .maker-inner { grid-template-columns: minmax(0,1fr); gap: 36px; } .maker-portrait { width: min(220px,82%); margin: 0 auto; } .maker-copy { text-align: center; } .maker-copy h2 { font-size: 46px; } .maker-bio { margin-left: auto; margin-right: auto; } .maker-coffee { padding-top: 8px; } .coffee-art { width: 185px; } .coffee-sticker { max-width: 250px; margin: 0 auto; } }

/* Photo cutouts share the hero's drag, gravity and reset behavior. */
.gaze-sticker .emoji-art { overflow: visible; }
.gaze-word { font: 23px 'Permanent Marker',sans-serif; fill: #171515; letter-spacing: -1px; }
.gaze-word-large { font-size: 29px; }
.hero .gaze-eyes { width: 160px; left: 43%; top: 0; transform: rotate(-5deg); --emoji-delay: -1.6s; }
.hero .gaze-sus { width: 110px; right: 2%; top: 170px; transform: rotate(11deg); --emoji-delay: -3.2s; }
.hero .gaze-yikes { width: 105px; left: 1%; top: 455px; transform: rotate(-12deg); --emoji-delay: -.4s; }
.hero .gaze-dude { width: 160px; left: 44%; top: 1100px; transform: rotate(-7deg); --emoji-delay: -4.7s; }
.hero .palette-brain { right: 3%; top: 1240px; }
[data-look] { transition: transform 150ms var(--ease-out); }
.gaze-bob { animation-name: gaze-bob; }
.gaze-wobble { animation-name: gaze-wobble; }
.gaze-squish { animation-name: gaze-squish; }
@keyframes gaze-bob { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-5px) rotate(1deg); } }
@keyframes gaze-wobble { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes gaze-squish { 0%,100% { transform: scale(1,1); } 50% { transform: scale(1.025,.975); } }
.motion-reduced [data-look] { transition: none; }
@media (prefers-reduced-motion:reduce) { [data-look] { transition: none; } }
@media (max-width:760px) {
  .hero .gaze-eyes { width: 135px; left: 43%; top: 150px; }
  .hero .gaze-sus { width: 90px; right: 3%; top: 895px; }
  .hero .gaze-yikes { width: 95px; left: 5%; top: 1420px; }
  .hero .gaze-dude { width: 95px; left: 40%; top: 2350px; }
}
.hero { min-height: 1430px; }
.hero .photo-quest { width: clamp(150px,17vw,220px); left: 24%; top: 710px; transform: rotate(-12deg); --sticker-delay: -1.3s; }
.hero .photo-offline { width: clamp(150px,16vw,205px); right: 26%; top: 730px; transform: rotate(9deg); --sticker-delay: -3.7s; }
.hero .photo-roller { width: clamp(145px,15vw,190px); left: 18%; top: 1060px; transform: rotate(7deg); --sticker-delay: -2.4s; }
.hero .photo-battery { width: clamp(145px,14vw,175px); right: 13%; top: 1075px; transform: rotate(-8deg); --sticker-delay: -.6s; }
.photo-new[data-physics-state="stuck"] img { animation-name: photo-bob !important; }
.photo-roller[data-physics-state="stuck"] img { animation-name: photo-roll !important; }
.photo-battery[data-physics-state="stuck"] img { animation-name: photo-nod !important; }
@keyframes photo-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes photo-roll { 0%,100% { transform: translateX(-4px) rotate(-2deg); } 50% { transform: translateX(4px) rotate(2deg); } }
@keyframes photo-nod { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(5px) rotate(3deg); } }
.hero .photo-skate { width: clamp(130px,14vw,180px); left: 2%; top: 825px; transform: rotate(-9deg); --sticker-delay: -1.5s; }
.hero .photo-cat { width: clamp(140px,15vw,195px); left: 37%; top: 890px; transform: rotate(8deg); --sticker-delay: -4s; }
.hero .photo-rave { width: clamp(135px,14vw,185px); right: 3%; top: 800px; transform: rotate(-6deg); --sticker-delay: -.8s; }
.hero .photo-pigeon { width: clamp(130px,13vw,170px); right: 24%; top: 920px; transform: rotate(10deg); --sticker-delay: -3s; }
@media (max-width:760px) {
  .hero { min-height: 2460px; }
  .hero .palette-error { width: 65px; left: 47%; top: 5px; }
  .hero .palette-brain { width: 95px; left: 5%; right: auto; top: 1240px; }
  .hero .palette-weird { width: 110px; left: auto; right: 5%; top: 1225px; }
  .hero .palette-grass { width: 80px; left: 43%; right: auto; top: 1375px; }
  .hero .emoji-lol { width: 80px; left: 40%; top: 215px; }
  .hero .emoji-oof { width: 76px; left: 7%; top: 1070px; }
  .hero .emoji-wow { width: 88px; right: 7%; top: 1085px; }
  .hero .emoji-ez { width: 90px; left: 39%; top: 870px; }
  .hero .color-cassette { width: 100px; left: 5%; top: 1360px; }
  .hero .color-cloud { width: 95px; left: auto; right: 5%; top: 1375px; }
  .hero .color-can { width: 78px; left: 40%; right: auto; top: 995px; }
  .hero .color-heart { width: 80px; left: 43%; top: 1190px; }
  .ruled-sheet .emoji-love { width: 95px; left: 13%; top: 820px; }
  .ruled-sheet { min-height: 1120px; }
  .drawing-tools { top: 440px; left: 12%; right: 5%; padding: 10px; }
  .drawing-controls { gap: 10px 8px; }
  .drawing-controls button { flex-grow: 1; }
  .drawing-controls .ink-color-label { flex-grow: 1; }
  .drawing-controls .ink-size-label { flex-grow: 1; min-width: 85px; }
  .drawing-controls input[type=range] { width: 100%; }
  .hero .photo-sticker { width: clamp(125px,37vw,175px); }
  .hero .photo-skate { left: 5%; top: 1510px; }
  .hero .photo-cat { left: auto; right: 5%; top: 1545px; }
  .hero .photo-rave { left: 6%; right: auto; top: 1730px; }
  .hero .photo-pigeon { right: 6%; top: 1760px; }
  .hero .photo-quest { width: 140px; left: 4%; top: 1940px; }
  .hero .photo-offline { width: 135px; right: 5%; top: 1970px; }
  .hero .photo-roller { width: 125px; left: 7%; top: 2150px; }
  .hero .photo-battery { width: 130px; right: 6%; top: 2165px; }
  .palette-section { padding-top: 32px; padding-bottom: 30px; }
}

/* One screen of layered stickers, with the poster above the resting collage. */
:root { --header-height: 76px; }
header { height: var(--header-height); min-height: 0; padding: 12px 4%; }
.hero {
  height: calc(100svh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  min-height: 0; max-width: none; margin: 0; padding: 0;
  display: grid; place-items: center; isolation: isolate;
}
.hero .hero-content {
  width: min(580px,52%); margin: 0; padding: 24px 24px 26px;
  z-index: 15; box-shadow: 9px 9px 0 var(--ink);
}
.hero h1 { font-size: clamp(38px,min(7.1vw,10svh),82px); margin: 0; }
.hero .color-word { margin-top: 10px; padding: 0 12px 6px; }
.hero .intro { margin: 18px 0; font-size: 15px; }
.hero .primary { padding: 8px 8px 8px 16px; gap: 18px; font-size: 15px; }
.hero .hero-palette { margin: 12px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink); }
.hero-palette span { font-weight: 700; }
.hero .loose-sticker {
  width: clamp(120px,min(var(--sticker-size,18vw),36svh),270px);
  left: var(--sticker-x,0%); top: var(--sticker-y,0%);
  right: auto; bottom: auto; z-index: 5;
}
.hero .physics-object:focus-visible { z-index: 18; }
.hero .hero-bruh { --sticker-size: 23vw; --sticker-x: 0%; --sticker-y: 21%; }
.hero .hero-vibe { --sticker-size: 20vw; --sticker-x: 76%; --sticker-y: 23%; }
.hero .hero-grass { --sticker-size: 22vw; --sticker-x: 8%; --sticker-y: 46%; }
.hero .hero-thoughts { --sticker-size: 22vw; --sticker-x: 78%; --sticker-y: 45%; }
.hero .hero-chaos { --sticker-size: 13vw; --sticker-x: 0%; --sticker-y: 49%; }
.hero .hero-whatever { --sticker-size: 15vw; --sticker-x: 89%; --sticker-y: 24%; }
.hero .palette-error { --sticker-size: 13vw; --sticker-x: 20%; --sticker-y: 0%; }
.hero .palette-grass { --sticker-size: 15vw; --sticker-x: 52%; --sticker-y: 75%; }
.hero .palette-weird { --sticker-size: 19vw; --sticker-x: 27%; --sticker-y: 67%; }
.hero .palette-brain { --sticker-size: 15vw; --sticker-x: 86%; --sticker-y: 6%; }
.hero .emoji-lol { --sticker-size: 13vw; --sticker-x: 32%; --sticker-y: 0%; }
.hero .emoji-oof { --sticker-size: 11vw; --sticker-x: 1%; --sticker-y: 75%; }
.hero .emoji-wow { --sticker-size: 12vw; --sticker-x: 88%; --sticker-y: 73%; }
.hero .emoji-ez { --sticker-size: 13vw; --sticker-x: 56%; --sticker-y: 64%; }
.hero .color-cassette { --sticker-size: 16vw; --sticker-x: 17%; --sticker-y: 34%; }
.hero .color-cloud { --sticker-size: 17vw; --sticker-x: 40%; --sticker-y: 75%; }
.hero .color-can { --sticker-size: 13vw; --sticker-x: 71%; --sticker-y: 52%; }
.hero .color-heart { --sticker-size: 13vw; --sticker-x: 52%; --sticker-y: 7%; }
.hero .gaze-eyes { --sticker-size: 18vw; --sticker-x: 43%; --sticker-y: 0%; }
.hero .gaze-sus { --sticker-size: 14vw; --sticker-x: 86%; --sticker-y: 32%; }
.hero .gaze-yikes { --sticker-size: 13vw; --sticker-x: 3%; --sticker-y: 35%; }
.hero .gaze-dude { --sticker-size: 19vw; --sticker-x: 58%; --sticker-y: 76%; }
.hero .photo-skate { --sticker-size: 22vw; --sticker-x: 0%; --sticker-y: 60%; }
.hero .photo-cat { --sticker-size: 23vw; --sticker-x: 34%; --sticker-y: 72%; }
.hero .photo-rave { --sticker-size: 22vw; --sticker-x: 78%; --sticker-y: 34%; }
.hero .photo-pigeon { --sticker-size: 21vw; --sticker-x: 67%; --sticker-y: 66%; }
.hero .photo-quest { --sticker-size: 23vw; --sticker-x: 16%; --sticker-y: 55%; }
.hero .photo-offline { --sticker-size: 24vw; --sticker-x: 70%; --sticker-y: 10%; }
.hero .photo-roller { --sticker-size: 21vw; --sticker-x: 67%; --sticker-y: 61%; z-index: 7; }
.hero .photo-battery { --sticker-size: 19vw; --sticker-x: 83%; --sticker-y: 56%; }
.hero .flower { width: 160px; height: 160px; left: 1%; top: 1%; }
.hero .orange { width: 164px; height: 164px; left: 85%; right: auto; top: 2%; }
.hero .squiggle { width: 170px; height: 130px; left: 13%; top: 13%; }
.hero .star { left: 72%; right: auto; top: 35%; }
.hero .star svg { width: 150px; height: 150px; }
.hero .hero-bottom { left: 4%; right: calc(4% + 255px); bottom: 14px; z-index: 16; flex-direction: row; align-items: center; gap: 12px; }
.hero .hero-bottom p { font-size: 11px; padding: 5px 7px; border: 2px solid var(--ink); background: var(--paper); box-shadow: 2px 2px 0 var(--ink); text-align: left; }
.hero .hero-bottom a { padding: 9px 12px; font-size: 12px; white-space: nowrap; }
@media (max-width:760px) {
  :root { --header-height: 68px; }
  header { gap: 10px; padding: 10px 4%; }
  header .logo { font-size: 27px; gap: 5px; }
  header .logo-mark { width: 25px; height: 25px; }
  header .logo .logo-mark { width: 34px; height: 34px; }
  header nav { gap: 7px; font-size: 11px; flex-wrap: nowrap; }
  header nav a { padding: 9px 8px; }
  .hero .hero-content { width: min(420px,80%); padding: 17px 14px 19px; }
  .hero h1 { font-size: clamp(32px,min(11vw,8svh),58px); }
  .hero .intro { font-size: 13px; margin: 13px 0; }
  .hero .primary { font-size: 13px; padding: 6px 6px 6px 12px; gap: 10px; }
  .hero .primary > span { width: 32px; height: 32px; }
  .hero .loose-sticker { width: clamp(85px,min(var(--sticker-size,145px),30svh),190px); }
  .hero .hero-bruh { --sticker-size: 170px; --sticker-x: 0%; --sticker-y: 21%; }
  .hero .hero-vibe { --sticker-size: 140px; --sticker-x: 69%; --sticker-y: 21%; }
  .hero .hero-grass { --sticker-size: 165px; --sticker-x: 1%; --sticker-y: 40%; }
  .hero .hero-thoughts { --sticker-size: 170px; --sticker-x: 69%; --sticker-y: 40%; }
  .hero .hero-chaos { --sticker-size: 100px; --sticker-x: 0%; --sticker-y: 32%; }
  .hero .hero-whatever { --sticker-size: 110px; --sticker-x: 82%; --sticker-y: 34%; }
  .hero .palette-error { --sticker-size: 85px; --sticker-x: 27%; --sticker-y: 0%; }
  .hero .palette-grass { --sticker-size: 100px; --sticker-x: 53%; --sticker-y: 80%; }
  .hero .palette-weird { --sticker-size: 140px; --sticker-x: 12%; --sticker-y: 67%; }
  .hero .palette-brain { --sticker-size: 105px; --sticker-x: 78%; --sticker-y: 5%; }
  .hero .emoji-lol { --sticker-size: 95px; --sticker-x: 18%; --sticker-y: 4%; }
  .hero .emoji-oof { --sticker-size: 90px; --sticker-x: 0%; --sticker-y: 81%; }
  .hero .emoji-wow { --sticker-size: 95px; --sticker-x: 82%; --sticker-y: 82%; }
  .hero .emoji-ez { --sticker-size: 105px; --sticker-x: 54%; --sticker-y: 69%; }
  .hero .color-cassette { --sticker-size: 125px; --sticker-x: 3%; --sticker-y: 54%; }
  .hero .color-cloud { --sticker-size: 125px; --sticker-x: 29%; --sticker-y: 79%; }
  .hero .color-can { --sticker-size: 95px; --sticker-x: 78%; --sticker-y: 59%; }
  .hero .color-heart { --sticker-size: 100px; --sticker-x: 42%; --sticker-y: 10%; }
  .hero .gaze-eyes { --sticker-size: 160px; --sticker-x: 39%; --sticker-y: 2%; }
  .hero .gaze-sus { --sticker-size: 110px; --sticker-x: 74%; --sticker-y: 29%; }
  .hero .gaze-yikes { --sticker-size: 105px; --sticker-x: 0%; --sticker-y: 35%; }
  .hero .gaze-dude { --sticker-size: 130px; --sticker-x: 56%; --sticker-y: 84%; }
  .hero .photo-skate { --sticker-size: 155px; --sticker-x: 0%; --sticker-y: 65%; }
  .hero .photo-cat { --sticker-size: 165px; --sticker-x: 25%; --sticker-y: 72%; }
  .hero .photo-rave { --sticker-size: 155px; --sticker-x: 73%; --sticker-y: 10%; }
  .hero .photo-pigeon { --sticker-size: 160px; --sticker-x: 67%; --sticker-y: 68%; }
  .hero .photo-quest { --sticker-size: 170px; --sticker-x: 6%; --sticker-y: 47%; }
  .hero .photo-offline { --sticker-size: 165px; --sticker-x: 61%; --sticker-y: 50%; }
  .hero .photo-roller { --sticker-size: 172px; --sticker-x: 47%; --sticker-y: 65%; }
  .hero .photo-battery { --sticker-size: 155px; --sticker-x: 82%; --sticker-y: 57%; }
  .hero .flower { width: 140px; height: 140px; left: 2%; top: 0%; }
  .hero .orange { width: 140px; height: 140px; left: 66%; top: 1%; }
  .hero .squiggle { width: 130px; height: 110px; left: 24%; top: 8%; }
  .hero .star { left: 77%; top: 41%; }
  .hero .star svg { width: 110px; height: 110px; }
  .hero .hero-bottom { right: 215px; bottom: 12px; flex-direction: column; align-items: flex-start; gap: 7px; }
  .hero .hero-bottom p { font-size: 10px; max-width: none; }
  .hero .hero-bottom a { padding: 7px 9px; font-size: 11px; }
}
@media (max-height:560px) and (min-width:761px) {
  :root { --header-height: 60px; }
  .hero .hero-content { padding: 12px 20px 14px; }
  .hero h1 { font-size: min(6vw,9svh); }
  .hero .intro { margin: 10px 0; font-size: 13px; }
  .hero .primary { font-size: 13px; padding: 5px 5px 5px 12px; }
  .hero .primary > span { width: 28px; height: 28px; }
  .hero .hero-bottom { bottom: 8px; }
}

/* Keep the drawing panel at the foot of its notebook page. */
.notebook-bottom { position: absolute; left: 8%; right: 5%; bottom: 24px; z-index: 4; display: grid; gap: 16px; pointer-events: none; }
.notebook-bottom .drawing-tools { position: relative; inset: auto; pointer-events: auto; }
.notebook-bottom .paper-note { position: static; justify-self: end; margin: 0; background: transparent; translate: 0 -20%; }
@media (max-width:760px) {
  .notebook-bottom { left: 12%; bottom: 22px; gap: 12px; }
}


/* Stickers cross section seams like a collage pasted onto one long wall. */
body { overflow-x: clip; }
.hero, .ruled-sheet { overflow: visible; isolation: auto; }
.hero .loose-sticker { --sticker-bleed: 96px; width: clamp(140px,min(calc(var(--sticker-size,18vw) * 1.18),42svh),340px); }
.hero .photo-skate { --sticker-size: 26vw; --sticker-x: 0%; --sticker-y: 84%; }
.hero .photo-cat { --sticker-size: 27vw; --sticker-x: 34%; --sticker-y: 88%; }
.hero .photo-pigeon { --sticker-size: 25vw; --sticker-x: 75%; --sticker-y: 85%; }
.hero .photo-quest { --sticker-size: 26vw; --sticker-x: 11%; --sticker-y: 57%; }
.hero .photo-offline { --sticker-size: 27vw; --sticker-x: 73%; --sticker-y: 7%; }
.hero .palette-weird { --sticker-x: 23%; --sticker-y: 72%; }
.hero .gaze-dude { --sticker-x: 64%; --sticker-y: 80%; }
.hero .color-cloud { --sticker-x: 44%; --sticker-y: 89%; }
.palette-section { padding-top: 124px; padding-bottom: 80px; }
.palette-content, .ruled-sheet .sticker-copy, .notebook-bottom { z-index: 12; }
.boundary-sticker { --sticker-bleed: 80px; }
.ruled-sheet .sticker-cat { width: clamp(230px,23vw,310px); left: 2%; top: -64px; }
.ruled-sheet .sticker-frog { width: clamp(220px,22vw,290px); right: 2%; top: -44px; }
.ruled-sheet .emoji-love { width: 160px; left: 75%; top: calc(100% - 80px); }
@media (max-width:760px) {
  .hero .loose-sticker { --sticker-bleed: 64px; width: clamp(95px,min(calc(var(--sticker-size,145px) * 1.12),33svh),220px); }
  .hero .photo-skate { --sticker-size: 170px; --sticker-x: 0%; --sticker-y: 87%; }
  .hero .photo-cat { --sticker-size: 185px; --sticker-x: 28%; --sticker-y: 90%; }
  .hero .photo-pigeon { --sticker-size: 165px; --sticker-x: 70%; --sticker-y: 84%; }
  .hero .photo-quest { --sticker-size: 180px; --sticker-x: 4%; --sticker-y: 54%; }
  .hero .photo-offline { --sticker-size: 175px; --sticker-x: 68%; --sticker-y: 48%; }
  .hero .palette-weird { --sticker-x: 8%; --sticker-y: 74%; }
  .hero .gaze-dude { --sticker-x: 57%; --sticker-y: 81%; }
  .hero .color-cloud { --sticker-x: 30%; --sticker-y: 90%; }
  .palette-section { padding-top: 92px; padding-bottom: 68px; }
  .boundary-sticker { --sticker-bleed: 60px; }
  .ruled-sheet .sticker-cat { width: 160px; left: 3%; top: -48px; }
  .ruled-sheet .sticker-frog { width: 155px; right: 2%; top: -32px; }
  .ruled-sheet .sticker-copy { margin-top: 150px; }
  .ruled-sheet .emoji-love { width: 120px; left: 63%; top: calc(100% - 60px); }
}

/* A lighter hero, with eight cutouts now living on the notebook page. */
.ruled-sheet { min-height: 720px; }
.ruled-sheet .notebook-sticker { width: var(--notebook-size,150px); left: var(--notebook-x,5%); top: var(--notebook-y,320px); right: auto; bottom: auto; --sticker-bleed: 0px; }
.ruled-sheet .hero-chaos { --notebook-size: 140px; --notebook-x: 6%; --notebook-y: 300px; }
.ruled-sheet .hero-whatever { --notebook-size: 145px; --notebook-x: 81%; --notebook-y: 520px; }
.ruled-sheet .palette-weird { --notebook-size: 180px; --notebook-x: 17%; --notebook-y: 590px; }
.ruled-sheet .palette-brain { --notebook-size: 135px; --notebook-x: 76%; --notebook-y: 340px; }
.ruled-sheet .photo-rave { --notebook-size: 210px; --notebook-x: 79%; --notebook-y: 150px; transform: rotate(12deg); }
.ruled-sheet .photo-quest { --notebook-size: 230px; --notebook-x: 0%; --notebook-y: 500px; transform: rotate(-10deg); }
.ruled-sheet .color-cassette { --notebook-size: 150px; --notebook-x: 28%; --notebook-y: 340px; transform: rotate(-12deg); --emoji-delay: -2s; }
.ruled-sheet .gaze-yikes { --notebook-size: 135px; --notebook-x: 65%; --notebook-y: 610px; transform: rotate(9deg); --emoji-delay: -3s; }
@media (max-width:760px) {
  .ruled-sheet { min-height: 1072px; }
  .ruled-sheet .hero-chaos { --notebook-size: 105px; --notebook-x: 3%; --notebook-y: 820px; }
  .ruled-sheet .hero-whatever { --notebook-size: 110px; --notebook-x: 70%; --notebook-y: 900px; }
  .ruled-sheet .palette-weird { --notebook-size: 125px; --notebook-x: 54%; --notebook-y: 1020px; }
  .ruled-sheet .palette-brain { --notebook-size: 95px; --notebook-x: 4%; --notebook-y: 430px; }
  .ruled-sheet .photo-rave { --notebook-size: 135px; --notebook-x: 64%; --notebook-y: 460px; }
  .ruled-sheet .photo-quest { --notebook-size: 155px; --notebook-x: 0%; --notebook-y: 980px; }
  .ruled-sheet .color-cassette { --notebook-size: 115px; --notebook-x: 7%; --notebook-y: 630px; }
  .ruled-sheet .gaze-yikes { --notebook-size: 100px; --notebook-x: 70%; --notebook-y: 700px; }
}

/* Four more hero cutouts now have scattered homes across the site. */
.palette-section, .maker-section, .site-footer { overflow: visible; isolation: auto; }
.site-sticker { right: auto; bottom: auto; }
.palette-section .palette-error { width: 135px; left: 44%; top: calc(100% - 72px); transform: rotate(-18deg); --sticker-bleed: 72px; }
.mix-stage .color-can { width: 125px; left: calc(100% - 145px); top: 16px; transform: rotate(14deg); --sticker-bleed: 0px; --emoji-delay: -1s; }
.maker-section .emoji-oof { width: 135px; left: 32%; top: calc(100% - 120px); transform: rotate(-13deg); --sticker-bleed: 40px; --emoji-delay: -3s; }
.maker-portrait, .maker-copy, .maker-coffee { position: relative; z-index: 12; }
.site-footer { display: block; padding-top: 35px; }
.site-footer .footer-content { z-index: 12; }
@media (max-width:760px) {
  .palette-section .palette-error { width: 100px; left: 41%; top: calc(100% - 58px); --sticker-bleed: 52px; }
  .mix-stage .color-can { width: 95px; left: calc(100% - 112px); top: 20px; }
  .maker-section .emoji-oof { width: 105px; left: 1%; top: 40px; }
}

/* ILY sits in the maker page's open lower margin, clear of support links. */
.maker-section .emoji-love { width: 130px; left: 54%; top: calc(100% - 130px); transform: rotate(12deg); --sticker-bleed: 40px; --emoji-delay: -.7s; }
@media (max-width:760px) {
  .maker-section .emoji-love { width: 105px; left: 10%; top: calc(100% - 118px); }
}

/* Six more hero stickers now have homes across the other paper fields. */
.palette-section .photo-pigeon { width: 190px; left: 3%; top: -96px; transform: rotate(15deg); --sticker-bleed: 110px; }
.maker-section .photo-battery { width: 150px; left: 2%; top: -100px; transform: rotate(-16deg); --sticker-bleed: 105px; }
.maker-section .emoji-ez { width: 130px; left: 65%; top: -40px; transform: rotate(12deg); --sticker-bleed: 45px; }
.mix-stage .color-heart { width: 125px; left: 22px; top: 24px; transform: rotate(-15deg); --sticker-bleed: 0px; }
.mix-stage .gaze-dude { width: 145px; left: calc(100% - 160px); top: calc(100% - 180px); transform: rotate(-10deg); --sticker-bleed: 0px; }
.ruled-sheet .hero-thoughts { --notebook-size: 140px; --notebook-x: 2%; --notebook-y: 440px; transform: rotate(10deg); --sticker-bleed: 0px; }
@media (max-width:760px) {
  .palette-section .photo-pigeon { width: 140px; left: 3%; top: -75px; --sticker-bleed: 80px; }
  .maker-section .photo-battery { width: 105px; left: 0; top: -78px; --sticker-bleed: 80px; }
  .maker-section .emoji-ez { width: 95px; left: 68%; top: -24px; --sticker-bleed: 30px; }
  .mix-stage .color-heart { width: 90px; left: 14px; top: 15px; }
  .mix-stage .gaze-dude { width: 100px; left: calc(100% - 112px); top: calc(100% - 138px); }
  .ruled-sheet .hero-thoughts { --notebook-size: 105px; --notebook-x: 2%; --notebook-y: 760px; }
}

/* Pointer interaction has no selection frame. Keyboard focus follows the artwork. */
.physics-object:focus { outline: none; }
.physics-object:focus-visible > :is(img,svg) { filter: drop-shadow(0 0 4px var(--pink)); }
/* A shared longest edge; a little variation, never a huge/small sticker split. */
:root {
  --sticker-size-boost: 1.15;
  --collage-base-size: clamp(150px,min(16vw,28svh),210px);
  --collage-size: calc(var(--collage-base-size) * var(--sticker-size-boost));
}
html { overflow-x: clip; }
.physics-zone > :is(.loose-sticker,.meme-sticker), .hero > .toy {
  --collage-scale: 1;
  --collage-angle: -5deg;
  width: calc(var(--collage-size) * var(--collage-scale));
  height: calc(var(--collage-size) * var(--collage-scale));
  transform: rotate(var(--collage-angle));
}
.physics-zone > :is(.loose-sticker,.meme-sticker,.toy):nth-of-type(3n+1) { --collage-scale: .96; --collage-angle: 7deg; }
.physics-zone > :is(.loose-sticker,.meme-sticker,.toy):nth-of-type(3n+2) { --collage-scale: 1.04; --collage-angle: -8deg; }
/* Animated vector characters and shapes are 15% smaller than their current size. */
.physics-object:is(.emoji-sticker,.toy) {
  width: calc(var(--collage-size) * var(--collage-scale) * .85);
  height: calc(var(--collage-size) * var(--collage-scale) * .85);
}
.physics-zone > :is(.loose-sticker,.meme-sticker) > :is(img,svg) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero > :is(.loose-sticker,.toy) {
  left: var(--collage-x);
  top: var(--collage-y);
  right: auto;
  bottom: auto;
}
.hero .flower { --collage-x: 2%; --collage-y: 1%; }
.hero .squiggle { --collage-x: 14%; --collage-y: 18%; }
.hero .hero-bruh { --collage-x: 1%; --collage-y: 29%; }
.hero .hero-grass { --collage-x: 4%; --collage-y: 57%; }
.hero .photo-skate { --collage-x: 20%; --collage-y: 81%; }
.hero .emoji-lol { --collage-x: 27%; --collage-y: 0%; }
.hero .gaze-eyes { --collage-x: 46%; --collage-y: -2%; }
.hero .color-cloud { --collage-x: 64%; --collage-y: 2%; }
.hero .orange { --collage-x: 85%; --collage-y: 1%; }
.hero .photo-offline { --collage-x: 75%; --collage-y: 20%; }
.hero .hero-vibe { --collage-x: 84%; --collage-y: 36%; }
.hero .gaze-sus { --collage-x: 83%; --collage-y: 59%; }
.hero .photo-roller { --collage-x: 73%; --collage-y: 73%; }
.hero .star { --collage-x: 83%; --collage-y: 85%; }
.hero .emoji-wow { --collage-x: 61%; --collage-y: 81%; }
.hero .photo-cat { --collage-x: 41%; --collage-y: 85%; }
.hero .photo-kateryna { --collage-x: 1%; --collage-y: 26%; }
.hero .star span, .hero .star svg { width: 100%; height: 100%; }
.hero .squiggle { align-items: center; }
.hero .squiggle span { width: 22%; height: 55%; margin-left: -2.5%; }
.hero .squiggle span:first-child { margin-left: 0; }
.hero .squiggle span:nth-child(even) { height: 100%; }

.ruled-sheet .sticker-cat { left: 3%; top: -28px; right: auto; }
.ruled-sheet .sticker-frog { left: 80%; top: -15px; right: auto; }
.ruled-sheet .hero-thoughts { left: 2%; top: 270px; }
.ruled-sheet .hero-chaos { left: 23%; top: 300px; }
.ruled-sheet .color-cassette { left: 44%; top: 390px; }
.ruled-sheet .palette-brain { left: 65%; top: 295px; }
.ruled-sheet .photo-rave { left: 81%; top: 220px; }
.ruled-sheet .photo-quest { left: 3%; top: 500px; }
.ruled-sheet .palette-weird { left: 25%; top: 520px; }
.ruled-sheet .gaze-yikes { left: 47%; top: 570px; }
.ruled-sheet .hero-whatever { left: 75%; top: 520px; }
.palette-section .photo-pigeon { left: 8%; top: -85px; }
.palette-section .palette-error { left: 61%; top: calc(100% - 85px); }
.palette-section .photo-kateryna-color { left: 72%; top: -110px; --sticker-bleed: 120px; }
.mix-stage .color-heart { left: 12px; top: 12px; }
.mix-stage .color-can { left: calc(100% - var(--collage-size) - 12px); top: 15px; }
.mix-stage .gaze-dude { left: calc(100% - var(--collage-size) - 12px); top: calc(100% - var(--collage-size) - 24px); }
.maker-section .photo-battery { left: 1%; top: -90px; }
.maker-section .emoji-ez { left: 49%; top: -80px; }
.maker-section .emoji-love { left: 52%; top: calc(100% - 180px); }
.maker-section .emoji-oof { left: 4%; top: calc(100% - 100px); }

@media (max-width:760px) {
  :root { --collage-base-size: clamp(100px,28vw,145px); }
  .hero .hero-content { width: min(420px,70%); }
  .hero .flower { --collage-x: 1%; --collage-y: 0%; }
  .hero .emoji-lol { --collage-x: 29%; --collage-y: 2%; }
  .hero .gaze-eyes { --collage-x: 59%; --collage-y: 0%; }
  .hero .color-cloud { --collage-x: 32%; --collage-y: 15%; }
  .hero .orange { --collage-x: 69%; --collage-y: 17%; }
  .hero .squiggle { --collage-x: 2%; --collage-y: 20%; }
  .hero .hero-bruh { --collage-x: 0%; --collage-y: 36%; }
  .hero .photo-offline { --collage-x: 72%; --collage-y: 34%; }
  .hero .hero-grass { --collage-x: 1%; --collage-y: 55%; }
  .hero .hero-vibe { --collage-x: 72%; --collage-y: 51%; }
  .hero .photo-skate { --collage-x: 3%; --collage-y: 72%; }
  .hero .gaze-sus { --collage-x: 72%; --collage-y: 69%; }
  .hero .photo-cat { --collage-x: 28%; --collage-y: 81%; }
  .hero .photo-kateryna { --collage-x: 1%; --collage-y: 37%; }
  .hero .photo-roller { --collage-x: 53%; --collage-y: 77%; }
  .hero .emoji-wow { --collage-x: 73%; --collage-y: 84%; }
  .hero .star { --collage-x: 7%; --collage-y: 87%; }
  .hero .flower .face, .hero .orange .face { width: 68%; height: 68%; padding-top: 19%; gap: 20%; }
  .hero .flower .face i, .hero .orange .face i { width: 7%; height: 15%; }
  .hero .flower .face b, .hero .orange .face b { width: 35%; height: 20%; left: 32%; top: 56%; border-width: 3px; }
  .ruled-sheet .sticker-cat { left: 3%; top: -35px; }
  .ruled-sheet .sticker-frog { left: 69%; top: -24px; }
  .ruled-sheet .hero-thoughts { left: 3%; top: 340px; }
  .ruled-sheet .photo-rave { left: 65%; top: 375px; }
  .ruled-sheet .color-cassette { left: 32%; top: 480px; }
  .ruled-sheet .hero-chaos { left: 4%; top: 625px; }
  .ruled-sheet .palette-brain { left: 66%; top: 655px; }
  .ruled-sheet .photo-quest { left: 32%; top: 770px; }
  .ruled-sheet .palette-weird { left: 4%; top: 910px; }
  .ruled-sheet .gaze-yikes { left: 34%; top: 950px; }
  .ruled-sheet .hero-whatever { left: 67%; top: 915px; }
  .palette-section .photo-pigeon { left: 5%; top: -65px; }
  .palette-section .palette-error { left: 60%; top: calc(100% - 55px); }
  .palette-section .photo-kateryna-color { left: 60%; top: -62px; --sticker-bleed: 72px; }
  .mix-stage .color-heart { left: 12px; top: 15px; }
  .mix-stage .color-can { left: calc(100% - var(--collage-size) - 12px); top: 20px; }
  .mix-stage .gaze-dude { left: calc(100% - var(--collage-size) - 12px); top: calc(100% - var(--collage-size) - 22px); }
  .maker-section .photo-battery { left: 1%; top: -65px; }
  .maker-section .emoji-ez { left: 52%; top: -55px; }
  .maker-section .emoji-love { left: 12%; top: calc(100% - 155px); }
  .maker-section .emoji-oof { left: 68%; top: calc(100% - 80px); }
}

.fun-cursor {
  position: fixed;
  inset: 0 auto auto 0;
  width: 48px;
  height: 52px;
  z-index: 10000;
  pointer-events: none;
  user-select: none;
  contain: layout style;
}
.fun-cursor[hidden] { display: none; }
.cursor-art {
  width: 48px;
  height: 52px;
  transform-origin: 4px 4px;
  transition: transform 150ms cubic-bezier(.23,1,.32,1);
  filter: drop-shadow(1px 1px 0 #fffbed) drop-shadow(-1px -1px 0 #fffbed);
}
.cursor-art > svg { width: 100%; height: 100%; overflow: visible; }
.cursor-spark { position: absolute; width: 16px; height: 16px; top: -6px; left: 32px; }
.cursor-spark svg { width: 100%; height: 100%; }
.cursor-scissor-blade { transform-origin: 22px 23px; transition: transform 150ms cubic-bezier(.23,1,.32,1); }
.fun-cursor.is-pressed .cursor-scissor-blade { transform: rotate(-22deg); }
.cursor-spray-mist { opacity: .55; transition: opacity 150ms ease; }
.cursor-hand-grip { display: none; }
.fun-cursor[data-tool="move"].is-pressed .cursor-hand-open { display: none; }
.fun-cursor[data-tool="move"].is-pressed .cursor-hand-grip { display: inline; }
.fun-cursor[data-tool="move"] .cursor-spark { width: 12px; height: 12px; top: 0; left: 42px; }
.fun-cursor.is-pressed .cursor-spray-mist { opacity: 1; }
.fun-cursor[data-tool="draw"] .cursor-spark,
.fun-cursor[data-tool="spray"] .cursor-spark,
.fun-cursor[data-tool="erase"] .cursor-spark,
.fun-cursor[data-tool="tear"] .cursor-spark { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.fun-cursor-active, body.fun-cursor-active * { cursor: none !important; }
  body.fun-cursor-active #ink-cursor { visibility: hidden; }
  .fun-cursor .cursor-spark { animation: cursor-spark-spin 2.4s linear infinite; }
}
@keyframes cursor-spark-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .fun-cursor .cursor-spark { animation: none; }
  .cursor-art, .cursor-scissor-blade { transition: none; }
  .fun-cursor.is-pressed .cursor-scissor-blade { transform: none; }
}
@media (forced-colors: active) {
  .fun-cursor { display: none; }
  body.fun-cursor-active, body.fun-cursor-active * { cursor: auto !important; }
}

/* Photo cutouts retain real textures; only the liquid surface and pour move. */
.coffee-liquid { transform: translateY(3px); transition: transform 650ms var(--ease-in-out); }
.coffee-stream { opacity: 0; transform: scaleY(.95); transform-origin: 129px 46px; transition: opacity 150ms ease, transform 180ms var(--ease-out); }
.coffee-pourer { opacity: 0; transform: translateY(-6px) rotate(8deg); transform-origin: 129px 46px; transition: opacity 180ms ease, transform 250ms var(--ease-out); }
.coffee-splash { opacity: 0; transform: translateY(3px); transition: opacity 150ms ease, transform 180ms var(--ease-out); }
.coffee-sticker > span { transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
.coffee-photo-art { width: calc(230px * var(--sticker-size-boost)); max-width: 115%; position: relative; left: 50%; transform: translateX(-50%); margin-left: 0; margin-right: 0; }
.coffee-ripple { transform-origin: 99px 126px; }
@keyframes coffee-ripple { from { transform: scale(.45); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  #maker-paypal.is-coffee-filled .coffee-liquid { transform: translateY(0); transition-duration: 1000ms; transition-delay: 150ms; }
  #maker-paypal.is-coffee-pouring .coffee-stream { opacity: 1; transform: scaleY(1); }
  #maker-paypal.is-coffee-pouring .coffee-pourer { opacity: 1; transform: none; }
  #maker-paypal.is-coffee-pouring .coffee-splash { opacity: 1; transform: none; transition-delay: 180ms; }
  #maker-paypal.is-coffee-pouring .coffee-ripple { animation: coffee-ripple 600ms ease-out 180ms infinite; }
  #maker-paypal.is-coffee-filled .coffee-steam { animation-duration: 1.6s; animation-play-state: running !important; }
  #maker-paypal.is-coffee-filled > span { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .coffee-liquid { transform: none; transition: none; }
  .coffee-stream, .coffee-pourer, .coffee-splash { display: none; }
  #maker-paypal.is-coffee-filled .coffee-steam { animation: none !important; }
  #maker-paypal.is-coffee-filled > span { transform: none; }
  .coffee-sticker > span { transition: none; }
  .coffee-ripple { animation: none !important; }
}
@media (max-width:1000px) { .coffee-photo-art { width: calc(185px * var(--sticker-size-boost)); } }
@media (max-width:760px) { .coffee-photo-art { width: calc(230px * var(--sticker-size-boost)); } }
@media (hover: none), (pointer: coarse) { .coffee-liquid { transform: none; } }

.coffee-tip-dialog {
  width: min(460px, calc(100vw - 40px)); max-height: calc(100dvh - 40px);
  margin: auto; padding: 34px 28px 24px; overflow: auto;
  background: var(--paper); color: var(--ink); border: 4px solid var(--ink);
  box-shadow: 8px 8px 0 var(--ink); text-align: left;
}
.coffee-tip-dialog::backdrop { background: #171515b8; }
.coffee-tip-dialog[open] { animation: tip-pop 180ms var(--ease-out); }
.tip-close { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; background: var(--paper); border: 2px solid var(--ink); font-size: 28px; line-height: 1; }
.tip-kicker { margin: 0 44px 16px 0; font: 14px/1.4 'Permanent Marker', sans-serif; }
.coffee-tip-dialog h2 { margin: 0 0 20px; font: 42px/1.2 'Anton', sans-serif; text-transform: uppercase; letter-spacing: -.015em; }
.coffee-tip-dialog h2 em { display: inline-block; padding: 2px 10px 6px; background: var(--pink); font: 32px/1.25 'Permanent Marker', sans-serif; transform: rotate(-3deg); }
#coffee-tip-intro { margin: 0 0 24px; font-size: 15px; line-height: 1.5; }
.tip-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; margin: 0 0 20px; border: 0; min-width: 0; }
.tip-amounts legend { width: 100%; margin-bottom: 12px; padding: 0; font-size: 14px; font-weight: 700; }
.tip-amounts legend span { float: right; font: 13px 'Courier New', monospace; }
.tip-option { position: relative; min-width: 0; }
.tip-option:last-child { grid-column: 1 / -1; }
.tip-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tip-option span { display: grid; place-items: center; min-height: 58px; padding: 8px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; font-size: 24px; transition: transform 150ms var(--ease-out), background-color 150ms ease; }
.tip-option:last-child span { min-height: 48px; font-size: 16px; }
.tip-option input:checked + span { background: var(--pink); transform: rotate(-2deg); }
.tip-option input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 5px; }
.tip-custom[hidden] { display: none; }
.tip-custom { margin-bottom: 20px; }
.tip-custom > label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.tip-input-wrap { display: flex; align-items: center; border: 3px solid var(--ink); background: white; }
.tip-input-wrap > span { padding-left: 14px; font-size: 22px; }
#coffee-tip-value { min-width: 0; width: 100%; padding: 12px; border: 0; background: transparent; color: var(--ink); font: 22px 'Courier New', monospace; }
.tip-input-wrap:focus-within { outline: 3px solid var(--ink); outline-offset: 4px; }
#coffee-tip-value:focus-visible { outline: none; }
.tip-error { min-height: 0; margin: 8px 0 0; font-size: 13px; line-height: 1.4; }
.tip-error:empty { margin: 0; }
.tip-continue { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 16px 10px; background: var(--acid); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-weight: 700; font-size: 16px; }
.tip-continue:disabled { background: #e2dfd5; color: #625e58; box-shadow: none; }
.tip-checkout-note { margin: 14px 0 0; font-size: 13px; font-weight: 700; text-align: center; }
.tip-paypal-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; text-align: center; }
/* The native dialog's top layer sits above the custom cursor artwork. */
body.fun-cursor-active .coffee-tip-dialog, body.fun-cursor-active .coffee-tip-dialog * { cursor: auto !important; }
body.fun-cursor-active .coffee-tip-dialog button, body.fun-cursor-active .coffee-tip-dialog .tip-option, body.fun-cursor-active .coffee-tip-dialog .tip-option * { cursor: pointer !important; }
body.fun-cursor-active .coffee-tip-dialog input[type="text"] { cursor: text !important; }
body.fun-cursor-active .coffee-tip-dialog button:disabled { cursor: default !important; }
@media (hover: hover) and (pointer: fine) { .tip-option:hover span { background: var(--acid); } .tip-continue:not(:disabled):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } }
@keyframes tip-pop { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (max-width: 400px) { .coffee-tip-dialog { padding: 30px 18px 22px; } .coffee-tip-dialog h2 { font-size: 36px; } .coffee-tip-dialog h2 em { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .coffee-tip-dialog[open] { animation: none; } .tip-option span { transition: none; } .tip-continue:not(:disabled):hover { transform: none; } }

.evidence-section { display: grid; place-items: center; padding: 60px 7% 48px; background: var(--yellow); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.evidence-section .evidence-wrap { width: min(100%,420px); }
.site-footer { padding: 32px 5% 112px; }
.site-footer .footer-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(180px,1fr) minmax(0,1fr); gap: 32px; align-items: center; padding: 0; max-width: 1280px; margin: auto; }
.site-footer .back-top { justify-self: end; }
.footer-brand { min-width: 0; }
.site-footer .footer-brand > p { margin: 12px 0 0; max-width: 30ch; font: 400 18px/1.45 'Permanent Marker',cursive; transform: rotate(-2deg); }
.site-footer .footer-credit { max-width: 1280px; margin: 22px auto 0; text-align: left; font: 400 11px/1.6 Arial,Helvetica,sans-serif; }
.footer-credit small { font: inherit; }
.footer-play { min-width: 0; margin: 0; }
.evidence-wrap { min-width: 0; text-align: center; }
.evidence-ticket { position: relative; padding: 24px 28px 20px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); transform: rotate(-3deg); }
.evidence-ticket::before, .evidence-ticket::after { content: ''; position: absolute; top: 53%; width: 20px; height: 20px; border: 3px solid var(--ink); background: var(--yellow); border-radius: 50%; }
.evidence-ticket::before { left: -13px; }
.evidence-ticket::after { right: -13px; }
.ticket-meta { display: flex; gap: 12px; justify-content: space-between; font: 700 11px/1.4 'Courier New',monospace; border-bottom: 2px dashed var(--ink); padding-bottom: 12px; }
.evidence-ticket h2 { margin: 16px 0 20px; font: 38px/1.06 'Anton',sans-serif; text-transform: uppercase; letter-spacing: 0; }
.evidence-ticket h2 em { display: inline-block; margin-top: 8px; padding: 4px 7px; background: var(--pink); font: 27px/1.3 'Permanent Marker',sans-serif; transform: rotate(2deg); }
.evidence-counts { margin: 0; display: grid; gap: 8px; border-bottom: 2px dashed var(--ink); padding-bottom: 14px; }
.evidence-counts > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.evidence-counts dt { font-size: 15px; font-weight: 700; }
.evidence-counts dd { margin: 0; font: 34px/1.2 'Anton',sans-serif; font-variant-numeric: tabular-nums; }
.ticket-stamp { margin: 14px 0 10px; font: 15px/1.4 'Permanent Marker',sans-serif; }
.ticket-barcode { height: 19px; width: 70%; margin: 0 auto; background: repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 9px,var(--ink) 9px 13px,transparent 13px 17px); }
.save-evidence { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 25px; background: var(--acid); min-height: 48px; }
.evidence-note { font-size: 11px; line-height: 1.6; font-weight: 400; margin: 12px 0 0; }
.chaos-stage { position: relative; display: grid; grid-template-columns: minmax(0,1fr); justify-items: center; align-items: center; gap: 14px; text-align: center; max-width: 390px; margin: auto; }
.site-footer .chaos-caption { font: 20px/1.4 'Permanent Marker',sans-serif; transform: rotate(-3deg); text-align: center; margin: 0; }
.do-not-press { position: relative; background: var(--pink); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 12px 22px; font: 28px/1.06 'Anton',sans-serif; transform: rotate(3deg); transition: transform 150ms var(--ease-out),box-shadow 150ms var(--ease-out); }
.do-not-press:active { transform: rotate(3deg) translate(5px,5px); box-shadow: 3px 3px 0 var(--ink); }
.do-not-press:disabled, .save-evidence:disabled { opacity: .65; }
.footer-pigeon { position: absolute; width: calc(175px * var(--sticker-size-boost)); left: 50%; top: 45%; z-index: 25; pointer-events: none; }
.footer-pigeon[hidden] { display: none; }
.footer-pigeon img { width: 100%; height: auto; display: block; }
.footer-pigeon span { display: inline-block; background: var(--ink); color: var(--acid); font: 30px 'Permanent Marker',sans-serif; padding: 2px 12px 5px; transform: rotate(-6deg); }
.paper-storm { position: absolute; left: 50%; top: 50%; z-index: 24; pointer-events: none; }
.paper-storm i { position: absolute; display: block; width: 10px; height: 19px; border: 1px solid var(--ink); }
@media (hover:hover) and (pointer:fine) { .do-not-press:hover { transform: rotate(-2deg) translate(-2px,-2px); box-shadow: 10px 10px 0 var(--ink); } }
@media (max-width:760px) {
  .evidence-section { padding: 48px 9% 36px; }
  .site-footer { padding: 26px 5% 110px; }
  .site-footer .footer-content { grid-template-columns: minmax(0,1fr) auto; gap: 24px 16px; }
  .site-footer .footer-brand .logo { font-size: 28px; }
  .site-footer .footer-brand > p { font-size: 16px; }
  .site-footer .back-top { grid-column: 2; grid-row: 1; align-self: start; }
  .footer-play { grid-column: 1 / -1; grid-row: 2; }
  .chaos-stage { max-width: 340px; }
  .site-footer .chaos-caption { font-size: 18px; }
  .site-footer .footer-credit { margin-top: 18px; font-size: 10px; text-align: center; }
  .evidence-section .evidence-wrap { width: min(100%,360px); margin: auto; }
  .evidence-ticket { padding: 22px 20px 18px; }
  .evidence-ticket h2 { font-size: 34px; }
  .evidence-ticket h2 em { font-size: 23px; }
  .ticket-meta { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .do-not-press { transition: none; }
  .do-not-press:hover, .do-not-press:active { transform: rotate(3deg); }
}

.evidence-section {
  --evidence-wall: #2d2b33;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--evidence-wall);
}
.evidence-section.wall-loaded {
  background: linear-gradient(#19171d26,#19171d26), url('assets/evidence-graffiti-wall-real-v3-b41564227b.webp') center / cover;
}
.evidence-section .evidence-wrap { position: relative; z-index: 2; }
.evidence-section .evidence-note { color: #f2edf7; }
.evidence-section .evidence-ticket::before,
.evidence-section .evidence-ticket::after { background: var(--evidence-wall); }
.wall-decor { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wall-mark { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wall-mark .wall-art { display: block; width: 100%; height: auto; overflow: visible; transform: rotate(var(--wall-tilt)); transition: transform 180ms var(--ease-out); }
.wall-smiley { --wall-tilt: -14deg; width: clamp(135px,17vw,210px); left: 5%; top: 14%; }
.wall-weird { --wall-tilt: -6deg; width: clamp(180px,22vw,275px); right: 2%; top: 19%; }
.wall-tag-art { position: relative; }
.wall-tag-art img { display: block; width: 100%; height: auto; }
.wall-tag-art .wall-fresh-paint { position: absolute; inset: 0; opacity: 0; filter: brightness(1.2); transition: opacity 160ms var(--ease-out); }
.wall-tag-mist { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 160ms var(--ease-out); }
.wall-weird:focus-visible .wall-fresh-paint, .wall-weird.is-reacting .wall-fresh-paint { opacity: .25; }
.wall-weird:focus-visible .wall-tag-mist, .wall-weird.is-reacting .wall-tag-mist { opacity: .7; }
.wall-bolt { --wall-tilt: 12deg; width: clamp(85px,10vw,135px); left: 12%; bottom: 10%; }
.wall-cross { --wall-tilt: -9deg; width: clamp(105px,12vw,155px); right: 10%; bottom: 16%; }
.wall-wink { transform-box: fill-box; transform-origin: center; transition: transform 160ms var(--ease-out); }
.wall-cheek, .wall-electric, .wall-tag-flash { opacity: 0; transition: opacity 160ms var(--ease-out); }
.wall-mark:focus-visible { outline: 2px dashed #fffbed; outline-offset: 10px; }
.wall-mark:focus-visible .wall-cheek,
.wall-mark:focus-visible .wall-electric,
.wall-mark:focus-visible .wall-tag-flash,
.wall-mark.is-reacting .wall-cheek,
.wall-mark.is-reacting .wall-electric,
.wall-mark.is-reacting .wall-tag-flash { opacity: 1; }
@media (hover:hover) and (pointer:fine) {
  .wall-mark:hover .wall-art { transform: rotate(calc(var(--wall-tilt) + 6deg)) translateY(-4px); }
  .wall-smiley:hover .wall-wink { transform: scaleY(.12); }
  .wall-cross:hover .wall-art { transform: rotate(25deg); }
  .wall-mark:hover .wall-cheek, .wall-mark:hover .wall-electric, .wall-mark:hover .wall-tag-flash { opacity: 1; }
  .wall-weird:hover .wall-art { transform: rotate(var(--wall-tilt)); }
  .wall-weird:hover .wall-fresh-paint { opacity: .25; }
  .wall-weird:hover .wall-tag-mist { opacity: .7; }
}
.wall-mark.is-reacting .wall-art { transform: rotate(calc(var(--wall-tilt) + 6deg)) translateY(-4px); }
.wall-smiley.is-reacting .wall-wink { transform: scaleY(.12); }
.wall-cross.is-reacting .wall-art { transform: rotate(25deg); }
.wall-weird.is-reacting .wall-art { transform: rotate(var(--wall-tilt)); }
@media (max-width:900px) {
  .wall-smiley { left: -3%; width: 130px; }
  .wall-weird { right: -3%; width: 165px; }
  .wall-bolt { left: 3%; width: 80px; }
  .wall-cross { right: 2%; width: 90px; }
}
@media (max-width:600px) {
  .evidence-section { padding-top: 136px; padding-bottom: 95px; background-position: center, 14% center; }
  .wall-smiley { width: 85px; left: 4%; top: 8px; }
  .wall-weird { width: 130px; right: 3%; top: 4px; }
  .wall-bolt { width: 48px; left: 6%; bottom: 9px; }
  .wall-cross { width: 62px; right: 8%; bottom: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  .wall-mark .wall-art, .wall-wink, .wall-cheek, .wall-electric, .wall-tag-flash { transition: none; }
  .wall-mark:hover .wall-art, .wall-mark.is-reacting .wall-art { transform: rotate(var(--wall-tilt)); }
  .wall-smiley:hover .wall-wink, .wall-smiley.is-reacting .wall-wink { transform: none; }
  .wall-fresh-paint, .wall-tag-mist { transition: none; }
}

#save-mess {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ff70bd;
}
#save-mess .icon { width: 24px; height: 24px; flex-shrink: 0; }
#save-mess:disabled { opacity: .65; cursor: wait; }
.notebook-exporting *, .notebook-exporting *::before, .notebook-exporting *::after {
  animation: none !important;
  transition: none !important;
}

.save-confetti { position: fixed; inset: 0; z-index: 200; overflow: hidden; pointer-events: none; }
.save-confetti i { position: absolute; display: block; width: 9px; height: 17px; border: 1px solid #171515; }
.save-confetti i:nth-child(3n) { width: 12px; height: 12px; border-radius: 50%; }
.save-confetti i:nth-child(5n) { width: 17px; height: 17px; border: 0; clip-path: polygon(50% 0,62% 35%,100% 38%,70% 60%,80% 100%,50% 78%,20% 100%,30% 60%,0 38%,38% 35%); }

.layout-target-zone { position: relative; }
.physics-object[hidden] { display: none !important; }
.local-layout-link { display: inline-block; margin-left: 14px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* A real concrete-and-spray-paint surface behind the movable collage. */
.hero {
  background: #aaa6a2 url('assets/hero-graffiti-wall-real-v1-1ed416fde9.webp') center / cover no-repeat;
}
@media (max-width: 760px) {
  /* Keep the painted edge in view when the wide wall is cropped to portrait. */
  .hero { background-position: 8% center; }
}