/* src/styles/hub.css */
html { background: #121413; }
html body { background: #121413; background-image: none; color: #ebeeec; font-family: "Newsreader", Georgia, "Times New Roman", serif; min-width: 0; }
html body::before, html body::after { content: none; display: none; }
.hb h1, .hb h2, .hb h3 { max-width: none; font-size: inherit; font-weight: 400; letter-spacing: normal; line-height: inherit; margin: 0; }
.hb nav { color: inherit; font-size: inherit; align-items: baseline; }
.hb svg { height: auto; max-width: 100%; }
.hb img { max-width: 100%; }
.hb footer { border-top: 0; }
.hb button { font: inherit; }
.hb figure { margin: 1em 40px; }
.hb {
  color-scheme: dark;
  --bg: #121413;
  --wall: #0d0f0e;
  --ink: #ebeeec;
  --muted: #9ea5a1;
  --meso: #a3c48e;
  --meso-ink: #10140d;
  --meso-band: #181e15;
  --aeda: #dba8b4;
  --aeda-ink: #1f1216;
  --aeda-band: #211a1c;
  --plain-band: #191c1a;
  --link: #a9c6dc;
  --tint: rgba(235, 238, 236, 0.06);
  --tint-2: rgba(235, 238, 236, 0.12);
  --edge: rgba(235, 238, 236, 0.26);

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-ui: 1.0625rem;
  --fs-lead: 1.5rem;
  --fs-heading: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem);
  --fs-display: clamp(2rem, 0.3rem + 7.5vw, 6.75rem);

  --r-panel: 16px;
  --r-img: 6px;
  --r-btn: 999px;
  --content: 860px;
  --margin: clamp(20px, 3vw, 32px);
  --gap-section: clamp(120px, 14vw, 200px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
.hb, .hb * { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.hb {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: var(--step-body);
  line-height: 1.5;
  font-kerning: normal;
  font-optical-sizing: auto;
}
.hb h1, .hb h2, .hb h3 { font-weight: 400; text-wrap: balance; margin: 0; }
.hb p { margin: 0; text-wrap: pretty; }
.hb :focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }
.hb a { color: inherit; text-decoration: none; transition: color 180ms var(--ease); }
.hb a:hover { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.hb p a, .hb li a, .hb dd a { color: var(--link); }
.hb a.hb-go { font-weight: 500; }
.hb a.hb-go::after { content: "\00a0\2192"; display: inline-block; transition: transform 180ms var(--ease); }
.hb a.hb-go:hover { text-decoration: none; }
.hb a.hb-go:hover::after { transform: translateX(3px); }
.hb .hb-frame-w { width: min(1200px, 100% - 2 * var(--margin)); margin-inline: auto; }
.hb .hb-content { width: min(var(--content), 100% - 2 * var(--margin)); margin-inline: auto; }
.hb .hb-wall { background: var(--wall); padding-block: 0 120px; padding-left: max(0px, env(safe-area-inset-left, 0px)); padding-right: max(0px, env(safe-area-inset-right, 0px)); }
.hb .hb-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 14px 32px; padding-top: 30px; font-size: var(--fs-ui); }
.hb .hb-bar nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.hb .hb-bar nav a { white-space: nowrap; }
.hb a.hb-ext::after { content: "\00a0\2197"; display: inline-block; font-size: 0.85em; transition: transform 180ms var(--ease); }
.hb a.hb-ext:hover::after { transform: translate(2px, -2px); }
.hb .hb-wall h1 { margin-top: 88px; font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.035em; font-weight: 400; }
.hb .hb-wall h1 .hb-ln { display: block; overflow: clip; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hb .hb-wall h1 .hb-ln > span { display: block; }
.hb .hb-wall .hb-lede { margin-top: 36px; max-width: 36rem; font-size: var(--fs-lead); line-height: 1.35; color: var(--ink); }
.hb .hb-works { margin-top: 72px; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.hb .hb-work-link { display: block; color: inherit; }
.hb .hb-work-link:hover { text-decoration: none; }
.hb .hb-work-link .hb-pic { display: block; overflow: clip; border-radius: var(--r-img); background: #f2f4f3; }
.hb .hb-work-link img, .hb .hb-work-link svg { display: block; width: 100%; height: auto; transition: transform 1200ms var(--ease); }
.hb .hb-work-link:hover img, .hb .hb-work-link:hover svg { transform: scale(1.03); }
.hb .hb-work-link .hb-cap { margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.hb .hb-work-link .hb-nm { font-size: var(--fs-lead); }
.hb .hb-work-link .hb-nm::after { content: "\00a0\2192"; display: inline-block; font-size: 0.8em; transition: transform 180ms var(--ease); }
.hb .hb-work-link:hover .hb-nm::after { transform: translateX(4px); }
.hb .hb-work-link .hb-ln2 { font-size: var(--fs-ui); color: var(--muted); }
.hb .hb-work-link.hb-meso .hb-nm { color: var(--meso); }
.hb .hb-work-link.hb-aeda .hb-nm { color: var(--aeda); }
.hb .hb-band { padding-block: 128px; }
.hb .hb-band.hb-meso { background: var(--meso-band); }
.hb .hb-band.hb-aeda { background: var(--aeda-band); }
.hb .hb-band.hb-plain { background: var(--plain-band); }
.hb .hb-band > section.hb-part { padding-top: 0; }
.hb .hb-sh .hb-sub { margin-top: 12px; font-size: var(--fs-ui); color: var(--muted); }
.hb .hb-sh h2 { font-size: var(--fs-heading); line-height: 1.02; letter-spacing: -0.03em; }
.hb .hb-band.hb-meso .hb-sh .hb-sub { color: var(--meso); }
.hb .hb-band.hb-aeda .hb-sh .hb-sub { color: var(--aeda); }
.hb .hb-statement { margin-top: 36px; font-size: var(--fs-lead); line-height: 1.35; }
.hb .hb-body { margin-top: 20px; }
.hb .hb-small { font-size: var(--step-small); color: var(--muted); }
.hb section.hb-part { padding-top: var(--gap-section); }
.hb .hb-button {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  text-decoration: none; font-size: var(--fs-ui); font-weight: 500; border-radius: var(--r-btn);
  transition: transform 140ms var(--ease), filter 180ms var(--ease);
}
.hb .hb-button:hover { text-decoration: none; filter: brightness(1.08); }
.hb .hb-button:active { transform: scale(.97); }
.hb .hb-button.hb-meso { background: var(--meso); color: var(--meso-ink); }
.hb .hb-button.hb-aeda { background: var(--aeda); color: var(--aeda-ink); }
.hb .hb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 44px; }
.hb .hb-shot { margin: 56px 0 0; }
.hb .hb-shot img { display: block; width: 100%; height: auto; border-radius: var(--r-img); background: #f2f4f3; }
.hb .hb-shot figcaption { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }
.hb .hb-ledger { margin-top: 72px; }
.hb .hb-ledger h3 { font-size: var(--fs-lead); line-height: 1.2; }
.hb .hb-ledger ol { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.hb .hb-ledger li { display: grid; grid-template-columns: 38% 1fr auto; align-items: baseline; min-height: 44px; padding: 8px 0; gap: 16px; font-size: var(--fs-ui); }
.hb .hb-ledger .hb-kind { color: var(--muted); }
.hb .hb-ledger .hb-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.hb .hb-ledger .hb-when.hb-now { color: var(--meso); font-weight: 600; }
.hb [data-ui] { font-family: inherit; }
.hb [data-ui].hb-assay { margin-top: 40px; background: var(--tint); padding: 24px; border-radius: var(--r-panel); }
.hb [data-ui] .hb-assay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.hb [data-ui] .hb-assay-title { font-size: var(--fs-ui); max-width: 30rem; }
.hb [data-ui] .hb-assay-title b { font-weight: 600; }
.hb [data-ui] .hb-readout { background: var(--meso); color: var(--meso-ink); padding: 12px 18px 10px; min-width: 200px; border-radius: 12px; }
.hb [data-ui] .hb-readout .hb-lab { font-size: 14px; }
.hb [data-ui] .hb-readout .hb-val { font-size: 40px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hb [data-ui] .hb-readout .hb-fold { font-size: 14px; margin-top: 6px; min-height: 1.3em; }
.hb [data-ui] svg.hb-chart { display: block; width: 100%; height: auto; margin-top: 16px; overflow: visible; }
.hb [data-ui] .hb-chart .hb-axis { stroke: var(--edge); stroke-width: 1; }
.hb [data-ui] .hb-chart .hb-tick { font-size: 12px; fill: var(--muted); font-family: inherit; }
.hb [data-ui] .hb-chart .hb-curve { fill: none; stroke: var(--meso); stroke-width: 2.5; }
.hb [data-ui] .hb-chart .hb-icline { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; }
.hb [data-ui] .hb-chart .hb-pt { fill: var(--ink); stroke: var(--ink); stroke-width: 1.5; cursor: pointer; transition: fill 160ms var(--ease); }
.hb [data-ui] .hb-chart .hb-pt.hb-off { fill: var(--meso-band); }
.hb [data-ui] .hb-wells { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.hb [data-ui] .hb-wells button {
  font: inherit; font-size: 14px; min-height: 44px; padding: 0 14px; border: 1px solid var(--edge); background: transparent; color: var(--ink);
  border-radius: var(--r-btn); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color 160ms var(--ease), transform 140ms var(--ease);
}
.hb [data-ui] .hb-wells button:hover { background: var(--tint-2); }
.hb [data-ui] .hb-wells button:active { transform: scale(.96); }
.hb [data-ui] .hb-wells button[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; border-style: dashed; }
.hb [data-ui] .hb-hint { font-size: 14px; color: var(--muted); margin-top: 12px; }
.hb .hb-aeda-figure { margin: 48px 0 0; display: grid; gap: 14px; }
.hb [data-ui].hb-ask { background: var(--tint); padding: 22px 24px 24px; border-radius: var(--r-panel); }
.hb [data-ui].hb-ask .hb-who { font-size: 14px; color: var(--aeda); }
.hb [data-ui].hb-ask .hb-q { font-size: var(--fs-lead); line-height: 1.3; margin-top: 6px; }
.hb [data-ui].hb-ask .hb-file { margin-top: 14px; background: var(--tint); padding: 12px 14px; font-size: var(--fs-ui); border-radius: 10px; }
.hb [data-ui].hb-ask .hb-file span { color: var(--muted); }
.hb [data-ui].hb-ask .hb-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hb [data-ui].hb-ask button { font: inherit; font-size: var(--fs-ui); min-height: 48px; padding: 0 20px; border-radius: var(--r-btn); cursor: pointer; transition: transform 140ms var(--ease), background-color 160ms var(--ease); }
.hb [data-ui].hb-ask button:active { transform: scale(.97); }
.hb [data-ui].hb-ask .hb-yes { background: var(--aeda); color: var(--aeda-ink); border: 1px solid var(--aeda); }
.hb [data-ui].hb-ask .hb-alt { background: transparent; color: var(--ink); border: 1px solid var(--edge); }
.hb [data-ui].hb-ask .hb-alt:hover { background: var(--tint-2); }
.hb [data-ui].hb-ask .hb-said { margin-top: 14px; font-size: var(--fs-ui); min-height: 1.4em; color: var(--muted); }
.hb .hb-examples { margin-top: 56px; display: grid; gap: 32px; }
.hb .hb-examples blockquote { margin: 0; font-size: var(--fs-lead); line-height: 1.3; font-style: italic; }
.hb .hb-examples p { margin-top: 10px; }
.hb .hb-band.hb-survey { background: var(--wall); padding-block: 104px; }
.hb .hb-band.hb-survey .hb-sh .hb-sub { color: var(--meso); }
.hb .hb-band.hb-survey .hb-body { max-width: 36rem; }
.hb .hb-survey-facts { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: var(--fs-ui); color: var(--muted); }
.hb .hb-lab-grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hb .hb-lab-card { display: flex; flex-direction: column; height: 100%; background: var(--tint); border-radius: var(--r-panel); overflow: clip; color: inherit; }
.hb .hb-lab-card:hover { text-decoration: none; background: var(--tint-2); }
.hb .hb-lab-card .hb-shot-s { display: block; aspect-ratio: 4 / 3; overflow: clip; }
.hb .hb-lab-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.hb .hb-lab-card:hover img { transform: scale(1.03); }
.hb .hb-lab-card .hb-txt { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 22px; flex: 1; }
.hb .hb-lab-card .hb-tag { font-size: var(--step-small); color: var(--muted); }
.hb .hb-lab-card .hb-nm { font-size: var(--fs-lead); line-height: 1.2; }
.hb .hb-lab-card .hb-what { font-size: var(--fs-ui); color: var(--muted); }
.hb .hb-lab-card .hb-try { margin-top: auto; padding-top: 10px; font-size: var(--fs-ui); font-weight: 500; color: var(--link); }
.hb .hb-lab-more { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; align-items: baseline; }
.hb .hb-band.hb-plain.hb-after-lab { margin-top: var(--gap-section); }
.hb .hb-facts { margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
.hb .hb-facts dt { font-size: var(--step-small); color: var(--muted); }
.hb .hb-facts dd { margin: 2px 0 0; font-size: var(--fs-ui); }
.hb .hb-record { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.hb .hb-record h3 { font-size: var(--fs-ui); font-weight: 600; }
.hb .hb-record ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; font-size: var(--fs-ui); }
.hb .hb-record li { display: flex; justify-content: space-between; gap: 16px; }
.hb .hb-record li span:last-child:not(:first-child) { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb .hb-timeline { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 8px; }
.hb .hb-timeline li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; padding: 28px 0; align-items: baseline; }
.hb .hb-timeline .hb-dt { font-size: var(--fs-heading); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hb .hb-timeline .hb-tt { display: grid; gap: 4px; }
.hb .hb-timeline .hb-tt .hb-area { font-size: var(--step-small); color: var(--muted); }
.hb .hb-timeline .hb-tt a { font-size: var(--fs-lead); line-height: 1.25; }
.hb .hb-timeline .hb-tt .hb-ex { font-size: var(--fs-ui); color: var(--muted); }
.hb .hb-contact { padding-top: var(--gap-section); }
.hb .hb-contact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 64px; align-items: end; }
.hb .hb-contact .hb-portrait { margin: 0; }
.hb .hb-contact .hb-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-img); }
.hb .hb-contact .hb-say { margin-top: 32px; font-size: var(--fs-lead); line-height: 1.3; max-width: 30rem; }
.hb .hb-contact .hb-links { margin-top: 32px; display: grid; gap: 8px; font-size: var(--fs-lead); }
.hb .hb-contact .hb-links a { color: var(--ink); }
.hb .hb-contact .hb-where { margin-top: 20px; font-size: var(--step-small); color: var(--muted); }
.hb footer { padding-block: 96px 32px; }
.hb .hb-foot { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; font-size: var(--step-small); color: var(--muted); }
.hb .hb-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; }
.hb .hb-foot a { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
html.hb-js .hb .hb-wall h1 .hb-ln > span { transform: translateY(105%); animation: hb-line-up 850ms var(--ease) forwards; animation-delay: calc(120ms + var(--i) * 120ms); }
html.hb-js .hb .hb-wall [data-load] { opacity: 0; transform: translateY(14px); animation: hb-load-rise 650ms var(--ease) forwards; animation-delay: var(--d); }
html.hb-js .hb .hb-rise { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); }
html.hb-js .hb .hb-rise.hb-in { opacity: 1; transform: none; }
html.hb-js .hb .hb-ledger li.hb-rise, html.hb-js .hb .hb-timeline li.hb-rise { transition-duration: 450ms, 500ms; }
}

@media (max-width: 900px) {
.hb .hb-works { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.hb .hb-contact-row { grid-template-columns: minmax(0, 1fr) 160px; gap: 32px; }
.hb .hb-lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
.hb { --fs-lead: 1.3125rem; }
.hb .hb-wall { padding-block: 0 88px; }
.hb .hb-wall h1 { margin-top: 56px; }
.hb .hb-wall .hb-lede { margin-top: 24px; }
.hb .hb-works { grid-template-columns: minmax(0, 1fr); margin-top: 48px; gap: 32px; }
.hb .hb-work-link.hb-aeda .hb-pic { max-width: 220px; }
.hb .hb-band { padding-block: 96px; }
.hb .hb-ledger li { grid-template-columns: 1fr auto; min-height: 52px; }
.hb .hb-ledger .hb-kind { grid-column: 1 / -1; grid-row: 2; font-size: 14px; margin-top: -6px; }
.hb .hb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 14px; }
.hb .hb-record { grid-template-columns: 1fr; }
.hb .hb-timeline li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.hb .hb-bar { flex-wrap: wrap; }
.hb .hb-bar nav { width: 100%; gap: 8px 20px; }
.hb .hb-band.hb-survey { padding-block: 72px; }
.hb .hb-lab-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.hb .hb-contact-row { grid-template-columns: minmax(0, 1fr); }
.hb .hb-contact .hb-portrait { width: 160px; order: -1; }
.hb footer { padding-block: 88px 24px; }
.hb .hb-foot { grid-template-columns: 1fr; font-size: 14px; }
.hb .hb-foot nav { justify-content: flex-start; }
.hb [data-ui].hb-assay { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
.hb .hb-work-link img, .hb .hb-work-link svg, .hb .hb-button, .hb a.hb-go::after, .hb a.hb-ext::after, .hb .hb-lab-card img, .hb [data-ui] * { transition: none !important; }
}

@keyframes hb-line-up { to { transform: none; } }
@keyframes hb-load-rise { to { opacity: 1; transform: none; } }
.hb [data-i="0"] { --i: 0; }
.hb [data-i="1"] { --i: 1; }
.hb [data-d="0ms"] { --d: 0ms; }
.hb [data-d="120ms"] { --d: 120ms; }
.hb [data-d="140ms"] { --d: 140ms; }
.hb [data-d="160ms"] { --d: 160ms; }
.hb [data-d="180ms"] { --d: 180ms; }
.hb [data-d="200ms"] { --d: 200ms; }
.hb [data-d="210ms"] { --d: 210ms; }
.hb [data-d="220ms"] { --d: 220ms; }
.hb [data-d="380ms"] { --d: 380ms; }
.hb [data-d="520ms"] { --d: 520ms; }
.hb [data-d="60ms"] { --d: 60ms; }
.hb [data-d="70ms"] { --d: 70ms; }
.hb [data-d="80ms"] { --d: 80ms; }
html.hb-js .hb .hb-nojs { display: none; }