/* Local decorative background studies. No content or player behavior is changed.
   Every added visual layer stays behind the existing content and never receives input. */
.preview-home #works {
  background:linear-gradient(90deg,#12151c38,#12151c9e),#1a1c21 url('media/home-backgrounds/selected-space-v1.webp') center top / 100% 100% no-repeat;
  color:#efeff0;
}
.preview-home #works:before {
  background:linear-gradient(90deg,#14161d35,transparent 32%,#14161d15),linear-gradient(180deg,#15171b08,transparent 18%,#17191d88 100%);
  mask-image:none;
  pointer-events:none;
}
.preview-home #works:after {
  background-image:url('media/narcissus/steam-main-cn-20261023.webp'),url('media/system-ai-video-workflow-practice-poster-repaired-v2.jpg');
  background-size:770px 390px,850px 380px;
  background-position:right -130px top -45px,left -200px bottom -40px;
  background-repeat:no-repeat;
  mask-image:radial-gradient(ellipse,#000 5%,transparent 70%),radial-gradient(ellipse,#000,transparent 70%);
  mask-size:770px 390px,850px 380px;
  mask-position:right -130px top -45px,left -200px bottom -40px;
  mask-repeat:no-repeat;
  filter:grayscale(.9) blur(3px);
  opacity:.08;
  mix-blend-mode:screen;
  pointer-events:none;
}
.preview-home #works .selected-intro {color:#d0cdd5;}
.preview-home #works .entry-role {color:#b6b5be;}
.preview-home #works .entry-kicker {color:#c1bdc7;}
.preview-home #works .entry-bottom {color:#b4b4bd;}
.preview-home #works .entry-top {color:#c3c1c8;}
.preview-home #works .entry-top span+span {color:#a2a1ad;}
.preview-home #works .portfolio-entry .work-visual {box-shadow:0 14px 35px #06080d40;}

.preview-home #capabilities {
  background:#e9e9eb url('media/home-backgrounds/creation-paper-v1.webp') center / cover no-repeat;
  color:#22232b;
}
.preview-home #capabilities:before {
  background:linear-gradient(90deg,#f1f0ef8a,transparent 70%),linear-gradient(180deg,transparent 15%,#f3f2f06b 50%,#f3f2f052 90%);
  opacity:1;
  pointer-events:none;
}
.preview-home #capabilities:after {opacity:.012;pointer-events:none;}
.preview-home #capabilities .creation-path {border-color:#34344440;}
.preview-home #capabilities .creation-path header>span {color:#646171;}
.preview-home #capabilities .creation-path header>p {color:#666471;}
.preview-home #capabilities .creation-stages li>span {color:#6f6c7b;}
.preview-home #capabilities .creation-stages:before {background:linear-gradient(90deg,#706c8455,#706c8429);}
.preview-home #capabilities .creation-stages li:before {background:#777085;}

