/* 3DPoly: clean and bright like the videos' daylight. A light grey page, white cards lifted by soft shadows (no
   outlines), near-black type in one heavy sans (Inter), and the hero's hoodie red for the one thing to press and the
   words that matter. Red pills like the videos' counters; yellow only for a word that has to jump out. */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700 800; font-display: swap; src: url('/fonts/inter-800.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 900; font-display: swap; src: url('/fonts/inter-900.woff2') format('woff2'); }

:root {
  --bg: #f4f4f5; --bg-2: #ebebee; --card: #ffffff; --line: #e6e6ea; --line-2: #d6d6dc;
  --ink: #111113; --muted: #62626a; --dim: #9c9ca5;
  --red: #e01a3c; --red-2: #bf1231; --red-tint: #fde8ec; --yellow: #f7c948;
  /* the old names, pointed at the new colours (pages still use them) */
  --maroon: var(--red); --maroon-2: var(--red-2); --brick: var(--red-2); --tan: #a3a3ab; --sand: #d6d6dc; --blush: var(--red-tint); --wood: #55555d;
  --accent: var(--red); --accent-ink: #ffffff;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: var(--sans);
  --soft: 0 1px 2px rgba(17, 17, 19, 0.04), 0 10px 30px rgba(17, 17, 19, 0.06);
  --lift: 0 1px 2px rgba(17, 17, 19, 0.05), 0 22px 56px rgba(17, 17, 19, 0.11);
  --panel: var(--card); --panel-2: var(--bg-2); --body: var(--sans); --display: var(--sans);
  /* the logo as a picture (the loading screen), from brand/logo.svg by brand/build.mjs */
  /* logo:start */ --logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='2' y='2' width='60' height='60' rx='16' fill='%23e01a3c'/%3E%3Cg transform='translate(9.6 10.4) scale(.7)'%3E%3Cpath d='M15 50h34l-5 9H20z' fill='%23c9a088'/%3E%3Crect x='13' y='17' width='38' height='34' fill='%23eccbb2'/%3E%3Cpath d='M10 22V12l4-5h36l4 5v10h-4v-4H14v4z' fill='%23c25a2c'/%3E%3Cpath d='M17 7l3-3h24l3 3z' fill='%239a4320'/%3E%3Crect x='18' y='25' width='10' height='3' fill='%23a4481f'/%3E%3Crect x='36' y='25' width='10' height='3' fill='%23a4481f'/%3E%3Crect x='20' y='30' width='7' height='7' fill='%231b1311'/%3E%3Crect x='24' y='31' width='2' height='3' fill='%23fff'/%3E%3Crect x='37' y='30' width='7' height='7' fill='%231b1311'/%3E%3Crect x='41' y='31' width='2' height='3' fill='%23fff'/%3E%3Crect x='29.5' y='32' width='5' height='10' fill='%23e2b193'/%3E%3Crect x='29.5' y='41' width='5' height='1.6' fill='%23c08c70'/%3E%3Crect x='28' y='46' width='8' height='1.8' fill='%239a6550'/%3E%3C/g%3E%3C/svg%3E"); /* logo:end */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 17px/1.55 var(--sans); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video, iframe { display: block; max-width: 100%; }
/* headlines: heavy capitals, tight, like the videos' own captions */
h1, h2, h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.045em; line-height: 0.98; margin: 0; }
h1, h2 { font-weight: 900; text-transform: uppercase; letter-spacing: -0.035em; line-height: 0.92; }
h1 { font-size: clamp(42px, 6.2vw, 84px); }
h2 { font-size: clamp(30px, 4vw, 52px); }
h3 { font-size: 21px; letter-spacing: -0.025em; line-height: 1.15; }
/* the words that matter: the same heavy type, in red */
h1 em, h2 em, h3 em, .serif { font-style: normal; }
h1 em, h2 em { color: var(--red); }
p { margin: 0; }
.wrap { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.label { font: 700 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.caption { color: var(--muted); }
.pill { display: inline-block; background: var(--red); color: #fff; font: 800 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 8px 4px; border-radius: 6px; }
.center { text-align: center; }

/* the header */
.top { position: sticky; top: 0; z-index: 40; background: rgba(244, 244, 245, 0.85); backdrop-filter: blur(14px); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; font: 900 23px/1 var(--sans); letter-spacing: -0.05em; color: var(--ink); }
.logo svg { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 26px; margin: 0 auto; }
.nav a { text-decoration: none; color: var(--muted); font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.nav a:hover, .nav a.on { color: var(--ink); }
.top .right { display: flex; align-items: center; gap: 10px; }
.credits { font-size: 14px; color: var(--muted); white-space: nowrap; text-decoration: none; }
.x-link { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--muted); transition: color 0.15s, background 0.15s; }
.x-link:hover { color: var(--ink); background: rgba(17, 17, 19, 0.06); }
.x-link svg { width: 15px; height: 15px; }
.credits b { color: var(--ink); font-weight: 600; }
/* the main coin's address beside the X link: a soft pill, one click copies it */
.ca-chip { appearance: none; border: 0; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px;
  background: rgba(17, 17, 19, 0.06); color: var(--ink); font: 500 13.5px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background 0.15s; }
.ca-chip:hover { background: rgba(17, 17, 19, 0.1); }
.ca-chip:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.ca-chip b { font-weight: 700; color: var(--maroon); }
.ca-chip span { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: left; }
.ca-chip svg { width: 13px; height: 13px; color: var(--muted); flex: none; }
.ca-chip.copied span { color: var(--maroon); font-weight: 600; }
/* on small screens the copy beside X gives way to one at the end of the tabs row (see the 960px rules) */
.top-break, .ca-chip.sub { display: none; }

/* buttons: round pills; near-black, red for the main action, white for the quiet ones */
.btn { --bg: var(--ink); --fg: #ffffff; appearance: none; border: 0; background: var(--bg); color: var(--fg); font: 700 15px/1 var(--sans);
  padding: 13px 20px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(17, 17, 19, 0.14);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.12s, box-shadow 0.12s, background 0.12s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(17, 17, 19, 0.18); }
.btn:active { transform: translateY(1px); }
.btn.go { --bg: var(--red); box-shadow: 0 8px 20px rgba(224, 26, 60, 0.28); }
.btn.go:hover { --bg: var(--maroon-2); }
.btn.big { font-size: 17px; padding: 18px 28px 17px; }
.btn.light, .btn.ghost { --bg: var(--card); --fg: var(--ink); box-shadow: var(--soft); }
.btn.small { font-size: 14px; padding: 10px 15px 9px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.more { color: var(--maroon); text-decoration: none; font-weight: 600; font-size: 15px; }
.more:hover { text-decoration: underline; }

/* inputs */
.field { display: block; width: 100%; font: 400 17px/1.4 var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 15px; outline: none; }
.field::placeholder { color: var(--dim); }
.field:focus { border-color: var(--maroon); box-shadow: 0 0 0 4px rgba(224, 26, 60, 0.12); }
textarea.field { resize: vertical; min-height: 104px; }
select.field { appearance: none; }

/* blocks */
.section { padding: 100px 0; }
.card { background: var(--card); border: 0; border-radius: 22px; box-shadow: var(--soft); }
.grid { display: grid; gap: 18px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.four { grid-template-columns: repeat(4, 1fr); }
.head-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; }
@media (max-width: 960px) { .grid.three, .grid.four { grid-template-columns: repeat(2, 1fr); } .section { padding: 72px 0; } }
/* phones and small tablets: the logo and sign-in on one row, the pages as a row of tabs under it (nothing hidden) */
@media (max-width: 960px) {
  .top .wrap { flex-wrap: wrap; height: auto; column-gap: 12px; row-gap: 0; }
  .logo { height: 54px; }
  .top .right { margin-left: auto; }
  .top .right .btn { min-height: 40px; display: inline-flex; align-items: center; }
  /* the tabs start a second row (.top-break), and the coin's address sits at its end, always in view */
  .top-break { display: block; order: 2; flex: 0 0 100%; height: 0; }
  .nav { order: 3; flex: 1 1 0; min-width: 0; margin: 0 0 6px; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 9px 12px; border-radius: 999px; white-space: nowrap; min-height: 36px; }
  .nav a:first-child { margin-left: -12px; }
  .nav a.on { background: rgba(17, 17, 19, 0.06); }
  .right .ca-chip { display: none; }
  .ca-chip.sub { display: inline-flex; order: 4; flex: none; margin: 0 0 6px; }
}
/* phones: just the ticker and the copy mark (the address is in its title, and copying gives all of it) */
@media (max-width: 600px) { .ca-chip.sub span { display: none; } .ca-chip.sub.copied span { display: inline; min-width: 0; } .ca-chip.sub { gap: 6px; padding: 0 11px; } }
@media (max-width: 600px) { .grid.three, .grid.four { grid-template-columns: 1fr; } .credits { display: none; } .head-row { flex-direction: column; align-items: start; } .btn.small { min-height: 40px; } }
/* the header's main button ("Make a video"); on a phone the page's own buttons do that job */
.top .cta { box-shadow: 0 6px 16px rgba(224, 26, 60, 0.25); }
@media (max-width: 600px) { .top .cta { display: none; } }

/* a phone holding a video */
.phone { width: 100%; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: #111113; border: 7px solid var(--card); box-shadow: var(--lift); position: relative; }
.phone iframe, .phone video { width: 100%; height: 100%; border: 0; object-fit: cover; }
.phone .wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); text-align: center; padding: 24px; }

/* character cards: portraits on a soft grey backdrop */
.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.char { background: linear-gradient(180deg, #f1f1f4, #e4e4e9); border-radius: 18px; overflow: hidden; border: 0; box-shadow: var(--soft); cursor: pointer; color: var(--ink); text-decoration: none; position: relative; display: block; transition: transform 0.15s, box-shadow 0.15s; }
.char:hover { transform: translateY(-2px); box-shadow: var(--soft); }
.char img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.char span { display: block; padding: 10px 12px 12px; font: 700 15px/1 var(--sans); background: var(--card); }
.char.on { box-shadow: 0 0 0 3px var(--red); }
.char .coin { position: absolute; top: 10px; right: 10px; }

/* the build log */
.log { display: flex; flex-direction: column; gap: 12px; max-height: 70vh; overflow: auto; padding-right: 4px; }
.log .say { font-size: 16px; }
.log .step { color: var(--muted); font-size: 14px; display: flex; gap: 9px; align-items: baseline; }
.log .step::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--tan); flex: none; transform: translateY(-1px); }
.log .step.err::before { background: var(--brick); }
.log img { border-radius: 12px; cursor: zoom-in; }
.log .end { padding: 14px 16px; border-radius: 14px; background: var(--bg-2); }
.bar { height: 8px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--maroon); transition: width 0.2s; }

/* modals and notices */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(17, 17, 19, 0.35); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; }
.modal .card { width: min(440px, 100%); padding: 26px; box-shadow: var(--lift); }
.modal h3 { margin-bottom: 14px; }
.wallets { display: grid; gap: 10px; margin-top: 14px; }
.wallets button { display: flex; align-items: center; gap: 12px; width: 100%; justify-content: flex-start; }
.wallets img { width: 26px; height: 26px; border-radius: 6px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; background: var(--ink); color: #ffffff; padding: 12px 18px; border-radius: 12px; font-size: 15px; box-shadow: var(--lift); max-width: calc(100% - 32px); overflow-wrap: anywhere; }
.toast.bad { background: var(--maroon); }
/* "You need more credits" (js/buy.js): a window over the page, the reason, a cheaper way when there is one, the packs */
.buy-modal .card { position: relative; width: min(460px, 100%); padding: 28px 26px 22px; }
.buy-modal h3 { font: 700 26px/1.15 var(--sans); letter-spacing: -0.02em; margin: 0 40px 0 0; }
.buy-x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--bg-2); color: var(--ink); font-size: 15px; cursor: pointer; }
.buy-x:hover { background: var(--line); }
.buy-why { margin: 10px 0 0; font: 400 16px/1.45 var(--sans); color: var(--muted); }
.buy-instead { width: 100%; margin-top: 18px; justify-content: center; }
.buy-label { margin: 20px 0 0; font: 600 12px/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.buy-packs { display: grid; gap: 8px; margin-top: 10px; }
.buy-packs > div { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; padding: 9px 9px 9px 16px; border-radius: 14px; background: #fff; box-shadow: var(--soft); }
.buy-packs b { font: 600 15.5px/1.2 var(--sans); white-space: nowrap; }
.buy-packs span { font: 500 14.5px/1.2 var(--sans); color: var(--muted); margin-right: 4px; }
.buy-packs .btn.small { min-width: 58px; padding: 8px 12px; font-size: 13.5px; justify-content: center; }
.buy-note { margin: 14px 0 0; font: 400 13.5px/1.4 var(--sans); color: var(--muted); text-align: center; }
.foot { padding: 40px 0 56px; color: var(--muted); font-size: 14px; }
.foot .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.hide { display: none !important; }


/* the loading screen, on the first page of a visit (html.boot, set in each page's head): the logo pops in and bobs
   while the page loads, the name under it, then it all fades away (js/site.js) */
html.boot body::before, html.boot body::after { position: fixed; z-index: 1000; pointer-events: none; transition: opacity 0.4s; }
html.boot body::before { content: ''; inset: 0; background: var(--bg) var(--logo) no-repeat 50% 46% / 88px 88px;
  animation: boot-pop 0.55s cubic-bezier(0.2, 1.5, 0.4, 1) both, boot-bob 1.6s ease-in-out 0.7s infinite; }
html.boot body::after { content: '3DPoly'; left: 0; right: 0; top: calc(46% + 66px); text-align: center; font: 900 30px/1 var(--sans); letter-spacing: -0.05em; color: var(--ink); animation: boot-word 0.5s ease 0.35s both; }
html.boot.booted body::before, html.boot.booted body::after { opacity: 0; }
@keyframes boot-pop { from { background-size: 26px 26px; } }
@keyframes boot-bob { 50% { background-position: 50% calc(46% - 6px); } }
@keyframes boot-word { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { html.boot body::before, html.boot body::after { animation: none; } }

/* the account button in the header: their picture and name */
.me-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 180px; }
.me-btn img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin: -4px 0 -4px -5px; }
.me-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a video played on the page with its sound (js/watch.js): its picture with a play button, then a bar to pause and
   go to a moment, and Edit (the editor) on top */
.watch { position: relative; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #111113; box-shadow: var(--lift); }
.watch.wide { aspect-ratio: 16 / 9; }
.watch iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity 0.4s; }
.watch.ready iframe { opacity: 1; }
.watch .w-hit { position: absolute; inset: 0; cursor: pointer; }
.watch:not(.started) .w-hit { display: none; }
.watch .w-wait { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.watch.ready:not(.loading) .w-wait, .watch.failed .w-wait { display: none; }
.w-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: #fff; animation: w-spin 0.8s linear infinite; }
@keyframes w-spin { to { transform: rotate(360deg); } }
.watch .w-big { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.95);
  color: var(--maroon); display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32); transition: transform 0.15s; }
.watch .w-big svg { margin-left: 5px; }
.watch .w-big:hover { transform: scale(1.06); }
.watch:not(.ready) .w-big, .watch.playing .w-big, .watch.loading .w-big { display: none; }
.watch .w-edit { position: absolute; right: 12px; top: 12px; display: none; height: 36px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.95);
  color: var(--ink); font: 600 14px/36px var(--sans); text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); }
