:root {
  --paper: #f2eddf;
  --sheet: #faf3e5;
  --ink: #191a17;
  --muted: #756d5e;
  --blue: #245cc1;
  --red: #e75b45;
  --yellow: #f6cc52;
  --line: #cfc6b5;
  --texture: url('./assets/paper-texture.svg');
  --tear: polygon(0 2%,4% 0,8% 2%,13% 0,18% 1%,23% 0,28% 2%,33% 0,38% 1%,43% 0,48% 2%,53% 0,58% 1%,63% 0,68% 2%,73% 0,78% 1%,83% 0,88% 2%,93% 0,98% 1%,100% 3%,99% 17%,100% 31%,99% 45%,100% 59%,99% 73%,100% 87%,99% 99%,94% 98%,89% 100%,84% 98%,79% 100%,74% 99%,69% 100%,64% 98%,59% 100%,54% 99%,49% 100%,44% 98%,39% 100%,34% 99%,29% 100%,24% 98%,19% 100%,14% 99%,9% 100%,4% 98%,0 99%,1% 85%,0 71%,1% 57%,0 43%,1% 29%,0 15%);
  --hand: 'Caveat','Ma Shan Zheng','Noto Sans SC',cursive;
  font-family: 'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  scroll-behavior: smooth;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background-image: var(--texture);
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background-image: var(--texture);
  opacity: .12;
  mix-blend-mode: multiply;
}
button,input,textarea,select {
  font: inherit;
  color: inherit;
}
button,a {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
button {
  border: 0;
  background: none;
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: .4;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,h2,h3,p {
  margin: 0;
}
h1,h2,h3 {
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -.045em;
}
img {
  display: block;
  max-width: 100%;
}
svg {
  display: block;
}
button svg,.button svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 5px;
}
::selection {
  background: var(--yellow);
  color: var(--ink);
}
main {
  min-height: 70vh;
  outline: none;
}
.page-shell {
  width: min(1440px,calc(100% - 96px));
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 100;
  left: 15px;
  top: 10px;
  padding: 12px 20px;
  background: var(--yellow);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}
.eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--muted);
}
.hand-note {
  font-family: var(--hand);
  font-size: 27px;
  line-height: 1.45;
}
.small-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
}
/* Torn color-paper buttons. Shadows deepen by fading a second static shadow. */
.button,.nav-create {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 51px;
  padding: 12px 26px;
  font-weight: 900;
  letter-spacing: .025em;
  transition: transform .22s;
  filter: drop-shadow(0 3px 1px #30281722);
}
.button::before,.nav-create::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--button-color,var(--yellow));
  background-image: var(--texture);
  clip-path: var(--tear);
}
.button::after,.nav-create::after {
  content: '';
  position: absolute;
  inset: 4px 3px -6px;
  z-index: -2;
  background: #423820;
  filter: blur(6px);
  opacity: 0;
  transition: opacity .22s;
}
.button-primary {
  --button-color: var(--red);
  color: #fff9ec;
}
.button-light {
  --button-color: #e6dcc8;
}
.button-outline {
  --button-color: var(--sheet);
}
.button:hover:not(:disabled),.nav-create:hover {
  transform: translateY(-4px) rotate(-1.2deg);
}
.button:hover:not(:disabled)::after,.nav-create:hover::after {
  opacity: .2;
}
.button:active:not(:disabled) {
  transform: translateY(1px);
}
.text-link {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
}
.text-link svg {
  width: 20px;
}
/* Magazine masthead. */
#header {
  border-bottom: 1px solid #8e85752c;
  position: relative;
  z-index: 8;
}
.nav-shell {
  width: min(1440px,calc(100% - 96px));
  margin: auto;
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
}
.brand>img {
  width: 46px;
  height: 46px;
  transform: rotate(-6deg);
  border-radius: 50%;
  object-fit: cover;
}
.brand>span {
  display: flex;
  gap: 16px;
  align-items: baseline;
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -.04em;
  white-space: nowrap;
}
.brand small {
  font-family: Georgia,serif;
  font-size: 26px;
  font-weight: 700;
}
.main-nav {
  display: flex;
  align-items: center;
  gap: 45px;
  font-size: 16px;
  font-weight: 700;
}
.main-nav a,.main-nav button {
  position: relative;
  padding: 7px 0;
  white-space: nowrap;
}
.main-nav [aria-current]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -5px;
  right: -5px;
  height: 4px;
  background: var(--blue);
  border-radius: 80% 20% 55% 40%;
  transform: rotate(-2deg);
}
.main-nav a:hover,.main-nav button:hover {
  color: var(--blue);
}
.nav-right {
  display: flex;
  gap: 25px;
  align-items: center;
}
.language-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  font-weight: 700;
  font-size: 13px;
}
.language-button svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 1.3;
}
.nav-create {
  min-height: 42px;
  padding: 8px 20px;
  gap: 20px;
  font-size: 13px;
  transform: rotate(1.5deg);
}
/* Cover collage, each paper is independent from its parallax parent. */
.hero {
  position: relative;
  height: 605px;
  padding-top: 57px;
  isolation: isolate;
}
.hero-copy {
  position: relative;
  z-index: 3;
  width: 65%;
  pointer-events: none;
}
.hero-copy a {
  pointer-events: auto;
}
.hero-edition {
  font-size: 10px;
  letter-spacing: .18em;
  margin: 0 0 24px 6px;
  font-weight: 700;
  color: #655f52;
}
.hero-edition>span {
  margin-left: 28px;
  opacity: .6;
}
.hero h1 {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: clamp(55px,6.35vw,98px);
  letter-spacing: -.065em;
  white-space: nowrap;
  line-height: 1.14;
}
.title-yellow {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 13px 18px 25px;
  transform: rotate(-1.5deg);
  animation: title-unfold .9s cubic-bezier(.17,.8,.24,1.08) both;
  transform-origin: left center;
  filter: drop-shadow(0 5px 2px #73603924);
}
.title-yellow::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: var(--tear);
  background: var(--yellow);
  background-image: var(--texture);
}
.title-dev {
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 8px 17px 14px;
  margin: 23px 0 0 -7px;
  transform: rotate(-7deg);
  font-size: 1.06em;
  animation: dev-slap .7s .22s cubic-bezier(.15,.7,.25,1.2) both;
}
.title-dev::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #e8ddc7;
  background-image: var(--texture);
  clip-path: var(--tear);
}
.title-dev>i {
  position: absolute;
  top: -20px;
  left: 24px;
  color: var(--ink);
  font-family: var(--hand);
  font-size: .4em;
  font-weight: 700;
  font-style: normal;
  transform: rotate(-2deg);
  background: #63a8d7;
  padding: 0 13px;
}
.hero-subtitle {
  display: inline-block;
  padding: 8px 23px 13px;
  margin: 15px 0 0 17px;
  font-size: clamp(22px,2.05vw,32px);
  font-weight: 700;
  background: #eee1cb;
  background-image: var(--texture);
  clip-path: var(--tear);
  transform: rotate(-1.3deg);
  animation: subtitle-slap .65s .36s both;
}
.hero-action {
  position: relative;
  margin: 39px 0 0 28px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.hero-cta {
  --button-color: var(--red);
  color: #fff9ee;
  min-width: 278px;
  min-height: 100px;
  padding: 14px 29px;
  gap: 24px;
  font-size: 43px;
  transform: rotate(-3deg);
  animation: cta-slap .65s .55s both;
}
.hero-cta svg {
  width: 31px;
  height: 31px;
}
.hero-cta:hover {
  transform: translateY(-6px) rotate(-4deg)!important;
}
.drawn-arrow {
  position: relative;
  width: 137px;
  height: 85px;
  margin-top: -40px;
  transform: rotate(-9deg);
}
.ink-reveal {
  transform-box: fill-box;
  transform-origin: left;
  animation: write-in 1.15s 1.2s both;
}
.hero-handnote {
  position: absolute;
  left: 53%;
  top: 322px;
  width: 185px;
  transform: rotate(-8deg);
  font-family: var(--hand);
  font-size: 25px;
  line-height: 1.48;
  letter-spacing: .04em;
  animation: fade-note .6s .85s both;
}
.handwritten-svg {
  width: 210px;
  height: 50px;
  margin: 4px 0 0 -5px;
}
.handwritten-svg .ink-reveal {
  animation-delay: 1.65s;
  animation-duration: 1.6s;
}
.hero-collage {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 5px;
  width: 52%;
  height: 540px;
  pointer-events: none;
}
.parallax-layer {
  position: absolute;
  transition: transform .25s ease-out;
}
.parallax-layer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.paper-drop {
  width: 100%;
  height: 100%;
  animation: paper-slap .9s cubic-bezier(.16,.75,.24,1.16) both;
  transform: rotate(var(--paper-rotation,0deg));
}
.collage-background {
  inset: 0 0 0 3%;
}
.drop-background {
  --paper-rotation: 3deg;
  animation-delay: .12s;
}
.collage-robot {
  z-index: 2;
  left: -4%;
  bottom: -3%;
  width: 43%;
  height: 61%;
}
.drop-robot {
  --paper-rotation: -9deg;
  animation-delay: .48s;
  position: relative;
}
.collage-flower {
  z-index: 3;
  width: 21%;
  height: 55%;
  right: -2%;
  bottom: 2%;
}
.drop-flower {
  --paper-rotation: 8deg;
  animation-delay: .68s;
}
.collage-note {
  z-index: 4;
  right: 2%;
  top: -3%;
  width: 150px;
  height: auto;
}
.drop-note {
  --paper-rotation: 13deg;
  animation-delay: .88s;
  background: #f3d064;
  background-image: var(--texture);
  padding: 22px 18px 14px;
  clip-path: var(--tear);
  font-family: var(--hand);
  font-size: 29px;
  line-height: .95;
}
.drop-note p {
  transform-origin: 50% 0;
  animation: note-sway 9s 3s ease-in-out infinite;
}
.drop-note p>span {
  display: block;
  text-align: right;
  font-size: 40px;
  margin-top: 4px;
}
.note-tape {
  position: absolute;
  width: 60px;
  height: 20px;
  background: #dac69a9c;
  left: 40px;
  top: 0;
  transform: rotate(-14deg);
}
.collage-bottom {
  position: absolute;
  z-index: 4;
  right: 2%;
  bottom: -3%;
  width: auto;
  height: auto;
  background: #e5d3b8;
  background-image: var(--texture);
  clip-path: var(--tear);
  padding: 10px 25px;
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.1;
  --paper-rotation: 2deg;
  animation-delay: .8s;
}
.collage-bottom strong {
  font-size: 21px;
  font-weight: 600;
}
.collage-doodle {
  position: absolute;
  right: 1%;
  top: 40%;
  color: #e6664f;
  font-family: var(--hand);
  font-size: 92px;
  transform: rotate(-14deg);
  animation: fade-note .6s 1s both;
}
.robot-eyes {
  position: absolute;
  inset: 0;
}
.robot-eyes i {
  position: absolute;
  width: 10%;
  height: 10%;
  top: 33.5%;
  left: 39.6%;
  background: #262622;
  border-radius: 45%;
  transform: scaleY(0);
  transform-origin: top;
  animation: blink 7.8s 2.8s infinite;
}
.robot-eyes i+i {
  top: 31.5%;
  left: 65.2%;
}
.hero-bottom {
  position: absolute;
  bottom: 17px;
  left: 5px;
  right: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #87775b30;
  padding: 0 0 17px;
  color: var(--muted);
  font-family: var(--hand);
  font-size: 20px;
}
.hero-bottom button {
  color: var(--blue);
  font-family: var(--hand);
  font-size: 30px;
  line-height: 1;
  padding: 0 20px;
}
/* Idea wall */
.town-list {
  padding: 47px 0 45px;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}
.marker-heading {
  display: inline-block;
  font-size: 46px;
  position: relative;
}
.marker-heading::after {
  content: '';
  position: absolute;
  left: -3px;
  right: -7px;
  height: 6px;
  bottom: -10px;
  background: var(--blue);
  border-radius: 30% 60% 25% 70%;
  transform: rotate(-1.5deg);
  clip-path: polygon(0 15%,25% 0,66% 23%,100% 15%,99% 90%,61% 81%,31% 100%,0 85%);
}
.section-heading .eyebrow {
  margin-bottom: 12px;
}
#list-count {
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
}
.wall-note {
  font-family: var(--hand);
  font-size: 26px;
  line-height: 1.35;
  position: relative;
  padding-right: 32px;
  transform: rotate(-6deg);
}
.wall-note>span {
  position: absolute;
  left: -50px;
  top: 26px;
  font-size: 58px;
  transform: rotate(-13deg);
}
.list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 39px;
}
.filter-tabs {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-tabs button {
  position: relative;
  isolation: isolate;
  padding: 6px 17px 8px;
  font-size: 13px;
  font-weight: 700;
  transform: rotate(-2deg);
  transition: transform .2s;
}
.filter-tabs button:nth-child(even) {
  transform: rotate(2deg);
}
.filter-tabs button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #e8dfce;
  background-image: var(--texture);
  clip-path: var(--tear);
}
.filter-tabs button:nth-child(2)::before {
  background-color: #ecce78;
}
.filter-tabs button:nth-child(3)::before {
  background-color: #bdcfe2;
}
.filter-tabs button:nth-child(4)::before {
  background-color: #eab6a4;
}
.filter-tabs button.active {
  color: #fffaf0;
}
.filter-tabs button.active::before {
  background-color: var(--ink);
}
.filter-tabs button:hover {
  transform: translateY(-3px) rotate(-3deg);
}
.sort-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.sort-label select {
  border: none;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  padding: 5px 16px 5px 4px;
  font-weight: 700;
  color: var(--ink);
}
.token-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  column-gap: 28px;
  row-gap: 45px;
}
.token-card {
  --tilt: -1.8deg;
  min-width: 0;
  min-height: 282px;
  position: relative;
  isolation: isolate;
  padding: 24px 21px 20px;
  display: flex;
  transform: rotate(var(--tilt));
  filter: drop-shadow(1px 5px 3px #503f2924);
  transition: transform .28s;
}
.token-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #f9f0dc;
  background-image: var(--texture);
  clip-path: var(--tear);
}
.token-card:nth-child(3n+2) {
  --tilt: 1.3deg;
}
.token-card:nth-child(3n+2)::before {
  background-color: #f2ebdf;
  background-image: linear-gradient(#8a9daf20 1px,transparent 1px),linear-gradient(90deg,#8a9daf20 1px,transparent 1px),var(--texture);
  background-size: 17px 17px,17px 17px,240px;
}
.token-card:nth-child(3n) {
  --tilt: -.6deg;
}
.token-card:hover {
  transform: translateY(-7px) rotate(0);
  z-index: 2;
}
.token-card::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: 10px 10px -3px;
  background: #423820;
  filter: blur(9px);
  opacity: 0;
  transition: opacity .25s;
}
.token-card:hover::after {
  opacity: .16;
}
.card-tape {
  position: absolute;
  z-index: 5;
  width: 67px;
  height: 25px;
  left: 52%;
  top: -10px;
  background: #e6bc58aa;
  background-image: var(--texture);
  transform: rotate(-21deg);
  clip-path: polygon(0 5%,98% 0,100% 91%,2% 100%);
}
.token-card:nth-child(3n+2) .card-tape {
  background-color: #327ec9c7;
  left: 64%;
  transform: rotate(19deg);
}
.token-card:nth-child(3n) .card-tape {
  background-color: #ee6857b9;
  left: 48%;
  transform: rotate(-11deg);
}
.sample-sticker {
  position: absolute;
  z-index: 5;
  top: 13px;
  right: 13px;
  color: #665132;
  background: #e7d4a8;
  background-image: var(--texture);
  clip-path: var(--tear);
  padding: 2px 10px;
  font-family: var(--hand);
  font-size: 17px;
  transform: rotate(8deg);
}
.card-body {
  position: relative;
  z-index: 2;
  width: 63%;
  display: flex;
  flex-direction: column;
  padding-top: 11px;
}
.card-type {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 7px;
}
.card-body h3 {
  font-size: clamp(20px,1.8vw,28px);
  white-space: nowrap;
  letter-spacing: -.045em;
}
.card-description {
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.5;
  margin-top: 12px;
  min-height: 78px;
  max-width: 94%;
}
.card-progress-label {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: auto;
  padding-top: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.card-progress-label>span {
  font-size: 13px;
}
.card-progress-label strong {
  color: var(--progress-color);
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -.06em;
}
.card-progress-label small {
  font-size: 22px;
}
.progress-bar {
  height: 12px;
  width: 100%;
  background: #cfc7b9;
  border-radius: 44% 11px 9px 20%;
  overflow: hidden;
  transform: rotate(-1.3deg);
  margin-top: 7px;
}
.progress-bar>span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--progress-color,var(--blue));
  border-radius: inherit;
  transform-origin: left;
  transition: transform .65s cubic-bezier(.2,.7,.2,1);
  background-image: linear-gradient(2deg,#ffffff00 45%,#ffffff36 46%,#ffffff00 69%);
}
.progress-bar.muted>span {
  background-color: #a39b8f;
}
.card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 13px;
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
}
.status-pill>i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill.near {
  color: #b85b32;
}
.status-pill.pooled,.status-pill.graduated,.status-pill.distributed {
  color: #587144;
}
.card-art {
  position: absolute;
  z-index: 1;
  width: 47%;
  height: 87%;
  right: -2%;
  top: 11%;
  transform: rotate(5deg);
  pointer-events: none;
}
.card-art .project-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Local project images, mounted like small taped photos on the case papers. */
.project-photo {
  position: relative;
  display: block;
  aspect-ratio: 1;
  padding: 9px 9px 15px;
  background: #fffaf0;
  background-image: var(--texture);
  box-shadow: 2px 3px 0 #493d282b, 4px 7px 12px #493d281a;
}
.project-photo::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 23%;
  width: 54%;
  height: 21px;
  background: #d5b77ba8;
  background-image: var(--texture);
  clip-path: var(--tear);
  transform: rotate(7deg);
}
.project-photo .project-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f4efe2;
}
.card-art .project-photo {
  position: absolute;
  top: 22%;
  right: 6%;
  width: 76%;
  transform: rotate(-10deg);
}
.card-art-note {
  position: absolute;
  bottom: 6px;
  right: 9px;
  width: 91px;
  font-family: var(--hand);
  font-size: 16px;
  line-height: 1.1;
  background: #ebdeca;
  background-image: var(--texture);
  clip-path: var(--tear);
  padding: 8px;
  transform: rotate(10deg);
}
.end-of-street {
  text-align: center;
  padding-top: 60px;
}
.end-of-street>span {
  display: inline-block;
  width: 65px;
  height: 1px;
  vertical-align: middle;
  background: var(--line);
}
.end-of-street i {
  display: inline-block;
  font-style: normal;
  color: var(--blue);
  font-size: 24px;
  vertical-align: middle;
  padding: 0 16px;
}
.end-of-street p {
  font-family: var(--hand);
  font-size: 24px;
  color: #6b6354;
  margin-top: 9px;
}
/* Three handwritten steps */
.how-section {
  padding: 55px 0 85px;
  border-top: 1px solid #c0b39b55;
}
.how-inner {
  display: grid;
  grid-template-columns: 1fr 1.85fr;
  gap: 85px;
  align-items: center;
}
.how-title .eyebrow {
  margin-bottom: 20px;
}
.how-title .marker-heading {
  font-size: 40px;
}
.how-title .hand-note {
  margin: 30px 0 20px;
}
.how-title .button {
  transform: rotate(-2deg);
}
.how-steps {
  display: flex;
  gap: 23px;
  align-items: center;
}
.how-step {
  --tilt: -4deg;
  position: relative;
  isolation: isolate;
  flex: 1;
  min-width: 0;
  min-height: 225px;
  padding: 23px 17px;
  transform: rotate(var(--tilt));
  filter: drop-shadow(1px 5px 2px #4c3e251c);
}
.how-step::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #e7d8b9;
  background-image: var(--texture);
  clip-path: var(--tear);
}
.how-step:nth-child(2) {
  --tilt: 3deg;
  margin-top: 50px;
}
.how-step:nth-child(2)::before {
  background-color: #c2d4e5;
}
.how-step:nth-child(3) {
  --tilt: -2deg;
  margin-top: -12px;
}
.how-step:nth-child(3)::before {
  background-color: #f3d36b;
}
.step-doodle {
  font-family: var(--hand);
  font-size: 47px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
  width: 47px;
  height: 47px;
  border: 2px solid currentColor;
  border-radius: 45% 55% 42% 48%;
  margin-bottom: 16px;
  color: var(--blue);
  transform: rotate(-10deg);
}
.how-step h3 {
  font-size: 20px;
}
.how-step p {
  margin-top: 11px;
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1.45;
}
.step-arrow {
  position: absolute;
  top: 15%;
  right: -34px;
  z-index: 3;
  font-family: var(--hand);
  font-size: 70px;
  line-height: 1;
  transform: rotate(13deg);
}
.step-star {
  position: absolute;
  top: -27px;
  right: -14px;
  color: var(--red);
  font-size: 70px;
}
/* Project poster */
.detail-page,.create-page {
  max-width: 1240px;
  padding-top: 29px;
  padding-bottom: 70px;
}
.breadcrumb {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 35px;
}
.breadcrumb a:hover,.back-link:hover {
  color: var(--blue);
}
.token-hero {
  --tilt: -.7deg;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  min-height: 410px;
  padding: 24px 48px 35px 26px;
  transform: rotate(var(--tilt));
  filter: drop-shadow(1px 7px 3px #503f2922);
  margin-bottom: 48px;
}
.token-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: var(--tear);
  background: #f8efdc;
  background-image: var(--texture);
}
.token-hero::after {
  content: '';
  position: absolute;
  top: -14px;
  left: 40%;
  width: 112px;
  height: 35px;
  background: #d3b26aab;
  background-image: var(--texture);
  transform: rotate(9deg);
}
.token-hero-scene {
  position: relative;
  min-width: 0;
  padding: 10px 28px 25px;
}
.lot-label {
  display: flex;
  justify-content: space-between;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: #74664e;
}
.lot-label>span {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 10px;
}
#token-scene {
  height: 285px;
}
.poster-illustration {
  position: relative;
  width: 100%;
  height: 100%;
}
.poster-illustration img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
.poster-illustration .project-photo {
  top: 50%;
  width: min(72%, 220px);
  margin: 0 auto;
  transform: translateY(-50%) rotate(-7deg);
}
.poster-spark {
  position: absolute;
  left: 7%;
  bottom: 14%;
  font-size: 40px;
  color: var(--blue);
  transform: rotate(-12deg);
}
.building-caption {
  display: block;
  text-align: center;
  font-family: var(--hand);
  font-size: 20px;
  color: #6d6251;
  transform: rotate(-3deg);
}
.token-heading {
  padding: 28px 0 10px 28px;
  align-self: center;
}
.detail-status {
  display: flex;
  gap: 19px;
  align-items: center;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 17px;
}
.detail-status>span:last-child {
  font-family: var(--hand);
  font-size: 20px;
  background: #f0d37e;
  padding: 1px 12px;
  transform: rotate(5deg);
}
.detail-token-name {
  display: flex;
  gap: 15px;
  align-items: center;
}
.token-logo {
  display: inline-block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  transform: rotate(-4deg);
}
.token-logo svg {
  width: 100%;
  height: 100%;
}
.token-logo .project-photo {
  width: 100%;
  height: 100%;
  padding: 3px 3px 5px;
}
.token-logo .project-photo::after {
  top: -3px;
  height: 8px;
}
.detail-token-name h1 {
  font-size: 40px;
  overflow-wrap: anywhere;
}
.detail-token-name>div>span {
  display: inline-block;
  font-family: monospace;
  color: var(--muted);
  font-size: 12px;
  margin-top: 6px;
}
.token-intro {
  font-family: var(--hand);
  font-size: 26px;
  line-height: 1.5;
  margin: 19px 0;
}
.creator-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.creator-avatar {
  display: inline-grid;
  place-items: center;
  height: 25px;
  width: 25px;
  background: #dad1be;
  border-radius: 50%;
  font-family: var(--hand);
  font-size: 20px;
}
.token-links {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 21px;
  font-size: 11px;
}
.token-links>a {
  border-bottom: 1px solid #a39780;
  padding-bottom: 2px;
}
.token-links>button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: monospace;
  padding: 0;
}
.token-links svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.3;
}
.detail-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 44px;
  align-items: start;
}
.detail-main {
  min-width: 0;
}
.detail-section {
  --tilt: .5deg;
  position: relative;
  padding: 27px 29px 31px;
  margin-bottom: 30px;
  background: #ece1c7;
  background-image: var(--texture);
  transform: rotate(var(--tilt));
  box-shadow: 1px 4px 4px #574a3215;
}
.detail-section+.detail-section {
  --tilt: -1deg;
  background-color: #f4e6ad;
}
.detail-section+.detail-section::before {
  content: '';
  width: 80px;
  height: 25px;
  position: absolute;
  top: -11px;
  right: 44px;
  background: #c1b89a80;
  transform: rotate(-8deg);
}
.detail-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 23px;
}
.detail-section-title h2 {
  font-size: 23px;
}
.pill {
  font-size: 11px;
  display: inline-block;
  background: #dfd2b8;
  padding: 4px 10px;
  transform: rotate(-3deg);
}
.detail-progress-number {
  display: flex;
  gap: 20px;
  align-items: baseline;
  margin: 25px 0 12px;
}
.detail-progress-number>strong {
  font-size: 63px;
  letter-spacing: -.08em;
  line-height: 1;
  color: var(--blue);
}
.detail-progress-number small {
  font-size: 32px;
}
.detail-progress-number>span {
  font-family: var(--hand);
  font-size: 21px;
}
.progress-bar.large {
  height: 19px;
}
.detail-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 15px;
  margin-top: 27px;
}
.detail-stats>div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.detail-stats>div>span {
  color: #71644f;
  font-size: 10px;
}
.detail-stats strong {
  font-size: 18px;
  font-weight: 700;
}
.detail-stats small {
  font-size: 10px;
}
#countdown {
  font-size: 14px;
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}
.growth-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-top: 1px dashed #a99b7e;
  margin-top: 25px;
  padding: 15px 0 0;
  font-family: var(--hand);
  font-size: 23px;
}
.growth-demo>span {
  font-family: sans-serif;
  color: var(--red);
}
.growth-demo>small {
  font-family: 'Noto Sans SC',sans-serif;
  font-size: 9px;
  color: #8d806b;
}
.subtle-label {
  font-family: var(--hand);
  font-size: 17px;
  color: #827052;
}
.detail-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--hand);
}
.detail-rules li {
  display: flex;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid #a99b6e33;
}
.detail-rules li>span {
  color: var(--blue);
  font-size: 21px;
}
.detail-rules p {
  font-size: 21px;
  line-height: 1.6;
}
.rule-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  padding-top: 20px;
  font-size: 10px;
  color: #71644f;
}
.agent-panel {
  --tilt: 1.4deg;
  position: sticky;
  top: 25px;
  padding: 29px 27px 25px;
  background-color: #fbf6e9;
  background-image: repeating-linear-gradient(transparent 0 27px,#b4b3a624 27px 28px),var(--texture);
  box-shadow: 2px 5px 5px #50452d22;
  transform: rotate(var(--tilt));
}
.agent-panel::before {
  content: '';
  position: absolute;
  width: 82px;
  height: 25px;
  top: -12px;
  left: 36%;
  transform: rotate(-8deg);
  background: #79a8d4ae;
  background-image: var(--texture);
}
.agent-panel-top {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: monospace;
  color: var(--muted);
  font-size: 10px;
}
.agent-emblem {
  color: var(--blue);
  font-size: 30px;
}
.agent-panel h2 {
  font-size: 30px;
  margin: 8px 0 15px;
}
.agent-panel>p {
  font-size: 12px;
  color: var(--muted);
}
#agent-instruction {
  display: block;
  width: 100%;
  height: 250px;
  margin: 20px 0;
  padding: 15px 11px;
  border: 0;
  border-top: 1px dashed #b5a88f;
  border-bottom: 1px dashed #b5a88f;
  border-radius: 0;
  background: #ece3cd4a;
  resize: vertical;
  font-family: 'Courier New','Noto Sans SC',monospace;
  font-size: 11px;
  line-height: 1.9;
  color: #5e5547;
}
.agent-panel>.button {
  width: 100%;
  font-size: 14px;
}
.agent-panel-foot {
  display: block;
  text-align: center;
  font-family: var(--hand);
  font-size: 21px;
  margin-top: 15px;
  color: var(--blue);
}
.activity-section {
  padding-top: 35px;
  margin-top: 20px;
}
.activity-section .eyebrow {
  margin-bottom: 9px;
}
.demo-table-label {
  font-family: var(--hand);
  font-size: 21px;
  color: var(--muted);
}
.activity-table-wrap {
  background: #f8f1df;
  background-image: var(--texture);
  padding: 0 22px;
  box-shadow: 1px 4px 2px #5a4a2d11;
}
.activity-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.activity-table th {
  font-weight: 500;
  font-size: 10px;
  text-align: left;
  padding: 16px 12px;
  border-bottom: 1px dashed #aa9d84;
  color: var(--muted);
}
.activity-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #cabfa955;
}
.activity-table td>span:not(.activity-avatar) {
  color: #82765e;
}
.activity-table td:first-child {
  white-space: nowrap;
}
.activity-avatar {
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  background: var(--avatar-bg);
  transform: rotate(-4deg);
  font-family: var(--hand);
  font-size: 20px;
  margin-right: 10px;
}
.back-town {
  display: inline-block;
  margin-top: 35px;
  font-family: var(--hand);
  font-size: 24px;
  border-bottom: 2px solid var(--blue);
}
.celebrate .poster-spark {
  animation: spark-pop .65s ease-out both;
  color: var(--red);
}
/* Paper application. All existing fields and validation remain in form.js. */
.back-link {
  font-size: 12px;
  color: var(--muted);
}
.create-heading {
  margin-top: 31px;
  position: relative;
}
.create-heading .eyebrow {
  color: var(--blue);
}
.create-heading h1 {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-size: 43px;
  margin: 19px 0 14px;
  padding: 5px 15px 10px;
  transform: rotate(-1deg);
}
.create-heading h1::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: var(--tear);
  background: var(--yellow);
  background-image: var(--texture);
}
.create-heading>p {
  font-family: var(--hand);
  font-size: 24px;
  color: #6b6050;
  padding-left: 9px;
}
.stepper {
  display: flex;
  margin: 44px 0 38px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 26px;
}
.step {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0 12px 0 0;
  color: #8b8271;
  text-align: left;
}
.step:not(:last-child)::after {
  content: '⤳';
  font-family: var(--hand);
  position: absolute;
  right: 20px;
  font-size: 36px;
  color: #a89c82;
}
.step>span {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 45px;
  height: 43px;
  font-family: var(--hand);
  font-size: 28px;
  color: var(--ink);
  background: #e1d7c3;
  background-image: var(--texture);
  clip-path: var(--tear);
  transform: rotate(-5deg);
}
.step:nth-child(even)>span {
  transform: rotate(6deg);
}
.step strong {
  font-size: 13px;
  font-weight: 500;
}
.step.current {
  color: var(--ink);
}
.step.current strong {
  font-weight: 900;
}
.step.current>span {
  background-color: var(--yellow);
}
.step.complete>span {
  background-color: #aac3d8;
}
.step.complete svg {
  width: 24px;
  height: 24px;
}
.step-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}
.step-heading h2 {
  font-size: 27px;
  margin-top: 9px;
}
.chosen-game {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--hand);
  font-size: 23px;
}
.chosen-game .building-art {
  width: 55px;
  height: 55px;
  object-fit: contain;
}
.game-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 30px;
  padding-top: 7px;
}
.game-option {
  position: relative;
  isolation: isolate;
  text-align: left;
  padding: 15px 20px 21px;
  transform: rotate(-1deg);
  filter: drop-shadow(1px 4px 2px #503f291c);
  transition: transform .22s;
  min-width: 0;
}
.game-option::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #f9f1de;
  background-image: var(--texture);
  clip-path: var(--tear);
}
.game-option:nth-child(even) {
  transform: rotate(1.5deg);
}
.game-option.selected::before {
  background-color: #f5db8b;
}
.game-option.selected::after {
  content: '';
  position: absolute;
  width: 80px;
  height: 24px;
  top: -12px;
  left: 36%;
  background: #7da2c5b0;
  background-image: var(--texture);
  transform: rotate(-8deg);
}
.game-option:hover {
  transform: translateY(-5px) rotate(-2deg);
}
.game-illustration {
  height: 185px;
  position: relative;
}
.game-illustration .building-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.selection-dot {
  position: absolute;
  right: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border: 1.5px solid #b0a17d;
  border-radius: 45% 55% 50% 43%;
}
.selected .selection-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff9eb;
}
.selection-dot svg {
  width: 22px;
  height: 22px;
}
.game-option-text {
  position: relative;
  padding: 12px 0 0 35px;
}
.game-index {
  position: absolute;
  left: 0;
  top: 6px;
  font-family: var(--hand);
  font-size: 24px;
  color: var(--blue);
}
.game-option-text h2 {
  font-size: 22px;
}
.game-option-text p {
  font-family: var(--hand);
  font-size: 20px;
  color: #6a6151;
  margin-top: 7px;
}
.coming-soon .building-art {
  opacity: .67;
}
.soon-tag {
  position: absolute;
  top: 42%;
  left: 6%;
  right: -5%;
  padding: 5px 10px;
  text-align: center;
  color: #6d5c3c;
  background: #dfc998d9;
  background-image: var(--texture);
  font-family: var(--hand);
  font-size: 28px;
  line-height: 1.2;
  transform: rotate(-15deg);
  box-shadow: 0 2px 2px #57442a13;
}
.game-explanation {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1.5;
  margin: 32px 3px 0;
  color: #655b49;
}
.form-section {
  position: relative;
  margin: 0 0 30px;
  padding: 30px 35px 35px;
  background: #faf4e6;
  background-image: var(--texture);
  box-shadow: 1px 4px 4px #5f4b2d14;
}
.form-section::before {
  content: '';
  width: 75px;
  height: 23px;
  position: absolute;
  top: -9px;
  right: 46px;
  background: #d5c49c9c;
  background-image: var(--texture);
  transform: rotate(6deg);
}
.form-section:nth-child(even) {
  transform: rotate(-.25deg);
}
.form-section-heading {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #b6aa90;
}
.section-number {
  font-family: var(--hand);
  color: var(--blue);
  font-size: 36px;
  border: 2px solid var(--blue);
  line-height: 1;
  width: 48px;
  height: 47px;
  display: grid;
  place-items: center;
  border-radius: 43% 51% 45% 55%;
  transform: rotate(-10deg);
  flex-shrink: 0;
}
.form-section-heading h2 {
  font-size: 23px;
}
.form-section-heading p {
  font-family: var(--hand);
  font-size: 21px;
  color: #7a6d56;
  margin-top: 6px;
}
.fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px 30px;
}
.fields .wide {
  grid-column: 1/-1;
}
.field {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.field>label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 9px;
}
.required {
  color: var(--red);
}
.optional {
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
}
.field input:not([type=range]),.field textarea,.field select {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid #ae9f83;
  border-radius: 0;
  background: #e6dbc730;
  padding: 12px 11px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 46px;
}
.field textarea {
  resize: vertical;
  min-height: 104px;
  background-image: repeating-linear-gradient(transparent 0 27px,#bcad9225 27px 28px);
  line-height: 28px;
  padding-top: 5px;
}
.field input::placeholder {
  color: #a39783;
}
.field input[aria-invalid=true],.field textarea[aria-invalid=true] {
  border-color: #bf4536;
}
.field-error {
  display: block;
  color: #b74431;
  font-size: 11px;
  line-height: 1.55;
}
.field-error:not(:empty) {
  margin-top: 7px;
}
.upload {
  border: 1px dashed #b2a17d;
  padding: 20px;
  display: flex!important;
  align-items: center!important;
  gap: 16px!important;
  font-weight: 400!important;
  background: #e6dbc730;
  cursor: pointer;
  margin-bottom: 0!important;
}
.upload img {
  height: 52px;
  width: 52px;
  object-fit: cover;
}
.upload-icon {
  font-family: var(--hand);
  font-size: 40px;
  color: var(--blue);
  padding: 0 8px;
}
.upload>span:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.upload strong {
  display: block;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.upload small {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}
.upload-action {
  font-family: var(--hand);
  color: var(--blue);
  font-size: 21px;
  border-bottom: 1px solid currentColor;
  flex-shrink: 0;
}
.toggle-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 0;
  border-bottom: 1px solid #c6baa255;
  cursor: pointer;
}
.toggle-row>span:first-child {
  flex: 1;
}
.toggle-row strong {
  display: block;
  font-size: 12px;
  font-weight: 500;
}
.toggle-row small {
  font-size: 10px;
  color: var(--muted);
}
.toggle-row input {
  position: absolute;
  right: 0;
  width: 40px;
  height: 28px;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}
.switch {
  width: 37px;
  height: 22px;
  border: 1px solid #aa9a7d;
  background: #dfd4be;
  border-radius: 20px;
  flex-shrink: 0;
  position: relative;
}
.switch::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #faf4e5;
  border-radius: 50%;
  box-shadow: 0 1px 2px #4c3b2633;
  transition: transform .2s;
}
.toggle-row input:checked+.switch {
  background: var(--blue);
  border-color: var(--blue);
}
.toggle-row input:checked+.switch::before {
  transform: translateX(15px);
}
.toggle-row input:focus-visible+.switch {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
.conditional {
  padding: 15px 0 8px 18px;
  border-left: 2px solid #b8c8d5;
  margin-top: 9px;
}
.tax-sliders {
  padding: 22px;
  background: #e9dbbc66;
}
.tax-sliders .field {
  margin-bottom: 15px;
}
.field output {
  margin-left: auto;
  font-family: var(--hand);
  color: var(--blue);
  font-size: 24px;
  line-height: 1;
}
input[type=range] {
  accent-color: var(--blue);
  width: 100%;
  height: 20px;
  margin: 3px 0 0;
}
.ratio-line {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed #bbad8d;
  padding-top: 14px;
  font-size: 12px;
}
.ratio-line strong {
  color: var(--blue);
}
.ratio-line strong.invalid {
  color: #b74431;
}
.form-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 35px;
  padding-top: 25px;
  border-top: 1px solid #b7aa8c66;
}
.form-navigation>span {
  font-family: var(--hand);
  font-size: 22px;
  color: #8a7b61;
  text-align: center;
}
.preview-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: 40px;
  align-items: start;
}
.preview-building {
  position: sticky;
  top: 20px;
  isolation: isolate;
  padding: 28px 25px 32px;
  text-align: center;
  transform: rotate(-2deg);
  filter: drop-shadow(2px 7px 3px #5e4b2d22);
}
.preview-building::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f9efd7;
  background-image: var(--texture);
  clip-path: var(--tear);
  z-index: -1;
}
.preview-building::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 35%;
  width: 100px;
  height: 28px;
  background: #6f9ec6a3;
  transform: rotate(9deg);
  background-image: var(--texture);
}
.preview-scene {
  height: 290px;
}
.preview-name {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.preview-name h2 {
  font-size: 32px;
  overflow-wrap: anywhere;
}
.preview-name>span {
  font-size: 12px;
  font-family: monospace;
}
.preview-logo {
  width: 42px;
  height: 42px;
  object-fit: cover;
  transform: rotate(5deg);
}
.preview-building>p {
  font-family: var(--hand);
  font-size: 24px;
  margin-top: 18px;
  overflow-wrap: anywhere;
}
.preview-stamp {
  font-family: var(--hand);
  font-size: 21px;
  color: var(--red);
  padding: 11px 8px 0;
  margin-top: 25px;
  border-top: 1px dashed #b7a484;
}
.preview-info {
  min-width: 0;
}
.rule-card {
  background: #f3e2a5;
  background-image: var(--texture);
  padding: 26px;
  transform: rotate(1deg);
}
.rule-card h2 {
  font-size: 24px;
  margin-top: 12px;
}
.rule-card ul {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  font-family: var(--hand);
  font-size: 21px;
}
.rule-card li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  line-height: 1.5;
}
.rule-card li svg {
  width: 17px;
  height: 17px;
  color: var(--blue);
  flex-shrink: 0;
}
.fee-note {
  display: flex;
  justify-content: space-between;
  border-top: 1px dashed #a99768;
  padding-top: 15px;
  font-size: 11px;
}
.fee-note strong {
  color: var(--red);
  font-size: 18px;
}
.parameter-details {
  margin-top: 24px;
  padding: 0 20px 10px;
  background: #f8f0dc;
  background-image: var(--texture);
}
.parameter-details summary {
  padding: 17px 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.parameter-details summary>span {
  float: right;
  color: var(--blue);
}
.parameter-details table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.parameter-details tr {
  border-top: 1px solid #d3c7ad;
}
.parameter-details th {
  font-weight: 400;
  text-align: left;
  color: #85765a;
  padding: 10px 10px 10px 0;
  width: 57%;
}
.parameter-details td {
  text-align: right;
  padding: 10px 0;
  overflow-wrap: anywhere;
  max-width: 170px;
}
/* Colophon, feedback, and dialogs */
#footer {
  border-top: 1px solid #b5a98e66;
}
.footer-shell {
  width: min(1440px,calc(100% - 96px));
  margin: auto;
  padding: 34px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.footer-shell .brand>img {
  width: 35px;
  height: 35px;
}
.footer-shell .brand>span {
  font-size: 20px;
  gap: 10px;
}
.footer-shell .brand small {
  font-size: 18px;
}
.footer-shell>p {
  font-family: var(--hand);
  font-size: 25px;
  transform: rotate(-3deg);
}
.footer-shell>span {
  color: #90816a;
  font-size: 10px;
}
.footer-shell>span i {
  padding: 0 6px;
  font-style: normal;
}
.toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  z-index: 100;
  max-width: calc(100% - 40px);
  background: var(--ink);
  background-image: var(--texture);
  color: #fff9ea;
  padding: 12px 22px;
  opacity: 0;
  transform: translate(-50%,15px) rotate(-1deg);
  pointer-events: none;
  transition: transform .25s,opacity .25s;
  font-size: 13px;
}
.toast.visible {
  opacity: 1;
  transform: translate(-50%,0) rotate(-1deg);
}
dialog {
  border: 0;
  padding: 35px 32px 32px;
  width: min(480px,calc(100% - 40px));
  background: #f8efd9;
  background-image: var(--texture);
  box-shadow: 2px 12px 40px #352a2455;
  color: var(--ink);
  transform: rotate(-1deg);
}
dialog::backdrop {
  background: #2522199e;
  backdrop-filter: blur(3px);
}
.dialog-close {
  position: absolute;
  right: 9px;
  top: 5px;
  padding: 4px 12px;
  font-size: 28px;
}
.modal-art {
  height: 130px;
}
.modal-art .building-art {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
dialog h2 {
  font-size: 29px;
  margin: 12px 0;
}
dialog p {
  font-family: var(--hand);
  font-size: 24px;
  line-height: 1.4;
  margin-bottom: 23px;
}
dialog .button {
  margin-top: 10px;
}
.copy-fallback {
  width: 100%;
  min-height: 160px;
  background: #f0e4cb;
  border: 1px dashed #b3a17b;
  font-size: 12px;
  padding: 10px;
}
.empty-page {
  text-align: center;
  padding-block: 80px;
}
.empty-page .building-art {
  width: 220px;
  height: 220px;
  margin: auto;
  object-fit: contain;
}
.empty-page h1 {
  font-size: 35px;
}
.empty-page p {
  font-family: var(--hand);
  font-size: 26px;
  margin: 20px 0;
}
/* Every animated property is transform or opacity. SVG ink uses a transform-only clip reveal. */
@keyframes paper-slap {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(1.16) rotate(calc(var(--paper-rotation,0deg) - 10deg));
  }
  65% {
    opacity: 1;
    transform: translateY(3px) scale(.98) rotate(calc(var(--paper-rotation,0deg) + 1deg));
  }
  82% {
    transform: translateY(-2px) scale(1.01) rotate(var(--paper-rotation,0deg));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(var(--paper-rotation,0deg));
  }
}
@keyframes title-unfold {
  0% {
    opacity: 0;
    transform: scaleX(.04) rotate(-3deg);
  }
  55% {
    opacity: 1;
    transform: scaleX(1.04) rotate(-1deg);
  }
  78% {
    transform: scaleX(.985) rotate(-1.8deg);
  }
  100% {
    opacity: 1;
    transform: scaleX(1) rotate(-1.5deg);
  }
}
@keyframes dev-slap {
  0% {
    opacity: 0;
    transform: translate(12px,-35px) scale(1.2) rotate(-17deg);
  }
  70% {
    opacity: 1;
    transform: translateY(3px) scale(.98) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: rotate(-7deg);
  }
}
@keyframes subtitle-slap {
  from {
    opacity: 0;
    transform: translateY(-25px) scale(1.07) rotate(-5deg);
  }
  to {
    opacity: 1;
    transform: rotate(-1.3deg);
  }
}
@keyframes cta-slap {
  from {
    opacity: 0;
    transform: translateY(-28px) scale(1.13) rotate(-11deg);
  }
  to {
    opacity: 1;
    transform: rotate(-3deg);
  }
}
@keyframes write-in {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes fade-note {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes note-sway {
  0%,80%,100% {
    transform: rotate(0);
  }
  86% {
    transform: rotate(-3deg);
  }
  91% {
    transform: rotate(2deg);
  }
  96% {
    transform: rotate(-1deg);
  }
}
@keyframes blink {
  0%,45%,49%,100% {
    transform: scaleY(0);
  }
  46%,48% {
    transform: scaleY(1);
  }
}
@keyframes tape-stick {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(1.3) rotate(-30deg);
  }
  to {
    opacity: 1;
    transform: rotate(var(--tape-rotation,-21deg));
  }
}
@keyframes page-flip {
  from {
    opacity: 0;
    transform: translate(9px,15px) rotate(var(--page-turn-angle,1.2deg)) scale(.99);
  }
  to {
    opacity: 1;
    transform: translate(0,0) rotate(0) scale(1);
  }
}
@keyframes spark-pop {
  0% {
    transform: scale(.7) rotate(-15deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.4) rotate(8deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-12deg);
    opacity: 1;
  }
}
.page-turn {
  transform-origin: top left;
  animation: page-flip .45s cubic-bezier(.15,.7,.3,1) both;
}
.paper-reveal.awaiting-reveal {
  opacity: 0;
  transform: translateY(34px) rotate(calc(var(--tilt,0deg) - 5deg)) scale(1.04);
}
.paper-reveal.is-visible {
  animation: reveal-paper .7s var(--reveal-delay,0ms) cubic-bezier(.15,.7,.25,1.12) both;
}
@keyframes reveal-paper {
  0% {
    opacity: 0;
    transform: translateY(34px) rotate(calc(var(--tilt,0deg) - 5deg)) scale(1.04);
  }
  65% {
    opacity: 1;
    transform: translateY(-3px) rotate(calc(var(--tilt,0deg) + .4deg)) scale(.995);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--tilt,0deg)) scale(1);
  }
}
.token-card.is-visible .card-tape {
  animation: tape-stick .4s calc(var(--reveal-delay,0ms) + .55s) both;
}
.token-card:nth-child(3n+2) .card-tape {
  --tape-rotation: 19deg;
}
.token-card:nth-child(3n) .card-tape {
  --tape-rotation: -11deg;
}
.token-card.is-visible.is-settled {
  animation: none;
  opacity: 1;
  transform: rotate(var(--tilt));
}
.token-card.is-visible.is-settled:hover {
  transform: translateY(-7px) rotate(0);
  opacity: 1;
}
html[lang=en] .hero h1 {
  font-size: clamp(44px,4.8vw,73px);
  white-space: normal;
}
html[lang=en] .title-yellow {
  max-width: 69%;
  line-height: 1.05;
  padding: 16px 24px 22px;
}
html[lang=en] .hero-subtitle {
  font-family: var(--hand);
  font-size: 29px;
}
html[lang=en] .hero-cta {
  font-size: 32px;
}
html[lang=en] .card-body h3 {
  font-size: clamp(18px,1.65vw,25px);
  white-space: normal;
}
html[lang=en] .card-description {
  font-size: 22px;
  line-height: 1.15;
}
html[lang=en] .wall-note {
  font-size: 28px;
}
html[lang=en] .create-heading h1 {
  font-size: 40px;
}
@media(min-width:1600px) {
  .hero {
    height: 660px;
    padding-top: 67px;
  }
  .hero-collage {
    height: 590px;
  }
  .hero-handnote {
    top: 355px;
  }
  .hero-action {
    margin-top: 45px;
  }
  .token-card {
    min-height: 310px;
    padding: 30px 25px 22px;
  }
  .card-description {
    font-size: 22px;
  }
  .card-body h3 {
    font-size: 30px;
  }
}
@media(max-width:1199px) {
  .page-shell,.nav-shell,.footer-shell {
    width: calc(100% - 64px);
  }
  .nav-shell {
    gap: 20px;
  }
  .brand>span {
    font-size: 24px;
    gap: 10px;
  }
  .brand small {
    font-size: 22px;
  }
  .main-nav {
    gap: 25px;
    font-size: 14px;
  }
  .nav-right {
    gap: 18px;
  }
  .nav-create {
    padding-inline: 15px;
  }
  .hero {
    height: 540px;
    padding-top: 45px;
  }
  .hero-copy {
    width: 66%;
  }
  .hero h1 {
    font-size: 6.25vw;
  }
  .hero-edition>span {
    display: none;
  }
  .hero-collage {
    height: 465px;
    right: -14px;
    width: 53%;
  }
  .collage-note {
    width: 120px;
  }
  .drop-note {
    font-size: 25px;
    padding: 18px 16px 12px;
  }
  .hero-subtitle {
    font-size: 23px;
    margin-left: 8px;
  }
  .hero-action {
    margin-left: 10px;
    margin-top: 32px;
  }
  .hero-cta {
    min-width: 235px;
    min-height: 85px;
    font-size: 35px;
  }
  .drawn-arrow {
    width: 100px;
  }
  .hero-handnote {
    left: 48%;
    top: 300px;
    font-size: 20px;
    width: 180px;
  }
  .handwritten-svg {
    width: 175px;
  }
  .collage-bottom {
    font-size: 16px;
  }
  .collage-bottom strong {
    font-size: 18px;
  }
  .token-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 42px 32px;
  }
  .token-card {
    min-height: 285px;
    padding: 26px 22px 20px;
  }
  .card-body h3 {
    font-size: 26px;
  }
  .card-description {
    font-size: 21px;
    min-height: 80px;
  }
  .how-inner {
    grid-template-columns: 1fr 1.8fr;
    gap: 35px;
  }
  .how-title .marker-heading {
    font-size: 32px;
  }
  .how-steps {
    gap: 17px;
  }
  .how-step {
    padding: 20px 13px;
  }
  .how-step h3 {
    font-size: 17px;
  }
  .how-step p {
    font-size: 18px;
  }
  .step-arrow {
    right: -27px;
    font-size: 58px;
  }
  .detail-layout {
    gap: 27px;
  }
  .detail-token-name h1 {
    font-size: 33px;
  }
  .token-heading {
    padding-left: 13px;
  }
  .token-hero {
    padding-right: 30px;
  }
  .detail-section {
    padding: 25px 22px;
  }
  .detail-section-title h2 {
    font-size: 21px;
  }
  .subtle-label {
    font-size: 15px;
  }
  .detail-stats {
    gap: 8px;
  }
  .agent-panel {
    padding-inline: 22px;
  }
  .game-grid {
    gap: 26px;
  }
  .game-illustration {
    height: 160px;
  }
  .step:not(:last-child)::after {
    right: 10px;
  }
  .step strong {
    font-size: 12px;
  }
  .preview-grid {
    gap: 30px;
  }
  .footer-shell>p {
    display: none;
  }
}
@media(max-width:900px) {
  .nav-shell {
    height: 83px;
  }
  .brand>span {
    flex-direction: column;
    gap: 0;
    line-height: 1.2;
    font-size: 23px;
  }
  .brand small {
    font-size: 15px;
  }
  .brand>img {
    width: 40px;
    height: 40px;
  }
  .nav-create {
    display: none;
  }
  .hero {
    height: 485px;
    padding-top: 40px;
  }
  .hero h1 {
    font-size: 6.3vw;
  }
  .hero-collage {
    height: 400px;
    top: 16px;
  }
  .title-yellow {
    padding: 14px 13px 21px;
  }
  .title-dev {
    padding-inline: 14px;
  }
  .hero-subtitle {
    font-size: 19px;
    padding-inline: 12px;
  }
  .hero-cta {
    min-width: 200px;
    min-height: 75px;
    font-size: 31px;
  }
  .hero-cta svg {
    width: 25px;
  }
  .hero-handnote {
    left: 44%;
    top: 290px;
    font-size: 17px;
    width: 145px;
  }
  .drawn-arrow {
    width: 80px;
    margin-top: -50px;
  }
  .hero-edition {
    font-size: 8px;
    margin-bottom: 25px;
  }
  .collage-note {
    width: 100px;
  }
  .drop-note {
    font-size: 22px;
  }
  .collage-bottom {
    right: 0;
    padding-inline: 12px;
    bottom: 0;
    font-size: 13px;
  }
  .collage-bottom strong {
    font-size: 15px;
  }
  .collage-doodle {
    font-size: 60px;
  }
  .hero-bottom {
    font-size: 18px;
  }
  .wall-note {
    font-size: 21px;
    padding-right: 0;
  }
  .marker-heading {
    font-size: 39px;
  }
  .card-body h3 {
    font-size: 23px;
  }
  .card-description {
    font-size: 20px;
  }
  .card-art {
    width: 48%;
  }
  .how-inner {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .how-title {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    align-items: center;
  }
  .how-title .eyebrow {
    width: 100%;
    margin-bottom: -8px;
  }
  .how-title .hand-note {
    margin: 0;
  }
  .how-title .button {
    margin-left: auto;
  }
  .how-steps {
    gap: 30px;
    padding-inline: 6px;
  }
  .how-step {
    min-height: 215px;
    padding: 25px 22px;
  }
  .how-step h3 {
    font-size: 22px;
  }
  .how-step p {
    font-size: 22px;
  }
  .token-hero {
    grid-template-columns: .85fr 1.15fr;
    padding: 23px 25px 25px 15px;
  }
  .token-hero-scene {
    padding-inline: 12px;
  }
  #token-scene {
    height: 250px;
  }
  .token-intro {
    font-size: 23px;
  }
  .token-heading {
    padding-left: 12px;
  }
  .detail-token-name h1 {
    font-size: 28px;
  }
  .detail-token-name .token-logo {
    display: none;
  }
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .agent-panel {
    position: relative;
    top: 0;
    max-width: 100%;
    margin: 10px 10px 15px;
  }
  .agent-panel h2 br {
    display: none;
  }
  #agent-instruction {
    height: 210px;
  }
  .create-heading h1 {
    font-size: 35px;
  }
  .step {
    gap: 8px;
  }
  .step:not(:last-child)::after {
    display: none;
  }
  .game-grid {
    gap: 23px;
  }
  .game-option {
    padding-inline: 13px;
  }
  .game-illustration {
    height: 135px;
  }
  .game-option-text {
    padding-left: 27px;
  }
  .game-option-text h2 {
    font-size: 18px;
  }
  .game-option-text p {
    font-size: 18px;
  }
  .soon-tag {
    font-size: 25px;
  }
  .form-navigation>span {
    font-size: 19px;
  }
  .preview-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .preview-building {
    position: relative;
    top: 0;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
  html[lang=en] .hero h1 {
    font-size: 5.5vw;
  }
  html[lang=en] .hero-subtitle {
    font-size: 22px;
  }
  html[lang=en] .hero-cta {
    font-size: 24px;
  }
  html[lang=en] .hero-handnote {
    top: 290px;
    font-size: 22px;
  }
  html[lang=en] .wall-note {
    font-size: 24px;
  }
  html[lang=en] .card-body h3 {
    font-size: 23px;
  }
}
/* Single-column mobile edition */
@media(max-width:600px) {
  .page-shell,.nav-shell,.footer-shell {
    width: calc(100% - 38px);
  }
  .nav-shell {
    height: 76px;
    gap: 10px;
  }
  .brand {
    gap: 7px;
  }
  .brand>img {
    width: 34px;
    height: 34px;
  }
  .brand>span {
    font-size: 20px;
  }
  .brand small {
    font-size: 13px;
  }
  .main-nav {
    gap: 16px;
    font-size: 12px;
    margin-left: auto;
  }
  .main-nav button {
    display: none;
  }
  .nav-right {
    gap: 0;
  }
  .language-button {
    font-size: 12px;
    padding: 13px 3px;
    min-width: 39px;
    justify-content: center;
  }
  .language-button svg {
    display: none;
  }
  .hero {
    height: auto;
    min-height: 850px;
    padding-top: 30px;
    padding-bottom: 72px;
  }
  .hero-copy {
    width: 100%;
  }
  .hero-edition {
    font-size: 8px;
    margin: 0 0 23px 3px;
    letter-spacing: .15em;
  }
  .hero-edition>span {
    display: inline;
    margin-left: 11px;
    font-size: 7px;
  }
  .hero h1 {
    font-size: 10.25vw;
    width: 100%;
    line-height: 1.2;
    letter-spacing: -.065em;
  }
  .title-yellow {
    padding: 12px 10px 19px;
    margin-left: -2px;
  }
  .title-dev {
    font-size: 1.13em;
    margin-left: -5px;
    margin-top: 21px;
    padding: 9px 10px 11px;
  }
  .title-dev>i {
    top: -15px;
    font-size: .43em;
    padding: 1px 8px;
    left: 11px;
  }
  .hero-subtitle {
    font-size: 18px;
    margin: 11px 0 0 4px;
    padding: 7px 13px 12px;
  }
  .hero-action {
    margin: 26px 0 0 13px;
    gap: 13px;
  }
  .hero-cta {
    min-height: 74px;
    min-width: 216px;
    padding: 11px 21px;
    font-size: 32px;
    gap: 22px;
  }
  .hero-cta svg {
    width: 27px;
  }
  .drawn-arrow {
    width: 89px;
    height: 64px;
    margin-top: -27px;
  }
  .hero-handnote {
    position: relative;
    top: auto;
    left: auto;
    width: 200px;
    margin: 26px 0 0 13px;
    font-size: 20px;
    line-height: 1.4;
    transform: rotate(-5deg);
  }
  .hero-handnote br:nth-of-type(2) {
    display: none;
  }
  .handwritten-svg {
    width: 184px;
    height: 38px;
    margin-top: 0;
  }
  .hero-collage {
    position: relative;
    width: 100%;
    right: auto;
    top: auto;
    height: 365px;
    margin: -32px 0 0;
    z-index: 1;
  }
  .collage-background {
    inset: 0 0 0 7%;
  }
  .drop-background {
    --paper-rotation: 1deg;
  }
  .collage-robot {
    left: 0;
    bottom: -4%;
    width: 43%;
    height: 62%;
  }
  .collage-note {
    top: 0;
    right: 2%;
    width: 96px;
  }
  .drop-note {
    padding: 14px 11px 10px;
    font-size: 21px;
  }
  .drop-note p>span {
    font-size: 29px;
  }
  .collage-flower {
    right: 0;
    bottom: 3%;
    width: 18%;
    height: 45%;
  }
  .collage-doodle {
    display: none;
  }
  .collage-bottom {
    right: 3%;
    bottom: -3%;
    padding: 7px 14px;
    font-size: 13px;
  }
  .collage-bottom strong {
    font-size: 14px;
  }
  .hero-bottom {
    bottom: 0;
    padding: 16px 0;
    left: 0;
    right: 0;
    font-size: 18px;
  }
  .hero-bottom button {
    padding-right: 6px;
  }
  .town-list {
    padding-top: 32px;
    padding-bottom: 30px;
  }
  .section-heading {
    align-items: flex-start;
    margin-bottom: 25px;
  }
  .section-heading .eyebrow {
    font-size: 8px;
    margin-bottom: 10px;
  }
  .marker-heading {
    font-size: 35px;
  }
  .marker-heading::after {
    height: 5px;
    bottom: -7px;
  }
  #list-count {
    font-size: 10px;
    margin-top: 18px;
  }
  .wall-note {
    font-size: 16px;
    max-width: 135px;
    padding: 16px 0 0 5px;
    line-height: 1.5;
  }
  .wall-note>span {
    left: -13px;
    top: 0;
    font-size: 31px;
  }
  .list-toolbar {
    gap: 10px;
    margin-bottom: 34px;
    flex-wrap: wrap;
  }
  .filter-tabs {
    gap: 7px;
    width: 100%;
    justify-content: space-between;
  }
  .filter-tabs button {
    padding: 10px 11px;
    min-height: 42px;
    font-size: 11px;
  }
  .sort-label {
    margin-left: auto;
    font-size: 10px;
    margin-top: 3px;
  }
  .sort-label select {
    min-height: 34px;
  }
  .token-grid {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-inline: 4px;
  }
  .token-card {
    min-height: 275px;
    padding: 24px 20px 20px;
    --tilt: -1.3deg;
  }
  .token-card:nth-child(3n+2) {
    --tilt: 1deg;
  }
  .card-body {
    width: 65%;
    padding-top: 12px;
  }
  .card-body h3 {
    font-size: 25px;
  }
  .card-description {
    font-size: 21px;
    min-height: 78px;
    margin-top: 10px;
  }
  .card-art {
    width: 47%;
    height: 88%;
    right: -2%;
    top: 10%;
  }
  .card-art-note {
    width: 85px;
    bottom: 8px;
    right: 8px;
    font-size: 15px;
  }
  .card-progress-label {
    gap: 8px;
    padding-top: 12px;
  }
  .card-progress-label>span {
    font-size: 12px;
  }
  .card-progress-label strong {
    font-size: 28px;
  }
  .card-bottom {
    font-size: 9px;
  }
  .end-of-street {
    padding-top: 38px;
  }
  .end-of-street p {
    font-size: 23px;
  }
  .how-section {
    padding: 38px 0 50px;
  }
  .how-inner {
    gap: 33px;
  }
  .how-title {
    display: block;
    padding-inline: 5px;
  }
  .how-title .eyebrow {
    margin-bottom: 17px;
  }
  .how-title .marker-heading {
    font-size: 34px;
  }
  .how-title .hand-note {
    margin-top: 25px;
    font-size: 24px;
  }
  .how-title .button {
    margin-top: 20px;
  }
  .how-steps {
    display: flex;
    flex-direction: column;
    gap: 27px;
    padding: 10px 13px 0;
  }
  .how-step {
    width: 100%;
    min-height: 0;
    padding: 20px 20px 23px 87px;
    --tilt: -2deg;
  }
  .how-step:nth-child(2) {
    margin-top: 0;
    --tilt: 2deg;
  }
  .how-step:nth-child(3) {
    margin-top: 0;
  }
  .step-doodle {
    position: absolute;
    left: 21px;
    top: 22px;
    margin-bottom: 0;
    font-size: 36px;
    width: 42px;
    height: 42px;
  }
  .how-step h3 {
    font-size: 22px;
  }
  .how-step p {
    font-size: 21px;
    margin-top: 8px;
  }
  .step-arrow {
    right: 5px;
    top: auto;
    bottom: -34px;
    transform: rotate(60deg);
    font-size: 53px;
  }
  .step-star {
    font-size: 46px;
    right: -9px;
    top: -18px;
  }
  .detail-page,.create-page {
    padding-top: 22px;
    padding-bottom: 45px;
  }
  .breadcrumb {
    font-size: 10px;
    margin-bottom: 27px;
  }
  .token-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px 20px 26px;
    margin-inline: 2px;
    margin-bottom: 31px;
  }
  .token-hero::after {
    left: 34%;
    width: 88px;
    height: 27px;
    top: -11px;
  }
  .token-hero-scene {
    padding: 8px 0 0;
  }
  #token-scene {
    height: 245px;
  }
  .building-caption {
    font-size: 18px;
  }
  .token-heading {
    padding: 27px 0 0;
  }
  .detail-status {
    margin-bottom: 13px;
  }
  .detail-token-name h1 {
    font-size: 29px;
  }
  .detail-token-name .token-logo {
    display: inline-block;
    width: 40px;
    height: 40px;
  }
  .token-intro {
    font-size: 24px;
    margin-block: 16px;
  }
  .token-links {
    gap: 14px;
    font-size: 11px;
  }
  .detail-layout {
    gap: 8px;
  }
  .detail-section {
    padding: 24px 20px;
    margin-bottom: 27px;
  }
  .detail-section-title {
    gap: 9px;
    margin-bottom: 18px;
  }
  .detail-section-title h2 {
    font-size: 21px;
  }
  .detail-section-title .pill {
    font-size: 9px;
  }
  .detail-progress-number {
    gap: 16px;
    margin-top: 23px;
  }
  .detail-progress-number>strong {
    font-size: 56px;
  }
  .detail-progress-number>span {
    font-size: 18px;
  }
  .detail-stats {
    margin-top: 23px;
    gap: 10px;
  }
  .detail-stats strong {
    font-size: 16px;
  }
  .detail-stats>div>span {
    font-size: 9px;
  }
  #countdown {
    font-size: 11px;
  }
  .growth-demo {
    margin-top: 23px;
    font-size: 22px;
  }
  .subtle-label {
    display: none;
  }
  .detail-rules p {
    font-size: 21px;
  }
  .detail-rules li {
    gap: 10px;
  }
  .rule-facts {
    font-size: 9px;
    gap: 8px 12px;
  }
  .agent-panel {
    --tilt: .8deg;
    margin-inline: 3px;
    padding: 27px 20px;
  }
  .agent-panel h2 {
    font-size: 29px;
  }
  .agent-panel h2 br {
    display: block;
  }
  #agent-instruction {
    height: 260px;
    font-size: 11px;
  }
  .activity-section {
    padding-top: 30px;
    margin-top: 14px;
  }
  .activity-section .eyebrow {
    font-size: 8px;
  }
  .demo-table-label {
    font-size: 17px;
  }
  .activity-table-wrap {
    padding: 0 8px;
  }
  .activity-table {
    font-size: 10px;
  }
  .activity-table th {
    padding: 14px 4px;
    font-size: 9px;
  }
  .activity-table td {
    padding: 12px 4px;
  }
  .activity-avatar {
    width: 20px;
    height: 22px;
    margin-right: 4px;
    font-size: 17px;
  }
  .back-town {
    font-size: 22px;
  }
  .create-heading {
    margin-top: 26px;
  }
  .create-heading .eyebrow {
    font-size: 9px;
  }
  .create-heading h1 {
    font-size: 29px;
    padding-inline: 10px;
    margin-top: 16px;
  }
  .create-heading>p {
    font-size: 21px;
    padding-left: 3px;
  }
  .stepper {
    margin: 30px 0 27px;
    padding-bottom: 22px;
  }
  .step {
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding-right: 0;
  }
  .step>span {
    width: 39px;
    height: 38px;
    font-size: 25px;
  }
  .step strong {
    font-size: 10px;
    text-align: center;
  }
  .step-heading {
    margin-bottom: 25px;
    gap: 5px;
  }
  .step-heading h2 {
    font-size: 23px;
  }
  .step-heading .eyebrow {
    font-size: 9px;
  }
  .chosen-game {
    font-size: 17px;
    gap: 4px;
    white-space: nowrap;
  }
  .chosen-game .building-art {
    width: 37px;
    height: 37px;
  }
  .game-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-inline: 3px;
  }
  .game-option {
    min-height: 174px;
    padding: 13px 18px;
    display: grid;
    grid-template-columns: 43% 57%;
    align-items: center;
    transform: rotate(-1deg);
  }
  .game-option:nth-child(even) {
    transform: rotate(1deg);
  }
  .game-illustration {
    height: 149px;
  }
  .selection-dot {
    top: 2px;
    left: 0;
    right: auto;
    width: 21px;
    height: 21px;
  }
  .selection-dot svg {
    width: 19px;
    height: 19px;
  }
  .game-option-text {
    padding: 17px 0 4px 18px;
  }
  .game-index {
    left: 18px;
    top: -12px;
    font-size: 23px;
  }
  .game-option-text h2 {
    font-size: 23px;
  }
  .game-option-text p {
    font-size: 21px;
    line-height: 1.4;
  }
  .game-option.selected::after {
    width: 77px;
    left: 59%;
  }
  .soon-tag {
    font-size: 23px;
    left: -2px;
    right: -4px;
  }
  .game-explanation {
    font-size: 22px;
    gap: 7px;
    margin-top: 26px;
  }
  .form-section {
    padding: 25px 18px;
    margin-bottom: 28px;
  }
  .form-section-heading {
    gap: 12px;
    margin-bottom: 23px;
    padding-bottom: 18px;
  }
  .section-number {
    width: 39px;
    height: 39px;
    font-size: 29px;
  }
  .form-section-heading h2 {
    font-size: 21px;
  }
  .form-section-heading p {
    font-size: 19px;
  }
  .fields {
    grid-template-columns: 1fr;
    gap: 21px;
  }
  .field>label {
    font-size: 12px;
  }
  .field input:not([type=range]),.field textarea,.field select {
    font-size: 16px;
    min-height: 48px;
    padding-inline: 9px;
  }
  .field textarea {
    font-size: 15px;
  }
  .optional {
    font-size: 9px;
  }
  .upload {
    padding: 14px 10px;
    gap: 10px!important;
  }
  .upload-action {
    font-size: 18px;
  }
  .upload strong {
    font-size: 11px;
  }
  .upload small {
    font-size: 8px;
  }
  .upload-icon {
    font-size: 31px;
    padding: 0 4px;
  }
  .upload img {
    width: 43px;
    height: 43px;
  }
  .tax-sliders {
    padding: 17px 14px;
  }
  .form-navigation {
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 22px;
  }
  .form-navigation>span {
    width: 100%;
    order: 3;
    font-size: 20px;
  }
  .form-navigation>.button {
    font-size: 14px;
    gap: 11px;
    padding: 11px 18px;
    min-height: 49px;
  }
  .preview-grid {
    gap: 30px;
  }
  .preview-building {
    padding: 26px 20px;
    margin-inline: 3px;
    width: calc(100% - 6px);
  }
  .preview-building .eyebrow {
    font-size: 9px;
  }
  .preview-scene {
    height: 250px;
  }
  .preview-name h2 {
    font-size: 29px;
  }
  .preview-building>p {
    font-size: 24px;
  }
  .preview-stamp {
    font-size: 20px;
  }
  .rule-card {
    padding: 24px 19px;
  }
  .rule-card h2 {
    font-size: 23px;
  }
  .rule-card ul {
    font-size: 21px;
  }
  .parameter-details {
    padding-inline: 15px;
  }
  .parameter-details table {
    font-size: 10px;
  }
  .footer-shell {
    flex-wrap: wrap;
    gap: 18px;
    padding-block: 26px;
  }
  .footer-shell .brand>span {
    flex-direction: row;
    font-size: 18px;
    gap: 9px;
  }
  .footer-shell .brand small {
    font-size: 16px;
  }
  .footer-shell .brand>img {
    width: 29px;
    height: 29px;
  }
  .footer-shell>span {
    width: 100%;
    font-size: 9px;
  }
  dialog {
    padding: 29px 23px 26px;
  }
  dialog h2 {
    font-size: 26px;
  }
  dialog p {
    font-size: 23px;
  }
  .empty-page {
    padding-top: 50px;
  }
  .empty-page h1 {
    font-size: 29px;
  }
  html[lang=en] .hero {
    min-height: 885px;
  }
  html[lang=en] .hero h1 {
    font-size: 12.5vw;
  }
  html[lang=en] .title-yellow {
    max-width: 73%;
    padding: 12px 15px 20px;
  }
  html[lang=en] .title-dev {
    margin-left: -9px;
  }
  html[lang=en] .hero-subtitle {
    font-size: 24px;
    padding-inline: 13px;
  }
  html[lang=en] .hero-cta {
    font-size: 27px;
  }
  html[lang=en] .hero-handnote {
    top: auto;
    font-size: 23px;
  }
  html[lang=en] .hero-collage {
    margin-top: -29px;
  }
  html[lang=en] .marker-heading {
    font-size: 30px;
    max-width: 210px;
  }
  html[lang=en] .wall-note {
    font-size: 22px;
    max-width: 116px;
    padding-top: 23px;
  }
  html[lang=en] .filter-tabs button {
    font-size: 10px;
    padding-inline: 8px;
  }
  html[lang=en] .card-body h3 {
    font-size: 25px;
  }
  html[lang=en] .card-description {
    font-size: 23px;
    line-height: 1.2;
  }
  html[lang=en] .card-bottom {
    font-size: 8px;
  }
  html[lang=en] .create-heading h1 {
    font-size: 31px;
  }
  html[lang=en] .game-option-text h2 {
    font-size: 21px;
  }
  html[lang=en] .game-option-text p {
    font-size: 23px;
  }
  html[lang=en] .game-explanation {
    font-size: 24px;
  }
}
@media(max-width:359px) {
  .page-shell,.nav-shell,.footer-shell {
    width: calc(100% - 30px);
  }
  .main-nav {
    font-size: 11px;
  }
  .hero-edition>span {
    display: none;
  }
  .hero-subtitle {
    font-size: 16px;
  }
  .hero-cta {
    min-width: 198px;
    font-size: 28px;
  }
  .drawn-arrow {
    width: 70px;
  }
  .hero-collage {
    height: 330px;
  }
  .card-body h3 {
    font-size: 22px;
  }
  .card-description {
    font-size: 19px;
  }
  .game-option-text h2 {
    font-size: 21px;
  }
  .create-heading h1 {
    font-size: 25px;
  }
}
@media(prefers-reduced-motion:reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,*::before,*::after {
    animation: none!important;
    transition: none!important;
  }
  .paper-reveal.awaiting-reveal {
    opacity: 1;
    transform: rotate(var(--tilt,0deg));
  }
  .ink-reveal {
    transform: scaleX(1);
  }
  .parallax-layer {
    transform: none!important;
  }
  .robot-eyes {
    display: none;
  }
}
/* Glue lands after its paper. */
.note-tape {
  animation: note-tape-apply .45s 1.5s both;
}
@keyframes note-tape-apply {
  from {
    opacity: 0;
    transform: translateY(-15px) rotate(-24deg) scale(1.2);
  }
  to {
    opacity: 1;
    transform: rotate(-14deg);
  }
}
@media(prefers-reduced-motion:reduce) {
  .note-tape {
    animation: none!important;
  }
}

/* The entire note rocks, while the outer layer keeps the landing and parallax separate. */
.drop-note { padding: 0; background: none; clip-path: none; }
.drop-note p { animation: none; }
.note-paper { position: relative; padding: 22px 18px 14px; background: #f3d064; background-image: var(--texture); clip-path: var(--tear); transform-origin: 50% 0; animation: note-sway 9s 3s ease-in-out infinite; }
@media(max-width:1199px) { .note-paper { padding: 18px 16px 12px; } }
@media(max-width:600px) { .note-paper { padding: 14px 11px 10px; } }
@media(prefers-reduced-motion:reduce) { .note-paper { animation: none !important; } }

@media(max-width:600px) { .page-turn { --page-turn-angle: .12deg; } }