@font-face { font-family: "Host Grotesk"; src: url(../fonts/HostGrotesk.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Anybody"; src: url(../fonts/Anybody.woff2) format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: swap; }
@font-face { font-family: "Paper Mono"; src: url(../fonts/PaperMonoVF.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --night: #070D0A; --night-2: #0E1512; --white: #FFFFFF; --cream: #FBF7EF; --cream-2: #F3EEE3; --ink: #0B120E;
  --lime: #CEF058; --lav: #C9B8FF; --pink: #FF9EC8; --soft-n: rgba(255,255,255,.62); --soft-c: rgba(11,18,14,.6); --rule-n: rgba(255,255,255,.12); --rule-c: rgba(11,18,14,.1);
  --ease: cubic-bezier(.22,1,.36,1); --rise: cubic-bezier(.16,1,.3,1); --snap: cubic-bezier(.34,1.56,.64,1);
  --gut: clamp(18px, 3.4vw, 46px); --max: 1240px; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--night); }
body { background: var(--night); color: var(--white); font: 400 16px/1.5 "Host Grotesk", Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 99; background: var(--white); color: var(--night); padding: 10px 14px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.wrap { width: min(var(--max), 100% - var(--gut) * 2); margin: 0 auto; }
.wm { font-family: "Anybody", sans-serif; font-stretch: 145%; font-weight: 760; letter-spacing: -.035em; line-height: 1; }
.lab { font: 500 14px/1.35 "Host Grotesk", Helvetica, sans-serif; letter-spacing: 0; text-transform: none; }
.mf-mark { display: block; overflow: visible; }

/* nav: a slim bar that turns dark over the night bands */
.nav { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: 64px; display: flex; align-items: center; gap: 36px; padding: 0 var(--gut); color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); }
.nav.dark { color: var(--white); background: rgba(7,13,10,.72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--rule-n); }
.nav.light { background: rgba(251,247,239,.75); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--rule-c); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; --mk-bg: transparent; }
.brand .mf-mark { width: 24px; height: 24px; }
.brand .wm { font-size: 21px; }
.nav nav { display: flex; gap: 28px; font-size: 14.5px; }
.nav nav a { text-decoration: none; opacity: .62; transition: opacity .18s var(--ease); } .nav nav a:hover { opacity: 1; }
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 500; font-size: 14.5px; text-decoration: none; transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); white-space: nowrap; }
.btn:active { transform: scale(.98); }
.nav .btn { margin-left: auto; height: 38px; padding: 0 16px; }
.btn.light, .nav .btn { background: var(--ink); color: var(--white); } .nav.dark .btn { background: var(--white); color: var(--night); }
.btn.dark { background: var(--ink); color: var(--white); } .btn.dark:hover { background: #1E2A24; }
.btn.line { box-shadow: inset 0 0 0 1px var(--rule-c); } .btn.line:hover { background: rgba(11,18,14,.05); }
.btn.lime { background: var(--lime); color: var(--ink); } .btn.lime:hover { background: #DBF57A; }
.btn.line-d { box-shadow: inset 0 0 0 1px var(--rule-n); } .btn.line-d:hover { background: rgba(255,255,255,.06); }

/* hero: cream at the top, a dawn of lavender and pink, then night; the app rises into it */
.hero { position: relative; isolation: isolate; padding: 168px var(--gut) 0; text-align: center; color: var(--ink); overflow: hidden; }
.sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #FFFFFF 0%, #FBF7EF 18%, #F4EEF2 30%, #E3D8F4 40%, #C9B8FF 49%, #E7A8D2 55%, #7A5E9E 62%, #22202A 72%, #070D0A 82%); }
.hero-t { max-width: 980px; margin: 0 auto; }
.hero .lab { color: var(--soft-c); margin-bottom: 26px; }
h1 { font-weight: 400; font-size: clamp(44px, 6.2vw, 88px); line-height: 1.02; letter-spacing: -.045em; }
h1 span, h2 span { color: inherit; }
.hero .sub { max-width: 560px; margin: 26px auto 0; font-size: 18px; line-height: 1.5; color: var(--soft-c); }
.cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.hero-app { width: min(1180px, 100%); margin: 80px auto 0; border-radius: 14px 14px 0 0; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -12px rgba(7,13,10,.45), 0 18px 36px -18px rgba(0,0,0,.5); }

/* bands */
.band { padding: clamp(96px, 11vw, 160px) 0; }
.band.night { background: var(--night); color: var(--white); }
.band.night .sub { color: var(--soft-n); }
.band.cream { background: var(--cream); color: var(--ink); border-radius: 28px; margin: 0 10px; }
.sec-h { max-width: 820px; margin-bottom: 56px; }
.sec-h .lab { margin-bottom: 20px; opacity: .7; }
h2 { font-weight: 400; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.04; letter-spacing: -.04em; }
.sub { margin-top: 20px; font-size: 18px; line-height: 1.5; max-width: 560px; }
.sub a { color: inherit; text-underline-offset: 4px; }

/* the play: pick a mod and the page changes; the frame takes its colour */
.play { background-image: radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.4px); background-size: 28px 28px; }
.desk { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start; }
.chips { display: grid; gap: 8px; }
.chip { display: grid; grid-template-columns: 18px 1fr; gap: 2px 14px; align-items: center; text-align: left; padding: 16px 18px; border-radius: 16px; border: 0; cursor: pointer; font: inherit;
  color: var(--white); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--rule-n); transition: background .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.chip:hover { background: rgba(255,255,255,.07); transform: translateX(3px); }
.chip .sw { grid-row: span 2; width: 18px; height: 18px; border-radius: 6px; background: var(--c); }
.chip b { font-weight: 500; font-size: 16px; } .chip .what { font-size: 13.5px; color: var(--soft-n); }
.chip[aria-pressed=true] { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px var(--c); }
.frame { border-radius: 18px; padding: 10px; background: var(--c); transition: background .5s var(--ease); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.chrome { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 4px; color: var(--ink); --mk-bg: var(--c); }
.chrome i { width: 11px; height: 11px; border-radius: 50%; background: rgba(11,18,14,.22); }
.chrome .addr { margin-left: 12px; padding: 5px 12px; border-radius: 8px; background: rgba(255,255,255,.55); font-size: 13px; }
.chrome .state { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.chrome .state .mf-mark { width: 20px; height: 20px; }
.page { position: relative; border-radius: 10px; overflow: hidden; background: #fff; aspect-ratio: 16 / 11; }
.page.real { aspect-ratio: 16 / 10; }
.page.real img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: opacity .35s var(--ease); }
.page.real .came { opacity: 0; }
.frame.peek .page.real .came { opacity: 1; }
.page img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: opacity .35s var(--ease); }
.page .before { opacity: 0; }
.frame.peek .page .before { opacity: 1; }
.frame figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 12px 8px 2px; color: var(--ink); opacity: .75; }
kbd { font: inherit; padding: 1px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px currentColor; }

.stats { padding-top: 0; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-n); }
.stat { padding: 28px 24px 0 0; border-right: 1px solid var(--rule-n); margin-right: 24px; }
.stat:last-child { border: 0; }
.num { display: block; font-family: "Anybody"; font-stretch: 140%; font-weight: 600; font-size: clamp(48px, 6vw, 84px); line-height: 1; letter-spacing: -.03em; }
.stat .lab { display: block; margin-top: 14px; color: var(--soft-n); }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card .pic { border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream-2); box-shadow: 0 0 0 1px var(--rule-c); }
.card .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s var(--ease); }
.card:hover .pic img { transform: scale(1.02); }
.card h3 { font-weight: 500; font-size: 22px; letter-spacing: -.02em; margin-top: 20px; }
.card p { margin-top: 6px; color: var(--soft-c); max-width: 34em; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.shot-f { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule-n); }
.table { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 56px; border-top: 1px solid var(--rule-n); }
.table > div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--rule-n); }
.table .lab { color: var(--soft-n); padding-top: 4px; } .table p { color: var(--soft-n); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.two .sec-h { margin: 0; }
.code { background: var(--night); color: var(--white); border-radius: 20px; padding: 32px; font: 400 15px/1.8 "Paper Mono", monospace; overflow-x: auto; box-shadow: 0 30px 60px -20px rgba(7,13,10,.35); }
.code .k { color: var(--lime); } .code .s { color: rgba(255,255,255,.75); }

.final { text-align: center; }
.final-mk { width: 120px; height: 120px; margin: 0 auto 40px; color: var(--white); cursor: pointer; }
.final h2 { font-size: clamp(44px, 6vw, 88px); }
.final .sub { margin-left: auto; margin-right: auto; }

.foot { padding: 80px 0 0; border-top: 1px solid var(--rule-n); overflow: hidden; }
.foot .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot .cols > div { display: flex; flex-direction: column; gap: 8px; }
.foot .lab { color: var(--soft-n); margin-bottom: 8px; }
.foot a { text-decoration: none; color: var(--soft-n); transition: color .18s; } .foot a:hover { color: var(--white); }
.foot .muted { color: var(--soft-n); max-width: 26em; }
.giant { font-size: 13.8vw; line-height: .76; margin: 80px 0 -1.4vw; text-align: center; white-space: nowrap; color: var(--white); }

/* entrances: rise once, quickly decelerating */
.rise { opacity: 0; transform: translateY(20px); filter: blur(6px); transition: opacity .8s var(--rise), transform .9s var(--rise), filter .8s var(--rise); transition-delay: var(--d, 0ms); }
.rise.in { opacity: 1; transform: none; filter: none; }
.hero-app.rise { transform: translateY(48px) scale(.985); transition-duration: 1.2s; transition-delay: .25s; }
.hero-app.rise.in { transform: none; }

/* inner pages: a night head on the dot grid, then a cream sheet with a contents rail */
.pg-hero { padding: 176px 0 clamp(80px, 9vw, 128px); background-color: var(--night); background-image: radial-gradient(rgba(255,255,255,.12) 1.2px, transparent 1.4px); background-size: 28px 28px; }
.pg-hero .lab { color: var(--soft-n); margin-bottom: 26px; }
.pg-hero h1 { max-width: 15em; }
.pg-hero .sub { color: var(--soft-n); max-width: 600px; }
.sheet { background: var(--cream); color: var(--ink); border-radius: 28px; margin: 0 10px; padding: clamp(72px, 8vw, 120px) 0; }
.pg-main { min-width: 0; }
html, body { overflow-x: clip; }
.pg-body { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: clamp(32px, 6vw, 96px); }
.pg-toc { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.pg-toc a { text-decoration: none; font-size: 14.5px; padding: 6px 0 6px 14px; color: var(--soft-c); box-shadow: inset 1.5px 0 0 var(--rule-c); transition: color .18s var(--ease), box-shadow .18s var(--ease); }
.pg-toc a:hover { color: var(--ink); } .pg-toc a.here { color: var(--ink); box-shadow: inset 1.5px 0 0 var(--ink); }
.pg-sec { padding: 0 0 64px; scroll-margin-top: 96px; }
.pg-sec + .pg-sec { padding-top: 56px; border-top: 1px solid var(--rule-c); }
.pg-sec h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; margin-bottom: 20px; }
.pg-sec p, .pg-sec li { font-size: 17.5px; line-height: 1.6; color: rgba(11,18,14,.78); }
.pg-sec p + p { margin-top: 16px; } .pg-sec b { color: var(--ink); font-weight: 600; }
.pg-sec a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: rgba(11,18,14,.3); } .pg-sec a:hover { text-decoration-color: currentColor; }
.pg-sec code { font: 400 .84em "Paper Mono", monospace; padding: 2px 7px; border-radius: 6px; background: var(--cream-2); color: var(--ink); }
.ticks { list-style: none; display: grid; gap: 14px; margin: 18px 0; }
.ticks li { position: relative; padding-left: 28px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--ink); }
.refs { padding-left: 22px; display: grid; gap: 10px; }
.mf-code { margin: 24px 0 4px; padding: 28px 30px; border-radius: 20px; background: var(--night); color: rgba(255,255,255,.78); font: 400 14px/1.75 "Paper Mono", monospace; white-space: pre; overflow-x: auto; }
.mf-code .k { color: var(--lime); } .mf-code .s { color: rgba(255,255,255,.78); }
.mf-table { width: 100%; border-collapse: collapse; margin: 22px 0 4px; font-size: 16px; }
.mf-table th, .mf-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule-c); }
.mf-table th { font: 500 14px/1.35 "Host Grotesk", Helvetica, sans-serif; letter-spacing: 0; text-transform: none; color: var(--soft-c); }
.st { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 14px; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.st-live::before { background: var(--lime); box-shadow: inset 0 0 0 1.5px #7C9A1C; }
.pg-sec .finding { margin: 28px 0; padding: 24px 26px; border-radius: 20px; background: var(--night); color: var(--white); font-size: 19px; line-height: 1.5; }
.pg-sec .finding b { display: block; font: 500 14px/1.35 "Host Grotesk", Helvetica, sans-serif; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.6); margin-bottom: 10px; }
.mf-fig { margin: 28px 0; padding: 24px; border-radius: 20px; background: var(--white); box-shadow: 0 0 0 1px var(--rule-c); }
.mf-fig svg { width: 100%; height: auto; }
.mf-fig figcaption { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--soft-c); }
.tv { margin-top: 12px; } .tv summary { cursor: pointer; font-weight: 500; }
.tv table { border-collapse: collapse; margin-top: 10px; font-size: 14px; } .tv th, .tv td { padding: 6px 14px 6px 0; border-bottom: 1px solid var(--rule-c); text-align: right; } .tv th:first-child, .tv td:first-child { text-align: left; }
.credits { list-style: none; display: grid; gap: 8px; margin-top: 16px; } .pg-sec .credits li { font-size: 14.5px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.checker { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
.checker textarea { width: 100%; min-height: 380px; resize: vertical; border: 0; border-radius: 20px; padding: 22px; background: var(--night); color: rgba(255,255,255,.85); font: 400 13.5px/1.7 "Paper Mono", monospace; }
.pg-sec .checker-load { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--soft-c); }
.checker-load button { border: 0; cursor: pointer; font: 500 13.5px "Host Grotesk", sans-serif; padding: 7px 12px; border-radius: 999px; background: var(--cream-2); color: var(--ink); transition: background .18s var(--ease), color .18s var(--ease); }
.checker-load button:hover { background: var(--ink); color: var(--white); }
.checker-out { display: flex; flex-direction: column; gap: 14px; }
.checker-out [data-check-out] { border-radius: 20px; background: var(--white); padding: 18px 20px; font-size: 15.5px; box-shadow: 0 0 0 1px var(--rule-c); }
.checker-out .ok { font-weight: 600; color: #3E6A0C; } .checker-out .bad { font-weight: 600; color: #9A3412; }
.checker-out ul { margin: 8px 0 0; padding-left: 18px; }
#preview .app { background: var(--white); border-radius: 20px; padding: 14px; box-shadow: 0 0 0 1px var(--rule-c); }
#preview .feed { display: flex; flex-direction: column; gap: 10px; }
#preview .post { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 14px; border-radius: 14px; background: #F7F6F2; font-size: 14.5px; line-height: 1.45; overflow: hidden; transition: opacity .4s var(--ease), height .5s var(--ease), padding .5s var(--ease); }
#preview .post .av { width: 36px; height: 36px; border-radius: 10px; } #preview .post small { color: var(--soft-c); } #preview .post p { margin-top: 2px; font-size: 14.5px; color: var(--ink); }
#preview .post.is-folded { height: 0 !important; padding-block: 0; margin-top: -10px; opacity: 0; }
@media (max-width: 960px) { .pg-body { grid-template-columns: 1fr; } .pg-toc { display: none; } .checker { grid-template-columns: 1fr; } }

/* the menu: one colour, the whole site in one view (after RISD), quick: in by 300ms */
.mtoggle { position: relative; width: 38px; height: 38px; border: 0; cursor: pointer; background: transparent; color: inherit; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.mtoggle::before, .mtoggle::after { content: ""; position: absolute; left: 12px; right: 12px; height: 2px; background: currentColor; transition: rotate .3s var(--snap), translate .3s var(--snap); }
.mtoggle::before { top: 15px; } .mtoggle::after { top: 21px; }
.mtoggle[aria-expanded=true] { background: var(--lime); color: var(--ink); box-shadow: none; }
.mtoggle[aria-expanded=true]::before { rotate: 45deg; translate: 0 3px; } .mtoggle[aria-expanded=true]::after { rotate: -45deg; translate: 0 -3px; }
.nav .btn { margin-left: auto; }
.menu { position: fixed; inset: 0; z-index: 45; background: var(--night); color: var(--white); clip-path: inset(0 0 0 100%); transition: clip-path .28s var(--ease); overflow-y: auto; }
.menu.open { clip-path: inset(0); }
.menu[hidden] { display: block; visibility: hidden; }
.menu-in { width: min(var(--max), 100% - var(--gut) * 2); margin: 0 auto; padding: 128px 0 64px; display: grid; gap: 72px; }
.mcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.mcol, .mtry { border-top: 2px solid var(--white); padding-top: 20px; display: flex; flex-direction: column; gap: 6px; opacity: 0; translate: 0 24px; transition: opacity .4s var(--rise), translate .4s var(--rise); transition-delay: calc(110ms + var(--i) * 40ms); }
.menu.open .mcol, .menu.open .mtry { opacity: 1; translate: 0 0; }
.mcol .lab, .mtry .lab { color: var(--soft-n); margin-bottom: 14px; }
.mcol a { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; line-height: 1.15; text-decoration: none; width: fit-content; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--ease); }
.mcol a:hover, .mcol a[aria-current] { background-size: 100% 2px; }
.mtry div { display: flex; flex-wrap: wrap; gap: 8px; }
.mchip { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--rule-n); transition: background .2s var(--ease), color .2s var(--ease); }
.mchip i { width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.mchip:hover { background: var(--c); color: var(--ink); } .mchip:hover i { background: var(--ink); }
body.locked { overflow: hidden; }
.nav nav a[aria-current] { opacity: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* arrows on secondary actions, and a mark on links that leave the site */
.go::after, a.ext::after { display: inline-block; margin-left: .35em; transition: translate .2s var(--ease); }
.go::after { content: "\2192"; } a.ext::after { content: "\2197"; }
.go:hover::after { translate: 4px 0; } a.ext:hover::after { translate: 2px -2px; }

/* the headline arrives as a page being modded: blinds open across it */
@property --w { syntax: "<length>"; inherits: false; initial-value: 0px; }
.wipe { -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 var(--w), transparent var(--w) 96px); mask-image: repeating-linear-gradient(90deg, #000 0 var(--w), transparent var(--w) 96px); animation: wipe .7s var(--rise) .15s both; }
@keyframes wipe { to { --w: 96px; } }

/* one loud band per inner page */
.band.lime { background: var(--lime); color: var(--ink); padding: clamp(72px, 8vw, 120px) 0; border-radius: 28px; margin: 10px; }
.band.lime p.big { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.05; letter-spacing: -.035em; max-width: 18em; }
.band.lime .lab { display: none; }

/* inner pages: one short word as the headline, the sentence beneath */
.pg-hero h1.word-h { font-family: "Anybody", sans-serif; font-stretch: 140%; font-weight: 700; font-size: clamp(64px, 11vw, 168px); line-height: .9; letter-spacing: -.04em; max-width: none; }
.pg-hero .sub { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.4; max-width: 640px; margin-top: 28px; }
.pg-sec h2 { border-top: 2px solid var(--ink); padding-top: 20px; }
.pg-sec + .pg-sec { border-top: 0; }

/* text panels: a label at the top, one sentence pinned to the bottom; they invert on hover */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.tilep { min-height: 15rem; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: 20px; background: var(--cream-2); transition: background .3s var(--ease), color .3s var(--ease); }
.tilep .lab { color: var(--soft-c); transition: color .3s var(--ease); }
.tilep p { font-size: 22px !important; line-height: 1.25 !important; letter-spacing: -.02em; color: var(--ink) !important; transition: color .3s var(--ease); }
.tilep:hover { background: var(--ink); } .tilep:hover p { color: var(--white) !important; } .tilep:hover .lab { color: var(--lime); }

@media (max-width: 960px) {
  .mcols { grid-template-columns: 1fr; } .nav .btn { display: none; } .mtoggle { margin-left: auto; }
  .tiles { grid-template-columns: 1fr; }
  .pg-body .pg-toc { display: flex; position: sticky; top: 64px; z-index: 5; flex-direction: row; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; background: var(--cream); padding: 12px 0; margin-bottom: 24px; border-bottom: 1px solid var(--rule-c); scrollbar-width: none; }
  .pg-toc a { flex: none; scroll-snap-align: start; box-shadow: none; padding: 4px 0; white-space: nowrap; }
  .pg-toc a.here { box-shadow: inset 0 -2px 0 var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .wipe { animation: none; -webkit-mask-image: none; mask-image: none; } .menu { transition: none; } }

/* hero orbit (after Alcove): mods that are on somewhere circle the headline, slowly; hold one to stop them, drag to spin */
.hero-t { position: relative; z-index: 2; }
.hero-app { position: relative; z-index: 2; }
.orbit { position: absolute; left: 0; right: 0; top: 0; height: 820px; z-index: 1; pointer-events: none; }
.ocard { position: absolute; left: 0; top: 0; width: 230px; display: grid; gap: 4px; padding: 14px 16px 16px; border-radius: 18px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); text-align: left; box-shadow: 0 0 0 1px rgba(11,18,14,.06), 0 24px 48px -28px rgba(34,32,42,.55); will-change: transform, filter, opacity; pointer-events: auto; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ocard:active { cursor: grabbing; }
.ocard b { font-weight: 600; font-size: 16px; letter-spacing: -.02em; }
.ocard > span:last-child { font-size: 13.5px; color: var(--soft-c); line-height: 1.35; }
.otag { display: flex; align-items: center; gap: 8px; font: 500 14px/1.35 "Host Grotesk", Helvetica, sans-serif; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--soft-c); }
.otag i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(11,18,14,.15); }
.hrow { display: none; }
@media (max-width: 1100px) {
  .orbit { display: none; }
  .hrow { display: block; position: relative; z-index: 2; margin: 40px calc(var(--gut) * -1) 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .hrow-t { display: flex; gap: 12px; width: max-content; padding: 6px 0 18px; animation: hrow 46s linear infinite; }
  .hrow .ocard { position: relative; flex: none; width: 210px; }
}
@keyframes hrow { to { transform: translate3d(-50%, 0, 0); } }

/* mod chips pour their colour up from the bottom when picked; the swatch alone snaps */
.chip { background-color: rgba(255,255,255,.04); background-image: linear-gradient(var(--c), var(--c)); background-repeat: no-repeat; background-position: bottom; background-size: 100% 0%; transition: background-size .42s var(--ease), color .3s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.chip[aria-pressed=true], .chip[aria-pressed=true]:hover { background-color: transparent; background-image: linear-gradient(var(--c), var(--c)); background-size: 100% 100%; color: var(--ink); box-shadow: none; }
.chip[aria-pressed=true] .what { color: rgba(11,18,14,.66); }
.chip[aria-pressed=true] .sw { background: var(--ink); animation: snap .42s var(--snap); }
.chip:not([aria-pressed=true]) { transition-duration: .24s; }
@keyframes snap { 0% { transform: scale(.6); } 100% { transform: none; } }

/* the live Townsquare inside the frame */
.tsq { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; background: #FFFFFF; color: #15171A; font: 400 15px/1.45 "Host Grotesk", sans-serif; transition: background .4s var(--ease), color .4s var(--ease); }
.tsq::-webkit-scrollbar { display: none; }
.tsq-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: inherit; border-bottom: 1px solid rgba(21,23,26,.08); }
.tsq-l { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #15171A; color: #fff; font-weight: 700; }
.tsq-top b { font-size: 17px; letter-spacing: -.02em; margin-right: 18px; }
.tsq-tab { font-size: 14px; color: rgba(21,23,26,.55); padding: 5px 12px; border-radius: 9px; } .tsq-tab.on { color: #15171A; box-shadow: inset 0 0 0 1px rgba(21,23,26,.1); }
.tsq-feed { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 24px; }
.tp { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 14px; border-radius: 16px; background: #F7F6F2; box-shadow: 0 0 0 1px rgba(21,23,26,.05); overflow: hidden; transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease), height .6s var(--ease), padding .6s var(--ease), margin .6s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-radius .4s var(--ease); }
.page .tsq img { position: static; inset: auto; opacity: 1; }
.tp .av { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; display: block; }
.tp .who small { color: rgba(21,23,26,.5); font-size: 13px; }
.tp .tx { margin-top: 2px; font-size: 1em; transition: font-size .4s var(--ease); }
.tp .pic { margin-top: 10px; width: 100%; height: 150px; object-fit: cover; border-radius: 12px; }
.tp[data-ad] .who small { color: #9A6A1B; }
.tp.going { opacity: .35; filter: blur(3px); transform: scale(.985); }
.tp.folded { height: 0 !important; padding-block: 0; margin-top: -10px; opacity: 0; }
.tsq.big { font-size: 18.5px; } .tsq.big .tp { grid-template-columns: 48px 1fr; } .tsq.big .tp .av { width: 48px; height: 48px; }
.tsq.arcade { background: #170E2E; color: #F3EEFF; font-family: "Paper Mono", monospace; }
.tsq.arcade .tsq-top { border-color: #FF9EC8; } .tsq.arcade .tsq-l { background: #FF9EC8; color: #170E2E; border-radius: 0; }
.tsq.arcade .tsq-tab { color: #C9B8FF; } .tsq.arcade .tsq-tab.on { color: #fff; box-shadow: inset 0 0 0 2px #FF9EC8; border-radius: 0; }
.tsq.arcade .tp { background: #22163F; border-radius: 0; box-shadow: 0 0 0 2px #C9B8FF, 4px 4px 0 #FF9EC8; }
.tsq.arcade .tp .av, .tsq.arcade .tp .pic { border-radius: 0; filter: saturate(1.5) contrast(1.1); }
.tsq.arcade .who b { color: #FF9EC8; } .tsq.arcade .who small { color: #C9B8FF; }

/* "Mods for": the apps people already use, going by */
.band.marq { padding: 36px 0 40px; border-top: 1px solid var(--rule-n); }
.marq-t { display: flex; align-items: center; gap: 28px; }
.marq-t > .lab { flex: none; padding-left: max(var(--gut), calc((100vw - var(--max)) / 2)); color: var(--soft-n); }
.marq-run { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marq-run > div { flex: none; display: flex; gap: 36px; padding-right: 36px; animation: marq 38s linear infinite; }
.marq-run:hover > div { animation-play-state: paused; }
@keyframes marq { to { transform: translate3d(-100%, 0, 0); } }
.lg { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.lg .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.stats { padding-bottom: 72px; }
.lg svg { width: 36px; height: 36px; fill: #fff; }
.lg b { font-weight: 500; font-size: 20px; letter-spacing: -.02em; }

/* the browser as a stack: each card pins, and the next slides over it while it steps back */
.stack { position: relative; }
.feat { position: sticky; top: 92px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; align-items: center; height: min(560px, calc(100vh - 140px)); margin-bottom: 24px; padding: clamp(24px, 3.4vw, 48px); border-radius: 28px; background: var(--white); box-shadow: 0 0 0 1px var(--rule-c), 0 -30px 60px -40px rgba(11,18,14,.35); transform: scale(calc(1 - var(--cover, 0) * .05)); transform-origin: 50% 0; }
.feat:nth-child(2) { background: #F6F1E6; } .feat:last-child { margin-bottom: 0; }
.feat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--cream-2); opacity: calc(var(--cover, 0) * .7); pointer-events: none; }
.feat .lab { color: var(--soft-c); margin-bottom: 18px; }
.feat h3 { font-weight: 500; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.035em; }
.feat-t > p:last-child { margin-top: 14px; color: var(--soft-c); font-size: 17px; max-width: 26em; }
.feat .pic { height: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px var(--rule-c); }
.feat .pic img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.feat .pic img.right { object-position: top right; } .feat .pic img.low { object-position: 50% 85%; } /* where the picture's point is: a panel on the right, a sheet at the foot */

/* the footer: a wordmark you can mod. The cursor changes the letters it passes, and they stay changed */
.foot-play { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 72px; color: var(--soft-n); }
.foot-play kbd { color: var(--white); }
.reset { border: 0; background: none; color: var(--lime); cursor: pointer; }
.reset:hover { text-decoration: underline; text-underline-offset: 4px; }
.giant { font-size: 12.9vw; margin-top: 28px; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.gl { display: inline-block; --m: 0; font-variation-settings: "wdth" calc(145 + var(--m) * 5), "wght" calc(760 + var(--m) * 140); color: color-mix(in srgb, var(--lime) calc(var(--m) * 100%), var(--white)); transform: translateY(calc(var(--m) * var(--dy, 0) * 1em)) rotate(calc(var(--m) * var(--r, 0) * 1deg)) scaleY(calc(1 + var(--m) * var(--sy, 0))); transform-origin: 50% 100%; }
@media (max-width: 960px) { .feat { position: relative; top: 0; grid-template-columns: 1fr; height: auto; } .feat .pic { height: 260px; } .foot-play { flex-direction: column; align-items: start; } }
@media (prefers-reduced-motion: reduce) { .feat { position: relative; top: 0; transform: none; } .feat::after { display: none; } .hrow-t, .marq-run > div { animation: none; } }

/* the hero lens: the app as you've made it, and a circle that shows the page as it came, as Alt does in the app */
.hero-app { cursor: none; }
.hero-app img { width: 100%; display: block; }
.hero-app .came { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: top; -webkit-mask-image: radial-gradient(circle var(--r, 0px) at var(--x, 50%) var(--y, 50%), #000 97%, transparent 100%); mask-image: radial-gradient(circle var(--r, 0px) at var(--x, 50%) var(--y, 50%), #000 97%, transparent 100%); }
.hero-app .ring { position: absolute; left: 0; top: 0; width: calc(var(--r, 0px) * 2); height: calc(var(--r, 0px) * 2); translate: calc(var(--px, -999px) - var(--r, 0px)) calc(var(--py, -999px) - var(--r, 0px)); border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1.5px var(--lime), 0 18px 40px -12px rgba(0,0,0,.45); }
.hero-app .ring b { position: absolute; left: 50%; bottom: -30px; translate: -50% 0; white-space: nowrap; padding: 4px 10px; border-radius: 8px; background: var(--night); color: var(--white); font: 500 13px "Host Grotesk", sans-serif; }
@media (hover: none) { .hero-app { cursor: auto; } }

/* craft, after Dia's release notes: lines that balance, paragraphs without orphans, even figures,
   links underlined at rest that fade on hover, one canvas that tops out at 1728px */
h1, h2, h3 { text-wrap: balance; }
p, li, .sub { text-wrap: pretty; }
.num, .mf-table td, time { font-variant-numeric: tabular-nums; }
.pg-sec a, .sub a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; transition: text-decoration-color .25s var(--ease); }
.pg-sec a:hover, .sub a:hover { text-decoration-color: transparent; }
.band { padding: clamp(96px, 11.5vw, 200px) 0; }
.pg-sec p, .pg-sec li { font-size: clamp(17.5px, 1.16vw, 20px); line-height: 1.5; letter-spacing: -.01em; }
@media (min-width: 961px) { .pg-body { grid-template-columns: 200px minmax(0, 62ch); } }

/* After Dia's release notes, in our own terms. */
/* one canvas: every gap grows with the window and stops growing at 1728px */
:root { --sec: clamp(96px, 13.66vw, 236px); --h-gap: clamp(32px, 4vw, 69px); }
.band { padding: var(--sec) 0; }
.pg-hero { padding-bottom: clamp(64px, 7vw, 120px); }
/* an issue line above the headline: the text face, figures that line up */
.issue { font: 500 15px/1.3 "Host Grotesk", sans-serif; font-variant-numeric: tabular-nums; color: var(--soft-n); margin-bottom: 22px; }
/* a real object at the top of the reading page: the app, printed as a card, in a mat, pinned */
.mast { position: relative; z-index: 2; width: min(1100px, 100% - var(--gut) * 2); margin: 0 auto -18vw; rotate: -1.2deg; container-type: inline-size; }
.mast img { display: block; width: 100%; border: max(10px, 1.6cqw) solid #fff; border-radius: 6px; box-shadow: 0 70px 50px -24px rgba(7, 13, 10, .45), 0 2px 6px rgba(7, 13, 10, .2); background: #fff; }
.sheet.with-mast { padding-top: calc(18vw + clamp(72px, 8vw, 120px)); }
/* reading pages hold still: once a section has arrived, it stays put; motion is for the chrome */
.sheet .rise { opacity: 1; transform: none; filter: none; transition: none; }
.pg-sec h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.035em; }
.pg-sec p, .pg-sec li { color: rgba(11, 18, 14, .82); }
.pg-sec p + p { margin-top: 18px; }
@media (max-width: 960px) { .mast { margin-bottom: -24vw; rotate: -1deg; } .sheet.with-mast { padding-top: calc(24vw + 56px); } }

@media (max-width: 960px) {
  .desk, .two, .split, .table, .cards { grid-template-columns: 1fr; }
  .grid4 { grid-template-columns: 1fr 1fr; } .stat:nth-child(2) { border: 0; }
  .nav nav { display: none; }
  .table > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } .rise { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

.mf-mark .mf-pg, .mf-mark .mf-ball { transform-box: view-box; transform-origin: 50px 50px; }
.mf-mark .mf-ball { transition: fill .45s var(--ease), transform .5s var(--snap); }
.mf-mark.on .mf-ball, .mf-mark .mf-ball { fill: var(--lime); } /* the logo's light, on by default */
html.mark-plain .mf-mark:not(.on) .mf-ball { fill: currentColor; }
.mf-mark.swarm .mf-pg { animation: mf-swarm 1.15s cubic-bezier(.3,1.08,.4,1) both; animation-delay: calc(var(--i) * 70ms); }
.mf-mark.swarm .mf-ball { transform: scale(1.18); }
@keyframes mf-swarm { 0% { transform: rotate(0) scale(1); } 45% { transform: rotate(220deg) scale(1.14); } 100% { transform: rotate(360deg) scale(1); } }