:root {
  color-scheme: light;
  --bg: #4d1b52;
  --bg-image: radial-gradient(circle at 68% 8%, #9a347b 0, transparent 34%), radial-gradient(circle at 18% 82%, #713a9b 0, transparent 38%), linear-gradient(145deg, #6f245f, #32144e);
  --text: #fff7e8;
  --muted: #f3ddea;
  --accent: #ffd34e;
  --accent-text: #4a2147;
  --nav-bg: rgb(255 247 231 / .94);
  --nav-text: #4a2147;
  --v1: #f8c13f;
  --v2: #f25380;
  --v3: #62cfc2;
  --v4: #4545a3;
  --paper: #fffaf4;
  --paper-soft: #f6eee8;
  --ink: #281a2e;
  --quiet: #746276;
  --line: #d9ccd5;
  --focus-dark: #4d1b52;
  --focus-light: #fff0dc;
  --display: "Arial Black", "Helvetica Neue", "PingFang SC", sans-serif;
  --body: "Avenir Next", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --edge: clamp(16px, 3.35vw, 64px);
  --wrap: min(112rem, calc(100% - var(--edge) - var(--edge)));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 0; margin: 0; color: var(--ink); background: var(--paper); font: 16px/1.65 var(--body); }
a { color: inherit; text-decoration: none; }
a, button, summary { transition: transform .36s var(--ease), box-shadow .36s ease, background-color .24s ease, color .24s ease, border-color .24s ease; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--focus-dark); outline-offset: 4px; }
.skip-link:focus-visible, .hero-shell a:focus-visible, .site-footer a:focus-visible, .work-card:focus-visible { outline-color: var(--focus-light); }
a:active, button:active, summary:active { transform: translateY(2px) scale(.94) !important; transition-duration: .08s !important; }
:target { scroll-margin-top: 2rem; }
img { display: block; max-width: 100%; }
.wrap { width: var(--wrap); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 50; padding: 10px 16px; color: var(--text); background: var(--bg); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.kicker { margin: 0; color: var(--bg); font: 850 .72rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }

/* User-locked 09/P1 hero. */
.hero-shell { position: relative; width: 100%; max-width: 100%; height: 100vh; height: 100svh; min-height: 700px; margin: 0; overflow: hidden; color: var(--text); background: var(--bg); background-image: var(--bg-image); background-size: 160% 160%; animation: ambient-purple-breathe 48s ease-in-out infinite alternate; border-radius: 0; }
.hero-shell::before { content: ""; position: absolute; inset: -28%; z-index: 0; pointer-events: none; background: radial-gradient(circle at 38% 42%, rgb(255 151 204 / .36) 0 8%, transparent 31%), radial-gradient(circle at 72% 58%, rgb(112 117 255 / .28) 0 7%, transparent 29%); animation: hero-light-drift 56s ease-in-out infinite alternate; }
.m09 { position: relative; z-index: 1; height: 100%; overflow: hidden; }
.prism-cut { position: absolute; left: -2%; top: 0; width: 61%; height: 100%; clip-path: polygon(0 0, 100% 2%, 72% 50%, 100% 96%, 0 100%, 7% 50%); cursor: crosshair; }
.prism-plane { position: absolute; inset: 0; z-index: 1; display: block; opacity: 1; backface-visibility: hidden; }
.plane-yellow { --hover-x: -12px; --hover-y: -10px; --hover-rotate: -.35deg; background: linear-gradient(135deg, var(--v1) 0 24%, transparent 24%); }
.plane-red { --hover-x: -10px; --hover-y: -4px; --hover-rotate: -.18deg; background: linear-gradient(135deg, transparent 0 24%, var(--v2) 24% 49%, transparent 49%); }
.plane-green { --hover-x: 10px; --hover-y: 4px; --hover-rotate: .2deg; background: linear-gradient(135deg, transparent 0 49%, var(--v3) 49% 73%, transparent 73%); }
.plane-blue { --hover-x: 12px; --hover-y: 10px; --hover-rotate: .38deg; background: linear-gradient(135deg, transparent 0 73%, var(--v4) 73%); }
.m09 .hero-copy { position: absolute; z-index: 4; right: 5.5%; top: 43%; width: 72%; text-align: right; }
.brand { margin: 0; white-space: nowrap; font: 950 clamp(4.8rem, 8.4vw, 9rem)/.82 var(--display); letter-spacing: -.075em; }
.tagline { margin: 30px 0 20px; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.3rem); }
.cta { position: relative; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; overflow: hidden; color: var(--accent-text); background: var(--accent); font-weight: 850; }
.h09 { position: absolute; left: 30px; bottom: 26px; z-index: 8; min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 10px 15px; color: var(--nav-text); background: var(--nav-bg); border-radius: 999px; box-shadow: 0 12px 28px rgb(31 9 42 / .16); }
.mini-mark { font-weight: 900; }
.navlinks { display: flex; align-items: center; gap: 3px; }
.mini-mark, .navlinks a { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 999px; font-size: .82rem; }
.navlinks a, .mobile-nav nav a { font-weight: 720; }
.navlinks a[aria-current="page"], .mobile-nav nav a[aria-current="page"] { font-weight: 850; }
.mobile-nav { display: none; }

