:root { color-scheme: light dark; --paper: light-dark(#f8f7f4, #1a1b18); --ink: light-dark(#292b27, #e8e7e1);
  --muted: light-dark(#54594f, #a8ac9f); --faint: light-dark(#676c61, #8d9285); --rule: light-dark(#dfe1d9, #34362f);
  --underline: light-dark(#adb5a2, #5b6153); --accent: light-dark(#3d5232, #a8c28e); --selection: light-dark(#dce4cf, #3a4730);
  --control: light-dark(#ebebe4, #2b2c28);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; min-height: 100svh; margin: 0;
  padding: 3rem clamp(1.5rem, 7vw, 5rem); place-items: center; }
body.doc { place-items: start center; }
main { width: 100%; max-width: 42rem; }
.mark { display: block; width: fit-content; margin-bottom: 1.75rem; font-size: 2rem; line-height: 1; }
h1 { margin: 0; font-size: clamp(3rem, 9vw, 5.5rem); font-weight: 650; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.doc h1 { font-size: clamp(3rem, 8vw, 4.25rem); letter-spacing: -0.02em; }
.bio { max-width: 32rem; margin: 1.5rem 0 0; color: var(--muted); font-size: clamp(1.125rem, 2.5vw, 1.375rem); line-height: 1.7; text-wrap: pretty; }
.links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: .75rem; }
.text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--muted); font-size: 1rem; line-height: 1.5;
  text-decoration-color: var(--underline); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.strong-link { color: var(--accent); font-weight: 600; }
section { margin-top: 3rem; }
h2 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; line-height: 1.5; }
.list { margin: .5rem 0 0; padding: 0; border-top: 1px solid var(--rule); list-style: none; }
.list li + li { border-top: 1px solid var(--rule); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.125rem 0; color: inherit; text-decoration: none; }
.item-name { font-size: 1.0625rem; font-weight: 600; line-height: 1.5; text-decoration: underline; text-decoration-color: var(--underline);
  text-decoration-thickness: 1px; text-underline-offset: .22em; overflow-wrap: anywhere; }
.item-desc { display: block; margin-top: .25rem; color: var(--muted); font-size: .9375rem; line-height: 1.6; }
.item svg { color: var(--faint); }
.text-link:hover, .text-link:focus-visible, .item:hover .item-name, .item:focus-visible .item-name { color: var(--accent); text-decoration-color: currentColor; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
::selection { color: var(--ink); background: var(--selection); }
.doc nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 3rem; }
.doc .updated { margin: 1rem 0 0; color: var(--muted); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.doc section { margin-top: 2.75rem; }
.doc h2 { margin-bottom: .75rem; font-size: 1.25rem; }
.doc p, .doc li { max-width: 65ch; color: var(--muted); font-size: 1rem; line-height: 1.7; text-wrap: pretty; }
.doc p { margin: .75rem 0 0; }
.doc ul { margin: .75rem 0 0; padding-left: 1.25rem; }
.doc li + li { margin-top: .375rem; }
.doc main a:not(.text-link) { color: var(--accent); text-decoration-color: var(--underline); text-underline-offset: .22em; }
.doc main a:not(.text-link):hover { text-decoration-color: currentColor; }
code { font-size: .9em; }
.doc ol { margin: .75rem 0 0; padding-left: 1.5rem; }
:root:lang(ja) .doc h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); letter-spacing: 0; word-break: auto-phrase; }
:root:lang(ja) .shots figcaption { word-break: auto-phrase; }
.video { position: relative; width: 100%; max-width: 24rem; aspect-ratio: 9 / 16; margin: 2rem auto 0; overflow: hidden;
  border-radius: .5rem; background: var(--control); }
.video button { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; color: black;
  background: none; cursor: pointer; }
.video button img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.video button svg { position: relative; transition: transform .15s; }
.video button:hover svg, .video button:focus-visible svg { transform: scale(1.08); }
.doc .video-note { margin: .75rem auto 0; color: var(--faint); font-size: .875rem; text-align: center; }
.shots { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .5rem; margin: .75rem 0 .5rem; }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; height: auto; border-radius: .375rem; }
.shots figcaption { margin-top: .375rem; color: var(--faint); font-size: .8125rem; line-height: 1.4; }
.doc figure.step { width: 48%; max-width: 12rem; margin: .75rem 0 .5rem; }
.doc figure.step img { display: block; width: 100%; height: auto; border-radius: .375rem; }
.doc ol.steps > li + li { margin-top: 1.5rem; }
.doc figure.wide { margin: .5rem 0; }
.doc figure.wide img { display: block; width: 100%; height: auto; border-radius: .375rem; }
.doc figure.wide figcaption { margin-top: .375rem; color: var(--faint); font-size: .8125rem; line-height: 1.4; }
.doc li + li { margin-top: 1rem; }
.doc details { margin-top: 2.75rem; border-top: 1px solid var(--rule); }
.doc summary { display: flex; align-items: center; min-height: 44px; padding-top: .5rem; color: var(--ink); font-weight: 600; cursor: pointer; }
.doc summary::-webkit-details-marker { display: none; }
.doc summary::after { content: "+"; margin-left: .5rem; color: var(--faint); font-weight: 400; }
.doc details[open] summary::after { content: "‘2"; }
.list-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1.5rem; }
.list-header h2 { margin: 0; }
.note { margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.note a { display: inline-flex; align-items: center; min-height: 44px; margin-left: .25rem; color: var(--accent); text-underline-offset: .22em; }
.note a:hover { text-decoration-thickness: 2px; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1.5rem; margin-top: 3rem;
  padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--faint); font-size: .8125rem; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration-color: var(--underline); text-underline-offset: .22em; }
