:root {
  --page-bg: #000;
  --text-main: #e8e8f0;
  --text-soft: rgba(255, 255, 255, .45);
  --cyan: #00aaff;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: auto !important; min-height: 100%; margin: 0; overflow-x: hidden !important; overflow-y: auto !important; background: var(--page-bg); color: var(--text-main); }
body { font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
button { color: inherit; font: inherit; }
html { scroll-behavior: smooth; }


/* The exact final interactive hero from the referenced task. */
.preview-shell { position: relative; width: 100%; height: 100vh; min-height: 720px; overflow: hidden; background: #101115; isolation: isolate; }
.preview-shell::after { content: ""; position: absolute; z-index: 4; inset: auto 0 0; height: clamp(280px, 40vh, 520px); pointer-events: none; background: linear-gradient(to bottom, rgba(20,4,65,0) 0%, rgba(20,4,65,.17) 23%, rgba(20,4,65,.48) 53%, rgba(20,4,65,.82) 78%, #140441 100%); }
.hero-stage { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: center center; }
.hero-stage.is-entering { animation: hero-stage-enter 4s cubic-bezier(.22,.61,.36,1) both; }
@keyframes hero-stage-enter { 0%, 12% { transform: scale(1.34) rotate(-7deg); } 100% { transform: none; } }
.hero-stars { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; }

.portfolio-body { position: relative; width: 100%; height: 2080px; margin: 0 auto; overflow: hidden; background-color: #08021d; background-image: linear-gradient(to bottom, #140441 0%, rgba(20,4,65,.82) 25%, rgba(20,4,65,.32) 68%, rgba(20,4,65,0) 100%), url("assets/figma-home/background.png"); background-position: center top, center top; background-size: 100% 380px, 100% 100%; background-repeat: no-repeat; }
.portfolio-body::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(17,0,64,.56) 0, rgba(36,0,136,.56) 30%, rgba(44,0,166,0) 53%); mix-blend-mode: screen; opacity: .52; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 360px); mask-image: linear-gradient(to bottom, transparent 0, #000 360px); }
.section-shell { position: absolute; left: 50%; width: min(1920px, 100%); transform: translateX(-50%); }

.has-home-reveal [data-home-reveal] { opacity: 0; translate: 0 24px; transition: opacity .68s ease, translate .68s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1), background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.has-home-reveal [data-home-reveal].is-visible { opacity: 1; translate: 0 0; }

/* Profile: Figma frame 12:819, at page coordinates x277 / y1235. */
.profile { top: 0; height: 1158px; }
.profile-photo { position: absolute; left: 13.28125%; top: 128px; width: 86.5625%; height: 1030px; overflow: hidden; background: transparent; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 60% 50%, #000 47%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.65) 72%, rgba(0,0,0,.25) 88%, transparent 100%); mask-image: radial-gradient(ellipse 60% 50% at 60% 50%, #000 47%, rgba(0,0,0,.95) 55%, rgba(0,0,0,.65) 72%, rgba(0,0,0,.25) 88%, transparent 100%); }
.profile-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 5%, rgba(0,0,0,.55) 14%, #000 28%, #000 78%, rgba(0,0,0,.7) 87%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.15) 5%, rgba(0,0,0,.55) 14%, #000 28%, #000 78%, rgba(0,0,0,.7) 87%, transparent 100%); }
.profile-photo img { opacity: 0; animation: profile-photo-cycle 6s linear infinite; }
.profile-photo img:first-child { opacity: 1; animation-delay: 0s; }
.profile-photo img:nth-child(2) { animation-delay: -3s; }
@keyframes profile-photo-cycle { 0%, 30% { opacity: 1; } 50%, 80% { opacity: 0; } 100% { opacity: 1; } }
@media (min-width: 821px) {
  .profile-photo img { -webkit-mask-image: radial-gradient(ellipse 31% 75% at 67% 50%, #000 22%, rgba(0,0,0,.94) 46%, rgba(0,0,0,.48) 75%, transparent 100%); mask-image: radial-gradient(ellipse 31% 75% at 67% 50%, #000 22%, rgba(0,0,0,.94) 46%, rgba(0,0,0,.48) 75%, transparent 100%); }
}
.profile-content { position: absolute; left: 277px; top: 154px; width: 778px; height: 845px; }

.identity { display: flex; align-items: center; gap: 21px; width: 100%; height: 74px; }
.identity-title { position: relative; flex: 0 0 175.451px; width: 175.451px; height: 74px; }
.identity-title img { position: absolute; display: block; }
.identity-name { left: 19.07px; top: 0; width: 147.043px; height: 34.175px; }
.identity-outline { left: 0; top: 21.8px; width: 175.451px; height: 52.232px; }
.profile-tags { display: flex; align-items: flex-start; gap: 12.032px; white-space: nowrap; }
.profile-tags span, .selected-tags span { display: inline-flex; align-items: center; padding: 6.016px 18.048px; border: 1.253px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.75); font-size: 20px; font-weight: 400; line-height: 27.072px; backdrop-filter: blur(6px); }

.profile-lead { padding-top: 10px; width: 767px; }
.profile-lead p { margin: 0; color: rgba(255,255,255,.5); font-size: 20px; font-weight: 400; line-height: 25.65px; }
.profile-block { width: 100%; }
.contact-block { margin-top: 40.326px; }
.section-heading { display: flex; align-items: center; gap: 10px; height: 47.421px; margin: 0; color: var(--text-main); font-size: 28px; font-weight: 600; line-height: 26.464px; }
.section-heading::before { content: ""; flex: 0 0 4.684px; width: 4.684px; height: 24.39px; border-radius: 2.52px; background: var(--cyan); }
.personal-pills { display: flex; align-items: center; gap: 18.903px; width: 790px; height: 27.108px; margin-top: 10px; }
.personal-pill { display: inline-flex; align-items: center; gap: 7.561px; padding: 1.26px 10.082px; border: 0; border-radius: 16.382px; background: rgba(255,255,255,.13); color: #fff; font-size: 15.752px; font-weight: 400; line-height: 23.629px; white-space: nowrap; }
button.personal-pill { cursor: copy; transition: background .18s ease; }
button.personal-pill:hover, button.personal-pill:focus-visible { background: rgba(0,170,255,.26); outline: none; }
.personal-pill > span { font-size: 16.382px; line-height: 24.574px; }
.personal-pill > .personal-pill__rotator { display: inline-grid; align-items: center; height: 23.629px; overflow: hidden; font-size: inherit; line-height: inherit; }
.personal-pill__rotator > span { grid-area: 1 / 1; display: block; white-space: nowrap; }
.personal-pill__rotator > span:first-child { animation: education-school 6s ease-in-out infinite; }
.personal-pill__rotator > span:last-child { animation: education-year 6s ease-in-out infinite; }
@keyframes education-school {
  0%, 42% { opacity: 1; transform: translateY(0); }
  50%, 92% { opacity: 0; transform: translateY(-7px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes education-year {
  0%, 42% { opacity: 0; transform: translateY(7px); }
  50%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-7px); }
}

.experience-block { margin-top: 28px; width: 767px; }
.experience-block .section-heading { height: 36.979px; }
.experience-block .section-heading::before, .representative .section-heading::before { width: 3.997px; height: 17.995px; flex-basis: 3.997px; border-radius: 2px; }
.experience-list { display: flex; flex-direction: column; gap: 26.318px; margin-top: 10px; }
.experience-list article { margin: 0; width: 734px; }
.experience-list h3 { display: flex; align-items: center; gap: 0; margin: 0; color: rgba(255,255,255,.85); font-size: 17.107px; font-weight: 600; line-height: 25.66px; white-space: nowrap; }
.experience-list h3 span { color: rgba(255,255,255,.45); font-size: 15.791px; font-weight: 400; line-height: 26.844px; }
.experience-list p { margin: 5.264px 0 0; color: rgba(255,255,255,.45); font-size: 20px; font-weight: 400; line-height: 26.844px; }

.representative { margin-top: 28px; width: 1460px; }
.representative .section-heading { height: 34.987px; }
.representative-grid { display: grid; grid-template-columns: repeat(3, 239.77px); grid-auto-rows: 91.25px; gap: 12.845px; width: 745px; margin-top: 18px; }
.project-chip { --glow-x: 50%; --glow-y: 50%; --glow-angle: 90deg; --glow-intensity: .28; position: relative; isolation: isolate; display: flex; align-items: center; gap: 12.845px; min-width: 0; padding: 12.845px 15.414px; border: 1.07px solid rgba(255,255,255,.08); border-radius: 15.414px; color: inherit; text-decoration: none; background: rgba(255,255,255,.08); backdrop-filter: blur(4.95px); transform-origin: center; transition: transform .28s cubic-bezier(.2,.8,.2,1), background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.project-chip::before, .project-chip::after { content: ""; position: absolute; pointer-events: none; opacity: 0; transition: opacity .22s ease; }
.project-chip::before { inset: -1px; z-index: 1; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--glow-angle), transparent 0deg, rgba(55,120,255,.12) 86deg, rgba(73,214,255,.95) 154deg, rgba(177,118,255,.92) 194deg, transparent 270deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.project-chip::after { inset: -8px; z-index: 1; border-radius: 21px; background: radial-gradient(circle 78px at var(--glow-x) var(--glow-y), rgba(88,205,255,.72) 0%, rgba(116,104,255,.38) 34%, transparent 72%); filter: blur(10px); mix-blend-mode: screen; }
.project-chip > * { position: relative; z-index: 2; }
.project-chip:nth-child(4) { grid-column: 1; grid-row: 2; }
.project-chip:nth-child(5) { grid-column: 2; grid-row: 2; }
.project-chip img { flex: 0 0 46.228px; display: block; width: 46.228px; height: 46.228px; border-radius: 10.276px; object-fit: cover; }
.project-chip div { min-width: 0; }
.project-chip strong, .project-chip span { display: block; white-space: nowrap; }
.project-chip strong { color: rgba(255,255,255,.85); font-size: 15.414px; font-weight: 600; line-height: 23.121px; }
.project-chip span { color: rgba(255,255,255,.4); font-size: 13.487px; font-weight: 400; line-height: 18.882px; }
.project-chip:hover, .project-chip:focus-visible { z-index: 5; transform: rotate(2.5deg) scale(1.08); border-color: rgba(0,170,255,.38); background: rgba(255,255,255,.13); box-shadow: 0 22px 54px rgba(0,0,0,.45); outline: none; }
.project-chip:hover::before, .project-chip:hover::after { opacity: var(--glow-intensity); }
.project-chip:focus-visible::before, .project-chip:focus-visible::after { opacity: .78; }
.project-chip:nth-child(even):hover, .project-chip:nth-child(even):focus-visible { transform: rotate(-2.5deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .profile-photo img { animation: none; }
  .profile-photo img:not(:first-child) { opacity: 0; }
  .personal-pill__rotator > span { animation: none; }
  .personal-pill__rotator > span:last-child { display: none; }
  .has-home-reveal [data-home-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .project-chip::before, .project-chip::after { transition: none; }
}

/* Selected work: Figma coordinates x258 / y2281, relative y1200 below hero. */
.selected-work { top: 1200px; height: 880px; scroll-margin-top: 88px; }
.selected-copy { position: absolute; left: 258px; top: 0; width: 323.003px; height: 411px; }
.selected-title-art { position: relative; width: 323.003px; height: 83.77px; }
.selected-title-art img { position: absolute; display: block; }
.selected-name { left: 54.19px; top: 0; width: 165.758px; height: 38.525px; }
.selected-outline { left: 0; top: 24.89px; width: 323.003px; height: 58.88px; }
.selected-en { width: 315.637px; height: 23.673px; margin: 4.509px 0 0; color: rgba(255,255,255,.3); font-size: 12.4px; font-weight: 500; line-height: 18.6px; letter-spacing: 15.7818px; white-space: nowrap; }
.selected-line { display: block; width: 31.558px; height: 2.246px; margin-top: 22.545px; background: linear-gradient(90deg, #008cff, rgba(65,223,255,0)); }
.selected-slogan { margin: 22.545px 0 0; color: rgba(255,255,255,.45); font-size: 20px; font-weight: 400; line-height: 28.915px; white-space: nowrap; }
.selected-tags { display: flex; flex-wrap: wrap; gap: 11px 12px; width: 316px; margin-top: 22.545px; }
.selected-tags span { padding: 5.836px 17.509px; font-size: 17.509px; line-height: 26.263px; }
.carousel-controls { display: flex; gap: 11.273px; margin-top: 36.073px; }
.carousel-controls button { display: grid; place-items: center; width: 45.091px; height: 45.091px; padding: 0; border: .939px solid rgba(255,255,255,.2); border-radius: 50%; background: transparent; font-size: 18.036px; line-height: 27.055px; cursor: pointer; }
.carousel-controls button:hover, .carousel-controls button:focus-visible { border-color: rgba(255,255,255,.65); background: rgba(255,255,255,.1); outline: none; }
.selected-more-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 0; color: rgba(255,255,255,.7); font-size: 17px; text-decoration: none; transition: color .25s ease, gap .25s ease; }
.selected-more-link:hover, .selected-more-link:focus-visible { gap: 17px; color: #fff; outline: none; }
.selected-more-link:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

.carousel { position: absolute; left: 652px; top: 65px; width: 1025px; height: 690px; outline: none; touch-action: pan-y; }
.carousel-stage { position: relative; isolation: isolate; width: 100%; height: 461px; perspective: 1400px; }
.carousel-stage::after { content: ""; position: absolute; left: 14%; right: 2%; bottom: -146px; z-index: 0; height: 164px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(31,132,255,.16) 0%, rgba(96,61,218,.1) 38%, transparent 73%); filter: blur(22px); opacity: .82; }
.work-card { --slot-x: 0px; --slot-scale: 1; --slot-opacity: 0; --edge-proximity: 0; --cursor-angle: 45deg; --card-rotate-x: 0deg; --card-rotate-y: 0deg; position: absolute; left: 50%; bottom: 0; width: 345px; height: 461px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; isolation: isolate; opacity: var(--slot-opacity); transform: translateX(-50%) translateX(var(--slot-x)) scale(var(--slot-scale)) rotateX(var(--card-rotate-y)) rotateY(var(--card-rotate-x)); transform-origin: center bottom; transition: transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease; pointer-events: none; }
.work-card::before { content: ""; position: absolute; inset: -1px; z-index: 3; padding: 1px; border-radius: inherit; pointer-events: none; background: conic-gradient(from calc(var(--cursor-angle) - 60deg) at center, transparent 0deg, rgba(56,189,248,.95) 18deg, rgba(192,132,252,.98) 60deg, rgba(244,114,182,.92) 102deg, transparent 120deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: calc((var(--edge-proximity) - 52) / 48); transition: opacity .25s ease-out; }
.work-card::after { content: ""; position: absolute; left: 4%; bottom: -142px; width: 92%; height: 132px; border-radius: 22px; pointer-events: none; background: var(--reflection-image) center 70% / 100% auto no-repeat; opacity: .18; transform: scaleY(-1); filter: blur(6px) saturate(1.12) brightness(1.08); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 42%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.3) 42%, #000 100%); }
.work-card:nth-child(1) { --reflection-image: url("assets/figma-home/card-gold.png"); }
.work-card:nth-child(2) { --reflection-image: url("assets/figma-home/card-xiaoxiang.png"); }
.work-card:nth-child(3) { --reflection-image: url("assets/figma-home/card-xhs.png"); }
.work-card:nth-child(4)::after { display: none; }
.work-card:nth-child(5) { --reflection-image: url("assets/figma-home/card-wufu.png"); }
.work-card picture, .work-card img, .work-card video { display: block; width: 100%; height: 100%; border-radius: 22px; }
.work-card img, .work-card video { object-fit: cover; }
.work-card img { filter: brightness(var(--source-brightness, 1)); }
.work-card video { position: relative; z-index: 1; backface-visibility: hidden; }
/* Reflect the rendered video frames; keep the poster reflection above as a fallback. */
@supports (-webkit-box-reflect: below 8px) {
  .work-card::after { display: none; }
  .work-card video { -webkit-box-reflect: below 8px linear-gradient(to top, rgba(0,0,0,.3), transparent 38%); }
  .work-card[data-slot="0"] video { -webkit-box-reflect: below 8px linear-gradient(to top, rgba(0,0,0,.5), transparent 38%); }
}
.work-card-edge-light { position: absolute; inset: -28px; z-index: 0; border-radius: inherit; pointer-events: none; -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, #000 2.5%, transparent 10%, transparent 90%, #000 97.5%); mask-image: conic-gradient(from var(--cursor-angle) at center, #000 2.5%, transparent 10%, transparent 90%, #000 97.5%); opacity: calc((var(--edge-proximity) - 32) / 68); mix-blend-mode: plus-lighter; transition: opacity .25s ease-out; }
.work-card-edge-light::before { content: ""; position: absolute; inset: 28px; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(182,225,255,.95), inset 0 0 3px rgba(101,196,255,.72), inset 0 0 8px rgba(160,105,255,.5), inset 0 0 18px rgba(244,114,182,.28), 0 0 2px rgba(182,225,255,.72), 0 0 7px rgba(56,189,248,.55), 0 0 18px rgba(192,132,252,.34), 0 0 34px rgba(244,114,182,.18); }
.work-card[data-slot="0"] { --slot-x: 0px; --slot-scale: 1; --slot-opacity: 1; z-index: 4; pointer-events: auto; }
.work-card[data-slot="0"].is-border-active { transition: transform .12s ease-out, opacity .4s ease; }
.work-card:not(.is-border-active)::before, .work-card:not(.is-border-active) .work-card-edge-light { opacity: 0; transition-duration: .75s; }
.work-card[data-slot="0"]::after { opacity: .52; filter: blur(5px) saturate(1.25) brightness(1.14); }
.work-card[data-slot="-1"] { --slot-x: -362.5px; --slot-scale: .869426; --slot-opacity: .52; z-index: 2; }
.work-card[data-slot="1"] { --slot-x: 362.5px; --slot-scale: .869426; --slot-opacity: .52; z-index: 2; }
.work-card[data-slot="2"], .work-card[data-slot="-2"] { --slot-x: 0px; --slot-scale: .72; --slot-opacity: 0; z-index: 1; }
.carousel-status { position: relative; z-index: 5; margin: 158px 0 0; text-align: center; color: rgba(255,255,255,.55); font-size: 13px; line-height: 20px; letter-spacing: .12em; }
.portfolio-footer { padding: 32px 16px; background: #020006 url("assets/figma-home/background.png") center bottom / 100% 2080px no-repeat; color: rgba(255,255,255,.43); font-size: 10px; letter-spacing: .15em; text-align: center; }
.carousel:focus-visible .work-card[data-slot="0"] { outline: 2px solid rgba(0,170,255,.8); outline-offset: 6px; }

.copy-toast { position: fixed; left: 50%; bottom: 32px; z-index: 50; padding: 10px 17px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(24,17,36,.9); backdrop-filter: blur(14px); opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.copy-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }


@media (max-width: 1400px) and (min-width: 821px) {
  .portfolio-body { transform-origin: top center; }
  .profile-content { left: 8%; }
  .selected-copy { left: 8%; }
  .carousel { left: 34%; width: 62%; }
  .work-card[data-slot="-1"] { --slot-x: calc(0px - clamp(355px, 28vw, 362.5px)); }
  .work-card[data-slot="1"] { --slot-x: clamp(355px, 28vw, 362.5px); }
}

@media (max-width: 820px) {
  .preview-shell { height: 100svh; min-height: 560px; }
  .portfolio-body { width: 100%; height: auto; min-height: 0; overflow: hidden; background-size: 100% 280px, auto 100%; }
  .portfolio-body::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 260px); mask-image: linear-gradient(to bottom, transparent 0, #000 260px); }
  .portfolio-footer { background: #020006; }
  .section-shell { position: relative; left: auto; top: auto; width: calc(100% - 32px); margin: 0 auto; transform: none; }
  .profile { min-height: 0; height: auto; padding: 76px 0 0; display: flex; flex-direction: column; }
  .profile-content { position: relative; left: auto; top: auto; width: 100%; height: auto; order: 1; }
  .profile-photo { position: relative; left: auto; top: auto; width: calc(100% + 32px); height: auto; aspect-ratio: 1662 / 1030; margin: 48px -16px 0; order: 2; }
  .identity { display: block; height: auto; }
  .identity-title { width: 175.451px; height: 74px; }
  .profile-tags { flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .profile-tags span { padding: 5px 12px; font-size: 13px; line-height: 20px; }
  .profile-lead { width: 100%; padding-top: 20px; }
  .profile-lead p { font-size: 15px; line-height: 1.7; }
  .contact-block { margin-top: 34px; }
  .section-heading { height: 42px; font-size: 23px; }
  .personal-pills { width: 100%; height: auto; flex-wrap: wrap; gap: 9px; }
  .personal-pill { font-size: 13px; line-height: 20px; }
  .experience-block { width: 100%; margin-top: 32px; }
  .experience-list { gap: 22px; }
  .experience-list article { width: 100%; }
  .experience-list h3 { display: block; font-size: 15px; white-space: normal; }
  .experience-list h3 span { display: block; font-size: 13px; }
  .experience-list p { font-size: 14px; line-height: 1.65; }
  .representative { width: 100%; margin-top: 34px; }
  .representative-grid { grid-template-columns: 1fr; grid-auto-rows: 82px; width: 100%; }
  .project-chip, .project-chip:nth-child(4), .project-chip:nth-child(5) { grid-column: 1; grid-row: auto; }
  .project-chip:hover, .project-chip:focus-visible, .project-chip:nth-child(even):hover, .project-chip:nth-child(even):focus-visible { transform: scale(1.025); }
  .selected-work { height: auto; padding: 92px 0 80px; }
  .selected-copy { position: relative; left: auto; top: auto; width: 323px; max-width: 100%; height: auto; }
  .selected-title-art { transform: scale(.82); transform-origin: left top; margin-bottom: -15px; }
  .selected-en { max-width: 100%; letter-spacing: 10px; }
  .selected-slogan { font-size: 16px; line-height: 1.7; }
  .selected-tags { width: 100%; }
  .selected-tags span { padding: 5px 13px; font-size: 14px; line-height: 21px; }
  .carousel { position: relative; left: auto; top: auto; width: calc(100% + 32px); height: 640px; margin: 48px -16px 0; overflow: hidden; }
  .carousel-stage { height: 430px; }
  .carousel-stage::after { left: 6%; right: 6%; bottom: -126px; height: 138px; filter: blur(18px); opacity: .68; }
  .work-card { width: min(72vw, 310px); height: auto; aspect-ratio: 345 / 461; }
  .work-card::after { bottom: -94px; height: 84px; opacity: .1; filter: blur(6px) saturate(1.08); }
  .work-card[data-slot="0"]::after { opacity: .32; filter: blur(5px) saturate(1.16) brightness(1.08); }
  .work-card[data-slot="-1"] { --slot-x: calc(0px - clamp(250px, 72vw, 330px)); }
  .work-card[data-slot="1"] { --slot-x: clamp(250px, 72vw, 330px); }
  .carousel-status { margin-top: 138px; }
}

@media (max-width: 600px) and (orientation: portrait) {
  /* Keep the camera and its controls, crop only the outer scenery. */
  .preview-shell { height: 96vw; min-height: 0; }
  .preview-shell::after { height: clamp(100px, 30vw, 150px); }
  #rive-canvas { position: absolute; left: 50%; top: 50%; width: 170.6667%; height: 100%; transform: translate(-50%, -50%); }
  .hero-stage.is-entering { animation-name: hero-stage-enter-mobile; }
  @keyframes hero-stage-enter-mobile { 0%, 12% { transform: scale(1.13) rotate(-3deg); } 100% { transform: none; } }
  .profile { padding-top: 28px; }
}

@media (hover: none) {
  .work-card::before, .work-card-edge-light { display: none; }
  .project-chip:active { transform: scale(1.025); background: rgba(255,255,255,.13); }
}

@media (max-width: 600px) {
  .profile-content { display: contents; }
  .profile-photo { order: 1; margin-top: 32px; }
  .contact-block { order: 2; }
  .experience-block { order: 3; }
  .representative { order: 4; margin-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage.is-entering { animation: none; }
  .work-card::before, .work-card-edge-light { display: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .project-chip:hover, .project-chip:focus-visible, .project-chip:nth-child(even):hover, .project-chip:nth-child(even):focus-visible { transform: none; }
}