/* Gallery edition. Homepage-only art direction; shared writing styles stay in style.css. */
/* 强调色（冷蓝）已并入 style.css 的 :root，文章页与 404 页同色 */
.stage { min-height: 760px; height: 100svh; }
.stage::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg,var(--bg),transparent 65%),linear-gradient(0deg,var(--bg),transparent 30%); opacity: .65; }
.stage__grid { opacity: .36; }
.stage__tr { width: min(29vw,360px); top: 7.5rem; }
.stage__tl { top: 7.5rem; }
.stage__tagline { font: 11px/1.7 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.stage__tagline br { display: none; }
.stage__tagline::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); }
.stage__bio { color: var(--muted); }
.stage__title, html:not([data-lang="en"]) .stage__title { bottom: 10rem; font-size: clamp(70px,9vw,142px); line-height: 1.08; font-weight: 500; letter-spacing: -.06em; }
.stage__line--2, html[data-lang="en"] .stage__line--2, html[data-lang="en"] .stage__line--3 { padding-left: 0; }
.stage__line--2 { color: var(--accent); }
.stage__scene { left: 20%; transform: translateY(var(--scene-shift,0px)); }
.sticker { display: none; }
.stage__state { bottom: 6rem; }
.stage__orbit { position: absolute; width: 46vw; aspect-ratio: 1; right: 1%; top: 24%; z-index: 1; border: 1px solid var(--line-strong); border-radius: 50%; opacity: .36; transform: rotate(-25deg) scaleY(.62); pointer-events: none; }
.stage__orbit::before, .stage__orbit::after { content: ''; position: absolute; inset: 9%; border: 1px solid var(--line); border-radius: 50%; }
.stage__orbit::after { inset: -12%; border-style: dashed; animation: orbit-turn 100s linear infinite; }
@keyframes orbit-turn { to { rotate: 360deg; } }
.stage__index { position: absolute; left: var(--gutter); bottom: 6rem; z-index: 4; display: flex; align-items: center; gap: 1.5rem; font: 10px var(--font-mono); letter-spacing: .14em; color: var(--muted); }
.stage__index::before { content: ''; width: 48px; height: 1px; background: var(--line-strong); }
.stage__explore { position: absolute; z-index: 5; right: var(--gutter); bottom: 9rem; display: flex; align-items: center; gap: 1rem; font: 11px var(--font-mono); }
.stage__explore b { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line-strong); border-radius: 50%; font-size: 20px; font-weight: 400; transition: background .3s,transform .3s; }
.stage__explore:hover { text-decoration: none; }
.stage__explore:hover b { background: var(--accent-soft); transform: translateY(5px); }
.hud-bottom { font-size: 10px; padding-block: .8rem; background: color-mix(in srgb,var(--bg) 90%,transparent); border-top: 1px solid var(--line); backdrop-filter: blur(14px); }
.hud-bottom .lang button { font-size: 11px; min-height: 28px; }
.hud__globe { width: 16px; height: 16px; }
.marquee { padding-block: 1.3rem; }
.section { padding-block: clamp(5rem,10vw,9rem); }
.section__head { margin-bottom: 3.5rem; }
.h2 { line-height: 1.2; letter-spacing: -.045em; }
.about__side { position: sticky; top: 7rem; align-self: start; }
.about__main .prose { line-height: 1.95; color: var(--muted); }
.about__main .prose p:first-child { color: var(--ink); font-size: 1.1em; }
.now { border: 1px solid var(--line); padding: 1.75rem; background: var(--bg-2); }
.projects { gap: 1.25rem; counter-reset: work; }
.project, .project:nth-child(1) { grid-column: span 6; padding: clamp(1.25rem,2.5vw,2.5rem); border: 1px solid var(--line); background: linear-gradient(145deg,var(--bg-2),var(--bg)); min-height: 340px; overflow: hidden; }
.project::after { counter-increment: work; content: counter(work,decimal-leading-zero) ' /'; display: block; order: -1; margin-bottom: 2.5rem; color: var(--faint); font: 12px var(--font-mono); letter-spacing: .15em; }
.project .h3, .project:nth-child(1) .h3 { font-size: clamp(24px,2.3vw,34px); line-height: 1.3; }
.project:nth-child(1) .project__body p { font-size: 15px; }
.project__meta { gap: 1rem; flex-wrap: wrap; }
.project__foot { padding-top: 1.25rem; border-top: 1px solid var(--line); gap: 1rem; }
.project__foot span:last-child { flex-shrink: 0; }
.project:hover .h3 { text-decoration: none; color: var(--accent); }
.project:hover { border-color: var(--line-strong); }
.post { transition: background .3s, border-color .3s; }
.post:hover { background: var(--accent-soft); }
.cta__title { letter-spacing: -.055em; }
.btn { border-radius: 999px; padding: .85rem 1.5rem; }
.reveal { transform: translateY(24px); transition-duration: .85s; }
@media (max-width: 900px) { .stage__tr { width: 40vw; } .stage__title, html:not([data-lang="en"]) .stage__title { font-size: 11vw; } .about__side { position: static; } }
@media (max-width: 720px) {
  .stage { height: auto; min-height: 100svh; padding-bottom: 10rem; }
  .stage__tl { top: 6rem; }
  .stage__tr { width: auto; margin-top: 9rem; }
  .stage__title, html:not([data-lang="en"]) .stage__title { font-size: clamp(64px,17vw,108px); margin-top: 3rem; }
  .stage__scene { left: 5%; top: 15rem; opacity: .6; }
  .stage__orbit { width: 90vw; top: 40%; right: -30%; }
  .stage__explore { bottom: 4.5rem; }
  .stage__index { bottom: 5.5rem; gap: .5rem; font-size: 9px; }
  .stage__index::before { width: 18px; }
  .project, .project:nth-child(1) { grid-column: 1/-1; min-height: 300px; }
  .now { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stage__line > span, .reveal { transform: none !important; opacity: 1 !important; }
  .stage__scene { transform: none; }
}
html[data-static] .stage__orbit::after { animation: none; }
/* Keep the mobile caption and scroll target on separate baselines. */
@media (max-width: 720px) {
  .stage__index { bottom: 8.5rem; }
  .stage__bio { color: color-mix(in srgb,var(--ink) 78%,var(--bg)); }
  .stage__scene { left: 25%; opacity: .42; }
}
@media (max-width: 720px) {
  .stage__tr, .stage__title { position: relative; inset: auto; z-index: 4; }
}
@media (max-width: 720px) {
  html:not([data-lang="en"]) .stage__title { inset: auto; }
}

/* Signature moments: greeting, portrait, conviction and engineering studies. */
.stage__scene { top: 3.5rem; }
.stage__bg { filter: saturate(.5); }
.stage__greet { position: absolute; right: 18%; bottom: 26%; z-index: 5; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 40px; background: color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter: blur(14px); font: 11px var(--font-mono); cursor: pointer; transition: border-color .3s,background .3s; }
.stage__greet:hover, .stage__greet:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.stage__greet-icon { color: var(--accent); font-size: 23px; line-height: 1; transition: rotate .8s var(--ease); }
.stage__greet:hover .stage__greet-icon { rotate: 180deg; }
.stage.is-greeting .stage__orbit { animation: greeting-ring 1.8s var(--ease); }
@keyframes greeting-ring { 40% { opacity: .8; scale: 1.12; } }
.portrait { width: 144px; margin: 2.25rem 0 1.5rem; }
.portrait img { width: 100%; height: 164px; object-fit: cover; object-position: 50% 35%; filter: grayscale(1); border-radius: 2px; transition: filter .6s, border-radius .6s,transform .6s var(--ease); }
.portrait:hover img { filter: grayscale(0); border-radius: 50% 50% 2px 2px; transform: rotate(-3deg); }
.portrait figcaption { display: flex; justify-content: space-between; margin-top: .7rem; font: 9px var(--font-mono); letter-spacing: .06em; color: var(--muted); }
/* The weld: a material study of three layers and their shared feedback loop. */
.conviction { --weld-heat: #ffb785; scroll-margin-top: 65px; padding: clamp(4rem,8vw,7rem) 0; position: relative; overflow: hidden; border-block: 1px solid #ffffff12; background: #11171d; color: #e9ece8; }
.conviction::before { content: ''; position: absolute; width: 600px; height: 600px; right: -100px; top: 0; background: radial-gradient(ellipse,#a9603010,transparent 65%); pointer-events: none; }
.conviction__grid { display: grid; grid-template-columns: .95fr 1.1fr; gap: 6vw; align-items: center; }
.conviction__copy > .eyebrow { font: 10px var(--font-mono); color: #8d9da9; letter-spacing: .13em; margin-bottom: 34px; }
.conviction__title { font-size: clamp(38px,4.8vw,70px); font-weight: 500; line-height: 1.24; letter-spacing: -.06em; margin: 0; }
.conviction__ink { color: var(--weld-heat); position: relative; }
.conviction__ink::after { content: ''; position: absolute; left: 0; right: .1em; bottom: -.08em; height: 1px; background: linear-gradient(90deg,transparent,var(--weld-heat),transparent); }
.conviction__intro { margin: 1.8rem 0 2.2rem; color: #a6b0b7; font-size: 14px; line-height: 1.9; }
.conviction__copy .link-arrow { color: #e9ece8; font-size: 12px; border-bottom: 1px solid #68757e; padding-bottom: 8px; }
.conviction__copy .link-arrow:hover { color: var(--weld-heat); }
.weld { min-width: 0; position: relative; }
.weld__stage { position: relative; background: radial-gradient(ellipse at 52% 47%,#33445140,transparent 65%); }
.weld__topline { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #7c8a9338; padding-top: 13px; color: #91a0aa; font: 9px/1.6 var(--font-mono); letter-spacing: .1em; }
.weld__status { color: var(--weld-heat); display: flex; align-items: center; gap: 7px; }
.weld__status::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.weld__diagram { position: relative; perspective: 900px; }
.weld__diagram svg { position: relative; display: block; width: 100%; overflow: visible; transform: rotateX(var(--weld-tilt-x,0deg)) rotateY(var(--weld-tilt-y,0deg)); transition: transform .35s ease-out; }
.weld__construction { stroke: #8da4b2; stroke-width: .6; stroke-dasharray: 2 8; opacity: .18; }
.weld__plate { transition: transform .85s cubic-bezier(.2,.8,.2,1),opacity .5s; cursor: pointer; }
.weld__plate--semantics { transform: translateY(-55px); }
.weld__plate--capability { transform: translateY(55px); }
.weld__surface { fill: url(#weld-surface); stroke: url(#weld-edge); stroke-width: 1; transition: stroke .5s,fill .5s; }
.weld__thickness { fill: #17232e; stroke: #738b9e55; stroke-width: .7; }
.weld__trace { stroke: #a4bac72b; stroke-width: .8; }
.weld__glyph { stroke: #a8c0cf; stroke-width: 1.1; }
.weld__plate-label { fill: #b5c5cf; font: 10px var(--font-mono); letter-spacing: .15em; }
[data-focus="semantics"] .weld__plate--semantics .weld__surface, [data-focus="data"] .weld__plate--data .weld__surface, [data-focus="capability"] .weld__plate--capability .weld__surface { stroke: var(--weld-heat); }
[data-focus="semantics"] .weld__plate--semantics .weld__trace, [data-focus="data"] .weld__plate--data .weld__trace, [data-focus="capability"] .weld__plate--capability .weld__trace { stroke: #ffb78580; }
.weld__plate:hover .weld__surface { fill: #71839155; }
.weld__connection { transition: opacity .4s; pointer-events: none; }
.weld__seam-glow { stroke: #ff9861; stroke-width: 12; opacity: .24; filter: url(#weld-glow); }
.weld__seam { stroke: url(#weld-copper); stroke-width: 1.8; opacity: .8; }
.weld__signal { stroke: #fff3db; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 170; animation: weld-flow 8s linear infinite; animation-play-state: paused; }
.conviction.is-visible .weld__signal { animation-play-state: running; }
.weld__connection circle { fill: #fff3db; stroke: #ffb785; stroke-width: 3; }
.weld__annotation { fill: #c58e6c; font: 9px var(--font-mono); letter-spacing: .08em; transition: opacity .4s; }
.weld__annotation-line { stroke: #c58e6c66; stroke-width: .6; transition: opacity .4s; }
.weld__ghost { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%) translateY(10px); font: 400 24px var(--font-mono); letter-spacing: .2em; color: #90a1ac; opacity: 0; transition: opacity .5s,transform .5s; pointer-events: none; }
.weld__experiment { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: -8px; padding-bottom: 23px; }
.weld__experiment p { color: #c3c5c4; font-size: 12px; line-height: 1.6; margin: 0; }
.weld__toggle { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 40px; flex-shrink: 0; padding: 8px 14px; color: #f3c9aa; background: #b96e3612; border: 1px solid #b88e6e66; border-radius: 2px; font: 12px var(--font-sans); cursor: pointer; transition: background .25s; }
.weld__toggle:hover { background: #b96e3633; }
.weld__toggle-icon { font-size: 16px; }
[data-connected="false"] .weld__plate--semantics { transform: translate(-17px,-104px); }
[data-connected="false"] .weld__plate--capability { transform: translate(17px,104px); }
[data-connected="false"] .weld__connection, [data-connected="false"] .weld__annotation, [data-connected="false"] .weld__annotation-line { opacity: 0; }
[data-connected="false"] .weld__signal { animation-play-state: paused; }
[data-connected="false"] .weld__ghost { opacity: .65; transform: translateX(-50%) translateY(12px); }
[data-connected="false"] .weld__status { color: #95a1ab; }
.weld__controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid #7c8a9338; }
.weld__controls button { display: flex; align-items: center; gap: 10px; padding: 16px 8px; text-align: left; background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; font: 12px var(--font-sans); color: #9daab4; transition: color .3s,background .3s; }
.weld__controls button + button { border-left: 1px solid #7c8a9320; }
.weld__controls small { font: 9px var(--font-mono); color: #72818d; }
.weld__controls button[aria-pressed="true"] { color: var(--weld-heat); border-bottom-color: var(--weld-heat); background: #c68b5c0b; }
.weld__controls button:hover { color: #ffe5d0; background: #c68b5c12; }
.weld button:focus-visible, .conviction a:focus-visible { outline: 2px solid var(--weld-heat); outline-offset: 3px; }
.weld__description { min-height: 6rem; padding-top: 16px; font-size: 12px; line-height: 1.85; color: #a9b4bc; }
.weld__description p { margin: 0; }
.weld__description p:not([hidden]) { animation: detailsin .4s var(--ease); }
@keyframes weld-flow { to { stroke-dashoffset: -720; } }
@media (prefers-reduced-motion: reduce) { .weld *, .weld *::before { animation: none !important; transition: none !important; } }
.project { border-radius: 3px; }
.project::after { display: none; }
.project__thumb:has(img) { display: block; position: relative; height: 260px; margin: calc(-1 * clamp(1.25rem,2.5vw,2.5rem)); margin-bottom: 1.5rem; overflow: hidden; border-bottom: 1px solid var(--line); background: #06070b; }
.project__thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.4s var(--ease), filter .6s; }
.project:hover .project__thumb > img, .project:focus-visible .project__thumb > img { transform: scale(1.05); }
/* 每个项目一个天体代号，叠在封面上，和 OpenAI 模型卡片的 Astra / Sol 同一手法 */
.project__codename { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: clamp(44px, 5.2vw, 72px); letter-spacing: -.045em; line-height: 1; text-shadow: 0 2px 24px rgba(0,0,0,.45); pointer-events: none; transition: opacity .5s, transform 1.4s var(--ease); }
.project:hover .project__codename, .project:focus-visible .project__codename { transform: scale(1.02); }
.cta { position: relative; isolation: isolate; padding-top: 2rem; }
.cta__signature { position: absolute; right: 0; top: -4rem; z-index: -1; font-size: clamp(120px,25vw,360px); line-height: 1; letter-spacing: -.09em; font-weight: 600; color: var(--line); pointer-events: none; }
.cta__star { display: inline-block; font-size: .7em; vertical-align: .05em; animation: orbit-turn 60s linear infinite; animation-play-state: paused; }
.cta.is-in .cta__star { animation-play-state: running; }
@media (max-width: 900px) { .conviction__grid { gap: 2rem; } }
@media (max-width: 720px) {
  .stage__scene { top: 15rem; }
  .stage { padding-bottom: 12rem; }
  .stage__greet { position: relative; inset: auto; margin: 1.5rem var(--gutter) 0; width: fit-content; }
  .conviction__grid { grid-template-columns: 1fr; }
  .conviction__title { font-size: clamp(42px,10vw,64px); }
  .weld { max-width: 480px; width: 100%; margin: 0 auto; }
  .weld__description { min-height: 5.5rem; }
  .portrait { width: 112px; }
  .portrait img { height: 128px; }
  .project__thumb:has(img) { height: 200px; }
  .project__codename { font-size: 40px; }
  .cta__signature { top: -1rem; }
}
html[data-static] *, html[data-static] *::before, html[data-static] *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .conviction__ink { --belief-fill: 100%; }
  .project:hover .project__thumb > img, .project:hover .project__codename, .portrait:hover img { transform: none; }
}
/* Release the entrance transform after it finishes so pointer tilt can take over. */
.project { animation-fill-mode: backwards; }

/* Visible identity and business context on every viewport. */
.stage__credential { margin: .4rem 0 0 16px; font: 11px/1.7 var(--font-mono); letter-spacing: .05em; color: var(--muted); }
.stage__tagline { color: var(--ink); letter-spacing: .06em; }
.project__cover-label { position: absolute; inset: auto 0 0; padding: 2.5rem 1.5rem 1.15rem; color: #fff; background: linear-gradient(transparent,rgba(4,7,14,.88)); font: 13px/1.5 var(--font-sans); letter-spacing: .06em; text-align: left; pointer-events: none; }
@media (max-width: 720px) {
  .stage__title, html:not([data-lang="en"]) .stage__title { font-size: clamp(44px,16vw,88px); }
  .stage__line { white-space: nowrap; }
  .stage__tr { margin-top: 10.5rem; }
  .project__cover-label { padding: 2rem 1.25rem 1rem; font-size: 12px; }
}

/* Personal identity first; the glass greeting becomes a supporting object. */
.stage .stage__name, html:not([data-lang="en"]) .stage .stage__name { font-size: clamp(80px,10vw,154px); line-height: .95; letter-spacing: -.07em; font-weight: 500; bottom: 15rem; right: 42%; }
.stage__name-dot { color: var(--accent); }
.stage__name .stage__line { padding-block: .035em; }
.stage__name .stage__line:nth-child(2) > span { animation-delay: .12s; }
.stage__purpose { position: absolute; z-index: 4; left: var(--gutter); bottom: 10.5rem; font-size: clamp(20px,2.2vw,32px); letter-spacing: -.035em; }
.stage__scene { left: 43%; top: 9rem; }
.stage__orbit { width: 38vw; top: 31%; }
.stage__greet { right: 15%; bottom: 23%; }
@media (max-width: 900px) {
  .stage .stage__name, html:not([data-lang="en"]) .stage .stage__name { font-size: 11vw; }
}
@media (max-width: 720px) {
  .stage .stage__name, html:not([data-lang="en"]) .stage .stage__name { position: relative; inset: auto; font-size: clamp(60px,17vw,110px); margin: 10.5rem var(--gutter) 0; }
  .stage__purpose { position: relative; inset: auto; margin: 1.25rem var(--gutter) 0; font-size: 23px; }
  .stage__tr { margin-top: 1.5rem; }
  .stage__scene { left: 33%; top: 7rem; opacity: .3; }
  .stage__orbit { width: 75vw; top: 17%; }
  .stage__greet { position: relative; inset: auto; }
  .footer__col { min-width: 0; max-width: 100%; }
  .footer__links { flex-wrap: wrap; max-width: 100%; }
}

/* A readable architecture portrait for the selected project. */
/* AI Core — an interactive engine, framed as an editorial exhibit. */
.core-case { scroll-margin-top: 80px; --core-signal: #d5f5a6; position: relative; margin: 0 0 4rem; overflow: hidden; border: 1px solid #323b46; border-radius: 3px; background: #10151b; color: #edf0e9; }
.core-case__header { padding: 38px 42px 30px; display: flex; justify-content: space-between; gap: 28px; align-items: center; }
.core-case__eyebrow, .core-label { margin: 0; font: 10px/1.6 var(--font-mono); letter-spacing: .12em; }
.core-case__eyebrow { color: #a4b0b7; display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.core-case__live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--core-signal); box-shadow: 0 0 12px #d5f5a640; flex-shrink: 0; }
.core-case h3 { display: flex; gap: 22px; align-items: flex-start; margin: 0; font: 500 clamp(64px,8.8vw,128px)/.94 var(--font-sans); letter-spacing: -.075em; }
.core-case h3 > span { color: var(--core-signal); font-size: .42em; line-height: 1.2; font-weight: 400; }
.core-case__intro { max-width: 350px; }
.core-case__lead { font-size: clamp(21px,2.2vw,29px); line-height: 1.4; letter-spacing: -.04em; margin: 0 0 12px; }
.core-case__description { color: #9faab4; font-size: 12px; line-height: 1.85; margin: 0; }
.core-lab { position: relative; display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 18px; padding: 28px 42px 40px; border-top: 1px solid #ffffff0d; background-image: radial-gradient(#b2c4d31d .7px,transparent .7px); background-size: 18px 18px; }
.core-input { z-index: 1; min-width: 0; }
.core-input .core-label { color: #93a0ad; }
.core-input__quote { display: block; color: var(--core-signal); font: 72px/.8 Georgia,serif; height: 43px; margin-top: 24px; }
.core-input__question { font-size: clamp(20px,2.25vw,30px); line-height: 1.5; letter-spacing: -.04em; margin: 0 0 18px; }
.core-input__context { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font: 10px var(--font-mono); color: #b3bec7; }
.core-input__context i { width: 3px; height: 3px; background: #778797; border-radius: 50%; }
.core-play { display: flex; align-items: center; gap: 12px; color: #10151b; background: var(--core-signal); border: 1px solid var(--core-signal); padding: 11px 16px 11px 11px; border-radius: 3px; font: 500 12px var(--font-sans); cursor: pointer; margin-top: 28px; transition: background .2s,transform .2s; }
.core-play:hover { background: #e5ffbf; transform: translateY(-2px); }
.core-play__icon { font-size: 19px; line-height: 1; padding-right: 9px; border-right: 1px solid #10151b33; }
.core-input__note { font: 9px/1.6 var(--font-mono); color: #87939f; margin: 12px 0 0; }
.core-reactor { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; isolation: isolate; }
.core-reactor__axis { position: absolute; background: #8ea7bd20; }
.core-reactor__axis--h { height: 1px; width: 115%; top: 50%; }
.core-reactor__axis--v { width: 1px; height: 105%; left: 50%; }
.core-reactor__ticks { position: absolute; inset: 0; width: 100%; height: 100%; color: #647889; animation: core-turn 100s linear infinite; }
.core-reactor__orbit { position: absolute; border: 1px solid #8397a444; border-radius: 50%; }
.core-reactor__orbit--outer { inset: 0; animation: core-turn 24s linear infinite; }
.core-reactor__orbit--outer::before { content: ''; position: absolute; width: 7px; height: 7px; background: var(--core-signal); border-radius: 50%; left: 50%; top: -4px; box-shadow: 0 0 18px #d5f5a688; }
.core-reactor__orbit--inner { inset: 21%; border-color: #b3d0e373; box-shadow: 0 0 45px #99b8de0b,inset 0 0 40px #99b8de12; }
.core-reactor__heart { position: relative; width: 47%; aspect-ratio: 1; background: radial-gradient(ellipse at 35% 20%,#334653,#17232c 55%,#10171f); border: 1px solid #95aab755; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 16px 60px #0007; }
.core-reactor__mark { font-size: clamp(30px,4.5vw,64px); color: var(--core-signal); line-height: 1; transition: transform .65s; transform: rotate(calc(var(--core-index,0) * 90deg)); }
.core-reactor__heart strong { font: 500 13px var(--font-mono); letter-spacing: .24em; margin: 10px 0 7px 3px; }
.core-reactor__heart > span:last-child { font: 8px var(--font-mono); color: #a4b6c2; }
.core-reactor__coordinate { position: absolute; left: 0; top: 0; color: #8192a0; font: 8px var(--font-mono); letter-spacing: .08em; }
.core-reactor__coordinate--end { left: auto; top: auto; bottom: 0; right: 0; }
.core-reactor__caption { position: absolute; bottom: -27px; display: flex; align-items: center; gap: 8px; color: #adbdc8; font: 9px var(--font-mono); letter-spacing: .06em; white-space: nowrap; }
.core-case:not(.is-in-view) .core-reactor__ticks, .core-case:not(.is-in-view) .core-reactor__orbit--outer { animation-play-state: paused; }
.core-case.is-running .core-reactor__ticks { animation-duration: 12s; }
.core-output { z-index: 1; background: #eeeFE7; color: #202b2e; transform: rotate(2deg); box-shadow: 8px 10px 0 #8b9ba015,0 18px 32px #0003; padding: 19px 20px 12px; min-height: 286px; display: flex; flex-direction: column; transition: transform .3s; }
.core-output:hover { transform: rotate(0); }
.core-output__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #23333928; }
.core-output__page { font: 9px var(--font-mono); color: #657474; }
.core-output__content { flex: 1; padding: 17px 0 14px; font-size: 11px; line-height: 1.65; }
.core-output__content h4 { margin: 0 0 12px; font-size: 19px; font-weight: 500; letter-spacing: -.04em; }
.core-output__content p { margin: 0 0 12px; color: #526264; }
.core-output__content dl { margin: 0; }
.core-output__content dl div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #23333915; padding: 7px 0; }
.core-output__content dt { color: #607172; }
.core-output__content dd { margin: 0; text-align: right; }
.core-output__content ol { margin: 0; padding-left: 20px; }
.core-output__content li { padding: 5px 0; }
.core-output__content pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.85 var(--font-mono); color: #355957; margin: 0; }
.core-output__bottom a { color: inherit; text-decoration: none; }
.core-output__bottom a:hover { text-decoration: underline; }
.core-output__bottom { display: flex; justify-content: space-between; border-top: 1px solid #23333928; padding-top: 10px; font: 8px var(--font-mono); letter-spacing: .06em; color: #566a69; }
.core-bars { display: grid; gap: 9px; margin: 14px 0; }
.core-bars > div { display: grid; grid-template-columns: 46px 1fr 24px; gap: 7px; align-items: center; font: 9px var(--font-mono); }
.core-bars i { height: 9px; background: #3c6264; width: var(--bar); transform-origin: left; animation: core-bar .5s ease both; }
.core-bars > div:first-child i { background: #678847; }
.core-sequence { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-block: 1px solid #ffffff1a; }
.core-step { position: relative; display: flex; gap: 12px; align-items: center; text-align: left; color: #91a0ac; background: #141b22; border: 0; padding: 22px 20px; cursor: pointer; transition: background .25s,color .25s; }
.core-step + .core-step { border-left: 1px solid #ffffff12; }
.core-step::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--core-signal); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.core-step:hover { background: #202c34; color: #edf0e9; }
.core-step.is-active { background: #24312d; color: var(--core-signal); }
.core-step.is-active::after { transform: scaleX(1); }
.core-step__number { font: 10px var(--font-mono); align-self: flex-start; margin-top: 5px; opacity: .7; }
.core-step strong { display: block; font-size: 14px; font-weight: 500; }
.core-step small { display: block; font: 8px var(--font-mono); letter-spacing: .055em; margin-top: 6px; }
.core-step__arrow { margin-left: auto; font-size: 18px; }
.core-case__footer { padding: 18px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.core-case__footer p { font-size: 10px; color: #8f9ca8; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.core-case__footer b { font-weight: 400; color: #c3cbd1; }
.core-case__link { flex-shrink: 0; display: flex; gap: 18px; align-items: center; background: transparent; border: 0; color: #e7ece4; font: 12px var(--font-sans); cursor: pointer; padding: 6px 0; }
.core-case__link:hover { color: var(--core-signal); }
.core-case__link:disabled { opacity: .4; cursor: wait; }
.core-case button:focus-visible { outline: 2px solid var(--core-signal); outline-offset: -4px; }
@keyframes core-turn { to { rotate: 360deg; } }
@keyframes core-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 1000px) { .core-case__header { padding: 28px; } .core-lab { padding: 28px 28px 40px; gap: 14px; grid-template-columns: 1fr 1fr 1fr; } .core-output { padding: 15px; } .core-step { padding: 20px 13px; gap: 8px; } .core-step__arrow { display: none; } }
@media (max-width: 760px) { .core-case__header { align-items: flex-start; } .core-case h3 { font-size: 66px; gap: 12px; } .core-case__eyebrow { font-size: 8px; letter-spacing: .04em; } .core-case__intro { max-width: 45%; } .core-case__lead { font-size: 20px; } .core-case__description { font-size: 11px; } .core-lab { grid-template-columns: 1fr 1fr; gap: 26px; } .core-reactor { grid-column: 2; grid-row: 1; max-width: 260px; justify-self: center; } .core-output { grid-column: 1/-1; transform: none; min-height: 230px; } .core-output__content { min-height: 155px; } .core-sequence { grid-template-columns: repeat(2,minmax(0,1fr)); } .core-step:nth-child(3) { border-left: 0; } .core-step:nth-child(n+3) { border-top: 1px solid #ffffff12; } .core-reactor__coordinate { display: none; } .core-reactor__mark { font-size: 38px; } .core-case__footer { align-items: flex-start; } }
@media (max-width: 460px) { .core-case__header { padding: 24px 20px; display: block; } .core-case h3 { font-size: 80px; } .core-case__intro { max-width: none; margin-top: 24px; } .core-case__lead br { display: none; } .core-case__description br { display: none; } .core-lab { padding: 24px 20px; gap: 28px 12px; } .core-input__question { font-size: 20px; } .core-input__context { font-size: 8px; gap: 6px; } .core-play { padding: 10px 8px; gap: 6px; font-size: 10px; } .core-reactor__heart { width: 55%; } .core-reactor__heart strong { font-size: 10px; margin: 5px 0; } .core-reactor__heart > span:last-child { font-size: 6px; } .core-reactor__mark { font-size: 28px; } .core-reactor__caption { font-size: 8px; } .core-input__note { font-size: 8px; } .core-case__footer { padding: 18px 20px; flex-direction: column; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .core-case *, .core-case *::before, .core-case *::after { animation: none !important; transition: none !important; } }