:root {
  --paper: #f8f7fb;
  --ink: #252a43;
  --line: rgba(54, 59, 90, .15);
}

body {
  background: #f8f7fb;
  color: #252a43;
}

.nav {
  color: rgba(38, 43, 68, .78);
}

.logo span {
  border-color: rgba(54, 59, 90, .28);
  background: rgba(255, 255, 255, .22);
}

.nav .say-hi {
  border-color: rgba(54, 59, 90, .28);
}

.nav nav a::after {
  background: #6f6a91;
}

.nav.is-scrolled {
  color: #343952;
  border-color: rgba(70, 73, 104, .1);
  background: rgba(248, 247, 251, .78);
  box-shadow: 0 12px 35px rgba(67, 70, 102, .06);
}

/* Cover: pearl light, with the mystery kept in translucent layers. */
.hero {
  color: #292d48;
  background:
    radial-gradient(circle at 77% 27%, rgba(187, 177, 219, .58), transparent 25%),
    radial-gradient(circle at 48% 92%, rgba(165, 205, 224, .44), transparent 34%),
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, .9), transparent 29%),
    linear-gradient(138deg, #f8f7fb 3%, #e9e7f1 48%, #d9dbea 73%, #f2f2f7 100%);
}

.hero::before {
  background: conic-gradient(from 110deg at 68% 38%, transparent, rgba(114, 136, 174, .08), transparent 25%, rgba(154, 129, 181, .12), transparent 55%);
}

.hero::after {
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
}

.hero-code,
.hero-en,
.hero-note,
.scroll-cue {
  color: rgba(41, 45, 72, .58);
}

.hero-orbit {
  border-color: rgba(76, 77, 113, .13);
}

.prism i {
  border-color: rgba(77, 78, 112, .14);
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(140, 171, 203, .18) 48%, rgba(186, 160, 210, .3));
}

.prism b {
  color: rgba(48, 50, 80, .74);
}

.hero-intro-lines {
  border-color: rgba(67, 70, 105, .13);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22) 18%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .22) 82%, transparent);
}

.hero-intro-lines::before,
.hero-intro-lines p,
.hero-intro-skip {
  color: rgba(45, 49, 78, .72);
}

.hero-intro-lines p {
  text-shadow: 1px 0 rgba(122, 154, 180, .2), -1px 0 rgba(155, 128, 177, .17), 0 0 18px rgba(255, 255, 255, .58);
}

.hero-typewriter::before {
  color: #557f96;
}

.hero-typewriter i {
  background: #625e7b;
  box-shadow: 0 0 9px rgba(108, 100, 142, .34);
}

.hero-title-index,
.hero-final-title > i {
  color: rgba(45, 49, 78, .4) !important;
}

