/* The ShapeMap website (V6 to V10, after Enia's notes): completely black, the logo top left, "BETA" in the middle of
   the top row and the pages on the right. The front page has a ShapeMap animation behind it that follows the pointer,
   one bold sentence on a dark shade, a big button whose outline keeps changing shape, and the start of the Community
   at the bottom of the first screen. The other pages have no animation behind them (V10), only a strip of Enia's art
   before the footer. Same look as the tool: white text, grey secondary text, accent #6955CE, Geist and Geist Mono. */
:root {
  --bg: #000;
  --text: #fff;
  --muted: #9a9aa1;
  --faint: #5c5c63;
  --line: #232326;
  --line-strong: #34343a;
  --raise: #0b0b0c;
  --accent: #6955ce;
  --accent-hover: #7b68dc;
  --accent-light: #8c76fa;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --gutter: clamp(16px, 2.6vw, 44px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.site { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; }

/* The animation behind the front page; the page above it lets the pointer through to its own links. */
.site-bg { position: fixed; inset: 0; z-index: 0; }
.site-nav, main, .site-footer { position: relative; z-index: 1; }

/* ---------- the top row: logo, BETA, pages ---------- */
.site-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px 24px; padding: 24px var(--gutter); }
.site-logo { justify-self: start; }
.site-logo img { height: clamp(32px, 3vw, 46px); width: auto; }
.beta-note { margin: 0; color: var(--accent-light); font-weight: 600; font-size: 15px; white-space: nowrap; }
.beta-note b { margin-left: 4px; padding: 1px 6px; border-radius: 4px; background: var(--accent-light); color: #000; font-weight: 700; }
.site-nav nav { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px clamp(12px, 2.6vw, 44px); }
.site-nav nav a { padding: 6px 2px; color: var(--text); text-decoration: none; font-weight: 500; font-size: clamp(15px, 1.3vw, 20px); border-bottom: 2px solid transparent; }
.site-nav nav a:hover { border-bottom-color: var(--line-strong); }
.site-nav nav a[aria-current=page] { border-bottom-color: var(--accent-light); }

/* ---------- front page (V10): the sentence and the button high on the first screen, with room left under them for
   the start of the Community ---------- */
/* overflow-x: the wide shade behind the sentence must not make the page wider than the screen. */
.hero { position: relative; overflow-x: clip; min-height: calc(100vh - 176px); min-height: calc(100svh - 176px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(92px, 11vh, 124px) var(--gutter) 14px; text-align: center; }
.hero-copy { position: relative; display: grid; justify-items: center; gap: clamp(20px, 3.6vh, 40px); }
.hero h1 { max-width: 17.2em; margin: 0; font-size: clamp(25px, min(2.95vw, 5.2vh), 48px); line-height: 1.42; letter-spacing: -0.012em; font-weight: 700; text-wrap: balance; text-shadow: 0 2px 26px rgba(0, 0, 0, .95); }
/* A black shade under the words, so the animation behind does not fight with the letters. V11: wider, and it fades
   out over a long way instead of ending close to the letters: a dark core under the sentence (::before, blurred) and
   a much wider, fainter halo around it (::after) that takes the darkness down to nothing. */
.shade { position: relative; isolation: isolate; }
.shade::before, .shade::after { content: ''; position: absolute; z-index: -1; pointer-events: none; }
.shade::before { inset: -34px -84px; border-radius: 120px; background: rgba(0, 0, 0, .9); filter: blur(38px); }
.shade::after {
  inset: -150px -300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .58) 30%, rgba(0, 0, 0, .46) 48%, rgba(0, 0, 0, .3) 64%, rgba(0, 0, 0, .15) 79%, rgba(0, 0, 0, .05) 91%, rgba(0, 0, 0, 0) 100%);
}

/* V8: the main button. Its outline changes shape by itself (site.js draws it); the fill is black, so the animation
   behind the page does not show through. */