/* Reuse the existing non-interactive artwork container, without changing page HTML. */
.preview-home #capabilities .capabilities-background {display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.preview-home #capabilities .capabilities-background>* {display:none;}
.preview-home #capabilities .capability-ghost-idea {
  display:block;position:absolute;inset:auto;right:4%;top:7%;width:360px;height:200px;
  object-fit:cover;opacity:.12;filter:grayscale(1) blur(1px);mix-blend-mode:multiply;
  mask-image:radial-gradient(ellipse,#000 2%,transparent 72%);transform:rotate(14deg);pointer-events:none;
}
.preview-home #capabilities .capabilities-background:after {
  content:'';position:absolute;inset:auto;left:37%;bottom:-30px;width:450px;height:250px;
  background:url('media/narcissus/steam-approved/scene-03.jpg') center / cover no-repeat;
  opacity:.10;filter:grayscale(.8) blur(1px);mix-blend-mode:multiply;
  mask-image:radial-gradient(ellipse,#000 2%,transparent 73%);transform:rotate(-6deg);pointer-events:none;
}
@media(min-width:1600px){
  .preview-home #capabilities {background-size:100% 100%;}
}
@media(max-width:800px){
  .preview-home #works {background-size:auto 1500px;background-position:65% top;background-color:#1a1c21;}
  .preview-home #works:after {
    background-image:url('media/narcissus/steam-main-cn-20261023.webp');
    background-size:770px 390px;background-position:right -350px top -45px;
    mask-image:radial-gradient(ellipse,#000 5%,transparent 70%);
    mask-size:770px 390px;mask-position:right -350px top -45px;opacity:.06;
  }
  .preview-home #capabilities {
    background-image:linear-gradient(180deg,#e9e9ec 0,#e9e9ec calc(100% - 900px),#e9e9ec00 calc(100% - 680px)),url('media/home-backgrounds/creation-paper-v1.webp');
    background-size:100% 100%,auto 900px;background-position:center,right bottom;background-color:#e9e9ec;
  }
  .preview-home #capabilities:before {background:linear-gradient(90deg,#f1f0efbb,#f1f0ef80 75%,#f1f0ef30);}
  .preview-home #capabilities .capability-ghost-idea {right:-150px;top:40px;width:300px;opacity:.08;}
  .preview-home #capabilities .capabilities-background:after {display:none;}
}

/* Experience: accumulated working records, not an empty black panel. */
.preview-home #experience {
  background:#202226 url('media/home-backgrounds/experience-records-v1.webp') center / 100% 100% no-repeat;
  color:#f0eff1;padding-block:clamp(80px,8vw,128px);scroll-margin-top:70px;
}
.preview-home #experience:before {
  inset:0;height:auto;
  background:linear-gradient(90deg,#15181cc7,#15181ca3 62%,#15181c80),linear-gradient(180deg,#14171b44,transparent 25%,#181b2080 100%);
}
.preview-home #experience .experience-bridge {
  inset:0 0 auto auto;width:min(50vw,820px);height:470px;border:0;border-radius:0;transform:none;
  background:url('media/system-ai-video-workflow-practice-poster-repaired-v2.jpg') center / cover no-repeat;
  mask-image:radial-gradient(ellipse,#000,transparent 70%);filter:grayscale(1) blur(1px);mix-blend-mode:screen;opacity:.10;
}
.preview-home #experience .section-title {font-size:clamp(36px,4vw,64px);font-weight:500;line-height:1.25;letter-spacing:-.035em;margin-top:23px;}
.preview-home #experience .eyebrow {color:#c0bdc5;opacity:1;letter-spacing:.2em;}
.preview-home #experience .experience-list {margin-top:56px;}
.preview-home #experience .experience-group-heading {padding:22px 0;border-color:#d7d4de50;}
.preview-home #experience .experience-group-heading h3 {font-size:clamp(20px,1.7vw,26px);font-weight:450;}
.preview-home #experience .experience-group-heading>span {color:#b3afba;font-size:10px;}
.preview-home #experience .experience-main {padding-top:36px;padding-bottom:48px;}
.preview-home #experience .experience-heading h3 {font-size:clamp(22px,1.8vw,29px);font-weight:550;line-height:1.5;}
.preview-home #experience .experience-kind {color:#bdb8c5;letter-spacing:.1em;}
.preview-home #experience .experience-role {color:#c7c3cd;}
.preview-home #experience .experience-main .meta {opacity:1;color:#aca7b5;}
.preview-home #experience .experience-summary {font-size:16px;color:#dedbe3;}
.preview-home #experience .experience-direction {border-color:#d7d4de33;}
.preview-home #experience .experience-direction p {font-size:14px;color:#c1bcc9;line-height:1.9!important;}
.preview-home #experience .experience-direction h4 {font-size:14px;font-weight:550;}
.preview-home #experience .experience-result span {color:#b4aebd;}
.preview-home #experience .experience-result strong {font-weight:500;}
.preview-home #experience .practice-list {border-color:#d7d4de33;}
.preview-home #experience .practice-item {border-color:#d7d4de33;min-height:0;padding-block:48px;}
.preview-home #experience .practice-art:after {background:linear-gradient(90deg,#191c2026,transparent 80%);}
.preview-home #experience .practice-art img {opacity:.12;filter:grayscale(1) blur(2px);mask-image:radial-gradient(ellipse,#000,transparent 72%);}
.preview-home #experience .practice-art>span {color:#e0dbe608;}
.preview-home #experience .practice-meta {color:#b3adbd;}
.preview-home #experience .practice-copy h4 {font-size:clamp(26px,2.5vw,38px);font-weight:500;line-height:1.3;}
.preview-home #experience .practice-copy p {color:#c1bcc9;}
.preview-home #experience .practice-subtitle {color:#d0cbd7;}
.preview-home #experience .practice-evidence strong {font-size:clamp(48px,5vw,72px);font-weight:500;}
.preview-home #experience .practice-evidence small,.preview-home #experience .practice-visual-label {color:#aaa4b4;}
.preview-home #experience .experience-group-game {position:relative;isolation:isolate;margin-top:76px;}
.preview-home #experience .experience-group-game:before {
  content:'';position:absolute;inset:-100px -120px -30px 45%;z-index:-1;pointer-events:none;
  background:url('media/narcissus/steam-main-cn-20261023.webp') center / contain no-repeat;
  filter:grayscale(.85) blur(2px);mix-blend-mode:screen;opacity:.07;mask-image:radial-gradient(ellipse,#000 10%,transparent 72%);
}

