/* A short, skippable composition; the original page remains complete underneath. */
.site-intro { display: none; position: fixed; inset: 0; z-index: 300; padding: 32px 0; background: var(--canvas); overflow: auto; }
.site-intro[hidden] { display: none !important; }
html.intro-pending, html.intro-pending body { overflow: hidden; overscroll-behavior: none; }
html.intro-pending .site-intro { display: grid; place-items: center; }
.intro-frame { --intro-ink: #25251f; --intro-sheet: #f5f0e6; width: var(--content-width); max-width: 1280px; border: var(--rule) solid var(--line); background: var(--paper); }
.intro-header { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 88px; padding: 18px 30px; border-bottom: var(--rule) solid var(--line); }
.intro-skip, .intro-replay { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 8px 0; color: var(--text); background: transparent; border: 0; font: 600 13px/1.5 var(--body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.intro-skip { min-width: 96px; }
.intro-skip:hover, .intro-replay:hover { text-decoration-color: var(--red); }
.intro-skip span { font-size: 22px; font-weight: 400; }
.intro-replay[hidden] { display: none; }
.intro-body { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); min-height: 490px; }
.intro-copy { display: flex; flex-direction: column; justify-content: center; padding: 48px; border-right: var(--rule) solid var(--line); }
.intro-title { font-family: var(--display); line-height: .97; letter-spacing: -.045em; margin-bottom: 30px; }
.intro-title__hello { display: block; font-size: clamp(30px, 3.2vw, 44px); margin-bottom: 14px; }
.intro-title__name { display: block; font-size: clamp(64px, 7.8vw, 112px); white-space: nowrap; }
.intro-subtitle { font-size: 15px; line-height: 1.9; margin: 0; }
.intro-art { --intro-art-height: 470px; position: relative; align-self: center; width: 100%; height: var(--intro-art-height); overflow: clip; }
.intro-tree { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-branch { stroke: var(--text); stroke-width: 4; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.intro-node { position: absolute; display: flex; justify-content: center; align-items: center; width: 22%; min-height: 48px; padding: 9px 10px; border: 3px solid var(--text); background: var(--paper); font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; transform: translate(-50%, -50%); }
.intro-node--root { left: 50%; top: 8.333%; width: 25%; background: var(--red); border-color: var(--intro-ink); color: var(--on-color); }
.intro-node--research { left: 20%; top: 30%; background: var(--yellow); border-color: var(--intro-ink); color: var(--on-yellow); }
.intro-node--build { left: 80%; top: 30%; background: var(--blue); border-color: var(--intro-ink); color: var(--on-color); }
.intro-node--knowledge { left: 13%; top: 62.5%; width: 23%; }
.intro-node--cloud { left: 87%; top: 62.5%; width: 23%; }
.intro-node--agents { left: 26%; top: 88.333%; width: 24%; }
.intro-node--products { left: 74%; top: 88.333%; width: 24%; }
.intro-mascot { position: absolute; width: min(49%, calc(var(--intro-art-height) * .64)); left: 50%; top: 21%; transform: translateX(-50%); }
.intro-capybara { display: block; width: 100%; height: auto; overflow: visible; }
.intro-footer { display: grid; grid-template-columns: 2.2fr .6fr 1fr 1.1fr; gap: var(--rule); height: 40px; background: var(--line); border-top: var(--rule) solid var(--line); overflow: clip; }
.intro-footer span { background: var(--paper); transform-origin: top; }
.intro-footer span:nth-child(2) { background: var(--red); }
.intro-footer span:nth-child(3) { background: var(--yellow); }
.intro-footer span:nth-child(4) { background: var(--blue); }
html.intro-running .intro-title { animation: intro-copy-enter 650ms cubic-bezier(.16, 1, .3, 1) both; }
html.intro-running .intro-subtitle { animation: intro-copy-enter 650ms cubic-bezier(.16, 1, .3, 1) 180ms both; }
html.intro-running .intro-branch { stroke-dasharray: 1; animation: intro-line-draw 650ms ease-out 180ms both; }
html.intro-running .intro-branch--right { animation-delay: 260ms; }
html.intro-running .intro-branch--second { animation-duration: 750ms; animation-delay: 780ms; }
html.intro-running .intro-branch--second.intro-branch--right { animation-delay: 860ms; }
html.intro-running .intro-node { animation: intro-node-open 420ms cubic-bezier(.16, 1, .3, 1) both; }
html.intro-running .intro-node--root { animation-delay: 50ms; }
html.intro-running .intro-node--research { animation-delay: 600ms; }
html.intro-running .intro-node--build { animation-delay: 680ms; }
html.intro-running .intro-node--knowledge { animation-delay: 1150ms; }
html.intro-running .intro-node--cloud { animation-delay: 1230ms; }
html.intro-running .intro-node--agents { animation-delay: 1420ms; }
html.intro-running .intro-node--products { animation-delay: 1500ms; }
html.intro-running .intro-mascot { animation: intro-mascot-enter 620ms cubic-bezier(.16, 1, .3, 1) 500ms both; }
html.intro-running .intro-capybara__page { transform-box: view-box; transform-origin: 180px 263px; animation: intro-page-turn 1050ms cubic-bezier(.4, 0, .2, 1) 750ms both; }
html.intro-running .intro-capybara__page--second { animation-delay: 1750ms; }
html.intro-running .intro-capybara__eyes { transform-box: view-box; transform-origin: 204px 112px; animation: intro-reading-blink 2600ms linear 300ms both; }
html.intro-running .intro-capybara__paw--right { transform-box: view-box; transform-origin: 299px 252px; animation: intro-reading-paw 1100ms ease-in-out 750ms 2 both; }
html.intro-running .intro-footer span { animation: intro-panel-open 600ms cubic-bezier(.16, 1, .3, 1) 150ms both; }
html.intro-running .intro-footer span:nth-child(2) { animation-delay: 280ms; }
html.intro-running .intro-footer span:nth-child(3) { animation-delay: 410ms; }
html.intro-running .intro-footer span:nth-child(4) { animation-delay: 540ms; }
html.intro-leaving .site-intro { pointer-events: none; animation: intro-curtain-exit 420ms cubic-bezier(.4, 0, .2, 1) both; }
@keyframes intro-copy-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-line-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes intro-node-open { from { opacity: 0; transform: translate(-50%, -65%) scaleY(.7); } to { opacity: 1; transform: translate(-50%, -50%) scaleY(1); } }
@keyframes intro-mascot-enter { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes intro-panel-open { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes intro-page-turn {
  0% { opacity: 1; transform: perspective(500px) rotateY(0deg); }
  12% { opacity: 1; transform: perspective(500px) rotateY(-10deg); }
  84% { opacity: 1; transform: perspective(500px) rotateY(-172deg); }
  100% { opacity: 0; transform: perspective(500px) rotateY(-180deg); }
}
@keyframes intro-reading-blink { 0%, 25%, 32%, 78%, 85%, 100% { transform: scaleY(1); } 28%, 81% { transform: scaleY(.1); } }
@keyframes intro-reading-paw { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes intro-curtain-exit { to { opacity: 0; transform: translateY(-24px); } }
@media (max-width: 1100px) {
  .intro-copy { padding: 34px; }
  .intro-art { --intro-art-height: 430px; }
  .intro-body { min-height: 450px; }
  .intro-node { padding-inline: 6px; }
}
@media (max-width: 769px) {
  .site-intro { padding: 14px 0; }
  .intro-frame { width: calc(100% - 28px); }
  .intro-header { min-height: 72px; padding: 12px 18px; gap: 12px; }
  .intro-header .site-brand { font-size: 25px; }
  .intro-skip { min-width: 80px; gap: 5px; }
  .intro-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .intro-copy { padding: 24px 26px 22px; border-right: 0; border-bottom: var(--rule) solid var(--line); }
  .intro-title { margin-bottom: 16px; }
  .intro-title__hello { font-size: 30px; margin-bottom: 8px; }
  .intro-title__name { font-size: clamp(58px, 11vw, 78px); }
  .intro-subtitle { font-size: 13px; line-height: 1.7; }
  .intro-subtitle br { display: none; }
  .intro-subtitle br::after { content: ' '; }
  .intro-art { --intro-art-height: clamp(300px, 40vh, 440px); }
  .intro-node { min-height: 40px; padding: 6px 4px; font-size: 13px; border-width: 2px; }
  .intro-node--root { width: 31%; }
  .intro-node--research, .intro-node--build { width: 27%; }
  .intro-node--knowledge, .intro-node--cloud { width: 25%; }
  .intro-node--agents, .intro-node--products { width: 28%; }
  .intro-mascot { width: min(60%, calc(var(--intro-art-height) * .64)); }
  .intro-footer { height: 28px; }
}
@media (max-width: 374px) {
  .intro-header { padding-inline: 12px; }
  .intro-header .site-brand { font-size: 22px; gap: 5px; }
  .intro-copy { padding-inline: 20px; }
  .intro-title__name { font-size: 55px; }
  .intro-art { --intro-art-height: 300px; }
  .intro-node { font-size: 12px; }
}
@media (max-height: 640px) and (min-width: 770px) {
  .site-intro { padding-block: 16px; }
  .intro-header { min-height: 64px; padding-block: 10px; }
  .intro-body { min-height: 350px; }
  .intro-art { --intro-art-height: 350px; }
  .intro-copy { padding-block: 24px; }
  .intro-title__name { font-size: 80px; }
  .intro-footer { height: 28px; }
}
@media (max-height: 680px) and (max-width: 769px) {
  .intro-header { min-height: 60px; padding-block: 8px; }
  .intro-copy { padding-block: 18px; }
  .intro-title { margin-bottom: 12px; }
  .intro-title__hello { font-size: 26px; }
  .intro-title__name { font-size: 52px; }
  .intro-art { --intro-art-height: 250px; }
  .intro-node { min-height: 36px; }
  .intro-footer { height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-intro, html.intro-pending .site-intro { display: none; }
  .intro-replay { display: none; }
  html.intro-pending, html.intro-pending body { overflow: auto; }
}
@media print { .site-intro, .intro-replay { display: none !important; } }