.shape-cta { position: relative; display: grid; place-items: center; width: clamp(214px, min(64vw, 36vh), 340px); width: clamp(214px, min(64vw, 36svh), 340px); aspect-ratio: 1; container-type: inline-size; color: var(--text); text-decoration: none; transition: transform .2s; }
.shape-cta svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.shape-cta path { fill: #000; stroke: var(--accent-light); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .2s, stroke-width .2s; }
.shape-cta:hover { transform: scale(1.05); }
.shape-cta:hover path, .shape-cta:focus-visible path { stroke: #b3a4ff; stroke-width: 3.4; }
/* V9: the words are sized from the button itself (1cqw = 1 % of its width), so they keep the same place inside every
   outline at any size; the outlines in site.js leave room for them. The px sizes are for browsers without cqw. */
.shape-cta-text { position: relative; display: grid; gap: 6px; gap: 2.6cqw; justify-items: center; text-align: center; }
.shape-cta-text small { font-size: 13px; font-size: 5.7cqw; font-weight: 400; line-height: 1; }
.shape-cta-text strong { font-size: 19px; font-size: 8.1cqw; font-weight: 800; line-height: .98; letter-spacing: -0.01em; text-transform: uppercase; }
/* Only a small arrow under the button (V8); V10: right under it, pointing at the Community below. */
.scroll-hint { width: 44px; height: 34px; margin-top: 8px; display: grid; place-items: center; color: var(--muted); border-radius: 50%; animation: nudge 2.4s ease-in-out infinite; }
.scroll-hint:hover { color: var(--text); }
.scroll-hint svg { width: 22px; height: 22px; }
@keyframes nudge { 50% { transform: translateY(6px); } }

/* ---------- community ---------- */
.community { padding: 30px 12px 56px; background: linear-gradient(transparent, rgba(0, 0, 0, .88) 30px, #000 84px); }
.community-head { display: grid; justify-items: center; gap: 14px; max-width: 720px; margin: 0 auto 40px; padding: 0 var(--gutter); text-align: center; }
.community-head h2 { margin: 0; font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.03em; font-weight: 700; line-height: 1; }
.community-head p { margin: 0; color: var(--muted); font-size: 18px; }
.community-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); grid-auto-rows: clamp(240px, 24vw, 360px); grid-auto-flow: dense; gap: 12px; }
.work { position: relative; margin: 0; overflow: hidden; border-radius: 20px; background: var(--raise); box-shadow: 0 0 0 1px var(--line); cursor: zoom-in; transition: box-shadow .15s; }
.work:hover, .work:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.work.wide { grid-column: span 2; }
@media (max-width: 800px) { .work.wide { grid-column: auto; } }
.work img, .work video, .work canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.work figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.work figcaption strong { display: block; font-weight: 600; }
.work figcaption small { color: var(--muted); font: 12px var(--mono); }
.work .tag { flex: none; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(0, 0, 0, .6); color: var(--muted); font: 11px var(--mono); }
.work .tag.yours { border-color: var(--accent); color: var(--text); }
.work .remove { position: absolute; top: 12px; right: 12px; display: none; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(0, 0, 0, .75); color: var(--text); font: 12px var(--sans); cursor: pointer; }
.work:hover .remove, .work .remove:focus-visible, .work .remove.sure { display: block; }
.work .remove.sure { border-color: #ff5a5f; color: #ff5a5f; }
.community-empty { max-width: 560px; margin: 0 auto; padding: 36px 28px; border: 1px dashed var(--line-strong); border-radius: 24px; background: rgba(0, 0, 0, .82); color: var(--muted); text-align: center; }
.community-empty strong { display: block; margin-bottom: 6px; color: var(--text); font-size: 20px; font-weight: 600; }
.community-note { max-width: 720px; margin: 28px auto 0; padding: 0 var(--gutter); color: var(--faint); font-size: 13px; text-align: center; }

/* ---------- pricing ---------- */
.pricing { position: relative; display: grid; justify-items: center; align-content: center; gap: clamp(22px, 4vh, 36px); min-height: 100vh; min-height: 100svh; padding: 132px var(--gutter) 72px; text-align: center; }
.pricing h1 { margin: 0; font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -0.03em; font-weight: 700; line-height: 1; text-shadow: 0 2px 28px rgba(0, 0, 0, .9); }
.pricing-lead { max-width: 30em; margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; text-shadow: 0 2px 20px rgba(0, 0, 0, .95); }
.price-card { position: relative; display: grid; gap: 12px; width: min(560px, 100%); padding: 30px 32px 32px; border: 2px solid var(--accent-light); border-radius: 28px; background: #000; text-align: left; }
.price-card p { margin: 0; color: var(--muted); }
.price-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.price-tag { padding: 2px 9px; border-radius: 5px; background: var(--accent-light); color: #000 !important; font: 700 13px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.price { font-size: clamp(56px, 6vw, 76px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--text) !important; }
.price-card ul { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; color: var(--text); }
.price-card li { position: relative; padding-left: 26px; }
.price-card li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--accent-light); }
.pricing-note { max-width: 34em; margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- "What's ShapeMap" ---------- */
.about { position: relative; max-width: 900px; margin: 0 auto; padding: 150px var(--gutter) 40px; }
.about > * { position: relative; }
.about-top { display: grid; gap: 22px; margin-bottom: 44px; }
.about h1 { margin: 0; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -0.028em; font-weight: 700; text-wrap: balance; }
.about h1 small { display: block; margin-top: 14px; color: var(--accent-light); font-size: clamp(17px, 1.7vw, 23px); line-height: 1.3; letter-spacing: -0.005em; font-weight: 600; }
.about .lead { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; }
.about section { padding: 34px 0; border-top: 1px solid var(--line); }
.about h2 { margin: 0 0 14px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.about h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.about p { margin: 0 0 14px; color: #d6d6da; }
.about p:last-child { margin-bottom: 0; }
.about ul { margin: 0; padding-left: 20px; color: #d6d6da; }
.about li { margin: 6px 0; }
.about li::marker { color: var(--accent-light); }
/* The words stand on black, so the animation behind the page stays out of the reading. */
.about-body { padding: 4px clamp(18px, 3vw, 40px) 12px; border: 1px solid var(--line); border-radius: 28px; background: rgba(0, 0, 0, .9); }
.about-body section:first-child { border-top: 0; }
.figure { margin: 22px 0 6px; }
.figure figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }
.live { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: #050505; box-shadow: 0 0 0 1px var(--line-strong); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair canvas, .shapes-sheet, .shot { display: block; width: 100%; height: auto; border-radius: 16px; background: #050505; box-shadow: 0 0 0 1px var(--line-strong); }
.pair span { display: block; margin-top: 8px; color: var(--muted); font: 12px var(--mono); }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; margin-top: 18px; }
.feature { padding: 20px 22px; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--raise); }
.feature.wide { grid-column: 1 / -1; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-top: 14px; }
.swatches span { aspect-ratio: 1; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-strong); }
.texture-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; margin-top: 14px; }
.texture-strip img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.reactions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; margin-top: 16px; }
.reactions figure { margin: 0; }
.reactions .live { aspect-ratio: 4 / 3; border-radius: 14px; }
.reactions figcaption { margin-top: 8px; color: var(--muted); font: 12px var(--mono); }
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line-strong); border-radius: 16px; background: var(--raise); }
.faq summary { padding: 14px 18px; font-weight: 600; cursor: pointer; list-style-position: outside; }
.faq details p { margin: 0; padding: 0 18px 16px; }
.about-cta { display: grid; justify-items: center; gap: 18px; padding: 44px 0 20px; text-align: center; }
.about-cta p { margin: 0; color: var(--muted); }
.contact-line a { color: var(--accent-light); }