.watch .w-edit:hover { background: #fff; }
.watch.started .w-edit { display: block; }
.watch .w-bar { position: absolute; left: 0; right: 0; bottom: 0; display: none; align-items: center; gap: 10px; padding: 30px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); color: #fff; }
.watch.started .w-bar { display: flex; }
.w-pp { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; display: grid; place-items: center; cursor: pointer; }
.w-pp:hover { background: rgba(255, 255, 255, 0.3); }
.w-track { flex: 1; height: 20px; display: flex; align-items: center; cursor: pointer; position: relative; }
.w-track::before { content: ''; position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.3); }
.w-track i { position: relative; height: 4px; border-radius: 4px; background: #fff; width: 0; }
.w-time { flex: none; font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.watch.failed::after { content: 'The video couldn’t load. Open it in the editor.'; position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff; font: 600 15px/1.4 var(--sans); }

/* the crew on the page itself (js/stage/): their 3D layer, lying in the page so it scrolls with it and letting every
   click through, then over it the area that catches the mouse on them and their speech bubbles. On a small screen
   (compact) the layer is the window. */
.stage-layer, .stage-ui { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 30; }
.stage-ui { z-index: 31; }
.stage-layer.compact, .stage-ui.compact { position: fixed; inset: 0; height: auto; }
.stage-layer canvas { position: absolute; left: 0; top: 0; display: block; }
.stage-hit { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: grab; touch-action: none; }
.stage-hit.held { cursor: grabbing; }
.stage-bubble { position: absolute; left: 0; top: 0; margin: 0; width: max-content; max-width: 230px; padding: 9px 13px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--line-2); box-shadow: var(--lift); font: 600 14px/1.3 var(--sans); color: var(--ink); pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.stage-bubble.on { opacity: 1; }
.stage-bubble::after { content: ''; position: absolute; left: var(--tail, 50%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: var(--card);
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(45deg); }
.stage-bubble.swap { animation: stage-pop 0.3s ease-out; }
@keyframes stage-pop { from { scale: 0.92; } }
@media (prefers-reduced-motion: reduce) { .stage-bubble.swap { animation: none; } }