.site-footer a:hover { color: var(--accent); text-decoration-color: currentColor; }
.theme-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .125rem; line-height: 1.5; }
.theme-switch[hidden] { display: none; }
.theme-switch-label { margin-right: .5rem; }
.theme-switch label { position: relative; display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; }
.theme-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme-switch label span { padding: .25rem .75rem; border-radius: 999px; }
.theme-switch label:hover span { color: var(--ink); }
.theme-switch input:checked + span { color: var(--ink); background: var(--control); }
.theme-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Long-form notes */
:root:has(.company-note) { scrollbar-gutter: stable; }
.company-note { display: block; min-width: 0; padding: 2.5rem clamp(1rem, 4vw, 2rem); }
.company-note main { width: 100%; max-width: 42rem; min-width: 0; margin-inline: auto; }
.company-note article, .company-note .article-body, .company-note .development-body { min-width: 0; }
.company-note .article-body { margin-top: 2rem; }
.company-note .article-body p, .company-note .article-body li { max-width: none; overflow-wrap: anywhere; }
.company-note .article-body > p, .company-note .development-body > p { line-height: 1.9; margin-top: 1.125rem; }
.company-note .article-body h2 { margin: 3.25rem 0 1.25rem; font-size: 1.375rem; line-height: 1.6; text-wrap: balance; }
.company-note .article-body > ol { margin-block: 1.5rem; }
.company-note .article-body strong { color: var(--ink); font-weight: 600; }
.company-note .article-media { margin: 1.75rem 0; min-width: 0; max-width: 100%; }
.company-note .article-media img, .company-note .article-media video { display: block; width: 100%; max-width: 100%; height: auto; border-radius: .375rem; }
.company-note .article-media video { background: var(--control); object-fit: contain; }
.company-note figcaption { margin-top: .625rem; color: var(--faint); font-size: .8125rem; line-height: 1.75; overflow-wrap: anywhere; }
.company-note .image-zoom { display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: inherit; cursor: zoom-in; }
.company-note .image-zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.company-note .article-table { margin-block: 1.75rem; overflow-x: auto; }
.company-note table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.7; }
.company-note th, .company-note td { padding: .75rem 0; text-align: left; border-bottom: 1px solid var(--rule); }
.company-note th { color: var(--ink); font-weight: 600; }
.company-note th:last-child, .company-note td:last-child { padding-left: 1rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.company-note .development { margin-block: 2.75rem; border-bottom: 1px solid var(--rule); overflow-anchor: none; }
.company-note .development summary { padding-block: 1rem; line-height: 1.7; gap: 1rem; }
.company-note .development summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.company-note .development summary::after { margin-left: auto; content: "+"; width: 1em; text-align: center; flex: none; }
.company-note .development[open] summary::after { content: "−"; }
.company-note .development-body { padding-bottom: 1.75rem; }
.company-note .development-close { display: block; min-height: 44px; margin: 1.5rem 0 0 auto; padding: .5rem 0 .5rem 1rem; border: 0; background: transparent; color: var(--accent); font: inherit; font-size: .875rem; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
.company-note .development-close[hidden] { display: none; }
.company-note .development-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.company-note .article-break { margin: 3rem 0 2rem; border: 0; border-top: 1px solid var(--rule); }
.company-note .ux-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
.company-note .ux-grid figure { margin: 0; min-width: 0; }
.company-note .ux-grid .image-zoom { display: flex; align-items: center; aspect-ratio: 8 / 7; background: var(--control); }
.company-note .ux-grid img { object-fit: contain; }
.company-note .ux-grid figcaption strong { display: block; margin-bottom: .125rem; }
.company-note .tool-references { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1.5rem; border-block: 1px solid var(--rule); }
.company-note .tool-references figure { display: flex; align-items: center; gap: .75rem; min-width: 0; margin: 0; padding-block: 1rem; }
.company-note .tool-references .image-zoom { width: 3.5rem; flex: none; }
.company-note .tool-references img { display: block; width: 100%; height: auto; }
.company-note .tool-references figcaption { margin: 0; }
.company-note .tool-references figcaption a { font-size: .9375rem; font-weight: 600; }
.company-note .tool-references figcaption span { display: block; margin-top: .125rem; }
.company-note .architecture { width: 100%; margin: 2.5rem 0; }
.company-note .architecture-flow { display: grid; grid-template-columns: minmax(0, 1fr) 1.25rem minmax(0, 1fr) 1.25rem minmax(0, 1fr); align-items: stretch; gap: .5rem; }
.company-note .architecture-node { display: grid; grid-template-rows: 1.5rem minmax(2.75rem, auto) 2.5rem; align-items: center; gap: .375rem; min-width: 0; padding: 1rem .625rem; border: 1px solid var(--rule); border-radius: .375rem; text-align: center; }
.company-note .architecture-label { font-size: .9375rem; line-height: 1.5; }
.company-note .architecture-description { color: var(--muted); font-size: .8125rem; line-height: 1.65; text-wrap: balance; }
.company-note .architecture-outcomes { display: grid; grid-row: 2 / 4; align-self: start; justify-content: center; gap: .25rem; text-align: left; line-height: 1.5; }
.company-note .architecture-phrase { display: inline-flex; align-items: center; gap: .375rem; }
.company-note .architecture-phrase svg { display: block; flex: none; width: 1rem; height: 1rem; color: var(--accent); stroke-width: 1.6; }
.company-note .architecture-scope { border-color: color-mix(in srgb, var(--accent) 65%, var(--rule)); background: color-mix(in srgb, var(--paper) 97%, var(--accent)); }
.company-note .architecture-scope > .architecture-label { color: var(--accent); }
.company-note .architecture-powered { color: var(--faint); font-size: .75rem; line-height: 1.6; text-wrap: balance; }
.company-note .architecture-handoff { display: grid; place-items: center; color: var(--accent); font-size: 1.25rem; line-height: 1; }
.company-note .video-player { position: relative; width: 100%; min-width: 0; }
.company-note .video-toggle { position: absolute; inset: 0 0 3.5rem; display: grid; place-items: center; width: 100%; padding: 0; border: 0; border-radius: .375rem; background: transparent; color: var(--ink); cursor: pointer; }
.company-note .video-toggle[hidden] { display: none; }
.company-note .video-toggle svg { box-sizing: content-box; padding: .5rem; border: 1px solid var(--rule); border-radius: 50%; background: color-mix(in srgb, var(--paper) 90%, transparent); }
.company-note .video-player[data-playing="true"] .video-toggle:not(:focus-visible) svg { opacity: 0; }
.company-note .video-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.company-note .lyric-embed { max-width: 20rem; margin-inline: auto; }
.company-note .lyric-player { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: .375rem; background: var(--control); }
.company-note .lyric-player img, .company-note .lyric-player iframe { width: 100%; height: 100%; position: absolute; inset: 0; border: 0; object-fit: cover; }
.company-note .lyric-play { display: block; position: absolute; inset: 0; }
.company-note .lyric-play:focus-visible { outline-offset: -4px; }
.company-note .lyric-play-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 2rem; padding: .65rem 1.25rem; white-space: nowrap; }
.image-view-open { overflow: hidden; }
.company-note .image-lightbox { position: fixed; max-width: calc(100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); width: max-content; margin: auto; padding: .75rem; border: 1px solid var(--rule); border-radius: .5rem; color: var(--ink); background: var(--paper); box-shadow: 0 1rem 4rem color-mix(in srgb, var(--ink) 20%, transparent); }
.company-note .image-lightbox[open] { display: grid; gap: .5rem; }
.company-note .image-lightbox::backdrop { background: color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter: blur(5px); }
.company-note .image-lightbox form { display: flex; justify-content: flex-end; margin: 0; }
.company-note .lightbox-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; }
.company-note .lightbox-scale { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--control); color: var(--ink); cursor: pointer; }
.company-note .lightbox-stage { min-width: 0; max-width: 100%; max-height: calc(100dvh - 10rem); overflow: auto; overscroll-behavior: contain; }
.company-note .lightbox-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; font: inherit; font-size: 1.75rem; color: var(--ink); background: var(--control); cursor: pointer; }
.company-note .image-lightbox img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 10rem); min-height: 0; margin-inline: auto; object-fit: contain; cursor: zoom-in; }
.company-note .image-lightbox.is-zoomed { width: calc(100vw - 1.5rem); }
.company-note .image-lightbox.is-zoomed .lightbox-stage { height: calc(100dvh - 10rem); }
.company-note .image-lightbox.is-zoomed img { width: var(--image-width); max-width: none; max-height: none; margin: 0; cursor: zoom-out; }
.company-note .image-lightbox.is-zoomed .zoom-plus { display: none; }
.company-note .image-lightbox p { max-width: 100%; margin: .25rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
@media (min-width: 72rem) {
  .company-note { padding-block: 3rem; }
}
@media (max-width: 44rem) {
  .company-note .architecture-flow { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .company-note .architecture-node { width: 100%; max-width: 24rem; grid-template-rows: 1.5rem minmax(2.75rem, auto) 1.25rem; gap: .25rem; padding-block: .75rem; }
  .company-note .architecture-handoff { height: 1.25rem; transform: rotate(90deg); }
}
@media (max-width: 38rem) {
  .company-note h1 { font-size: clamp(2rem, 7.5vw, 2.5rem); line-height: 1.25; }
  :root:lang(ja) .company-note h1 { font-size: clamp(1.875rem, 7.5vw, 2.5rem); line-height: 1.35; }
  .company-note nav { gap: .25rem 1rem; margin-bottom: 2rem; }
  .company-note .article-body { margin-top: 1.75rem; }
  .company-note .article-body h2 { margin-top: 2.75rem; font-size: 1.1875rem; }
  .company-note .article-body > p, .company-note .development-body > p { font-size: .9375rem; line-height: 1.9; }
  .company-note .ux-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .company-note .ux-grid .image-zoom { aspect-ratio: auto; }
  .company-note .ux-grid figcaption strong { display: inline; margin-right: .5rem; }
  .company-note .tool-references { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .company-note .tool-references figure + figure { border-top: 1px solid var(--rule); }
  .company-note .site-footer { gap: .25rem 1rem; }
}