/* About: a continuous paper landscape; tides remain abstract and static. */
.preview-home #about.about-section {background:#dedee1;color:#24242c;padding-block:clamp(96px,9vw,144px);scroll-margin-top:70px;}
.preview-home #about.about-section:before {
  background:linear-gradient(90deg,#f1f0edc4,#f1f0ed80 55%,#f1f0ed26),url('media/home-backgrounds/about-tide-paper-v1.webp') center / 100% 100% no-repeat;
}
.preview-home #about.about-section:after {
  background:linear-gradient(180deg,#20222626,transparent 100px,transparent calc(100% - 180px),#f2efe9cc);pointer-events:none;
}
.preview-home #about .about-background:before {background:none;}
.preview-home #about .about-background:after {background-image:var(--paper-grain);opacity:.025;mix-blend-mode:multiply;}
.preview-home #about .about-background .about-ghost {filter:grayscale(1) blur(3px);opacity:.07;}
.preview-home #about .about-ghost-create {right:-14%;top:2%;width:65vw;height:24%;object-position:30% center;}
.preview-home #about .about-ghost-deliver {left:-20%;top:35%;width:55vw;height:22%;opacity:.045!important;}
.preview-home #about .about-ghost-system {right:-19%;bottom:2%;height:28%;opacity:.055!important;}
.preview-home #about .about-background .about-tide {border-top-color:#5c586b40;opacity:.35;}
.preview-home #about .about-tide-two {display:none;}
.preview-home #about .about-locator .eyebrow {color:#5f5c6a;opacity:1;}
.preview-home #about .about-locator:after {background:#77718366;width:72px;}
.preview-home #about .about-copy {margin-top:48px;}
.preview-home #about .about-opening {max-width:900px;font-size:clamp(29px,3.2vw,48px);line-height:1.5;font-weight:500;color:#282630;text-shadow:none;}
.preview-home #about .about-body-copy {max-width:800px;font-size:clamp(18px,1.55vw,23px);line-height:1.95;color:#4f4c59;margin-top:42px!important;}
.preview-home #about .about-inline-emphasis {color:#2e2b36;font-weight:600;}
.preview-home #about .about-memory {max-width:700px;margin-top:100px;margin-left:10%;padding-left:30px;background:none;border-left-color:#736c825c;}
.preview-home #about .about-memory-lead {color:#676170;font-size:clamp(16px,1.4vw,20px);line-height:1.9;}
.preview-home #about .about-memory-quote {color:#413c4c;font-size:clamp(20px,1.75vw,26px);line-height:1.8;font-weight:450;}
.preview-home #about .about-turn {max-width:740px;margin-top:112px!important;margin-left:20%;font-size:clamp(22px,2.2vw,32px);line-height:1.8;color:#524b5d;}
.preview-home #about .about-wave-passage {margin-top:100px;}
.preview-home #about .about-wave-lead {max-width:none;font-size:clamp(37px,4.2vw,64px);line-height:1.5;font-weight:550;letter-spacing:-.04em;color:#292530;text-shadow:none;}
.preview-home #about .about-wave-body {font-size:clamp(20px,1.85vw,27px);line-height:1.9;color:#4c4556;margin-top:30px!important;}
.preview-home #about .about-closing {max-width:780px;margin-top:108px!important;margin-left:20%;font-size:clamp(24px,2.35vw,36px);line-height:1.8;font-weight:450;color:#35303f;text-shadow:none;}

