/* splatstudy.com — dark only, with the app's DARK palette
   (crates/core/src/ui/theme.rs), after thevirtualform.com:
   monochrome, 1px rules, no boxes; the current item gets the text colour
   and a 1px underline. */

@font-face {
  font-family: "Barlow";
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/barlow-300.woff2") format("woff2");
}

@font-face {
  font-family: "Barlow";
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-400.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/noto-sans-jp.woff2") format("woff2");
}

:root {
  --bg: #111111;
  --surface: #171717;
  --text: #F2F2F2;
  --muted: #A3A3A3;
  --faint: #5E5E5E;
  --border: #2C2C2C;
  --border-strong: #474747;
  --view-bg: #000000;   /* the app's 3D views */

  --font: "Barlow", "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: 40px;
  --measure: 660px;
  --max: 1160px;
  --topbar: 56px;
  /* Side padding of full-width bars (top bar, footer) that lines their content
     up with main's: the gutter, plus half of what the window has beyond --max */
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  color-scheme: dark;
}



*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar) + 16px);
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}


body:lang(ja) {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--muted);
}

:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: 3px;
}

code,
kbd {
  font-family: var(--mono);
  font-size: 0.85em;
}

kbd {
  display: inline-block;
  min-width: 1.7em;
  padding: 0 0.4em;
  border: 1px solid var(--border-strong);
  text-align: center;
  line-height: 1.6;
  white-space: nowrap;
}

/* --- top bar ------------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 var(--edge);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-size: 15px;
}

.topnav a {
  color: var(--muted);
  text-decoration: none;
}

.topnav a:hover,
.topnav a[aria-current="page"] {
  color: var(--text);
}

.topnav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.topnav .topnav-app {
  color: var(--text);
}

.topnav .topnav-app::after {
  content: " →";
}


/* --- language banner ---------------------------------------------------- */

.lang-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 6px var(--gutter);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.lang-banner[hidden] {
  display: none;
}

.lang-banner button {
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* --- page frame ---------------------------------------------------------- */

main {
  flex: 1;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}

.footer {
  padding: 24px var(--edge) 32px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
}

.footer a {
  color: var(--muted);
}

h1,
h2,
h3 {
  font-weight: 300;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
}

h2 {
  font-size: 26px;
  line-height: 1.3;
}

h3 {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
}

:lang(ja) h1 {
  line-height: 1.3;
  font-size: clamp(30px, 5vw, 52px);
}

p + p,
p + ul,
ul + p,
p + table,
table + p {
  margin-top: 1em;
}

.muted {
  color: var(--muted);
}

/* Lists with an em dash, as on thevirtualform.com */
.dash {
  list-style: none;
}

.dash > li {
  position: relative;
  padding-left: 1.6em;
}

.dash > li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--faint);
}

.dash > li + li {
  margin-top: 0.35em;
}

/* "in progress": features that are planned for this week but not in the app yet */
.soon {
  color: var(--muted);
}

.soon::after {
  content: attr(data-soon);
  margin-left: 0.6em;
  padding-left: 0.6em;
  border-left: 1px solid var(--border-strong);
  font-size: 0.8em;
  color: var(--faint);
  white-space: nowrap;
}

/* --- buttons ------------------------------------------------------------ */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--text);
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}

.button:hover {
  color: var(--text);
  background: var(--surface);
}

.button-primary {
  background: var(--text);
  color: var(--bg);
}

.button-primary:hover {
  background: var(--muted);
  border-color: var(--muted);
  color: var(--bg);
}

/* --- home ---------------------------------------------------------------- */

.hero {
  padding: 88px 0 56px;
}

.lede {
  max-width: var(--measure);
  margin-top: 24px;
  font-size: 19px;
  font-weight: 300;
  color: var(--muted);
}

:lang(ja) .lede {
  font-size: 17px;
}

.requirements {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}

.shot {
  margin-top: 56px;
  border: 1px solid var(--border-strong);
  background: var(--view-bg);
}

.shot figcaption {
  padding: 8px 12px;
  border-top: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
}

/* A section: its heading in a narrow left column, its text on the right */
.section {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px 48px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
}

.section > .section-head {
  position: relative;
}

