/* creators.crowon.app (server/creators.mjs): a creator handbook. The frame follows the measured structure of a creator
   handbook article (docs/creators-design-study.md): top bar, article list 280px wide on the left, the article in a 680px
   column, "On this page" on the right; 17px body, headings at 44 / 28 / 20. CrowOn's own parts: black-and-white only,
   places in the app written as small path chips, terms set as a two-column list, real app screens on a grey bed.
   System font only. */

:root {
  --bg: #ffffff;
  --ink: #161617;
  --ink-2: #4c4c50;
  --ink-3: #87878c;
  --line: #e2e2de;
  --chip: rgba(22, 22, 23, 0.065);
  --bed: #ebebe7;
  --bar: rgba(255, 255, 255, 0.92);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Segoe UI", "Noto Sans JP", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --ink: #ececee; --ink-2: #b4b4b9; --ink-3: #7c7c82; --line: #2a2a2d; --chip: rgba(255, 255, 255, 0.09); --bed: #1d1d1f; --bar: rgba(0, 0, 0, 0.92);
  }
}
:root[data-theme="dark"] { --bg: #000000; --ink: #ececee; --ink-2: #b4b4b9; --ink-3: #7c7c82; --line: #2a2a2d; --chip: rgba(255, 255, 255, 0.09); --bed: #1d1d1f; --bar: rgba(0, 0, 0, 0.92); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body.hb { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.hb:lang(ja) :where(h1, h2, h3, p, dt, dd, li, a, figcaption, summary) { word-break: auto-phrase; line-break: strict; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: 10px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ---------- top bar (52px measured; logo left, three tabs, language right) ---------- */
.bar { position: sticky; top: 0; z-index: 20; height: 56px; border-bottom: 1px solid var(--line); }
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.bar-in { display: flex; align-items: center; height: 100%; padding: 0 28px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; flex: none; }
.brand img { width: 30px; }
.brand .dk { display: none; }
.brand span { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.brand em { font-style: normal; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.tabs { display: flex; gap: 28px; margin: 0 auto; height: 100%; }
.tabs a { display: flex; align-items: center; height: 100%; font-size: 15px; font-weight: 600; color: var(--ink-3); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.bar-end { display: flex; align-items: center; gap: 16px; flex: none; }
.lang { font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.lang:hover { color: var(--ink); }
.drawer { display: none; }
.drawer summary { list-style: none; display: grid; align-content: center; gap: 5px; width: 40px; height: 40px; margin-right: -8px; padding: 0 10px; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s; }
.drawer[open] summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.drawer[open] summary span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.drawer-in { position: fixed; inset: 56px 0 0; background: var(--bg); overflow-y: auto; padding: 20px 20px 40px; }
.drawer-links { display: flex; gap: 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; }

/* ---------- three columns ---------- */
.shell { display: grid; grid-template-columns: 280px minmax(0, 1fr) 280px; align-items: start; }
.col { padding: 64px clamp(28px, 7vw, 100px) 120px; min-width: 0; }

/* Article list (280px, a rule on the right; groups, then the articles with a line down their left) */
.tree { position: sticky; top: 56px; height: calc(100vh - 56px); overflow-y: auto; border-right: 1px solid var(--line); padding: 28px 20px 40px 28px; scrollbar-width: none; }
.tree::-webkit-scrollbar { display: none; }
.tree-g + .tree-g { margin-top: 22px; }
.tree-g h2 { font-size: 13px; font-weight: 700; color: var(--ink-3); margin-bottom: 8px; letter-spacing: 0.02em; }
.tree-g ul { border-left: 1px solid var(--line); }
.tree-g a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.tree-g a:hover { color: var(--ink); }
.tree-g a[aria-current] { color: var(--ink); font-weight: 700; border-left-color: var(--ink); }

/* ---------- the article (680px column; 44 / 28 / 20 headings, 17px body) ---------- */
.doc { max-width: 680px; }
.doc h1 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.2; font-weight: 800; letter-spacing: -0.025em; }
.hb:lang(ja) .doc h1 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.35; letter-spacing: -0.01em; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 22px; padding-bottom: 28px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.meta b { color: var(--ink); font-weight: 600; }
.lead { margin-top: 32px; font-size: 18px; line-height: 1.75; color: var(--ink); }
.doc h2 { margin: 72px 0 16px; font-size: 28px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; }
.hb:lang(ja) .doc h2 { font-size: 25px; letter-spacing: 0; }
.doc h3 { margin: 40px 0 10px; font-size: 20px; line-height: 1.4; font-weight: 700; }
.doc p { margin-top: 14px; font-size: 17px; line-height: 1.8; color: var(--ink-2); }
.hb:lang(ja) .doc p { font-size: 16px; line-height: 1.95; }
.doc h2 + p, .doc h3 + p { margin-top: 0; }
.doc b { color: var(--ink); font-weight: 700; }
.doc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--ink-3); color: var(--ink); font-weight: 600; }
.doc a:hover { text-decoration-color: var(--ink); }
.to-help::after { content: "↗"; display: inline-block; margin-left: 2px; font-size: 0.85em; color: var(--ink-3); }

/* A place in the app: each step a small chip, joined by › */
.where { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; vertical-align: baseline; }
.where span { padding: 0 7px; border-radius: 6px; background: var(--chip); color: var(--ink); font-size: 0.9em; font-weight: 600; line-height: 1.65; white-space: nowrap; }
.where i { font-style: normal; color: var(--ink-3); font-size: 0.9em; }

/* Steps: the number sits in the margin */
.steps { counter-reset: s; margin-top: 18px; }
.steps li { counter-increment: s; position: relative; padding: 0 0 0 40px; margin-top: 16px; font-size: 17px; line-height: 1.8; color: var(--ink-2); }
.hb:lang(ja) .steps li { font-size: 16px; line-height: 1.95; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; text-align: right; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Terms: name on the left, what it does on the right, a hairline between */
.terms { margin-top: 18px; border-top: 1px solid var(--line); }
.terms div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.terms dt { font-size: 15px; font-weight: 700; line-height: 1.6; }
.terms dd { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }

.note { margin-top: 28px !important; padding: 16px 20px; border-left: 3px solid var(--ink); background: var(--chip); border-radius: 0 10px 10px 0; color: var(--ink) !important; }

/* Real app screens on a grey bed */
.shot { margin: 28px 0 8px; }
.shot-bed { display: flex; justify-content: center; gap: 24px; padding: 36px 24px; border-radius: 20px; background: var(--bed); }
.shot img { width: 300px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 18px 40px -24px rgba(0, 0, 0, 0.35); }
.shot img[height="199"] { width: 360px; border-radius: 12px; }
.shot img[height="445"] { width: 380px; }
.shot figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); text-align: center; }
.aside { margin-top: 56px !important; font-size: 13px !important; color: var(--ink-3) !important; }
.next { margin-top: 20px !important; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px !important; color: var(--ink-3) !important; }
.aside + .next { margin-top: 20px !important; }
.nf { margin-top: 28px; display: grid; gap: 10px; }
.nf a { font-weight: 600; }

/* "On this page" (right; label, then the headings, the sub-headings indented) */
.otp { position: sticky; top: 56px; padding: 64px 28px 40px 0; max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: none; }
.otp::-webkit-scrollbar { display: none; }
.otp-h { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.hb:lang(ja) .otp-h { font-size: 12px; letter-spacing: 0.02em; }
.otp ol, .otp-m ol { display: grid; gap: 2px; }
.otp ol ol, .otp-m ol ol { padding-left: 14px; margin: 2px 0 4px; }
.otp a, .otp-m a { display: block; padding: 5px 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); text-decoration: none; }
.otp a:hover { color: var(--ink); }
.otp a.here { color: var(--ink); font-weight: 600; }
.otp-m { display: none; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); }
.foot-in { padding: 48px 32px 32px; max-width: 1264px; margin: 0 auto; }
.foot-cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; }
.foot h2 { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.foot ul { display: grid; gap: 8px; }
.foot li a { font-size: 13px; color: var(--ink-2); text-decoration: none; }
.foot li a:hover { color: var(--ink); text-decoration: underline; }
.foot-bar { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); }
.foot-bar a { color: var(--ink-3); text-decoration: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .lt { display: none; }
  :root:not([data-theme="light"]) .brand .dk { display: block; }
  :root:not([data-theme="light"]) .shot img { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
}

/* ---------- narrower: "On this page" folds into the article, then the list moves into the menu ---------- */
@media (max-width: 1240px) {
  .shell { grid-template-columns: 260px minmax(0, 1fr); }
  .otp { display: none; }
  .otp-m { display: block; margin-top: 24px; border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
  .otp-m summary { padding: 12px 0; font-size: 14px; font-weight: 700; cursor: pointer; }
  .otp-m > ol { padding-bottom: 12px; }
  .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .shell { display: block; }
  .tree, .tabs { display: none; }
  .drawer { display: block; }
  .bar-in { padding: 0 20px; }
  .col { padding: 32px 20px 80px; }
  .lead { font-size: 17px; }
  .doc h2 { margin-top: 56px; font-size: 23px; }
  .hb:lang(ja) .doc h2 { font-size: 22px; }
  .doc h3 { font-size: 18px; }
  .terms div { grid-template-columns: 1fr; gap: 2px; }
  .shot-bed { padding: 24px 16px; border-radius: 16px; }
  .shot img { width: min(260px, 100%); }
  .shot img[height="199"] { width: 100%; }
  .foot-in { padding: 40px 20px 28px; }
  .foot-in, .wrap { padding-left: 20px; padding-right: 20px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- home: an immersive opening on black ----------
   Like a product page: always black, the official film fills the first screen, few words set large, real app screens
   at full size, the Studio screen held in place (sticky) while the tools pass beside it. No scroll-in fades or
   parallax; the only motion is the film and press feedback. */
html:has(body.hx) { background: #000; }
body.hx { --bg: #000; --ink: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #6e6e73; --line: #2a2a2d; --chip: rgba(255, 255, 255, 0.09); --bar: rgba(0, 0, 0, 0.8); background: #000; color: var(--ink); color-scheme: dark; }
.hx main { overflow-x: clip; }
.hx .sbar { position: sticky; top: 0; z-index: 20; background: var(--bar); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.hx .sbar-in { display: flex; align-items: center; gap: 32px; height: 52px; max-width: 1064px; margin: 0 auto; padding: 0 22px; }
.hx .brand img { display: block; }
.hx .sbar-nav { display: flex; gap: 26px; margin-left: auto; }
.hx .sbar-nav a, .hx .sbar .lang { font-size: 12px; color: var(--ink-2); text-decoration: none; }
.hx .sbar-nav a:hover, .hx .sbar .lang:hover { color: var(--ink); }
.hx .drawer-in { background: #000; }
.hb-sheet { display: grid; }
.hb-sheet a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 24px; font-weight: 600; text-decoration: none; }

.hx h1, .hx h2 { letter-spacing: -.015em; }
.hx-kicker { font-size: 17px; font-weight: 600; color: var(--ink-2); }
.hx-more { display: inline-block; font-size: 17px; color: #2997ff; text-decoration: none; }
.hx-more::after { content: " ›"; }
.hx-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.hx-btn { display: inline-block; padding: 11px 22px; border-radius: 980px; background: #f5f5f7; color: #000; font-size: 17px; font-weight: 500; text-decoration: none; transition: transform .15s; }
.hx-btn:hover { background: #fff; }
.hx-btn:active, .hx-more:active { transform: scale(.97); }
.hx-screen { display: block; width: 100%; max-width: 390px; height: auto; border-radius: 34px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }

/* First screen: the film fills it, the words sit on its black top */
.hx-hero { position: relative; display: flex; flex-direction: column; height: calc(100svh - 52px); min-height: 560px; padding-top: clamp(40px, 8vh, 96px); text-align: center; overflow: hidden; }
.hx-hero-t { position: relative; z-index: 1; padding: 0 22px; }
.hx-hero h1 { margin-top: 8px; font-size: clamp(44px, 6.6vw, 96px); line-height: 1.05; font-weight: 700; }
.hb:lang(ja) .hx-hero h1 { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.15; letter-spacing: 0; }
.hx-sub { margin-top: 14px; font-size: clamp(21px, 2vw, 28px); font-weight: 600; color: var(--ink-2); }
.hx-acts { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: 30px; }
.hx-film { position: absolute; inset: 0; }
.hx-film video { position: absolute; left: 50%; top: 58%; width: max(100%, 112vh); aspect-ratio: 1; transform: translate(-50%, -50%); object-fit: cover; background: #000; }

/* One statement: the first words white, the rest grey, as one paragraph */
.hx-say { max-width: 1000px; margin: 0 auto; padding: 160px 22px 140px; }
.hx-say p { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; font-weight: 600; color: var(--ink-3); }
.hb:lang(ja) .hx-say p { font-size: clamp(24px, 2.9vw, 40px); line-height: 1.45; }
.hx-say b { color: var(--ink); font-weight: 600; }

/* Studio held in place while the tools pass */
.hx-pin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; max-width: 1064px; margin: 0 auto; padding: 0 22px; }
.hx-pin-m { position: sticky; top: 52px; height: calc(100svh - 52px); display: flex; align-items: center; justify-content: center; }
.hx-pin-m .hx-screen { width: auto; max-height: calc(100svh - 140px); }
.hx-tools { list-style: none; padding: 30vh 0 20vh; }
.hx-tools li { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; }
.hx-tools h2 { font-size: clamp(36px, 4vw, 56px); line-height: 1.1; font-weight: 700; }
.hx-tools p { margin-top: 14px; max-width: 420px; font-size: 21px; line-height: 1.45; font-weight: 500; color: var(--ink-2); }
.hb:lang(ja) .hx-tools p { font-size: 19px; line-height: 1.7; }
.hx-tools li.hx-tools-go { min-height: 0; }

/* Grow: words left, the real insights screen right */
.hx-grow { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; align-items: center; max-width: 1064px; margin: 0 auto; padding: 200px 22px 0; }
.hx-grow h2, .hx-music h2, .hx-safe h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.1; font-weight: 700; }
.hb:lang(ja) .hx-grow h2, .hb:lang(ja) .hx-music h2, .hb:lang(ja) .hx-safe h2 { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.25; letter-spacing: 0; }
.hx-grow p, .hx-music-t > p:not(.hx-kicker), .hx-safe p { margin-top: 22px; font-size: 21px; line-height: 1.5; font-weight: 500; color: var(--ink-2); }
.hb:lang(ja) .hx-grow p, .hb:lang(ja) .hx-music-t > p:not(.hx-kicker), .hb:lang(ja) .hx-safe p { font-size: 19px; line-height: 1.8; }
.hx-grow .hx-more, .hx-music .hx-more, .hx-safe .hx-more { margin-top: 22px; }
.hx-grow-m { display: flex; justify-content: center; }
.hx-grow-m .hx-screen { max-width: 360px; }

/* MUSIC: the words, then the MUSIC film's still across the whole width */
.hx-music { padding-top: 220px; text-align: center; }
.hx-music-t { max-width: 760px; margin: 0 auto; padding: 0 22px; }
.hx-music-t h2 { margin-top: 8px; }
.hx-music-m { display: block; width: 100%; height: min(86svh, 900px); object-fit: cover; object-position: 50% 30%; margin-top: 48px; }

.hx-safe { max-width: 860px; margin: 0 auto; padding: 200px 22px 0; text-align: center; }

/* The guide's articles */
.hx-guide { max-width: 1064px; margin: 0 auto; padding: 200px 22px 160px; }
.hx-guide h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: 1.1; font-weight: 700; }
.hx-guide-p { margin-top: 12px; font-size: 21px; font-weight: 500; color: var(--ink-2); }
.hx-guide ol { list-style: none; margin-top: 48px; border-top: 1px solid var(--line); }
.hx-guide li a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; gap: 32px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.hx-guide li b { font-size: 24px; line-height: 1.3; font-weight: 600; }
.hx-guide li span { font-size: 15px; line-height: 1.6; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hx-guide li small { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.hx-guide li a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hx-guide li a:active { opacity: .7; }

.hx .foot { border-top-color: var(--line); }

@media (max-width: 1000px) { .hx .sbar-nav { display: none; } .hx .sbar .lang { margin-left: auto; } .hx .drawer { display: block; } }
@media (max-width: 760px) {
  .hx-hero { padding-top: 56px; min-height: 600px; }
  .hx-acts { flex-direction: column; gap: 18px; }
  .hx-film video { top: 66%; width: max(100%, 82vh); }
  .hx-say { padding: 110px 22px 90px; }
  .hx-pin { display: block; }
  .hx-pin-m { position: static; height: auto; }
  .hx-pin-m .hx-screen { width: min(300px, 80%); max-height: none; }
  .hx-tools { padding: 56px 0 0; }
  .hx-tools li { min-height: 0; padding: 28px 0; border-top: 1px solid var(--line); }
  .hx-tools li.hx-tools-go { border: 0; }
  .hx-tools p, .hb:lang(ja) .hx-tools p { font-size: 17px; }
  .hx-grow { display: flex; flex-direction: column-reverse; gap: 48px; padding-top: 130px; align-items: stretch; }
  .hx-grow-m .hx-screen { width: min(300px, 80%); }
  .hx-grow p, .hx-music-t > p:not(.hx-kicker), .hx-safe p, .hb:lang(ja) .hx-grow p, .hb:lang(ja) .hx-music-t > p:not(.hx-kicker), .hb:lang(ja) .hx-safe p { font-size: 17px; }
  .hx-music { padding-top: 140px; }
  .hx-music-m { height: 70svh; }
  .hx-safe { padding-top: 130px; }
  .hx-guide { padding: 130px 22px 100px; }
  .hx-guide li a { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; }
  .hx-guide li b { font-size: 20px; }
}