.hero-title-ccc {
  background: linear-gradient(110deg, #2d314e 4%, #6d6887 56%, #8499ae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 24px 52px rgba(94, 89, 124, .12));
}

.hero-title-cn {
  color: rgba(46, 49, 76, .82) !important;
  text-shadow: 0 12px 45px rgba(124, 115, 157, .14) !important;
}

.hero-final-title::before {
  background: linear-gradient(90deg, rgba(61, 64, 96, .3) 0 58%, transparent 58%);
}

.hero-final-title::after,
.hero.intro-complete > .prism::before,
.hero.intro-complete > .prism::after {
  border-color: rgba(70, 72, 108, .13);
}

/* Character introduction: silver film rather than black film. */
.cinematic-profile {
  --cinema-ink: #282d49;
  --cinema-muted: rgba(59, 63, 94, .55);
  --cinema-line: rgba(66, 69, 101, .16);
  color: #282d49;
  background:
    radial-gradient(circle at 71% 24%, rgba(183, 173, 215, .42), transparent 25%),
    radial-gradient(circle at 35% 54%, rgba(169, 203, 220, .28), transparent 31%),
    linear-gradient(145deg, #f8f7fb, #e9e8f0 57%, #f4f3f8);
}

.cinematic-profile::before {
  background:
    linear-gradient(104deg, transparent 54%, rgba(255, 255, 255, .6) 72%, transparent 88%),
    repeating-linear-gradient(90deg, transparent 0 9.8%, rgba(61, 64, 97, .018) 10%);
}

.cinematic-profile::after {
  background: radial-gradient(ellipse at center, transparent 45%, rgba(139, 137, 163, .16) 100%);
}

.cinematic-profile > .section-label {
  color: #69657e;
}

.cinematic-profile > .section-label span {
  border-color: rgba(54, 59, 90, .16);
}

.cinematic-profile__chrome,
.cinematic-meta,
.cinematic-identity > p:first-child,
.cinematic-identity__summary,
.cinematic-traits small,
.credit-track time,
.cinematic-timecode,
.cinematic-resume-download span {
  color: rgba(47, 52, 82, .45);
}

.cinematic-stage {
  border-color: rgba(66, 70, 103, .13);
  background:
    radial-gradient(circle at 63% 28%, rgba(190, 180, 219, .28), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(226, 228, 238, .56));
  box-shadow: 0 50px 120px rgba(64, 66, 96, .14);
}

.cinematic-stage::before {
  border-color: rgba(65, 69, 103, .08);
}

.cinematic-stage__beam {
  opacity: .8;
  background: linear-gradient(148deg, rgba(255, 255, 255, .9), rgba(177, 164, 207, .18) 50%, transparent 74%);
}

.cinematic-identity h2,
.cinematic-identity h3,
.cinematic-traits,
.credit-column > h3 {
  color: #292e4a;
}

.cinematic-identity h2 {
  text-shadow: 0 20px 70px rgba(115, 105, 146, .12);
}

.cinematic-exposures::before {
  border-color: rgba(60, 64, 96, .1);
}

.cinematic-exposures::after,
.cinematic-exposure {
  border-color: rgba(64, 67, 101, .11);
}

.cinematic-exposure {
  background: rgba(100, 95, 133, .05);
}

.cinematic-exposure img {
  opacity: .25;
  mix-blend-mode: multiply;
  filter: grayscale(.7) brightness(1.75) contrast(.66);
}

.cinematic-exposure figcaption {
  color: rgba(44, 48, 77, .55);
}

.cinematic-portrait img {
  mix-blend-mode: screen;
  filter: grayscale(.48) contrast(1.08) brightness(.82);
}

.cinematic-portrait__edge {
  opacity: .46;
  box-shadow: 0 0 95px 32px rgba(169, 157, 203, .27);
}

.cinematic-scenes {
  border-color: rgba(65, 69, 101, .13);
  background: rgba(249, 248, 252, .66);
  box-shadow: 0 14px 36px rgba(68, 67, 99, .08);
}

.cinematic-scenes button {
  color: rgba(43, 47, 75, .48);
}

.cinematic-scenes button:hover,
.cinematic-scenes button.is-active {
  color: #282d49;
  background: rgba(126, 119, 158, .11);
}

.cinematic-traits > p,
.credit-column > h3 {
  border-color: rgba(53, 58, 89, .22);
}

.cinematic-traits li i {
  color: #7c7399;
}

.cinematic-credits {
  background: linear-gradient(180deg, rgba(247, 246, 250, .32), rgba(230, 231, 239, .72));
}

.credit-track article {
  border-color: rgba(58, 63, 95, .14);
}

.credit-track article::before {
  background: #9188ab;
  box-shadow: 0 0 0 5px rgba(108, 101, 139, .08);
}

.credit-track h4 {
  color: #343950;
}

.credit-track p {
  color: rgba(48, 53, 82, .7);
}

.credit-track small {
  color: rgba(55, 59, 87, .5);
}

.cinematic-resume-download {
  color: #353a54;
  border-color: rgba(54, 59, 90, .28);
}

.cinematic-resume-download:hover {
  color: #151a34;
  border-color: rgba(42, 46, 73, .7);
}

.cinematic-timecode i {
  background: repeating-linear-gradient(90deg, rgba(55, 60, 91, .28) 0 1px, transparent 1px 13px);
}

/* Portfolio building: a translucent architectural model in daylight. */
.work {
  color: #29304a;
  background:
    radial-gradient(circle at 82% 12%, rgba(182, 199, 222, .5), transparent 27%),
    linear-gradient(155deg, #f5f4f8, #e3e6ef 56%, #f2f1f6);
}

.work .section-label,
.work .light {
  color: rgba(48, 53, 82, .55);
}

.project-city {
  border-color: rgba(65, 72, 109, .13);
  background:
    radial-gradient(circle at 70% 12%, rgba(178, 187, 218, .42), transparent 27%),
    linear-gradient(180deg, rgba(248, 248, 251, .86), rgba(214, 220, 234, .82));
  box-shadow: 0 45px 100px rgba(65, 69, 103, .13);
}

.city-sky::after {
  border-color: rgba(91, 92, 126, .18);
  box-shadow: 0 0 70px rgba(168, 159, 200, .18);
}

.city-sky i {
  background: #8d86a7;
  box-shadow: 0 0 8px rgba(141, 134, 167, .45);
}

.building-guide,
.building-guide > small,
.floor-sign span,
.floor-sign small,
.window-room,
.city-ground {
  color: rgba(48, 54, 83, .48);
}

.building-guide button {
  border-color: rgba(57, 63, 94, .1);
}

.building-guide button.active,
.building-guide button:hover {
  color: #343a55;
}

.building {
  border-color: rgba(61, 67, 101, .18);
  background: rgba(248, 248, 251, .34);
  box-shadow: 0 0 70px rgba(91, 98, 136, .12), inset 0 0 50px rgba(255, 255, 255, .25);
}

.building::before {
  background: linear-gradient(180deg, #e7e8ef, #bfc6d8);
}

.building-floor {
  border-color: rgba(56, 62, 94, .13);
}

.building-floor::after {
  background: linear-gradient(180deg, rgba(90, 96, 130, .06), rgba(104, 105, 130, .14));
}

.building-floor.is-open {
  background: rgba(255, 255, 255, .34);
}

.floor-sign {
  color: #303650;
  border-color: rgba(57, 63, 94, .11);
  background: rgba(255, 255, 255, .2);
}

.floor-sign i {
  color: rgba(48, 54, 83, .46);
}

.project-window {
  color: #2f3550;
  border-color: rgba(61, 68, 105, .2);
  background: linear-gradient(145deg, rgba(255, 255, 255, .58), rgba(166, 178, 208, .2));
}

.project-window::after {
  background: linear-gradient(115deg, transparent 15%, rgba(255, 255, 255, .55) 48%, transparent 70%);
}

.project-window:hover {
  border-color: rgba(94, 86, 128, .44);
  box-shadow: 0 0 35px rgba(104, 103, 144, .13);
}

.window-view i {
  border-color: rgba(66, 72, 106, .12);
}

.window-view b {
  color: rgba(58, 64, 96, .22);
}

.building-floor.is-open .project-window > small {
  color: rgba(48, 54, 83, .5);
}

.building-floor.is-open .project-window.active {
  border-color: rgba(91, 82, 125, .5);
  background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(179, 176, 207, .35));
  box-shadow: 0 0 40px rgba(119, 109, 153, .14);
}

.building-detail {
  color: #2d334d;
  border-color: rgba(59, 65, 99, .13);
  background: rgba(255, 255, 255, .38);
}

.building-detail.is-visible {
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 25px 65px rgba(59, 63, 95, .11);
}

.building-detail > button,
.building-detail > p:first-of-type,
.building-detail > p:nth-of-type(2),
.building-detail > div span,
.building-detail > a {
  color: rgba(44, 50, 78, .58);
}

.building-detail > div span {
  border-color: rgba(56, 62, 95, .14);
}

.building-detail > a {
  border-color: rgba(56, 62, 95, .28);
}

.city-ground i {
  background: rgba(56, 62, 95, .1);
}

/* Thought lake: morning haze and a pale reflective surface. */
.lake-section {
  color: #28304b;
  background: linear-gradient(155deg, #f7f6fa, #e8e8f1 58%, #dde4ed);
}

.thought-lake {
  background: linear-gradient(180deg, #e8ebf4 0%, #c7ccde 44%, #ccd3e2 45%, #aab9cc 100%);
}

.lake-sky {
  background:
    radial-gradient(circle at 74% 35%, rgba(255, 255, 255, .76), transparent 21%),
    linear-gradient(180deg, #f1eef5, #cfd5e5);
}

.lake-moon {
  background: radial-gradient(circle at 38% 36%, #fffdf9, #e6e0e8 57%, #bcc4d4);
  box-shadow: 0 0 50px rgba(255, 255, 255, .8), 0 0 140px rgba(153, 151, 188, .22);
}

.star {
  background: #8d88a6;
  box-shadow: 0 0 8px rgba(141, 136, 166, .55);
}

.m-back {
  background: #aab3c8;
  opacity: .68;
}

.m-front {
  background: linear-gradient(180deg, #8795ac, #687891);
}

.lake-water {
  background:
    radial-gradient(ellipse at 73% 0, rgba(255, 255, 255, .45), transparent 35%),
    linear-gradient(180deg, #c2ccdc, #94a9bf 70%, #829ab3);
}

.lake-water::before {
  background: linear-gradient(0deg, #9fafc4, #e2e2eb);
}

.reflection {
  color: #29334e;
  filter: drop-shadow(0 5px 16px rgba(70, 78, 105, .12));
}

.reflection small {
  color: rgba(43, 51, 78, .48);
}

.reflection:hover {
  color: #5d557b;
}

.lake-figure::before,
.lake-figure::after {
  background: #3d465f;
}

.lake-figure i {
  background: linear-gradient(#3d465f, transparent);
}

/* Future scene: bright illustrated sky, preserving the 2.5D architecture. */
.future-lab {
  color: #292d52;
  background:
    radial-gradient(circle at 76% 14%, rgba(229, 172, 215, .38), transparent 27%),
    radial-gradient(circle at 14% 78%, rgba(146, 195, 229, .42), transparent 31%),
    radial-gradient(circle at 48% 52%, rgba(182, 169, 220, .28), transparent 38%),
    linear-gradient(155deg, #f6f3fa, #dce5f3 48%, #e3daef 74%, #f4f2f8);
}

.future-lab::before {
  opacity: .42;
}

.future-lab::after {
  background: radial-gradient(ellipse at center, rgba(128, 132, 218, .12), transparent 58%);
}

.future-heading > p {
  color: rgba(44, 48, 82, .46);
}

.future-heading h2 i {
  color: #776e99;
}

.future-depth,
.future-depth i {
  border-color: rgba(77, 76, 117, .09);
}

.future-road-network {
  filter: drop-shadow(0 24px 24px rgba(75, 71, 112, .18));
}

.world-label {
  color: #333552;
  border-color: rgba(100, 78, 123, .24);
  background: rgba(251, 247, 252, .7);
  box-shadow: 0 18px 40px rgba(73, 66, 102, .12);
}

.world-label small,
.world-label i {
  color: rgba(49, 51, 78, .44);
}

.world-trigger:hover .world-label {
  color: #fff;
  border-color: rgba(124, 94, 150, .62);
  background: rgba(112, 84, 143, .8);
}

.future-stage-note {
  color: rgba(45, 48, 79, .4);
}

/* Future potential and life archive continue the light visual rhythm. */
.potential-section {
  color: #2d324e;
  background:
    radial-gradient(circle at 70% 22%, rgba(163, 161, 202, .3), transparent 28%),
    linear-gradient(155deg, #f7f6fa, #e5e7f0 60%, #f2f1f6);
}

.potential-section .section-label,
.potential-heading > p,
.potential-core span,
.potential-core i,
.potential-card small,
.potential-card p,
.potential-card > span,
.growth-track span,
.growth-track p {
  color: rgba(47, 52, 81, .52);
}

.potential-orbit,
.potential-orbit::before,
.potential-orbit::after {
  border-color: rgba(61, 66, 99, .1);
}

.potential-core {
  border-color: rgba(67, 71, 103, .16);
  background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .72), rgba(179, 183, 207, .2) 48%, rgba(233, 233, 240, .66));
  box-shadow: 0 0 100px rgba(102, 99, 139, .11);
}

.potential-card {
  color: #2e334e;
  border-color: rgba(64, 69, 102, .13);
  background: rgba(255, 255, 255, .4);
}

.potential-card:hover {
  border-color: rgba(77, 72, 112, .25);
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 25px 60px rgba(71, 69, 102, .09);
}

.growth-track i {
  background: linear-gradient(90deg, rgba(59, 64, 96, .08), rgba(59, 64, 96, .3));
}

.life-universe {
  color: #29304a;
  background:
    radial-gradient(circle at 72% 17%, rgba(173, 175, 210, .34), transparent 25%),
    radial-gradient(circle at 18% 68%, rgba(151, 193, 213, .28), transparent 28%),
    linear-gradient(155deg, #f7f6fa, #e7e9f1 52%, #f2f1f6);
}

.life-universe::before {
  background-image: radial-gradient(circle, rgba(75, 80, 113, .2) 0 1px, transparent 1.5px);
}

.life-universe header h2 {
  color: #29304a;
}

.fragment-lines path {
  stroke: rgba(89, 94, 128, .2);
}

.fragment-lines circle,
.fragment-star,
.fragment-universe figure::after {
  fill: #8d88a6;
  background: #8d88a6;
  box-shadow: 0 0 12px rgba(141, 136, 166, .42);
}

.fragment-universe figure::before {
  border-color: rgba(64, 69, 102, .16);
}

.fragment-universe figure button {
  background: #f7f6fa !important;
  box-shadow: 0 28px 65px rgba(64, 68, 99, .16);
}

.fragment-universe img {
  filter: saturate(.8) contrast(.98) brightness(1) !important;
}

.fragment-universe figcaption {
  color: #343950 !important;
  border-color: rgba(56, 62, 95, .13) !important;
  background: rgba(249, 248, 252, .82) !important;
}

footer {
  color: #343950;
  border-color: rgba(59, 64, 96, .1);
  background: linear-gradient(145deg, #e8e8f0, #f7f6fa);
}

footer > div {
  color: rgba(48, 53, 82, .46);
}

/* Content dialogs inherit the light atmosphere as well. */
.content-dialog {
  color: #2d324c;
  border-color: rgba(62, 67, 100, .16);
  background: #f3f2f7;
  box-shadow: 0 60px 180px rgba(56, 60, 89, .25);
}

.content-dialog::backdrop {
  background: rgba(78, 80, 106, .28);
}

.dialog-close {
  color: #343950;
  border-color: rgba(59, 64, 97, .16);
  background: rgba(249, 248, 252, .76);
}

.dialog-meta,
.dialog-lead,
.dialog-section span,
.dialog-section p {
  color: rgba(47, 52, 81, .56);
}

.dialog-tags span,
.dialog-section {
  color: rgba(47, 52, 81, .62);
  border-color: rgba(58, 63, 95, .12);
}

.dialog-action {
  border-color: rgba(56, 61, 93, .2);
}

.dialog-action:hover {
  color: #fff;
  background: #3d415d;
}

@media (max-width: 760px) {
  .nav {
    background: linear-gradient(180deg, rgba(248, 247, 251, .82), transparent);
  }
}