.section-no {
  display: block;
  color: var(--faint);
  font-size: 13px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

.section-body {
  max-width: var(--measure);
}

.section-body h3 {
  margin: 32px 0 8px;
}

.section-body h3:first-child {
  margin-top: 0;
}

/* The two halves of the app: sculpt | reference */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  margin-top: 24px;
}

.split > div {
  padding: 16px 20px 20px 0;
}

.split > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--border-strong);
}

.split .label {
  display: block;
  color: var(--faint);
  font-size: 13px;
  margin-bottom: 4px;
}

/* Tables: tools, shortcuts, navigation */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 16px;
}

.table th,
.table td {
  text-align: left;
  vertical-align: top;
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid var(--border);
}

.table thead th {
  font-weight: 400;
  font-size: 13px;
  color: var(--faint);
  border-bottom-color: var(--border-strong);
}

.table td:last-child,
.table th:last-child {
  padding-right: 0;
}

.table .key {
  width: 1%;
  white-space: nowrap;
}

.table .tool {
  white-space: nowrap;
}

.closing {
  padding: 72px 0 0;
  border-top: 1px solid var(--border);
  text-align: center;
}

.closing .actions {
  justify-content: center;
}

/* --- docs ---------------------------------------------------------------- */

.page-head {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--border);
}

.page-head .lede {
  margin-top: 16px;
}

.docs {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  padding-top: 40px;
}

.toc {
  position: sticky;
  top: calc(var(--topbar) + 32px);
  align-self: start;
  font-size: 14px;
}

.toc ol {
  list-style: none;
  border-left: 1px solid var(--border);
}

.toc a {
  display: block;
  padding: 3px 0 3px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
}

.toc a:hover {
  color: var(--text);
  border-left-color: var(--text);
}

.docs-body {
  max-width: 720px;
}

.docs-body section + section {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.docs-body h2 {
  margin-bottom: 16px;
}

.docs-body h3 {
  margin: 28px 0 8px;
}

.note {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border-strong);
  color: var(--muted);
  font-size: 14px;
}

/* --- download ------------------------------------------------------------ */

.download {
  max-width: 820px;
  padding-top: 40px;
}

/* The three forms, side by side like a plan lineup: web, desktop and
   SplatStudy for Blender. Subgrid lines up name, text, button and points
   across the columns. */
.products {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}

.products > li {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  align-content: start;
  padding: 24px 24px 32px;
  border-left: 1px solid var(--border-strong);
}

.products > li:first-child {
  padding-left: 0;
  border-left: 0;
}

.products > li:last-child {
  padding-right: 0;
}

.products .label {
  color: var(--faint);
  font-size: 13px;
}

.products h2,
.products h3 {
  margin: 6px 0 0;
  font-size: 23px;
  font-weight: 300;
  line-height: 1.2;
}

.product-soon h2,
.product-soon h3 {
  color: var(--muted);
}

.products p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

:lang(ja) .products li {
  word-break: auto-phrase;
}

.products .button {
  justify-content: center;
  margin-top: 24px;
}

.button-soon,
.button-soon:hover {
  border-style: dashed;
  border-color: var(--border-strong);
  background: none;
  color: var(--faint);
  cursor: default;
}

.products .dash {
  margin-top: 24px;
  font-size: 14px;
  color: var(--muted);
}

.page-products {
  margin-top: 40px;
}

.section > .products {
  grid-column: 1 / -1;
  margin-top: 16px;
}

.build-version {
  color: var(--faint);
  font-size: 13px;
}

.builds {
  list-style: none;
  margin-top: 8px;
  border-top: 1px solid var(--border-strong);
}

