@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap');
*, ::before, ::after{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop{
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.visible{
  visibility: visible;
}
.block{
  display: block;
}
.hidden{
  display: none;
}
.min-h-screen{
  min-height: 100vh;
}
.resize{
  resize: both;
}
.overflow-hidden{
  overflow: hidden;
}
.bg-\[\#050505\]{
  --tw-bg-opacity: 1;
  background-color: rgb(5 5 5 / var(--tw-bg-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

:root { font-family: Roboto, "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif; color:#fff; background:#050505; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:#050505; } body { margin:0; min-width:320px; background:#050505; } body::-webkit-scrollbar { width:8px; } body::-webkit-scrollbar-track { background:#050505; } body::-webkit-scrollbar-thumb { background:#303036; border-radius:999px; }
.noise { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.27'/%3E%3C/svg%3E"); }
.site-header { position:fixed; top:0; z-index:30; width:100%; height:72px; border-bottom:1px solid rgba(255,255,255,.08); background:rgba(5,5,5,.64); backdrop-filter:blur(18px); }.header-inner { width:min(1280px,calc(100% - 48px)); height:100%; margin:auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }.identity { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-size:14px; font-weight:650; letter-spacing:-.02em; }.logo-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:11px; color:#18121f; background:linear-gradient(135deg,#5A5BFC,#D8B4FE 55%,#F472B6); font-size:18px; box-shadow:0 0 22px rgba(216,180,254,.35); } nav { display:flex; align-items:center; gap:35px; height:100%; } nav>a { display:flex; align-items:center; height:100%; } nav a { position:relative; color:#98989f; font-size:13px; text-decoration:none; transition:color .25s ease,transform .25s ease; } nav a::after { content:''; position:absolute; right:0; bottom:18px; left:0; height:1px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } nav a:hover { color:#fff; transform:translateY(-1px); } nav a:hover::after { transform:scaleX(1); }.contact-link { justify-self:end; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px 17px; color:#eeeef1; background:rgba(255,255,255,.05); text-decoration:none; font-size:13px; transition:background .25s,color .25s,transform .25s,border-color .25s; }.contact-link:hover { background:#fff; color:#111; border-color:#fff; transform:translateY(-2px); }
.nav-project-menu { position:relative; display:flex; align-items:center; height:72px; }.nav-project-dropdown { position:absolute; top:58px; left:50%; display:flex; flex-direction:column; gap:4px; width:210px; padding:9px; border:1px solid rgba(255,255,255,.12); border-radius:14px; background:rgba(18,18,21,.94); box-shadow:0 18px 55px rgba(0,0,0,.45); backdrop-filter:blur(20px); opacity:0; visibility:hidden; transform:translate(-50%,-8px); transition:opacity .2s ease,visibility .2s ease,transform .2s ease; }.nav-project-menu:hover .nav-project-dropdown,.nav-project-menu:focus-within .nav-project-dropdown { opacity:1; visibility:visible; transform:translate(-50%,0); }.nav-project-dropdown a { display:block; padding:11px 13px; border-radius:9px; color:#c9c9cf; white-space:nowrap; }.nav-project-dropdown a::after { display:none; }.nav-project-dropdown a:hover { color:#fff; background:rgba(255,255,255,.08); transform:none; }
.identity-hero { min-height:100vh; padding:72px 0 35px; position:relative; display:grid; align-items:center; overflow:hidden; }.identity-grid { position:relative; z-index:1; width:min(1280px,calc(100% - 48px)); margin:auto; display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:45px; }.identity-ambient { position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; }.identity-ambient-one { width:420px; height:420px; right:15%; top:24%; background:#5A5BFC; opacity:.12; }.identity-ambient-two { width:360px; height:360px; right:-6%; bottom:2%; background:#F472B6; opacity:.1; }.identity-copy h1 { margin:0; max-width:570px; font-size:clamp(52px,5.4vw,74px); font-weight:500; line-height:1.15; letter-spacing:-.08em; }.identity-copy h1 span { display:block; letter-spacing:.01em; background:linear-gradient(90deg,#aab3ff 0%,#d4a9fc 50%,#f254ac 100%); color:transparent; background-clip:text; -webkit-background-clip:text; }.identity-copy>p { max-width:500px; margin:29px 0 31px; color:#9e9ea6; font-size:16px; line-height:1.7; }.identity-copy small { display:block; margin-top:23px; color:#85858d; font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.identity-copy small i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#c7ff68; box-shadow:0 0 13px #c7ff68; }.hero-cta { display:inline-flex; align-items:center; gap:24px; height:48px; padding:0 28px; border-radius:12px; color:#111; background:#fff; text-decoration:none; font-size:14px; font-weight:650; box-shadow:0 0 0 rgba(216,180,254,0); transition:transform .25s,box-shadow .25s; }.hero-cta:hover { transform:scale(1.04); box-shadow:0 0 32px rgba(216,180,254,.38); }.hero-cta b { font-size:17px; }.identity-stage { position:relative; height:530px; }.identity-note { position:absolute; width:248px; min-height:338px; padding:24px; border:1px solid #34343a; border-radius:16px; background:rgba(24,24,28,.94); box-shadow:0 22px 62px rgba(0,0,0,.4); cursor:grab; touch-action:none; }.identity-note:active { cursor:grabbing; }.identity-note>span { color:#8f8f99; font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.identity-note h2 { margin:59px 0 28px; font-size:21px; line-height:1.2; letter-spacing:-.055em; }.identity-note h2 em { font-style:normal; background:linear-gradient(90deg,#5A5BFC,#D8B4FE,#F472B6); color:transparent; background-clip:text; -webkit-background-clip:text; }.identity-note ul,.identity-note ol { padding:0; margin:0; list-style:none; color:#d3d3d9; font:12px/1.85 ui-monospace,SFMono-Regular,Menlo,monospace; }.toolkit-note { left:0; top:120px; z-index:1; }.toolkit-note ul { font-size:10px; line-height:1.65; }.toolkit-note li:before { content:'+'; margin-right:8px; color:#d8b4fe; }.workflow-note { right:0; top:122px; z-index:1; }.workflow-note h2 { margin-bottom:25px; }.workflow-note ol { font-size:10px; line-height:2.1; }.identity-portrait { position:absolute; z-index:2; left:50%; top:38px; width:304px; padding:14px; border:1px solid #37373d; border-radius:18px; background:#19191d; box-shadow:0 30px 84px rgba(0,0,0,.6); transform:translateX(-50%); }.identity-portrait img { display:block; width:100%; height:324px; -o-object-fit:cover; object-fit:cover; -o-object-position:64% 56%; object-position:64% 56%; border-radius:10px; filter:saturate(.86) contrast(1.01) brightness(1.06) hue-rotate(10deg); }.identity-portrait>div { display:flex; justify-content:space-between; padding:14px 3px 1px; color:#b1b1ba; font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; text-transform:uppercase; }.identity-drag { position:absolute; bottom:0; right:19px; margin:0; color:#72727b; font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; }
.eyebrow { margin:0 0 18px; text-transform:uppercase; letter-spacing:.16em; font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; background:linear-gradient(90deg,#8d8dff,#e4c8ff,#ffaccf); -webkit-background-clip:text; background-clip:text; color:transparent; }.projects-section { min-height:100vh; padding:150px 0 82px; overflow:hidden; border-top:1px solid rgba(255,255,255,.07); background:radial-gradient(circle at 72% 40%,rgba(85,73,181,.12),transparent 31%),#050505; }.projects-heading { width:min(1440px,calc(100% - 96px)); margin:0 auto 76px; }.projects-heading h1 { max-width:760px; margin:0; color:#fafafa; font-size:clamp(50px,6vw,92px); line-height:.94; letter-spacing:-.073em; }.projects-heading>p:last-child { max-width:490px; margin:25px 0 0; color:#909096; font-size:16px; line-height:1.6; }.gallery-viewport { width:100%; margin:-18px 0; padding:18px 0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; cursor:grab; overscroll-behavior-x:contain; }.gallery-viewport::-webkit-scrollbar { display:none; }.gallery-viewport:active { cursor:grabbing; }.project-rail { display:flex; gap:32px; width:-moz-max-content; width:max-content; padding:0 max(48px,calc((100vw - 1440px)/2)); }.gallery-card { width:min(54.4vw,704px); flex:none; overflow:hidden; border:1px solid #2b2b31; border-radius:22px; background:#121214; box-shadow:0 24px 58px rgba(0,0,0,.35); transition:border-color .3s ease,box-shadow .3s ease,filter .3s ease; }.gallery-card:hover { border-color:rgba(255,255,255,.52); box-shadow:0 32px 75px rgba(0,0,0,.56),0 0 35px rgba(132,108,255,.12); }.cover-wrap { aspect-ratio:16 / 9; overflow:hidden; background:#17171a; }.preview { position:relative; height:100%; overflow:hidden; padding:30px; }.card-footer { min-height:132px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:27px 30px; border-top:1px solid rgba(255,255,255,.08); background:#151518; }.card-footer h2 { margin:0; font-size:20px; letter-spacing:-.045em; }.card-footer p { margin:8px 0 0; color:#95959d; font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; }.card-footer a { color:#f0f0f2; white-space:nowrap; text-decoration:none; font-size:12px; transition:transform .25s,color .25s; }.card-footer a b { display:inline-block; margin-left:6px; font-size:16px; transition:transform .25s; }.card-footer a:hover { transform:translateX(4px); color:#fff; }.card-footer a:hover b { transform:translateX(3px); }
.mini-nav { display:flex; gap:8px; white-space:nowrap; color:#aaaaba; font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.mini-nav span { padding:8px 10px; border:1px solid #5e5e6b; border-radius:14px; }.pulse-preview { background:radial-gradient(circle at 72% 90%,#f146aa 0,#8137c7 26%,#151520 64%); }.pulse-preview p { margin:83px 0 0; color:#b8b8c2; font-size:clamp(24px,2.4vw,36px); line-height:1.2; }.pulse-preview p b { color:#fff; }.pulse-preview strong { position:absolute; left:9%; bottom:0; color:#fff; font-size:clamp(55px,6vw,90px); line-height:.86; letter-spacing:-.075em; }.pulse-preview i { position:absolute; right:5%; top:7%; color:#e38aff; font-size:40px; font-style:normal; }.bloom-preview { background:linear-gradient(155deg,#0c0f38 0%,#2434ad 52%,#b9b1ff 100%); }.browser { display:flex; align-items:center; justify-content:space-between; padding:14px; border-radius:20px; color:#dddff6; background:rgba(238,238,255,.16); font-size:11px; }.browser span { font-weight:650; }.browser small { font-size:9px; }.browser b { padding:9px 11px; border-radius:15px; color:#1c1c33; background:#fff; font-size:8px; }.bloom-preview p { margin:clamp(80px,9vw,128px) 0 0; text-align:center; font-size:clamp(43px,5vw,70px); line-height:.91; letter-spacing:-.07em; }.bloom-preview em { font-family:Georgia,serif; font-weight:400; }.micro-copy { position:absolute; right:16%; bottom:74px; left:16%; color:#d8d8f4; text-align:center; font-size:9px; }.bloom-preview button { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); border:0; border-radius:15px; padding:11px 16px; color:#20203a; background:#fff; font-size:9px; }.harbor-preview { background:radial-gradient(circle at 82% 0,#b49cff 0,#5523c1 25%,#10101b 67%); }.harbor-preview>span { display:inline-block; padding:8px 10px; border-radius:13px; color:#d9cffd; background:#6944c9; font-size:10px; }.harbor-preview p { margin:80px 0 0; color:#e2d8fa; font-size:clamp(37px,4vw,61px); line-height:.9; letter-spacing:-.065em; }.harbor-preview small { position:absolute; bottom:28px; max-width:370px; color:#b3abc2; font-size:11px; line-height:1.45; }
.after-hero { min-height:45vh; display:grid; place-items:center; color:#8A8A8A; font-size:18px; border-top:1px solid rgba(255,255,255,.05); }.after-hero.secondary { color:#fff; background:#0b0b0c; }
.impact-section { position:relative; isolation:isolate; min-height:100vh; display:grid; place-items:center; padding:110px 48px; overflow:hidden; background:#050505; border-top:1px solid rgba(255,255,255,.07); }.impact-section .soft-aurora-container { z-index:0; opacity:.82; }.impact-title { position:relative; z-index:1; max-width:1280px; margin:0; color:#f7f7f8; text-align:center; font-size:clamp(72px,7.2vw,88px); font-weight:760; line-height:.98; letter-spacing:-.075em; pointer-events:none; text-shadow:0 10px 42px rgba(0,0,0,.4); }.impact-title span { display:block; }
.contact-section { min-height:100vh; display:grid; align-items:center; padding:140px 48px 88px; background:#050505; border-top:1px solid rgba(255,255,255,.07); }.contact-panel { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:clamp(36px,6vw,88px); width:min(1280px,100%); margin:auto; padding:48px; border:1px solid #26262a; border-radius:38px; background:linear-gradient(135deg,rgba(20,20,22,.98),rgba(12,12,13,.98)); box-shadow:0 28px 80px rgba(0,0,0,.28); }.contact-portrait { min-height:560px; overflow:hidden; border-radius:20px; background:#292a39; }.contact-portrait img { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center; object-position:center; filter:saturate(.84) contrast(1.03); }.contact-content { display:flex; flex-direction:column; justify-content:center; min-width:0; }.contact-kicker { margin:0 0 10px; font-size:clamp(42px,4.1vw,62px); font-weight:700; line-height:1; letter-spacing:-.065em; background:linear-gradient(100deg,#9ba0ff,#d8b4fe 52%,#f472b6); color:transparent; background-clip:text; -webkit-background-clip:text; }.contact-content h1 { max-width:750px; margin:0; color:#f8f8f9; font-size:clamp(42px,4.2vw,64px); line-height:1.02; letter-spacing:-.065em; }.contact-copy { max-width:700px; margin:24px 0 34px; color:#a0a0a7; font-size:17px; line-height:1.6; }.contact-form { display:grid; gap:20px; }.contact-inputs { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.contact-form label { display:block; }.contact-form input,.contact-form textarea { width:100%; border:1px solid transparent; border-radius:10px; outline:none; color:#f4f4f5; background:#242426; font:16px/1.4 Inter,ui-sans-serif,system-ui,sans-serif; transition:border-color .25s,background .25s,box-shadow .25s; }.contact-form input { height:72px; padding:0 22px; }.contact-form textarea { min-height:172px; resize:vertical; padding:20px 22px; }.contact-form input::-moz-placeholder, .contact-form textarea::-moz-placeholder { color:#a4a4aa; }.contact-form input::placeholder,.contact-form textarea::placeholder { color:#a4a4aa; }.contact-form input:focus,.contact-form textarea:focus { border-color:rgba(216,180,254,.72); background:#29292c; box-shadow:0 0 0 4px rgba(216,180,254,.1); }.contact-form button { justify-self:start; min-height:62px; border:1px solid #fff; border-radius:10px; padding:0 30px; color:#17171a; background:#fff; font:600 16px/1 Inter,ui-sans-serif,system-ui,sans-serif; cursor:pointer; transition:transform .25s,box-shadow .25s,background .25s; }.contact-form button:hover { transform:translateY(-3px); background:#f2e9ff; box-shadow:0 13px 28px rgba(216,180,254,.18); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.contact-section { min-height:100vh; display:grid; align-items:center; padding:140px 48px 88px; background:#050505; border-top:1px solid rgba(255,255,255,.07); }.contact-panel { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:clamp(36px,6vw,88px); width:min(1280px,100%); margin:auto; padding:48px; border:1px solid #26262a; border-radius:38px; background:linear-gradient(135deg,rgba(20,20,22,.98),rgba(12,12,13,.98)); box-shadow:0 28px 80px rgba(0,0,0,.28); }.contact-portrait { min-height:560px; overflow:hidden; border-radius:20px; background:#292a39; }.contact-portrait img { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center; object-position:center; filter:saturate(.84) contrast(1.03); }.contact-content { display:flex; flex-direction:column; justify-content:center; min-width:0; }.contact-kicker { margin:0 0 10px; font-size:clamp(42px,4.1vw,62px); font-weight:700; line-height:1; letter-spacing:-.065em; background:linear-gradient(100deg,#9ba0ff,#d8b4fe 52%,#f472b6); color:transparent; background-clip:text; -webkit-background-clip:text; }.contact-content h1 { max-width:750px; margin:0; color:#f8f8f9; font-size:clamp(42px,4.2vw,64px); line-height:1.02; letter-spacing:-.065em; }.contact-copy { max-width:700px; margin:24px 0 34px; color:#a0a0a7; font-size:17px; line-height:1.6; }.contact-form { display:grid; gap:20px; }.contact-inputs { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.contact-form label { display:block; }.contact-form input,.contact-form textarea { width:100%; border:1px solid transparent; border-radius:10px; outline:none; color:#f4f4f5; background:#242426; font:16px/1.4 Roboto,"PingFang SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif; transition:border-color .25s,background .25s,box-shadow .25s; }.contact-form input { height:72px; padding:0 22px; }.contact-form textarea { min-height:172px; resize:vertical; padding:20px 22px; }.contact-form input::-moz-placeholder, .contact-form textarea::-moz-placeholder { color:#a4a4aa; }.contact-form input::placeholder,.contact-form textarea::placeholder { color:#a4a4aa; }.contact-form input:focus,.contact-form textarea:focus { border-color:rgba(216,180,254,.72); background:#29292c; box-shadow:0 0 0 4px rgba(216,180,254,.1); }.contact-form button { justify-self:start; min-height:62px; border:1px solid #fff; border-radius:10px; padding:0 30px; color:#17171a; background:#fff; font:600 16px/1 Roboto,"PingFang SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif; cursor:pointer; transition:transform .25s,box-shadow .25s,background .25s; }.contact-form button:hover { transform:translateY(-3px); background:#f2e9ff; box-shadow:0 13px 28px rgba(216,180,254,.18); }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.contact-section { min-height:100vh; display:grid; align-items:center; padding:140px 48px 88px; background:#050505; border-top:1px solid rgba(255,255,255,.07); }.contact-panel { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr); gap:clamp(36px,6vw,88px); width:min(1280px,100%); margin:auto; padding:48px; border:1px solid #26262a; border-radius:38px; background:linear-gradient(135deg,rgba(20,20,22,.98),rgba(12,12,13,.98)); box-shadow:0 28px 80px rgba(0,0,0,.28); }.contact-portrait { min-height:560px; overflow:hidden; border-radius:20px; background:#292a39; }.contact-portrait img { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center; object-position:center; filter:saturate(.84) contrast(1.03); }.contact-content { display:flex; flex-direction:column; justify-content:center; min-width:0; }.contact-kicker { margin:0 0 10px; font-size:clamp(42px,4.1vw,62px); font-weight:700; line-height:1; letter-spacing:-.065em; background:linear-gradient(100deg,#9ba0ff,#d8b4fe 52%,#f472b6); color:transparent; background-clip:text; -webkit-background-clip:text; }.contact-content h1 { max-width:750px; margin:0; color:#f8f8f9; font-size:clamp(42px,4.2vw,64px); line-height:1.02; letter-spacing:-.065em; }.contact-accent { display:block; width:72px; height:4px; margin:24px 0; border-radius:99px; background:linear-gradient(90deg,#8f91ff,#d8b4fe,#f472b6); }.contact-copy { max-width:700px; margin:0 0 28px; color:#a0a0a7; font-size:17px; line-height:1.75; }.contact-details { border-top:1px solid rgba(255,255,255,.1); }.contact-details h2 { display:flex; align-items:center; gap:12px; margin:25px 0 14px; color:#f0f0f2; font-size:23px; font-weight:500; }.contact-details h2 span { color:#ae8aff; font-size:29px; }.contact-detail { display:flex; align-items:center; gap:17px; min-height:74px; border-bottom:1px solid rgba(255,255,255,.09); color:inherit; text-decoration:none; transition:background .25s,transform .25s; }.contact-detail:hover { transform:translateX(5px); }.detail-icon { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:50%; color:#fff; font:600 20px/1 Roboto,"PingFang SC",sans-serif; }.email-icon { background:linear-gradient(135deg,#7b7cfb,#7f45dc); }.wechat-icon { background:linear-gradient(135deg,#67ce80,#308c4e); font-size:16px; }.linkedin-icon { background:linear-gradient(135deg,#548cff,#3155c8); }.portfolio-icon { background:linear-gradient(135deg,#668cff,#684ad9); }.contact-detail span { display:grid; gap:3px; }.contact-detail strong { color:#f2f2f4; font-size:16px; font-weight:500; }.contact-detail small { color:#aaaab1; font-size:14px; }.contact-detail em { margin-left:auto; color:#b47cff; font-size:25px; font-style:normal; }.contact-quote { display:flex; align-items:center; gap:18px; margin:28px 0 0; padding:21px 25px; border:1px solid rgba(170,125,255,.36); border-radius:17px; color:#ededf1; background:linear-gradient(100deg,rgba(83,62,135,.18),rgba(244,114,182,.09)); font-size:16px; }.contact-quote b { color:#8191ff; font-size:43px; line-height:.5; }.contact-quote i { margin-left:auto; color:#b47cff; font-size:21px; font-style:normal; }

/* 英文优先 Roboto；Roboto 不含中文字符时自动使用 PingFang SC。 */
button,input,textarea,.identity-copy small,.identity-note>span,.identity-note ul,.identity-note ol,.identity-portrait>div,.identity-drag,.eyebrow,.card-footer p,.drag-note,.career-entry time { font-family:Roboto,"PingFang SC","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif; }

/* 侧边信息卡片共用紧凑而均匀的内容节奏。 */
.toolkit-note h2,.workflow-note h2 { margin:42px 0 22px; }
.toolkit-note ul,.workflow-note ol { font-size:10px; line-height:1.75; }

/* 全站排版节奏：放宽文字呼吸感，避免标题与正文显得拥挤。 */
body { letter-spacing:.01em; line-height:1.55; }
.identity-copy h1 { letter-spacing:-.035em; line-height:1.2; }
.projects-heading h1 { letter-spacing:-.035em; line-height:1.08; }
.projects-heading>p:last-child { line-height:1.75; letter-spacing:.015em; }
.career-intro h1,.impact-title,.contact-content h1,.contact-kicker { letter-spacing:-.035em; line-height:1.08; }
.card-footer h2,.career-entry h2 { letter-spacing:-.02em; line-height:1.35; }
.identity-copy>p,.career-description,.contact-copy { letter-spacing:.012em; line-height:1.8; }
.identity-note h2 { letter-spacing:-.025em; line-height:1.35; }

/* 标题统一使用 Medium 字重。 */
.identity-copy h1,.projects-heading h1,.career-intro h1,.impact-title,.contact-content h1,.contact-kicker,.card-footer h2,.career-entry h2,.identity-note h2 { font-weight:500; }
.projects-heading>p:last-child { max-width:none; white-space:nowrap; }
.identity-copy h1>b { display:block; font:inherit; white-space:nowrap; }
.projects-heading h1 { font-size:64px; }
.impact-title { line-height:1.22; }
@media (max-width:680px) { .projects-heading h1 { font-size:48px; } }

/* 桌面端进入作品区时，三张案例同步可见；移动端仍沿用横向单卡浏览。 */
@media (min-width:681px) {
  .project-rail { width:-moz-max-content; width:max-content; justify-content:flex-start; padding:0 max(32px,calc((100vw - 1440px) / 2)); }
  .gallery-card { width:min(44.8vw,680px); }
}

/* 平板与桌面保持第三屏左右栏，使介绍区和首段经历顶部对齐。 */
@media (min-width:681px) and (max-width:1050px) {
  .career-layout { grid-template-columns:40% 60%; gap:54px; }
  .career-intro { position:sticky; top:calc(50vh - 165px); padding-right:28px; }
}

/* 各屏主标题使用统一的桌面端字号。 */
.career-intro h1,.impact-title { font-size:64px; }
@media (max-width:680px) { .career-intro h1 { font-size:52px; } .impact-title { font-size:clamp(42px,12vw,48px); } }

.contact-kicker,.contact-content h1 { font-size:50px; }
.contact-kicker { background:linear-gradient(90deg,#a7aeff 0%,#cf9af5 52%,#f263bb 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:680px) { .contact-kicker { font-size:45px; } .contact-content h1 { font-size:43px; } }

/* 第二屏网页作品封面：电脑显示器模型 */
.project-image-cover { display:grid; place-items:center; padding:3% 5% 1%; background:radial-gradient(circle at 75% 18%,rgba(186,181,255,.65),transparent 36%),linear-gradient(145deg,#101544,#2638bf 58%,#7772ed); }
.project-cover-title { position:absolute; z-index:0; top:7%; left:50%; width:100%; transform:translateX(-50%); color:rgba(255,255,255,.2); text-align:center; white-space:nowrap; font-size:clamp(44px,6.2vw,88px); font-weight:500; line-height:1; letter-spacing:-.055em; }
.project-image-cover img { position:relative; z-index:1; display:block; width:92%; height:92%; -o-object-fit:contain; object-fit:contain; -o-object-position:center; object-position:center; transform:translateY(-9%) scale(1.17); transform-origin:center; filter:drop-shadow(0 24px 28px rgba(5,8,40,.42)); }
.project-static-cover { display:block; overflow:hidden; padding:0; background:#111; }
.project-static-cover img { display:block; width:100%; height:100%; -o-object-fit:cover; object-fit:cover; -o-object-position:center; object-position:center; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.gallery-card:hover .project-static-cover img { transform:scale(1.02); }
.other-gradient-preview { isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; padding:8%; background:linear-gradient(135deg,#6558ff 0%,#8d62ff 28%,#ec71c9 63%,#ff9f6d 100%); }
.other-gradient-preview::before,.other-gradient-preview::after { content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(2px); }
.other-gradient-preview::before { width:54%; aspect-ratio:1; top:-24%; right:-8%; background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.92),rgba(122,237,255,.48) 30%,rgba(73,92,255,.12) 68%,transparent 72%); }
.other-gradient-preview::after { width:46%; aspect-ratio:1; bottom:-28%; left:15%; background:radial-gradient(circle at 40% 35%,rgba(255,225,122,.88),rgba(255,97,177,.46) 42%,transparent 72%); }
.other-gradient-preview span { color:rgba(255,255,255,.72); font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.24em; }
.other-gradient-preview strong { margin-top:10px; color:#fff; font-size:clamp(42px,5vw,76px); line-height:.82; letter-spacing:-.07em; text-shadow:0 12px 34px rgba(73,37,139,.3); }
.other-gradient-preview i,.other-gradient-preview b { position:absolute; border:1px solid rgba(255,255,255,.5); border-radius:999px; transform:rotate(-18deg); }
.other-gradient-preview i { width:31%; height:14%; top:16%; left:10%; }.other-gradient-preview b { width:19%; height:9%; top:31%; left:24%; }
.project-device-scene { display:grid; place-items:center; padding:5% 8% 3%; }
.device-pulse { background:radial-gradient(circle at 50% 72%,rgba(244,72,177,.55),transparent 36%),linear-gradient(145deg,#171624,#34226b 58%,#801d6c); }
.device-bloom { background:radial-gradient(circle at 75% 18%,rgba(186,181,255,.65),transparent 36%),linear-gradient(145deg,#101544,#2638bf 58%,#7772ed); }
.device-harbor { background:radial-gradient(circle at 25% 18%,rgba(184,151,255,.58),transparent 34%),linear-gradient(145deg,#171322,#482290 56%,#7b4ae0); }
.desktop-monitor { position:relative; width:min(82%,720px); filter:drop-shadow(0 30px 35px rgba(0,0,0,.42)); transform:translateY(3%); }
.monitor-bezel { position:relative; z-index:2; padding:2.2%; border:1px solid rgba(255,255,255,.32); border-radius:18px; background:linear-gradient(145deg,#363942,#111217 68%); box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 0 0 1px rgba(0,0,0,.45); }
.monitor-screen { overflow:hidden; aspect-ratio:16 / 9; border-radius:10px; background:#f4f5fb; box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.screen-toolbar { display:flex; align-items:center; gap:5px; height:10%; padding:0 3%; background:rgba(12,14,27,.94); }
.screen-toolbar i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.42); }
.screen-toolbar span { width:34%; height:24%; margin-left:auto; border-radius:10px; background:rgba(255,255,255,.13); }
.screen-page { display:grid; grid-template-columns:19% 1fr; height:90%; }
.screen-sidebar { display:flex; flex-direction:column; gap:10%; padding:18% 16%; background:rgba(13,16,34,.94); }
.screen-sidebar i { display:block; width:78%; height:4%; border-radius:8px; background:rgba(255,255,255,.18); }
.screen-sidebar i:first-child { width:48%; height:8%; margin-bottom:18%; background:linear-gradient(90deg,#8d8dff,#f472b6); }
.screen-content { padding:6%; background:linear-gradient(145deg,#f8f9ff,#dfe4f5); }
.screen-hero { display:flex; flex-direction:column; justify-content:flex-end; gap:10%; height:52%; padding:8%; border-radius:10px; background:linear-gradient(135deg,#252b65,#7169e8 58%,#e58ec8); }
.screen-hero span { width:48%; height:11%; border-radius:8px; background:rgba(255,255,255,.92); }
.screen-hero b { width:67%; height:6%; border-radius:8px; background:rgba(255,255,255,.42); }
.screen-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4%; height:31%; margin-top:5%; }
.screen-grid i { border-radius:7px; background:linear-gradient(145deg,#fff,#c9cfe4); box-shadow:0 5px 16px rgba(28,35,75,.12); }
.device-pulse .screen-hero { background:linear-gradient(135deg,#202034,#8234ba 58%,#f044a8); }
.device-pulse .screen-sidebar i:first-child { background:linear-gradient(90deg,#9b64ff,#ff4fae); }
.device-harbor .screen-hero { background:linear-gradient(135deg,#19162b,#5529ad 58%,#a784ff); }
.device-harbor .screen-sidebar i:first-child { background:linear-gradient(90deg,#7258ff,#c292ff); }
.monitor-neck { position:relative; z-index:1; width:9%; height:34px; margin:-1px auto 0; background:linear-gradient(90deg,#15161b,#555861 50%,#15161b); }
.monitor-base { position:relative; z-index:2; width:30%; height:11px; margin:auto; border-radius:50% 50% 5px 5px; background:linear-gradient(180deg,#696c74,#18191e); box-shadow:0 8px 14px rgba(0,0,0,.32); }
@media (max-width:680px) { .project-device-scene { padding:8% 5% 4%; }.desktop-monitor { width:92%; }.monitor-bezel { border-radius:12px; }.monitor-screen { border-radius:6px; }.monitor-neck { height:23px; } }
.career-section { min-height:100vh; padding:150px 0 130px; overflow:hidden; border-top:1px solid rgba(255,255,255,.07); background:radial-gradient(circle at 83% 18%,rgba(103,80,205,.1),transparent 24%),#070707; }.career-layout { width:min(1280px,calc(100% - 96px)); margin:auto; display:grid; grid-template-columns:40% 60%; gap:54px; align-items:start; will-change:transform,opacity; }.career-intro { position:sticky; top:calc(50vh - 165px); padding-right:28px; }.career-intro h1 { margin:0; color:#fff; font-size:clamp(56px,5vw,64px); font-weight:600; line-height:.97; letter-spacing:-.065em; }.career-intro>p:last-child { max-width:420px; margin:32px 0 0; color:#9a9a9f; font-size:16px; line-height:1.75; }.timeline { position:relative; padding:0 0 2px 44px; }.timeline-base,.timeline-active { position:absolute; top:12px; bottom:52px; left:7px; width:2px; border-radius:99px; }.timeline-base { background:#303036; }.timeline-active { background:linear-gradient(180deg,#6c63ff 0%,#d8b4fe 52%,#f472b6 100%); box-shadow:0 0 18px rgba(180,137,255,.34); transform-origin:top center; will-change:transform; }.career-entry { position:relative; padding:0 0 72px; cursor:default; }.career-entry:last-child { padding-bottom:0; }.timeline-dot { position:absolute; top:4px; left:-43px; width:14px; height:14px; border:3px solid #070707; border-radius:50%; background:#4a4a50; box-shadow:0 0 0 1px #3d3d43; transition:transform .4s ease,background .4s ease,box-shadow .4s ease; }.career-entry.is-active .timeline-dot { background:linear-gradient(135deg,#6c63ff,#d8b4fe 50%,#f472b6); box-shadow:0 0 0 1px rgba(216,180,254,.72),0 0 20px rgba(183,136,255,.6); transform:scale(1.32); }.career-entry-top { display:flex; align-items:baseline; justify-content:space-between; gap:24px; }.career-entry h2 { margin:0; color:#d4d4d8; font-size:22px; font-weight:560; line-height:1.2; letter-spacing:-.04em; transition:color .3s ease; }.career-entry time { flex:none; color:#88888e; font:11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }.career-company { margin:12px 0 18px; color:#aaaab0; font-size:13px; }.career-description { max-width:520px; margin:0; color:#74747b; font-size:14px; line-height:1.7; transition:color .3s ease; }.career-entry:hover h2,.career-entry.is-active h2 { color:#fff; }.career-entry:hover .career-description,.career-entry.is-active .career-description { color:#a5a5ac; }.career-entry:hover .timeline-dot { transform:scale(1.16); }
@media (max-width:1050px) { .identity-grid { grid-template-columns:1fr; padding:74px 0 20px; }.identity-stage { width:760px; max-width:100%; margin:auto; }.identity-copy { max-width:620px; }.projects-heading { margin-bottom:58px; }.gallery-card { width:min(60.8vw,608px); }.career-layout { grid-template-columns:1fr; gap:72px; }.career-intro { position:static; padding:0; }.career-intro>p:last-child { max-width:560px; }.contact-panel { grid-template-columns:340px 1fr; gap:38px; padding:34px; }.contact-portrait { min-height:480px; } }
@media (max-width:680px) { .header-inner,.identity-grid,.career-layout { width:calc(100% - 32px); }.header-inner { grid-template-columns:1fr auto; }.header-inner nav { display:none; }.identity-copy h1 { font-size:50px; }.identity-stage { height:445px; width:610px; transform:scale(.72); transform-origin:top center; margin-bottom:-120px; }.site-header { height:68px; }.identity-hero { padding-top:68px; }.projects-section { padding:118px 0 58px; }.projects-heading { width:calc(100% - 32px); margin-bottom:45px; }.projects-heading h1 { font-size:48px; }.projects-heading>p:last-child { margin-top:20px; font-size:14px; white-space:normal; }.project-rail { gap:18px; padding:0 16px; }.gallery-card { width:86vw; border-radius:17px; }.cover-wrap { aspect-ratio:4 / 3; }.card-footer { min-height:110px; padding:21px 19px; }.card-footer h2 { font-size:16px; }.card-footer p { max-width:175px; }.mini-nav { gap:4px; font-size:7px; }.mini-nav span { padding:6px; }.browser small { display:none; }.bloom-preview p { margin-top:92px; font-size:42px; }.pulse-preview strong { font-size:54px; }.harbor-preview p { margin-top:72px; font-size:39px; }.career-section { padding:105px 0 84px; }.career-layout { display:block; }.career-intro h1 { font-size:52px; }.career-intro>p:last-child { margin-top:24px; font-size:15px; }.timeline { margin-top:56px; padding-left:32px; }.timeline-base,.timeline-active { left:5px; }.timeline-dot { left:-32px; }.career-entry { padding-bottom:54px; }.career-entry-top { display:block; }.career-entry h2 { font-size:19px; }.career-entry time { display:block; margin-top:8px; }.career-company { margin:10px 0 14px; }.career-description { font-size:13px; }.timeline-active { display:none; }.impact-section { min-height:100svh; padding:96px 20px; }.impact-title { font-size:clamp(42px,12vw,48px); line-height:1.02; }.contact-section { padding:92px 16px 54px; }.contact-panel { grid-template-columns:1fr; gap:31px; padding:16px; border-radius:25px; }.contact-portrait { min-height:390px; border-radius:15px; }.contact-content { padding:4px 4px 12px; }.contact-kicker { font-size:45px; }.contact-content h1 { font-size:43px; }.contact-copy { margin:18px 0 28px; font-size:15px; }.contact-inputs { grid-template-columns:1fr; gap:14px; }.contact-form { gap:14px; }.contact-form input { height:62px; }.contact-form textarea { min-height:145px; }.contact-form button { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* AI 智能外呼系统案例详情页（依据 Figma 1551:76932 重构为响应式布局） */
.case-page { min-height:100vh; overflow:hidden; color:#fff; background:#181818; font-family:Roboto,"PingFang SC",sans-serif; }
.gallery-card.is-clickable { cursor:pointer; }
.case-nav { position:fixed; z-index:40; top:0; left:0; display:flex; align-items:center; justify-content:space-between; width:100%; height:64px; padding:0 clamp(24px,5vw,96px); border-bottom:1px solid rgba(255,255,255,.1); background:rgba(15,15,15,.72); backdrop-filter:blur(18px); }
.case-nav a { color:#fff; text-decoration:none; font-size:14px; transition:opacity .25s,transform .25s; }.case-nav a:hover { opacity:.72; transform:translateX(-4px); }.case-nav span { color:#85858b; font-size:11px; letter-spacing:.16em; }
.case-hero { position:relative; width:100%; margin-top:64px; background:#0c0c0c; }.case-hero>img { display:block; width:100%; height:auto; min-height:620px; -o-object-fit:cover; object-fit:cover; -o-object-position:center top; object-position:center top; }.case-hero::after { content:''; position:absolute; inset:auto 0 0; height:24%; background:linear-gradient(transparent,#181818); pointer-events:none; }.case-hero-meta { position:absolute; z-index:2; right:7.4%; bottom:6%; left:7.4%; display:flex; justify-content:space-between; color:rgba(255,255,255,.55); font-size:11px; letter-spacing:.12em; }
.case-block { width:min(1640px,calc(100% - 11vw)); margin:auto; padding:clamp(100px,10vw,190px) 0; }.case-block+.case-block { border-top:1px solid rgba(255,255,255,.07); }
.case-heading { margin-bottom:clamp(56px,6vw,96px); }.case-heading>p { margin:0; color:#fff; font-size:clamp(45px,5.2vw,82px); font-weight:500; line-height:.9; letter-spacing:-.045em; }.case-heading h2 { display:flex; align-items:center; gap:28px; margin:34px 0 0 18px; font-size:clamp(30px,3.5vw,60px); font-weight:500; line-height:1; }.case-heading h2 i { width:32px; height:4px; flex:none; background:#d9d9d9; }
.case-copy { max-width:1500px; color:#ededed; font-size:clamp(15px,1.25vw,24px); line-height:1.75; }.case-copy p { margin:0 0 18px; }
.case-values { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,4vw,76px); max-width:1440px; margin:78px auto 0; }.case-values::before { content:''; position:absolute; top:50%; right:0; left:0; height:1px; background:rgba(255,255,255,.23); }.case-values span { position:relative; z-index:1; display:grid; place-items:center; width:172px; max-width:100%; height:75px; justify-self:center; border-radius:4px; color:#fff; background:#3378fd; font-size:clamp(19px,2vw,38px); font-weight:500; }.case-values span.light { color:#3378fd; background:#fff; }
.case-lead { max-width:1400px; margin:-20px 0 72px; color:#d6d6d9; font-size:clamp(16px,1.3vw,24px); line-height:1.75; }.case-problems { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,5vw,100px); }.case-problems article { position:relative; min-height:300px; padding:55px 32px 40px; border:1px solid rgba(255,255,255,.12); border-radius:50%; text-align:center; background:radial-gradient(circle at 40% 30%,#4c4c4f,#29292b 72%); box-shadow:inset 0 1px rgba(255,255,255,.16),0 25px 60px rgba(0,0,0,.16); }.case-problems b { color:#3378fd; font-size:13px; letter-spacing:.15em; }.case-problems h3 { margin:38px 0 14px; font-size:clamp(21px,2vw,30px); font-weight:500; }.case-problems p { max-width:260px; margin:auto; color:rgba(255,255,255,.58); font-size:14px; line-height:1.65; }
.case-directions { display:grid; gap:28px; width:min(960px,100%); }.case-directions article { display:grid; grid-template-columns:190px 70px 1fr; align-items:center; gap:20px; }.case-directions article>div { display:grid; place-items:center; width:182px; height:182px; border-radius:50%; color:#161616; background:#f2f2f2; }.case-directions span { font-size:25px; font-weight:500; }.case-directions small { color:#555; font-size:17px; }.case-directions article>i { color:#aaa; font-size:40px; font-style:normal; }.case-directions article>p { margin:0; padding:28px 34px; border-radius:16px; color:#eee; background:rgba(255,255,255,.1); font-size:16px; line-height:1.7; }
.case-pyramid { display:flex; flex-direction:column; align-items:center; width:min(660px,90%); margin:100px auto 0; }.case-pyramid div { display:flex; flex-direction:column; align-items:center; justify-content:center; height:88px; margin-top:-1px; color:#fff; background:linear-gradient(90deg,#071337,#18449c,#3378fd); clip-path:polygon(13% 0,87% 0,100% 100%,0 100%); }.case-pyramid div:nth-child(1){width:28%}.case-pyramid div:nth-child(2){width:45%}.case-pyramid div:nth-child(3){width:62%}.case-pyramid div:nth-child(4){width:80%}.case-pyramid div:nth-child(5){width:100%}.case-pyramid small { margin-top:3px; color:rgba(255,255,255,.65); font-size:10px; }
.case-showcase figure { margin:0; }.case-showcase figure img { display:block; width:100%; border-radius:24px; box-shadow:0 30px 90px rgba(0,0,0,.42); }.case-showcase figcaption { margin-top:20px; color:#88888e; font-size:13px; text-align:right; }.case-back { display:flex; align-items:center; justify-content:space-between; margin-top:100px; padding:34px 0; border-top:1px solid rgba(255,255,255,.16); border-bottom:1px solid rgba(255,255,255,.16); color:#fff; text-decoration:none; font-size:clamp(26px,3vw,48px); }.case-back span { color:#3378fd; }
@media (max-width:760px) { .case-nav span { display:none; }.case-hero>img { min-height:420px; }.case-block { width:calc(100% - 32px); padding:88px 0; }.case-heading h2 { margin:22px 0 0; gap:16px; }.case-heading h2 i { width:22px; height:3px; }.case-values { grid-template-columns:repeat(2,1fr); margin-top:50px; }.case-values::before { display:none; }.case-values span { width:100%; height:60px; }.case-problems { grid-template-columns:1fr; }.case-problems article { width:280px; min-height:280px; margin:auto; }.case-directions article { grid-template-columns:100px 30px 1fr; gap:10px; }.case-directions article>div { width:100px; height:100px; }.case-directions span { font-size:17px; }.case-directions small { font-size:12px; }.case-directions article>i { font-size:24px; }.case-directions article>p { padding:18px; font-size:13px; }.case-pyramid { width:100%; }.case-pyramid div { height:70px; font-size:12px; }.case-pyramid small { display:none; }.case-showcase figure img { border-radius:12px; } }

/* Figma 比例校准 */
.case-nav { position:absolute; height:84px; border:0; background:transparent; backdrop-filter:none; }.case-nav span { display:none; }.case-nav a { padding:12px 18px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(10,10,10,.42); backdrop-filter:blur(12px); }
.case-hero { margin-top:0; }.case-hero>img { min-height:0; aspect-ratio:1920 / 1616; -o-object-fit:cover; object-fit:cover; }.case-hero::after { display:none; }
.case-block { width:88.4%; max-width:none; padding:clamp(90px,7vw,135px) 0 clamp(110px,9vw,175px); }.case-block+.case-block { border-top:0; }
.case-heading { margin-bottom:clamp(72px,8vw,150px); }.case-heading>p { font-size:clamp(50px,4.28vw,82px); line-height:.88; }.case-heading h2 { margin-top:44px; margin-left:16px; font-size:clamp(36px,3.125vw,60px); }.case-copy { font-size:clamp(16px,1.25vw,24px); line-height:1.67; }
.case-values { margin-top:52px; }.case-values span { width:172px; height:75px; }
.case-lead { margin-top:-42px; margin-bottom:76px; }
.case-problems { display:flex; justify-content:space-between; gap:40px; padding:0 6px; }.case-problems article { flex:0 0 261px; width:261px; height:261px; min-height:261px; padding:45px 32px 28px; border:0; border-radius:50%; }.case-problems h3 { margin:32px 0 10px; font-size:24px; }.case-problems p { font-size:13px; }
.case-construction-body { display:grid; grid-template-columns:minmax(620px,1.12fr) minmax(470px,.88fr); align-items:center; gap:clamp(56px,8vw,150px); }.case-directions { width:100%; gap:69px; }.case-directions article { grid-template-columns:182px 94px minmax(280px,391px); gap:17px; }.case-directions article>div { width:182px; height:182px; }.case-directions article>p { min-height:157px; display:grid; place-items:center; padding:22px 28px; text-align:center; font-size:clamp(14px,1.25vw,24px); line-height:1.65; }.case-directions article:nth-child(2)>p { min-height:193px; }.case-pyramid { width:100%; max-width:731px; margin:0; }.case-pyramid div { height:112px; }.case-pyramid small { font-size:12px; }
.case-showcase { overflow:visible; }.case-showcase-stage { position:relative; min-height:1380px; margin-top:-10px; }.case-showcase-stage>figure { position:absolute; top:0; left:-33%; width:68%; margin:0; }.case-showcase-stage>figure img { border-radius:24px; }.case-showcase-panel { position:absolute; top:760px; left:3%; width:62%; padding:32px; border-radius:16px; background:rgba(255,255,255,.2); }.case-showcase-panel img { display:block; width:100%; border-radius:12px; }.case-showcase figcaption { margin-top:15px; }
.case-display-card { overflow:hidden; border:1px solid rgba(255,255,255,.13); box-shadow:0 22px 60px rgba(0,0,0,.26); cursor:pointer; transform-origin:center; transition:border-color .3s ease,box-shadow .3s ease,filter .3s ease; will-change:transform; }.case-display-card:hover { z-index:4; border-color:rgba(216,180,254,.46); box-shadow:0 34px 82px rgba(0,0,0,.42),0 0 34px rgba(108,99,255,.14); filter:brightness(1.035); }.case-display-card img { transition:transform .45s cubic-bezier(.22,1,.36,1); }.case-display-card:hover img { transform:scale(1.018); }
@media (max-width:1100px) { .case-problems { justify-content:center; flex-wrap:wrap; }.case-construction-body { grid-template-columns:1fr; }.case-pyramid { width:min(680px,92%); margin:90px auto 0; }.case-showcase-stage { min-height:980px; }.case-showcase-stage>figure { left:-12%; width:82%; }.case-showcase-panel { top:540px; left:18%; width:78%; } }
@media (max-width:760px) { .case-nav { height:64px; padding:0 16px; }.case-nav a { font-size:12px; }.case-hero>img { min-height:0; aspect-ratio:1920 / 1616; }.case-block { width:calc(100% - 32px); padding:82px 0 100px; }.case-heading { margin-bottom:62px; }.case-heading h2 { margin-top:24px; }.case-problems article { flex-basis:261px; width:261px; min-height:261px; }.case-construction-body { display:block; }.case-directions { gap:32px; }.case-directions article { grid-template-columns:100px 28px 1fr; gap:8px; }.case-directions article>p,.case-directions article:nth-child(2)>p { min-height:120px; }.case-showcase-stage { min-height:680px; }.case-showcase-stage>figure { left:-20%; width:108%; }.case-showcase-panel { top:310px; left:8%; width:100%; padding:12px; }.case-back { margin-top:30px; } }

/* 页面展示仅保留主视觉，去除重复卡片、说明文字和描边。 */
.case-showcase-stage { min-height:clamp(560px,43vw,840px); }.case-showcase-stage>figure { left:-18%; width:72%; border:0; box-shadow:none; }.case-showcase .case-display-card:hover { border-color:transparent; box-shadow:0 34px 82px rgba(0,0,0,.3); }
@media (max-width:1100px) { .case-showcase-stage { min-height:620px; }.case-showcase-stage>figure { left:-12%; width:88%; } }
@media (max-width:760px) { .case-showcase-stage { min-height:360px; }.case-showcase-stage>figure { left:-20%; width:108%; } }

/* 单张长图案例页 */
.case-image-page { min-height:100vh; padding:112px 24px 80px; background:radial-gradient(circle at 50% 0,rgba(76,78,92,.16),transparent 34%),#090909; }
.case-glass-header { position:fixed; z-index:50; top:0; right:0; left:0; height:72px; border-bottom:1px solid rgba(255,255,255,.09); background:rgba(8,8,9,.66); backdrop-filter:blur(20px) saturate(135%); -webkit-backdrop-filter:blur(20px) saturate(135%); }
.case-glass-inner { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1280px,calc(100% - 48px)); height:100%; margin:auto; }.case-logo { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font-size:14px; }.case-logo span { display:grid; place-items:center; width:32px; height:32px; border-radius:11px; color:#16121e; background:linear-gradient(135deg,#7779ff,#d8b4fe 55%,#f472b6); box-shadow:0 0 24px rgba(216,180,254,.3); }.case-logo b { font-weight:500; }.case-glass-header nav { display:flex; gap:38px; }.case-glass-header nav a { color:#98989f; font-size:13px; text-decoration:none; transition:color .25s,transform .25s; }.case-glass-header nav a:hover { color:#fff; transform:translateY(-1px); }.case-cta { justify-self:end; padding:10px 19px; border:1px solid rgba(255,255,255,.13); border-radius:10px; color:#f4f4f5; background:#171719; text-decoration:none; font-size:13px; transition:background .25s,border-color .25s,transform .25s; }.case-cta:hover { border-color:rgba(255,255,255,.3); background:#222226; transform:translateY(-2px); }
.case-image-card { display:grid; gap:0; width:min(1200px,100%); margin:0 auto; overflow:visible; background:transparent; }.case-image-card img { display:block; width:100%; height:auto; border-radius:0; }
.case-image-back { display:flex; align-items:center; justify-content:center; width:min(1200px,100%); height:64px; margin:28px auto 0; border:1px solid rgba(255,255,255,.1); border-radius:18px; color:#d7d7db; background:#151517; text-decoration:none; font-size:14px; transition:color .25s,background .25s,transform .25s; }.case-image-back:hover { color:#fff; background:#202024; transform:translateY(-2px); }
@media (max-width:680px) { .case-image-page { padding:88px 10px 44px; }.case-glass-header { height:64px; }.case-glass-inner { width:calc(100% - 24px); grid-template-columns:1fr auto; }.case-glass-header nav { display:none; }.case-logo b { font-size:13px; }.case-image-back { height:54px; margin-top:16px; border-radius:13px; } }
.contact-content h1 { letter-spacing:.01em; }
.selection\:bg-fuchsia-400\/40 *::-moz-selection{
  background-color: rgb(232 121 249 / 0.4);
}
.selection\:bg-fuchsia-400\/40 *::selection{
  background-color: rgb(232 121 249 / 0.4);
}
.selection\:bg-fuchsia-400\/40::-moz-selection{
  background-color: rgb(232 121 249 / 0.4);
}
.selection\:bg-fuchsia-400\/40::selection{
  background-color: rgb(232 121 249 / 0.4);
}
.soft-aurora-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.soft-aurora-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}