html.selected-entry-motion .prism-plane { opacity: 0; offset-path: var(--motion-path); offset-anchor: 0 0; offset-distance: 0%; offset-rotate: 0deg; will-change: offset-distance, transform, opacity; animation: selected-plane-assemble 1.65s linear both; }
html.selected-entry-motion .plane-yellow { --motion-path: path("M -230 -110 C -225 -260 -75 -210 0 0"); --from-scale: .76; --from-rotate: -2.4deg; animation-delay: 0s; }
html.selected-entry-motion .plane-red { --motion-path: path("M -220 -35 C -170 -190 -40 -125 0 0"); --from-scale: .8; --from-rotate: -1.2deg; animation-delay: .12s; }
html.selected-entry-motion .plane-green { --motion-path: path("M -200 60 C -120 210 15 150 0 0"); --from-scale: .8; --from-rotate: -1.4deg; animation-delay: .24s; }
html.selected-entry-motion .plane-blue { --motion-path: path("M -115 180 C 55 260 110 105 0 0"); --from-scale: .86; --from-rotate: 2.4deg; animation-delay: .36s; }
html.selected-entry-motion .brand { animation: selected-brand-reveal 1.35s ease 2.01s both; }
html.selected-entry-motion .tagline { animation: selected-copy-reveal 1.25s ease 2.08s both; }
html.selected-entry-motion .cta { animation: selected-copy-reveal 1.15s ease 2.16s both; }
html.selected-entry-motion .h09 { animation: selected-nav-rise 1.2s ease 2.18s both; }
html.motion-settled .brand, html.motion-settled .tagline, html.motion-settled .cta, html.motion-settled .h09 { animation: none !important; will-change: auto; }
html.motion-settled .prism-plane { animation: none !important; opacity: 1; offset-distance: 100%; transform: none; will-change: auto; transition: opacity .32s ease, transform .4s var(--ease); }
html.motion-settled .prism-cut.is-interacting .prism-plane { opacity: .82; }
html.motion-settled .prism-cut.is-interacting .prism-plane.is-hovered { z-index: 4; opacity: 1; transform: translate3d(var(--hover-x), var(--hover-y), 0) scale(1.045) rotate(var(--hover-rotate)); }
html.motion-settled .h09 { transition: transform .45s var(--ease), box-shadow .45s ease; }
html.motion-settled .h09:hover, html.motion-settled .h09:focus-within { transform: translateY(-6px) scale(1.018); box-shadow: 0 18px 42px rgb(21 7 34 / .32); }
html.motion-settled .mini-mark, html.motion-settled .navlinks a { position: relative; isolation: isolate; transition: transform .38s var(--ease), box-shadow .38s ease, letter-spacing .38s ease, color .25s ease; }
html.motion-settled .mini-mark::before, html.motion-settled .navlinks a::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; background: #5b2459; opacity: 0; transform: scale(.68); transition: opacity .3s ease, transform .38s var(--ease); }
html.motion-settled .mini-mark:hover, html.motion-settled .mini-mark:focus-visible, html.motion-settled .navlinks a:hover, html.motion-settled .navlinks a:focus-visible { z-index: 2; color: #fff0dc; transform: translateY(-7px) scale(1.1); letter-spacing: .035em; box-shadow: 0 10px 24px rgb(53 18 53 / .28); }
html.motion-settled .mini-mark:hover::before, html.motion-settled .mini-mark:focus-visible::before, html.motion-settled .navlinks a:hover::before, html.motion-settled .navlinks a:focus-visible::before { opacity: 1; transform: scale(1); }
html.motion-settled .cta { box-shadow: 0 0 0 rgb(32 9 38 / 0); transition: transform .42s var(--ease), box-shadow .42s ease; }
html.motion-settled .cta::before { content: ""; position: absolute; inset: -30% auto -30% -45%; width: 34%; background: rgb(255 255 255 / .58); transform: skewX(-18deg) translateX(-180%); transition: transform .58s var(--ease); }
html.motion-settled .cta::after { content: "↗"; width: 0; opacity: 0; transform: translateX(-8px) rotate(-18deg); transition: width .35s ease, margin-left .35s ease, opacity .25s ease, transform .4s var(--ease); }
html.motion-settled .cta:hover, html.motion-settled .cta:focus-visible { transform: translateY(-8px) scale(1.055); box-shadow: 0 18px 38px rgb(30 8 36 / .38); }
html.motion-settled .cta:hover::before, html.motion-settled .cta:focus-visible::before { transform: skewX(-18deg) translateX(560%); }
html.motion-settled .cta:hover::after, html.motion-settled .cta:focus-visible::after { width: 1em; margin-left: 10px; opacity: 1; transform: translateX(0) rotate(0); }

@keyframes selected-plane-assemble {
  0% { opacity: 0; offset-distance: 0%; transform: scale(var(--from-scale)) rotate(var(--from-rotate)); }
  5% { opacity: .5; offset-distance: .7%; transform: scale(var(--from-scale)) rotate(var(--from-rotate)); }
  15% { opacity: .58; offset-distance: 6.1%; } 30% { opacity: .68; offset-distance: 21.6%; }
  50% { opacity: .8; offset-distance: 50%; } 70% { opacity: .9; offset-distance: 78.4%; }
  85% { opacity: .96; offset-distance: 93.9%; } 95% { opacity: .99; offset-distance: 99.3%; }
  100% { opacity: 1; offset-distance: 100%; transform: scale(1) rotate(0); }
}
@keyframes selected-brand-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes selected-copy-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes selected-nav-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes ambient-purple-breathe { from { background-position: 22% 20%; } to { background-position: 78% 76%; } }
@keyframes hero-light-drift { from { opacity: .46; transform: translate3d(-7%, -4%, 0) scale(1); } to { opacity: .8; transform: translate3d(8%, 5%, 0) scale(1.12); } }

/* Content below the locked hero. */
.intro { position: relative; min-height: 60svh; display: grid; grid-template-columns: .23fr 1.77fr; align-items: center; gap: clamp(36px, 6vw, 88px); padding-block: clamp(92px, 10vw, 152px); overflow: hidden; border-bottom: 1px solid var(--line); isolation: isolate; }
.intro::after { position: absolute; right: 0; bottom: clamp(34px, 5vw, 72px); left: 0; z-index: -1; height: clamp(18px, 2vw, 32px); background: linear-gradient(90deg, var(--v1) 0 24%, var(--v2) 24% 51%, var(--v3) 51% 76%, var(--v4) 76%); content: ""; animation: intro-spectrum-drift 24s ease-in-out infinite alternate; transform-origin: left center; }
.intro h2, .section-head h2 { margin: 0; font: 900 clamp(2.8rem, 5.8vw, 6rem)/.93 var(--display); letter-spacing: -.07em; text-wrap: balance; }
.intro h2 { max-width: 15ch; font-size: clamp(4.2rem, 7.4vw, 8rem); line-height: .92; }
.intro div > p { max-width: 720px; margin: clamp(28px, 4vw, 44px) 0 0; color: var(--quiet); font-size: clamp(1.12rem, 1.6vw, 1.35rem); line-height: 1.7; }
@keyframes intro-spectrum-drift { from { transform: translateX(-3%) scaleX(.92); } to { transform: translateX(3%) scaleX(1.03); } }
.selected-work { padding-block: clamp(72px, 8vw, 108px); background: var(--paper-soft); }
.intro, .selected-work, .focus-products, .home-services, .home-bbs { content-visibility: auto; contain-intrinsic-size: 900px; }
.section-head { display: grid; grid-template-columns: .4fr 1fr .8fr; align-items: end; gap: 40px; margin-bottom: 54px; }
.section-head > p:last-child { margin: 0; color: var(--quiet); }
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.format-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 1rem; overflow: hidden; background: rgb(77 27 82 / 14%); border-radius: 1rem; }
.format-key span { padding: 1rem 1.15rem; color: var(--quiet); background: rgb(255 250 244 / 84%); line-height: 1.55; }
.format-key b { display: block; margin-bottom: .2rem; color: var(--text); font: 900 .72rem/1 var(--mono); letter-spacing: .1em; }
.work-card { position: relative; min-width: 0; grid-column: span 6; min-height: 0; display: grid; grid-template-rows: auto 1fr; overflow: hidden; color: var(--text); background: linear-gradient(145deg, #5f245b, #33154b); }
.work-card.feature { grid-column: span 12; min-height: 610px; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); grid-template-rows: 1fr; }
.work-card figure { min-width: 0; margin: 0; overflow: hidden; background: #3b2444; }
.work-card:not(.feature) figure { aspect-ratio: 16 / 9; }
.work-card img { width: 100%; height: 100%; object-fit: cover; }
.zine-cover { position: relative; isolation: isolate; min-height: 0; }
.zine-cover img { position: absolute; inset: 0; object-fit: cover; object-position: left center; }
.zine-calm img { transform: scale(1.08); transform-origin: left center; }
.zine-mortise img { object-position: 18% center; }
.zine-water img { object-position: 12% center; }
.zine-cover::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .16; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); }
.zine-folio { position: absolute; inset: 0 0 0 auto; z-index: 3; width: 38%; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: clamp(18px, 2.4vw, 34px); border-left: 1px solid currentColor; color: #1e2424; background: #d7c0a1; }
.zine-left img { object-position: right center; }
.zine-left .zine-folio { inset: 0 auto 0 0; border-right: 1px solid currentColor; border-left: 0; }
.zine-folio::before, .zine-folio::after { content: ""; position: absolute; width: 22px; height: 1px; background: currentColor; }
.zine-folio::before { top: 15px; left: -11px; }.zine-folio::after { right: -11px; bottom: 15px; }
.zine-folio b { font: 400 clamp(3.8rem, 7vw, 7.2rem)/.78 Georgia, serif; letter-spacing: -.09em; }
.zine-folio i { align-self: center; padding-block: 13px; border-block: 1px solid currentColor; font: 850 clamp(.62rem, .72vw, .78rem)/1.2 var(--mono); letter-spacing: .14em; font-style: normal; }
.zine-folio small { font: 750 clamp(.52rem, .62vw, .66rem)/1.4 var(--mono); letter-spacing: .09em; }
.zine-blueprint .zine-folio { color: #eaf2ec; background: #275467; }.zine-riso .zine-folio { color: #5e1730; background: #e7b0a7; }.zine-forest .zine-folio { color: #ecf0df; background: #315849; }
.work-card > div { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 30px; }
.work-card p { margin: 0 0 18px; color: var(--v3); font: 800 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.work-card h3 { margin: 0; font: 900 clamp(1.8rem, 3.2vw, 3.2rem)/.98 var(--display); letter-spacing: -.055em; }
.work-card span { margin-top: 18px; color: var(--muted); }
.feature-summary { line-height: 1.65; }
.feature-facts { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--text); font: 750 .78rem/1.45 var(--mono); }
.feature-facts li::before { content: "— "; color: var(--v1); }
.work-card em { margin-top: auto; padding-top: 28px; color: var(--v1); font-style: normal; font-weight: 850; }
.work-card:hover, .work-card:focus-visible { z-index: 3; transform: translateY(-5px); box-shadow: 0 20px 40px rgb(45 17 53 / .22); }
.selected-work .section-head { grid-template-columns: .24fr minmax(0, .9fr) minmax(20rem, .62fr); align-items: center; margin-bottom: clamp(30px, 4vw, 46px); }
.selected-work .section-head h2 { max-width: 10ch; font-size: clamp(2.9rem, 4.7vw, 5.1rem); line-height: .96; }
.selected-work .section-head > p:last-child { max-width: 34rem; line-height: 1.68; }
.selected-work .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 1.8vw, 28px); }
.selected-work .work-card { grid-column: auto; display: flex; flex-direction: column; border: 1px solid rgb(77 27 82 / .08); border-radius: clamp(24px, 3vw, 38px); color: var(--text); background: rgb(255 250 240 / .78); box-shadow: 0 18px 54px rgb(45 17 53 / .1); }
.selected-work .work-card figure { aspect-ratio: 16 / 10; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: #2d1848; }
.selected-work .work-card img { transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s cubic-bezier(.2,.8,.2,1); }
.selected-work .work-card > div { min-height: 218px; padding: clamp(22px, 2.4vw, 34px); background: linear-gradient(180deg, rgb(255 250 240 / .96), rgb(255 246 234 / .9)); }
.selected-work .work-card p { margin-bottom: 14px; color: #1d6f6b; font-size: .66rem; }
.selected-work .work-card h3 { color: var(--bg); font-size: clamp(2.15rem, 3.4vw, 3.9rem); line-height: .9; }
.selected-work .work-card span { max-width: 29rem; margin-top: 14px; color: #6f5a67; line-height: 1.55; }
.selected-work .work-card em { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; color: #8b2369; }
.selected-work .work-card:hover, .selected-work .work-card:focus-visible { transform: translateY(-7px); background: #fffaf0; box-shadow: 0 28px 70px rgb(45 17 53 / .16); }
.selected-work .work-card:hover img, .selected-work .work-card:focus-visible img { transform: scale(1.035); filter: saturate(1.04) contrast(1.03); }
.work-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; }
.work-footer p { margin: 0; color: var(--quiet); font: .68rem/1.3 var(--mono); }
.text-action { min-height: 48px; display: inline-flex; align-items: center; gap: 14px; padding: 0 18px; border: 1px solid var(--bg); color: var(--bg); font-weight: 850; }
.text-action:hover, .text-action:focus-visible { color: var(--text); background: var(--bg); transform: translateY(-7px) scale(1.04); box-shadow: 0 14px 0 var(--v3); }

.focus-products { padding-block: clamp(96px, 11vw, 154px); }
.focus-products .section-head { grid-template-columns: .34fr 1.18fr .82fr; }.focus-products .section-head h2 { line-height: 1; }
.focus-showcase { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(260px, auto); gap: 16px; }
.focus-tile { --lift-color: var(--v1); position: relative; grid-column: span 4; min-height: 480px; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(30px, 3.2vw, 46px); overflow: hidden; color: var(--text); background: var(--bg); border-radius: clamp(18px, 1.8vw, 28px); contain: layout paint; }
.focus-tile > div + span, .focus-tile > h3, .focus-tile > p, .focus-tile > em { position: relative; z-index: 2; }
.focus-tile > div + span { margin-top: clamp(174px, 14vw, 196px); font: 800 .72rem/1.35 var(--mono); letter-spacing: .1em; }
.focus-tile h3 { margin: clamp(24px, 2.2vw, 34px) 0 0; font: 950 clamp(3.35rem, 4.7vw, 5.25rem)/.92 var(--display); letter-spacing: -.065em; }
.focus-tile p { max-width: 29rem; margin: clamp(18px, 1.7vw, 24px) 0 0; color: var(--muted); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.55; }
.focus-tile em { margin-top: auto; padding-top: clamp(30px, 3vw, 42px); color: var(--v1); font-style: normal; font-weight: 850; }
.focus-tile:hover, .focus-tile:focus-visible { z-index: 2; transform: translateY(-9px) scale(1.012); box-shadow: 0 24px 0 var(--lift-color); }
.focus-tile.lianzhu { --lift-color: #68efff; grid-column: span 7; grid-row: span 2; min-height: 760px; padding: clamp(36px, 4vw, 58px); color: #fffaf0; background: radial-gradient(circle at 78% 15%, rgb(104 239 255 / .36), transparent 27%), radial-gradient(circle at 12% 84%, rgb(255 99 147 / .22), transparent 31%), linear-gradient(145deg, #3859f4 0%, #6848eb 58%, #853fe1 100%); }.focus-tile.lianzhu > div + span { margin-top: clamp(190px, 16vw, 220px); }.focus-tile.lianzhu h3 { font-size: clamp(6rem, 9vw, 9.7rem); line-height: .88; }.focus-tile.lianzhu p { color: #eef1ff; }.focus-tile.lianzhu em { color: #fffaf0; }
.focus-tile.bianzhen, .focus-tile.chuandeng { grid-column: span 5; }.focus-tile.bianzhen { --lift-color: #ffe05c; color: #3c1737; background: radial-gradient(circle at 84% 10%, rgb(255 240 176 / .46), transparent 26%), linear-gradient(145deg, #ff4d78 0%, #ff6d58 100%); }.focus-tile.bianzhen h3 { color: #fffaf0; }.focus-tile.bianzhen p { color: #4b2141; }.focus-tile.bianzhen em { color: #3c1737; }.focus-tile.chuandeng { --lift-color: #ffe567; color: #183750; background: radial-gradient(circle at 78% 12%, rgb(255 255 255 / .44), transparent 26%), linear-gradient(145deg, #1bcfc6 0%, #75d761 100%); }.focus-tile.chuandeng h3, .focus-tile.chuandeng em { color: #183750; }.focus-tile.chuandeng p { color: #214b56; }.focus-tile.sunmao { --lift-color: #ffcb42; background: #922f87; }.focus-tile.fenxuan { --lift-color: #f25380; background: #6a2074; }.focus-tile.zhenshi { --lift-color: #67d3f3; color: #123a57; background: radial-gradient(circle at 82% 12%, rgb(255 255 255 / .82), transparent 27%), linear-gradient(145deg, #dff6ff 0%, #bce9f7 100%); }.focus-tile.zhenshi p { color: #315a70; }.focus-tile.zhenshi em { color: #0c719d; }
.focus-showcase .focus-tile > .track-ui, .focus-showcase .focus-tile > .record-ui, .focus-showcase .focus-tile > .evidence-ui, .focus-showcase .focus-tile > .beads-ui, .focus-showcase .focus-tile > .handoff-ui, .focus-showcase .focus-tile > .mortise-ui { position: absolute; inset: clamp(22px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px) auto; height: clamp(138px, 12vw, 168px); display: flex; align-items: center; justify-content: center; gap: 10px; pointer-events: none; }
.track-ui i { width: 8%; height: var(--h, 45%); border-radius: 999px; background: var(--v1); transition: transform .5s var(--ease); }.track-ui i:nth-child(2){--h:72%;background:var(--v2)}.track-ui i:nth-child(3){--h:90%;background:var(--v3)}.track-ui i:nth-child(4){--h:62%;background:#fff7e8}.track-ui i:nth-child(5){--h:82%;background:var(--v4)}.track-ui i:nth-child(6){--h:52%;background:var(--v1)}
.focus-tile:hover .track-ui i:nth-child(odd){transform:translateY(-14px)}.focus-tile:hover .track-ui i:nth-child(even){transform:translateY(14px)}
.record-ui { isolation:isolate; justify-content:flex-start; }.record-ui::before { position:absolute; left:9%; top:10%; width:43%; height:70%; border:7px solid #1378a5; border-top:0; border-radius:0 0 90px 90px; content:""; transform:rotate(-5deg); }.record-ui::after { position:absolute; left:47%; bottom:8%; width:46px; aspect-ratio:1; border:8px solid #1378a5; border-radius:50%; background:#dff6ff; box-shadow:0 0 0 8px rgb(19 120 165 / .12); content:""; }.record-ui i { position:absolute; z-index:1; transition:transform .5s var(--ease); }.record-ui i:nth-child(1),.record-ui i:nth-child(2){top:0;width:10px;height:43%;border-radius:999px;background:#1378a5}.record-ui i:nth-child(1){left:10%;transform:rotate(-7deg)}.record-ui i:nth-child(2){left:43%;transform:rotate(7deg)}.record-ui i:nth-child(3){right:6%;width:38%;height:70%;border:1px solid rgb(19 120 165 / .18);border-radius:24px;background:rgb(255 255 255 / .72);box-shadow:0 22px 46px rgb(31 119 153 / .14)}.record-ui i:nth-child(3)::before{position:absolute;inset:20% 12%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'%3E%3Cpath d='M0 34h30l10-18 17 34 17-29 13 21 12-8h61' fill='none' stroke='%231378a5' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;content:""}.record-ui b{position:absolute;right:11%;bottom:12%;z-index:2;color:#0c719d;font:900 1.05rem/1 var(--mono);letter-spacing:.12em}.focus-tile:hover .record-ui i:nth-child(1){transform:rotate(-4deg) translateY(-5px)}.focus-tile:hover .record-ui i:nth-child(2){transform:rotate(4deg) translateY(-5px)}.focus-tile:hover .record-ui i:nth-child(3){transform:translateY(-8px)}
.evidence-ui { isolation:isolate; }.evidence-ui::before { position:absolute; left:8%; top:14%; width:60%; height:70%; border-radius:34px; background:rgb(255 250 240 / .3); box-shadow:inset 0 1px 0 rgb(255 255 255 / .58),0 24px 60px rgb(87 22 70 / .12); content:""; transform:rotate(-5deg); }.evidence-ui::after { position:absolute; right:8%; width:142px; aspect-ratio:1; border:3px solid #fffaf0; border-radius:50%; background:rgb(255 255 255 / .14); box-shadow:0 0 0 12px rgb(255 250 240 / .1); content:""; }.evidence-ui i { position:absolute; z-index:1; display:block; transition:transform .5s var(--ease); }.evidence-ui i:nth-child(1){left:17%;top:34%;width:35%;height:10px;border-radius:999px;background:#48153d}.evidence-ui i:nth-child(2){left:22%;top:58%;width:28%;height:10px;border-radius:999px;background:#fffaf0}.evidence-ui i:nth-child(3){right:18%;width:56px;aspect-ratio:1;border-radius:50%;background:#fffaf0;box-shadow:0 0 30px rgb(255 250 240 / .38)}.evidence-ui i:nth-child(4){right:9%;top:18%;width:20px;aspect-ratio:1;border-radius:50%;background:#ffe05c;box-shadow:0 0 28px rgb(255 224 92 / .68)}.focus-tile:hover .evidence-ui i:nth-child(1){transform:translateX(9px)}.focus-tile:hover .evidence-ui i:nth-child(2){transform:translateX(-7px)}.focus-tile:hover .evidence-ui i:nth-child(3){transform:scale(1.08)}
.beads-ui { isolation:isolate; }.beads-ui::before { position:absolute; width:82%; height:118%; border:2px solid rgb(255 250 240 / .48); border-radius:50%; box-shadow:inset 0 0 54px rgb(104 239 255 / .12); content:""; transform:rotate(-8deg); }.beads-ui::after { position:absolute; right:7%; width:150px; aspect-ratio:1; border:1px solid rgb(255 255 255 / .56); border-radius:50%; background:radial-gradient(circle at 34% 28%, #fff 0 7%, #87f4ff 18%, rgb(104 239 255 / .38) 48%, transparent 70%); box-shadow:0 0 64px rgb(104 239 255 / .34); content:""; }.beads-ui i { position:absolute; z-index:1; width:var(--size,28px); aspect-ratio:1; border-radius:50%; background:#fffaf0; box-shadow:0 0 0 8px rgb(255 255 255 / .08),0 16px 34px rgb(38 26 127 / .2); transition:transform .55s var(--ease); }.beads-ui i:nth-child(1){--size:22px;left:9%;top:63%;}.beads-ui i:nth-child(2){--size:40px;left:28%;top:24%;background:#ff6b92}.beads-ui i:nth-child(3){--size:18px;left:49%;top:58%;background:#ffe05c}.beads-ui i:nth-child(4){--size:50px;left:67%;top:15%;background:#72efff}.beads-ui i:nth-child(5){--size:26px;left:83%;top:57%;}.focus-tile:hover .beads-ui i:nth-child(odd){transform:translateY(-10px)}.focus-tile:hover .beads-ui i:nth-child(even){transform:translateY(9px) scale(1.06)}
.handoff-ui { isolation:isolate; align-items:flex-end; justify-content:space-between; gap:16px; padding-inline:8%; }.handoff-ui::before { position:absolute; right:5%; bottom:42%; left:5%; height:12px; border-radius:999px; background:linear-gradient(90deg,rgb(24 55 80 / .08),rgb(255 229 103 / .62),#fffaf0); box-shadow:0 0 32px rgb(255 250 240 / .48); content:""; transform:rotate(-7deg); }.handoff-ui::after { position:absolute; right:8%; width:38%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#fffaf0 0 5%,rgb(255 229 103 / .54) 18%,transparent 68%); content:""; }.handoff-ui i { z-index:1; width:24%; height:var(--h); border:2px solid rgb(24 55 80 / .3); border-radius:999px 999px 28px 28px; background:rgb(255 255 255 / .18); box-shadow:inset 0 1px 0 rgb(255 255 255 / .68),0 22px 36px rgb(18 107 112 / .13); transition:transform .55s var(--ease); }.handoff-ui i:nth-child(1){--h:46%;}.handoff-ui i:nth-child(2){--h:68%;background:rgb(255 250 240 / .34)}.handoff-ui i:nth-child(3){--h:90%;border-color:rgb(255 250 240 / .78);background:linear-gradient(180deg,#fffaf0,#ffe567)}.focus-tile:hover .handoff-ui i:nth-child(1){transform:translateY(-6px)}.focus-tile:hover .handoff-ui i:nth-child(2){transform:translateY(-12px)}.focus-tile:hover .handoff-ui i:nth-child(3){transform:translateY(-18px)}
.mortise-ui { gap:0; }.mortise-ui i { width:88px;height:88px;background:var(--v1);box-shadow:0 22px 42px rgb(69 14 71 / .2);transition:transform .52s var(--ease); }.mortise-ui i:nth-child(1){border-radius:26px 8px 8px 26px;transform:translateX(8px) rotate(-7deg)}.mortise-ui i:nth-child(2){z-index:1;margin-inline:-15px;background:var(--v3);border-radius:22px;clip-path:polygon(0 0,100% 0,100% 36%,68% 36%,68% 64%,100% 64%,100% 100%,0 100%,0 64%,32% 64%,32% 36%,0 36%)}.mortise-ui i:nth-child(3){border-radius:8px 26px 26px 8px;background:var(--v2);transform:translateX(-8px) rotate(7deg)}.focus-tile:hover .mortise-ui i:nth-child(1){transform:translateX(18px) rotate(-2deg)}.focus-tile:hover .mortise-ui i:nth-child(3){transform:translateX(-18px) rotate(2deg)}
.all-focus { margin: 34px 0 0; }

/* V46: color continues below the hero. One slow light field moves through the
   editorial sections; image cards and already-colorful modules remain still. */
@keyframes home-content-drift {
  0%, 100% { opacity: .12; transform: translate3d(-7%, -3%, 0) scale(.96); }
  50% { opacity: .25; transform: translate3d(7%, 4%, 0) scale(1.06); }
}
.intro, .selected-work { position: relative; isolation: isolate; }
.intro { background-image: radial-gradient(circle at 86% 18%, rgb(239 173 55 / 12%), transparent 28%), radial-gradient(circle at 14% 82%, rgb(87 176 170 / 9%), transparent 30%); }
.selected-work { background-image: radial-gradient(circle at 92% 12%, rgb(216 70 112 / 11%), transparent 28%), radial-gradient(circle at 5% 88%, rgb(48 46 112 / 8%), transparent 32%); }
.home-services, .home-bbs { padding-block: clamp(54px, 6vw, 86px); }
.home-services { background: var(--paper); }
.home-bbs { color: var(--text); background: var(--paper-soft); }
.home-services-layout, .home-bbs-layout { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 5vw, 76px); align-items: center; padding: clamp(34px, 4.4vw, 64px); border-radius: clamp(30px, 4.6vw, 60px); box-shadow: 0 24px 80px rgb(45 17 53 / .11); }
.home-services-layout::before, .home-bbs-layout::before { content: ""; position: absolute; inset: auto -10% -42% auto; width: min(560px, 48vw); aspect-ratio: 1; border-radius: 999px; filter: blur(10px); opacity: .7; animation: home-content-drift 18s ease-in-out infinite alternate; z-index: -1; }
.home-services-layout { background: linear-gradient(120deg, #fffaf0 0%, #fff4df 48%, #f7e1ee 100%); border: 1px solid rgb(77 27 82 / .08); }
.home-services-layout::before { background: radial-gradient(circle, rgb(242 83 128 / .18), transparent 64%); }
.home-bbs-layout { background: radial-gradient(circle at 82% 12%, rgb(242 83 128 / .34), transparent 32%), radial-gradient(circle at 18% 88%, rgb(98 207 194 / .18), transparent 38%), linear-gradient(135deg, #5d205e, #2d1848 74%); }
.home-bbs-layout::before { background: radial-gradient(circle, rgb(255 198 61 / .28), transparent 64%); }
.home-services-copy h2, .home-bbs-copy h2 { max-width: 11.5ch; margin: 0; font: 900 clamp(2.35rem, 4.1vw, 4.7rem)/.96 var(--display); letter-spacing: -.07em; text-wrap: balance; }
.home-services-copy p, .home-bbs-copy p { max-width: 36rem; margin: 18px 0 24px; font-size: clamp(.98rem, 1.1vw, 1.1rem); line-height: 1.62; }
.home-services-copy p { color: var(--quiet); }
.home-service-list { display: grid; gap: 10px; }
.home-service-list a { display: grid; grid-template-columns: minmax(5.8rem, .38fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 78px; padding: 18px 20px; border: 1px solid rgb(77 27 82 / .1); border-radius: 24px; background: rgb(255 255 255 / .52); box-shadow: inset 0 1px 0 rgb(255 255 255 / .72); }
.home-service-list span { color: #9b5c62; font: 850 .67rem/1.2 var(--mono); letter-spacing: .09em; }
.home-service-list strong { font: 900 clamp(1.04rem, 1.35vw, 1.34rem)/1.18 var(--display); letter-spacing: -.025em; }
.home-service-list i { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 50%; color: var(--bg); background: var(--v2); font-size: 1.08rem; font-style: normal; }
.home-service-list a:hover, .home-service-list a:focus-visible { color: var(--bg); transform: translateY(-4px); background: rgb(255 255 255 / .76); box-shadow: 0 18px 38px rgb(77 27 82 / .13); }
.home-bbs .kicker { color: var(--v1); }
.home-bbs-copy h2 { max-width: 10ch; margin-top: 18px; }
.home-bbs-copy p { color: var(--muted); }
.home-bbs-link { display: inline-flex; align-items: center; gap: 12px; color: var(--v1); font-weight: 850; }
.home-bbs-link:hover, .home-bbs-link:focus-visible { transform: translateX(8px); }
.home-bbs-list { display: grid; gap: 10px; }
.home-bbs-item { display: grid; grid-template-columns: minmax(7.5rem, .46fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; min-height: 82px; padding: 18px 20px; border: 1px solid rgb(255 247 232 / .14); border-radius: 24px; background: rgb(255 247 232 / .08); backdrop-filter: blur(10px); }
.home-bbs-item span { color: #e9d4e5; font: 800 .66rem/1.3 var(--mono); letter-spacing: .07em; }
.home-bbs-item strong { font: 850 clamp(1.05rem, 1.45vw, 1.42rem)/1.25 var(--body); }
.home-bbs-item i { display: grid; place-items: center; width: 34px; aspect-ratio: 1; border-radius: 50%; color: #2d1848; background: var(--v1); font-size: 1.08rem; font-style: normal; }
.home-bbs-item:hover, .home-bbs-item:focus-visible { color: var(--v1); transform: translateY(-4px); background: rgb(255 247 232 / .13); box-shadow: 0 18px 42px rgb(0 0 0 / .2); }

.site-footer { display: grid; grid-template-columns: .75fr 1fr auto; gap: 36px; align-items: start; padding: 62px var(--edge); color: var(--text); background: var(--bg); background-image: radial-gradient(circle at 86% 10%, #a23881 0, transparent 32%), linear-gradient(128deg, #6f245f, #44205f 58%, #77338f); background-size: 140% 140%; animation: ambient-purple-breathe 20s ease-in-out infinite alternate; }
.site-footer > div { display: grid; gap: 2px; }.site-footer strong { font: 950 1.45rem/1 var(--display); letter-spacing: -.04em; }.site-footer span, .site-footer p, .site-footer small { color: #d9c7d7; }.site-footer p { max-width: 420px; margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 5px; }.site-footer nav a { min-height: 42px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; }
.site-footer nav a:hover, .site-footer nav a:focus-visible { color: var(--bg); background: var(--v1); transform: translateY(-7px) scale(1.08); box-shadow: 0 12px 22px rgb(0 0 0 / .3); }
.site-footer small { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / .18); font-family: var(--mono); }

@media (max-width: 900px) {
  :root { --wrap: calc(100% - 32px); }
  .hero-shell { min-height: 760px; }
  .prism-cut { left: -25%; top: 7%; width: 115%; height: 54%; clip-path: polygon(0 0, 100% 5%, 76% 50%, 100% 95%, 0 100%, 17% 51%); }
  .m09 .hero-copy { right: 18px; left: 24px; top: auto; bottom: 9%; width: auto; }
  .brand { font-size: clamp(2rem, 10vw, 5rem); }.tagline { margin-top: 18px; }
  .h09 { top: 14px; left: 16px; right: 16px; bottom: auto; min-height: 54px; justify-content: space-between; border-radius: 14px; }
  .navlinks { display: none; }.mobile-nav { display: block; position: relative; }
  .mobile-nav summary { min-width: 48px; min-height: 44px; display: grid; place-items: center; cursor: pointer; list-style: none; border-radius: 10px; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav nav { position: absolute; right: -4px; top: 50px; width: 210px; display: grid; gap: 5px; padding: 10px; color: var(--nav-text); background: var(--nav-bg); border-radius: 14px; box-shadow: 0 18px 40px rgb(31 9 42 / .3); }
  .mobile-nav:not([open]) nav { display: none; }.mobile-nav nav a { min-height: 46px; display: flex; align-items: center; padding: 0 14px; border-radius: 9px; }
  .mobile-nav summary:hover, .mobile-nav summary:focus-visible, .mobile-nav[open] summary { color: var(--text); background: var(--bg); transform: translateY(-4px) scale(1.08); box-shadow: 0 10px 24px rgb(53 18 53 / .28); }
  .mobile-nav nav a:hover, .mobile-nav nav a:focus-visible { color: var(--ink); background: var(--v1); transform: translateX(9px) scale(1.04); box-shadow: 0 8px 18px rgb(53 18 53 / .18); }
  .intro, .section-head { grid-template-columns: 1fr; gap: 18px; }
  .focus-products .section-head { grid-template-columns: 1fr; }
  .work-card, .work-card.feature { grid-column: span 12; min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(260px, 52vw) auto; }
  .format-key { grid-template-columns: 1fr; }
  .selected-work .work-grid, .focus-showcase { grid-template-columns: 1fr; }
  .selected-work .work-card, .focus-tile, .focus-tile.lianzhu, .focus-tile.bianzhen, .focus-tile.chuandeng { grid-column: auto; grid-row: auto; }
  .focus-tile { min-height: 500px; }
  .focus-tile.lianzhu { min-height: 620px; }.focus-tile.lianzhu h3 { font-size: clamp(5rem, 19vw, 7.2rem); }
  .home-services-layout, .home-bbs-layout { grid-template-columns: 1fr; gap: 44px; }
  .home-service-list a, .home-bbs-item { grid-template-columns: minmax(5.6rem, .42fr) minmax(0, 1fr) auto; }
  .site-footer { grid-template-columns: 1fr; }.site-footer small { grid-column: 1; }
}

@media (max-width: 560px) {
  .work-grid { width: 100%; }.work-card { min-height: 0; }
  .work-footer { align-items: flex-start; flex-direction: column; }
  .focus-tile { min-height: 480px; padding: 26px; border-radius: 22px; }
  .focus-tile > div + span { margin-top: 160px; }
  .focus-tile h3 { margin-top: 22px; font-size: clamp(3.8rem, 18vw, 5.25rem); }
  .focus-tile p { margin-top: 16px; font-size: 1rem; }
  .focus-tile em { padding-top: 28px; }
  .focus-tile.lianzhu { min-height: 580px; padding: 28px; }
  .focus-tile.lianzhu > div + span { margin-top: 174px; }
  .focus-showcase .focus-tile > .track-ui, .focus-showcase .focus-tile > .record-ui, .focus-showcase .focus-tile > .evidence-ui, .focus-showcase .focus-tile > .beads-ui, .focus-showcase .focus-tile > .handoff-ui, .focus-showcase .focus-tile > .mortise-ui { inset: 22px 22px auto; height: 132px; }
  .home-service-list a, .home-bbs-item { grid-template-columns: 1fr auto; gap: 10px 16px; min-height: 0; padding-block: 22px; }
  .home-service-list span, .home-bbs-item span { grid-column: 1 / -1; }
  .site-footer nav { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  html.selected-entry-motion .plane-yellow { --motion-path: path("M -132 -62 C -126 -148 -42 -120 0 0"); --from-scale: .82; }
  html.selected-entry-motion .plane-red { --motion-path: path("M -122 -20 C -98 -106 -26 -72 0 0"); --from-scale: .85; }
  html.selected-entry-motion .plane-green { --motion-path: path("M -112 35 C -68 122 10 86 0 0"); --from-scale: .85; }
  html.selected-entry-motion .plane-blue { --motion-path: path("M -64 104 C 32 150 62 62 0 0"); --from-scale: .9; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  a:hover, a:focus-visible, button:hover, button:focus-visible, summary:hover, summary:focus-visible, html.motion-settled .prism-plane.is-hovered { transform: none !important; }
  html.selected-entry-motion .prism-plane { opacity: 1; offset-distance: 100%; }
  html.selected-entry-motion .brand, html.selected-entry-motion .tagline, html.selected-entry-motion .cta, html.selected-entry-motion .h09 { opacity: 1; }
  .intro::after { transform: none; }
}