.build {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 4px 24px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.build-os {
  font-size: 18px;
  font-weight: 300;
}

.build-link {
  overflow-wrap: anywhere;
}

.build-meta {
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
}

.build-hash {
  grid-column: 2 / -1;
  color: var(--faint);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.build-soon .build-status {
  grid-column: 2 / -1;
  color: var(--faint);
}

.build-notices {
  margin-top: 16px;
  font-size: 14px;
}

.download section {
  margin-top: 48px;
}

.download h2 {
  margin-bottom: 12px;
}

/* --- licences, 404 ------------------------------------------------------- */

.prose {
  max-width: var(--measure);
  padding-top: 40px;
}

.prose h2 {
  margin: 40px 0 12px;
}

.prose h2:first-child {
  margin-top: 0;
}

.not-found {
  padding: 120px 0;
}

.not-found p {
  margin-top: 16px;
  color: var(--muted);
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 900px) {
  .section {
    grid-template-columns: minmax(0, 1fr);
  }

  .docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .toc {
    position: static;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
  }

  .topbar {
    gap: 12px;
  }

  .topnav {
    gap: 14px;
    font-size: 14px;
  }

  /* The app needs WebGPU on a computer; the hero button already links to it. */
  .topnav .topnav-app {
    display: none;
  }

  .hero {
    padding: 48px 0 32px;
  }

  .lede {
    font-size: 17px;
  }

  .shot {
    margin-top: 32px;
  }

  .section {
    padding: 40px 0;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split > div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--border-strong);
  }

  .table {
    font-size: 14px;
  }

  .table .hide-narrow {
    display: none;
  }

  .products {
    grid-template-columns: minmax(0, 1fr);
  }

  .products > li {
    padding: 20px 0 24px;
    border-left: 0;
  }

  .products > li + li {
    border-top: 1px solid var(--border-strong);
  }

  .build {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .build-link,
  .build-hash,
  .build-soon .build-status {
    grid-column: 1 / -1;
  }

  .footer {
    flex-direction: column;
  }
}

.spaced {
  margin-top: 20px;
}

.fineprint {
  color: var(--muted);
  font-size: 13px;
}

.section-body .split h3 {
  margin: 0 0 4px;
}

/* Japanese headings break between phrases, not inside words (Chrome, Edge) */
h1,
h2,
h3 {
  text-wrap: balance;
}

:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3,
:lang(ja) .lede {
  word-break: auto-phrase;
}

.footer p + p {
  margin-top: 0;
}

/* --- docs windows (public/js/widgets) ------------------------------------ */

.widget {
  margin: 24px 0;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.widget-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
}

.widget-panel {
  display: flex;
  flex-direction: column;
  padding: 10px 14px 14px;
  border-right: 1px solid var(--border-strong);
  font-size: 14px;
  line-height: 1.5;
}

.widget-label {
  margin: 12px 0 4px;
  color: var(--faint);
  font-size: 12px;
}

.widget-label:first-child {
  margin-top: 2px;
}

.widget-choice {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.widget-choice:hover {
  color: var(--text);
}

.widget-choice[aria-pressed="true"] {
  color: var(--text);
}

.widget-choice[aria-pressed="true"] > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.widget-choice:disabled {
  color: var(--faint);
  cursor: default;
}

.widget-choice kbd {
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--faint);
  font-size: 11px;
}

.widget-slider {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.widget-slider-head {
  display: flex;
  justify-content: space-between;
}

.widget-slider-value {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.widget-slider input {
  width: 100%;
  accent-color: var(--text);
}

.widget-view {
  position: relative;
  /* As tall as the panel beside it, and never shorter than this */
  min-height: 420px;
  background: var(--view-bg);
  touch-action: none;
  cursor: crosshair;
  outline: none;
}

.widget-view:focus-visible {
  outline: 1px solid var(--text);
  outline-offset: -1px;
}

.widget-view canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.widget-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 14px 10px;
  border-top: 1px solid var(--border-strong);
  font-size: 13px;
  line-height: 1.6;
}

.widget-status-main {
  color: var(--text);
  min-height: 1.6em;
}

.widget-status-hint {
  color: var(--faint);
}

.widget-break {
  display: none;
}

.widget + .widget-credit {
  margin-top: -16px;
  color: var(--faint);
  font-size: 13px;
}

.widget-fallback {
  padding: 32px 20px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .widget-body {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The panel becomes rows of choices above the view */
  .widget-panel {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 14px;
    border-right: 0;
    border-bottom: 1px solid var(--border-strong);
  }

  .widget-label,
  .widget-break {
    display: block;
    flex-basis: 100%;
  }

  .widget-choice kbd {
    display: none;
  }

  .widget-slider {
    flex: 1 1 120px;
  }

  .widget-view {
    min-height: 0;
    aspect-ratio: 1;
  }
}