/* A work from the Community, bigger: most of the screen, not all of it (V7). */
.lightbox { width: min(1100px, 92vw); max-height: 90vh; padding: 0; border: 1px solid var(--line-strong); border-radius: 22px; background: #050505; color: var(--text); overflow: hidden; }
.lightbox::backdrop { background: rgba(0, 0, 0, .78); backdrop-filter: blur(3px); }
.lightbox-media { display: grid; place-items: center; background: #000; }
.lightbox-media img, .lightbox-media video, .lightbox-media canvas { display: block; max-width: 100%; max-height: calc(90vh - 64px); width: auto; height: auto; }
.lightbox-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.lightbox-caption small { color: var(--muted); font: 12px var(--mono); margin-left: 8px; }
.lightbox-close { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text); font-size: 15px; cursor: pointer; }
.lightbox-close:hover { border-color: var(--text); }

/* ---------- footer ---------- */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 28px var(--gutter); border-top: 1px solid var(--line); background: #000; color: var(--muted); font-size: 14px; }
.site-footer .made { display: inline-flex; align-items: center; gap: 10px; }
.site-footer .made img { height: 18px; width: auto; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* V10: Enia's bottom art, a strip before the footer of the other pages; its top fades into the black of the page. */
.bottom-art { position: relative; z-index: 1; height: clamp(150px, 19vw, 250px); overflow: hidden; background: #000; }
.bottom-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#000, rgba(0, 0, 0, 0) 55%); pointer-events: none; }

/* Low screens: the sentence, the button and the start of the Community still fit on the first screen. */
@media (max-height: 700px) {
  .hero { min-height: calc(100vh - 150px); min-height: calc(100svh - 150px); padding-top: 88px; padding-bottom: 10px; }
  .scroll-hint { display: none; }
  .community { padding-top: 22px; }
}

/* ---------- small screens ---------- */
@media (max-width: 860px) {
  .site-nav { grid-template-columns: auto 1fr; padding: 16px var(--gutter); }
  .beta-note { grid-column: 1 / -1; grid-row: 2; justify-self: center; font-size: 13px; }
  .hero { padding-top: 142px; }
  .shade::before { inset: -26px -30px; border-radius: 60px; filter: blur(26px); }
  .shade::after { inset: -110px -60px; }
  .about { padding-top: 150px; }
  .pair { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .site-nav nav { gap: 2px 14px; }
  .site-nav nav a { font-size: 14px; }
  .site-logo img { height: 28px; }
}
/* ---------- V11: content that comes in, and soft scrolling (site/motion.js; after studio-size.com/work) ----------
   Only with the class "motion" on <html>, which the script in the head of every page sets unless the visitor asked for
   less motion; without it nothing below applies and everything is simply there. */
html.smooth { scroll-behavior: auto; } /* the wheel is eased by motion.js; the browser must not ease it a second time */
html.motion [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s), transform 1.4s cubic-bezier(.16, 1, .3, 1) var(--delay, 0s); will-change: opacity, transform; }
html.motion [data-reveal=fade] { transform: none; }
html.motion [data-reveal].in { opacity: 1; transform: none; }
/* A heading whose lines rise from behind a mask: motion.js wraps each word; words on one line start together.
   Until then it is only see-through (not hidden), so screen readers and a search in the page still find it. */
html.motion [data-lines]:not(.in) { opacity: 0; }
html.motion [data-lines] .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
html.motion [data-lines] .word > span { display: inline-block; transform: translateY(118%); transition: transform .9s cubic-bezier(.16, 1, .3, 1) calc(var(--delay, 0s) + var(--line, 0) * 90ms); }
html.motion [data-lines].in .word > span { transform: none; }
/* The shade behind the sentence of the front page comes in with its words. */
html.motion .shade[data-lines]::before, html.motion .shade[data-lines]::after { opacity: 0; transition: opacity 1.2s ease var(--delay, 0s); }
html.motion .shade[data-lines].in::before, html.motion .shade[data-lines].in::after { opacity: 1; }
/* A work of the Community grows a little under the pointer. */
html.motion .work > img, html.motion .work > video { transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
html.motion .work:hover > img, html.motion .work:hover > video { transform: scale(1.045); }
@media print { html.motion [data-reveal], html.motion [data-lines] { opacity: 1 !important; transform: none !important; } }

/* Browsers without overflow: clip (Safari before 16) cut the wide shade at the edge of the page instead. */
@supports not (overflow: clip) { html { overflow-x: hidden; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint { animation: none; }

  .shape-cta, .shape-cta path { transition: none; }
}

/* ---------- accounts (site/account.js; only with the ShapeMap server behind the site) ----------
   The sign-in window that opens on "Start shaping", the sign-in and account pages. Same look as the price card:
   black, a thin light border, round corners, the purple accent for the one main button. */
.account-nav { white-space: nowrap; }
/* With the account links the top row has one or two more entries: a little tighter, so it stays on one line. */
.site-nav nav:has(.account-nav) { flex-wrap: nowrap; gap: 4px clamp(10px, 1.7vw, 28px); }
.site-nav nav:has(.account-nav) a { font-size: clamp(14px, 1.15vw, 18px); white-space: nowrap; }
@media (max-width: 860px) { .site-nav nav:has(.account-nav) { flex-wrap: wrap; } }
/* The beta note in the middle gives way when the links need the room. On the widest screens it stays in the exact
   middle; below that it sits between the logo and the links; narrower still it takes a line of its own, as on
   phones. The widths leave room for an admin with a long name (two more links). */
@media (max-width: 1599px) {
  .site-nav:has(.account-nav) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-nav:has(.account-nav) .beta-note { justify-self: center; }
}
/* A long name is cut short. On a phone the links of someone signed in may take a third line, so the beta note,
   which is for visitors, steps aside there. */
.site-nav nav a.account-nav { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 959px) {
  .site-nav:has(.account-nav) { grid-template-columns: auto 1fr; }
  .site-nav:has(.account-nav) .beta-note { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
}
/* Phones: the logo and the account link share the first line, the three pages the second, the beta note the third.
   (Left to wrap by itself, the row broke into three ragged lines and the note ran into the page's heading.) */
@media (max-width: 600px) {
  .site-nav:has(.account-nav) { grid-template-columns: 1fr; gap: 8px; }
  .site-nav:has(.account-nav) .site-logo { grid-row: 1; grid-column: 1; }
  .site-nav:has(.account-nav) .site-logo img { height: 30px; display: block; }
  .site-nav:has(.account-nav) nav { grid-row: 2; grid-column: 1; justify-self: stretch; flex-wrap: nowrap; justify-content: space-between; gap: 0 10px; }
  .site-nav:has(.account-nav) nav a { font-size: 14.5px; }
  .site-nav:has(.account-nav) nav a.account-nav { position: absolute; top: 16px; right: var(--gutter); display: block; max-width: 13ch; height: 30px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 13.5px; line-height: 28px; }
  .site-nav:has(.account-nav) nav a.account-nav:hover { border-color: var(--accent-light); }
  .site-nav:has(.account-nav) .beta-note { grid-row: 3; grid-column: 1; margin-top: 2px; font-size: 12.5px; }
  /* The price page centres its content; on a short phone that brought the heading right under the note. */
  body:has(.account-nav) .pricing { padding-top: 156px; }
  body:has(.account-nav) .admin { padding-top: 150px; }
}
.site-announcement { position: relative; z-index: 3; margin: 0; padding: 8px var(--gutter); background: var(--accent); color: #fff; font-size: 14px; font-weight: 500; text-align: center; }
html.announced .site-nav { top: 37px; }
.account-dialog { width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 1px solid var(--line-strong); border-radius: 28px; background: #050505; color: var(--text); overflow: auto; }
.account-dialog::backdrop { background: rgba(0, 0, 0, .8); backdrop-filter: blur(4px); }
.account-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; }
.account-close:hover { border-color: var(--text); }
.account-panel { padding: 34px 30px 26px; }
.account-body { display: grid; gap: 14px; }
.account-body h2 { margin: 0 34px 2px 0; font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; }
.account-text { margin: 0; color: #d6d6da; font-size: 15px; line-height: 1.55; }
.account-small { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.account-small a, .account-text a, .account-banner a { color: var(--accent-light); }
.account-form { display: grid; gap: 12px; }
.account-field { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.account-field.narrow { max-width: 420px; }
.account-field input, .account-field textarea, .admin-bar input, .admin-bar select { width: 100%; padding: 11px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: #000; color: var(--text); font: 15px var(--sans); }
.account-field input:focus, .account-field textarea:focus { outline: 2px solid var(--accent-light); outline-offset: 1px; border-color: transparent; }
.account-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.account-check { display: flex; align-items: flex-start; gap: 10px; color: #d6d6da; font-size: 14px; line-height: 1.45; cursor: pointer; }
.account-check input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); }
.account-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 24px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent); color: #fff; font: 600 15px var(--sans); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s; }
.account-submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.account-submit.small { min-height: 38px; padding: 0 18px; font-size: 14px; justify-self: start; }
.account-submit.ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.account-submit.ghost:hover { border-color: var(--text); background: transparent; }
.account-submit.danger { background: transparent; border-color: #ff5a5f; color: #ff8a8e; }
.account-submit.danger:hover { background: #ff5a5f; color: #000; }
.account-submit.busy, .account-submit:disabled { opacity: .55; cursor: progress; }
.account-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 0 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: #1f1f1f; font: 600 15px var(--sans); text-decoration: none; }
.account-google:hover { background: #f1f1f4; }
.account-google .mark { display: grid; }
.account-or { display: flex; align-items: center; gap: 12px; margin: 2px 0; color: var(--faint); font: 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.account-or::before, .account-or::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }
.account-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.account-switch { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.account-link { padding: 0; border: 0; background: none; color: var(--muted); font: 14px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.account-link:hover, .account-link.strong { color: var(--text); }
.account-note { min-height: 1.4em; margin: 12px 0 0; color: var(--accent-light); font-size: 14px; line-height: 1.45; }
.account-note:empty { min-height: 0; margin: 0; }
.account-note.bad { color: #ff8a8e; }
.account-page { display: grid; justify-items: center; align-content: start; gap: 24px; min-height: 100vh; min-height: 100svh; padding: 150px var(--gutter) 80px; }
.account-page h1 { margin: 0; font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -0.028em; font-weight: 700; line-height: 1.05; }
.account-page.wide { justify-items: stretch; max-width: 760px; margin: 0 auto; }
.account-card { width: min(440px, 100%); border: 1px solid var(--line-strong); border-radius: 28px; background: #050505; }
.account-card > .account-text, .account-card > .account-submit { margin: 30px; }
.account-sections { display: grid; gap: 14px; }
.account-section { display: grid; gap: 14px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--raise); }
.account-section h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.account-row { display: flex; flex-wrap: wrap; gap: 10px; }
.account-banner { margin: 0; padding: 14px 18px; border: 1px solid var(--accent); border-radius: 16px; background: rgba(105, 85, 206, .14); color: var(--text); font-size: 14px; line-height: 1.5; }
.cookie-note { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: flex; align-items: center; gap: 14px; max-width: min(460px, calc(100vw - 32px)); padding: 12px 12px 12px 18px; border: 1px solid var(--line-strong); border-radius: 18px; background: rgba(5, 5, 5, .96); color: #d6d6da; font-size: 13px; line-height: 1.45; }
.cookie-note p { margin: 0; }
.cookie-note a { color: var(--accent-light); }
.cookie-note button { flex: none; height: 34px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font: 600 13px var(--sans); cursor: pointer; }
.cookie-note button:hover { border-color: var(--text); }
.site-footer .legal { display: inline-flex; gap: 18px; }

/* A work of the Community: "Report" for everyone, when the works come from the server. */
.work .report { position: absolute; top: 12px; left: 12px; display: none; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(0, 0, 0, .75); color: var(--muted); font: 12px var(--sans); cursor: pointer; }
.work:hover .report, .work .report:focus-visible { display: block; }
.work .report:hover { color: var(--text); border-color: var(--text); }
.report-reasons { display: grid; gap: 8px; }

/* Terms and the privacy notice: plain reading pages. */
.legal-page { max-width: 760px; margin: 0 auto; padding: 150px var(--gutter) 80px; }
.legal-page h1 { margin: 0 0 10px; font-size: clamp(32px, 4.4vw, 56px); letter-spacing: -0.028em; font-weight: 700; line-height: 1.05; }
.legal-page h2 { margin: 34px 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.legal-page p, .legal-page li { color: #d6d6da; line-height: 1.65; }
.legal-page ul { padding-left: 20px; }
.legal-page li::marker { color: var(--accent-light); }
.legal-page a { color: var(--accent-light); }
.legal-page .updated { color: var(--muted); font: 13px var(--mono); }
.legal-page .draft { margin: 18px 0; padding: 14px 18px; border: 1px dashed #ffb454; border-radius: 16px; color: #ffcf8f; font-size: 14px; }

/* ---------- the admins' pages (site/admin.js) ---------- */
.admin { max-width: 1280px; margin: 0 auto; padding: 130px var(--gutter) 80px; }
.admin-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 28px; margin-bottom: 26px; }
.admin h1 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.028em; font-weight: 700; line-height: 1; }
.admin h2 { margin: 30px 0 12px; font-size: 18px; font-weight: 600; }
.admin-links { display: flex; gap: 18px; margin: 8px 0 0; font-size: 14px; }
.admin-links a { color: var(--accent-light); }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line-strong); border-radius: 999px; }
.admin-tabs button { height: 34px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 14px var(--sans); cursor: pointer; }
.admin-tabs button:hover { color: var(--text); }
.admin-tabs button[aria-selected=true] { background: var(--accent); color: #fff; }
.admin-button { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--text); font: 13px var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.admin-button:hover { border-color: var(--text); }
.admin-button.on { border-color: var(--accent); background: rgba(105, 85, 206, .2); }
.admin-button.danger { color: #ff8a8e; }
.admin-button.danger:hover { border-color: #ff5a5f; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.admin-tile { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--raise); }
.admin-tile .label { color: var(--muted); font-size: 13px; }
.admin-tile strong { font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; }
.admin-tile .note { color: var(--faint); font: 12px var(--mono); }
.admin-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 10px; margin-top: 10px; }
.admin-chart { margin: 0; padding: 18px 20px 12px; border: 1px solid var(--line); border-radius: 20px; background: var(--raise); }
.admin-chart figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.admin-chart figcaption span { color: var(--muted); font: 12px var(--mono); }
.chart-box { position: relative; }
.chart-box svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-box .grid { stroke: var(--line); stroke-width: 1; }
.chart-box .axis { fill: var(--muted); font: 10px var(--mono); }
.chart-box .bar { fill: var(--accent-light); }
.chart-box .hit { fill: transparent; }
.chart-box .hit:hover { fill: rgba(255, 255, 255, .06); }
.chart-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 10px; background: #000; color: var(--text); font: 12px var(--mono); white-space: nowrap; pointer-events: none; }
.admin-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; }
.admin-table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { padding: 11px 14px; border-bottom: 1px solid var(--line-strong); color: var(--muted); font: 500 12px var(--mono); letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.admin-table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-small { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.mono { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.admin-bar input { width: min(320px, 100%); padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.admin-bar select { width: auto; padding: 8px 14px; border-radius: 999px; font-size: 14px; }
.admin-count { color: var(--muted); font: 12px var(--mono); margin-right: auto; }
.admin-flags, .admin-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.flag { padding: 2px 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font: 11px var(--mono); }
.flag.accent { border-color: var(--accent); color: var(--text); }
.flag.bad { border-color: #7a3033; color: #ff8a8e; }
.admin-note { display: block; margin-top: 4px; color: #ffcf8f; font-size: 12.5px; font-style: normal; }
.admin-pages { display: flex; gap: 8px; margin-top: 14px; }
.admin-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.admin-post { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--raise); }
.admin-post.hidden { border-color: #7a3033; }
.admin-post .media { aspect-ratio: 16 / 10; background: #000; }
.admin-post .media img, .admin-post .media video { display: block; width: 100%; height: 100%; object-fit: contain; }
.admin-post .about { display: grid; gap: 5px; align-content: start; padding: 14px 16px 16px; font-size: 14px; }
.admin-post .about > span { color: var(--muted); }
.admin-post .admin-actions { margin-top: 8px; }
.admin-messages { display: grid; gap: 10px; }
.admin-message { padding: 16px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--raise); }
.admin-message.done { opacity: .6; }
.admin-message .text { margin: 8px 0; white-space: pre-wrap; line-height: 1.55; }
.admin-message .admin-small { margin: 0; }
.admin-message a { color: var(--accent-light); }
.admin-message .answer, .account-message .answer { margin: 10px 0; padding: 10px 14px; border-left: 2px solid var(--accent-light); background: rgba(255, 255, 255, .04); border-radius: 0 12px 12px 0; }
.admin-message .answer .text, .account-message .answer .text { margin: 4px 0 0; }
.admin-answer { display: grid; gap: 8px; margin: 12px 0 10px; }
.account-messages { display: grid; gap: 10px; }
.account-message { padding: 14px 18px; border: 1px solid var(--line); border-radius: 18px; background: #000; }
.account-message .text { margin: 6px 0 0; white-space: pre-wrap; line-height: 1.55; color: #d6d6da; font-size: 15px; }
.account-message .account-small { margin: 0; }
.admin-settings { max-width: 760px; }