@media(max-width:1000px){
  .preview-home #experience .experience-main {grid-template-columns:1fr;gap:28px;}
  .preview-home #experience .experience-heading h3 {max-width:none;}
  .preview-home #experience .experience-role {max-width:none;}
}
@media(max-width:760px){
  .preview-home #experience {background-size:100% 100%;background-position:center;padding-block:68px;}
  .preview-home #experience:before {background:linear-gradient(90deg,#191c20ad,#191c20a8);}
  .preview-home #experience .experience-bridge {width:100%;height:320px;opacity:.07;}
  .preview-home #experience .section-title {font-size:clamp(30px,7.3vw,42px);line-height:1.4;}
  .preview-home #experience .experience-list {margin-top:36px;}
  .preview-home #experience .experience-main {padding-block:28px 38px;}
  .preview-home #experience .experience-directions {margin-top:28px;}
  .preview-home #experience .experience-direction {padding-top:18px;}
  .preview-home #experience .experience-direction p {font-size:14px;}
  .preview-home #experience .experience-results {padding-top:18px;gap:15px;}
  .preview-home #experience .practice-item {padding-block:36px;}
  .preview-home #experience .practice-meta {margin-bottom:20px;}
  .preview-home #experience .practice-copy h4 {font-size:27px;}
  .preview-home #experience .practice-art img {opacity:.08;}
  .preview-home #experience .experience-group-game {margin-top:52px;}
  .preview-home #experience .experience-group-game:before {inset:0 -100px 0 10%;opacity:.04;}
  .preview-home #about.about-section {padding-block:76px 100px;}
  .preview-home #about.about-section:before {background-image:linear-gradient(90deg,#f1f0edb3,#f1f0ed80),url('media/home-backgrounds/about-tide-paper-v1.webp');background-size:100% 100%;}
  .preview-home #about .about-background .about-ghost-create {width:115vw;height:21%;right:-55%;opacity:.05;}
  .preview-home #about .about-background .about-ghost-deliver,.preview-home #about .about-background .about-ghost-system {display:none;}
  .preview-home #about .about-copy {margin-top:34px;}
  .preview-home #about .about-opening {font-size:27px;line-height:1.65;letter-spacing:-.025em;}
  .preview-home #about .about-body-copy {font-size:17px;line-height:1.95;margin-top:28px!important;}
  .preview-home #about .about-memory {margin-top:64px;margin-left:0;padding-left:17px;}
  .preview-home #about .about-memory-lead {font-size:16px;}
  .preview-home #about .about-memory-quote {font-size:20px;line-height:1.9;}
  .preview-home #about .about-turn {margin-left:0;margin-top:76px!important;font-size:24px;}
  .preview-home #about .about-wave-passage {margin-top:72px;}
  .preview-home #about .about-wave-lead {font-size:clamp(30px,7.8vw,40px);line-height:1.5;letter-spacing:-.03em;}
  .preview-home #about .about-wave-body {font-size:19px;line-height:1.9;margin-top:24px!important;}
  .preview-home #about .about-closing {margin-top:76px!important;margin-left:0;font-size:24px;line-height:1.8;}
}