/* The original temporal composition, refined with native app materials. */
:root { --cream:#fff; --app-gray:#1B1B1B; --app-gray-raised:#1B1B1B; --max:1597px; --gutter:clamp(21px,5vw,89px); }
body { background:#000; }
h1,h2,h3,.value-card h3,.timeline-step h3 { font-weight:200; }
.glass,.glass-button-light,.hero-sound-indicator,.language-option {
  background:radial-gradient(ellipse at 21% 0%,rgba(255,255,255,.16),transparent 61.8%),linear-gradient(155deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.19); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.21),inset 0 -1px 0 rgba(255,255,255,.04),0 8px 34px rgba(0,0,0,.21);
  -webkit-backdrop-filter:blur(13px) saturate(161.8%);backdrop-filter:blur(13px) saturate(161.8%);
}
.glass:hover,.hero-sound-indicator:hover { border-color:rgba(255,255,255,.55); background-color:rgba(255,255,255,.055); }
button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible { outline:2px solid #fff;outline-offset:5px; }
.hero-orb-link #hero-orb { transform:scale(1.21); transform-origin:center; }
.hero-orb-intro { opacity:0!important; } /* Text now formed by the particles themselves. */
.hero-sound-indicator { border-radius:50%;min-width:55px;min-height:55px; }
.hero-orb-link.is-introducing .hero-sound-indicator { opacity:.55; }
.value-details { margin-top:34px; }
.value-details summary { display:inline-flex;cursor:pointer;padding:13px 21px;font-weight:900;list-style:none; }
summary::-webkit-details-marker { display:none; }
.value-details .value-grid { margin-top:55px; }
.value-details[open] .value-card { opacity:1;translate:none;transform:none; }
.enola-origin { display:flex;gap:21px;color:rgba(255,255,255,.5);font-size:13px;letter-spacing:.13em; }
.enola-origin span:last-child { color:white; }
.credit-note { color:var(--soft);font-size:13px;text-align:center;margin:34px 0 55px; }
.resonance { overflow:hidden; }
.resonance-heading h2 { white-space:pre-line; }
.resonance-layout { display:grid;grid-template-columns:1.618fr 1fr;align-items:center;margin-top:34px; }
.resonance-scene { position:relative;height:clamp(377px,61vw,754px);min-width:0; }
#resonance-canvas { width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab; }
#resonance-canvas:active { cursor:grabbing;touch-action:none; }
.resonance-hint { position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:10px;color:var(--soft);pointer-events:none; }
.phone-story { display:grid;justify-items:center;gap:21px; }
.iphone-frame { position:relative;width:min(100%,277px);aspect-ratio:943/2048;border:5px solid #1B1B1B;border-radius:44px;overflow:hidden;background:#000;box-shadow:0 0 0 1px #555,0 34px 89px #000; }
.iphone-frame img { width:100%;height:100%;object-fit:cover;display:block; }
.iphone-island { position:absolute;z-index:1;top:8px;left:34%;width:32%;height:21px;background:black;border-radius:34px; }
.phone-story>p { font-size:10px;color:var(--soft);letter-spacing:.13em; }
.resonance-controls { display:flex;justify-content:center;gap:8px;margin:21px 0; }
.resonance-controls button { width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center; }
.resonance-controls button::after { content:'';width:8px;height:8px;background:var(--mass-color);border-radius:50%;box-shadow:0 0 13px var(--mass-color); }
.resonance-controls button[aria-pressed=true] { border-color:white; }
.resonance-reading { max-width:610px;margin:34px auto;text-align:center; }
.resonance-reading h3 { font-size:34px;margin:0 0 13px; }
.resonance-reading p { font-size:21px;color:var(--soft);line-height:1.618;margin:0; }
.resonance-footnote { text-align:center;font-size:10px;color:var(--soft); }
.music-panel { position:fixed;z-index:50;bottom:21px;left:21px; }
.music-panel summary { cursor:pointer;display:inline-flex;border-radius:34px;padding:13px 21px;font-size:13px;font-weight:900;list-style:none; }
.music-content { position:absolute;bottom:61px;left:0;width:min(377px,calc(100vw - 42px));padding:21px;border:1px solid #444;border-radius:21px;background:#1B1B1B; }
.music-content p { margin:0 0 13px;font-size:13px; }
.music-content iframe { display:block;border:0;width:100%;height:166px;border-radius:13px; }
@media(min-width:761px) and (prefers-reduced-motion:no-preference) {
  .resonance-heading { transform:translateY(calc(var(--scroll-p,0)*-34px)); }
  .phone-story { translate:0 calc(var(--scroll-p,0)*-89px); }
  .resonance-scene { transform:translateY(calc(var(--scroll-p,0)*34px)); }
}
@media(max-width:760px) {
 .resonance-layout { grid-template-columns:1fr; }
 .resonance-scene { height: min(110vw,610px); }
 .phone-story { margin:34px auto; }
 .iphone-frame { width:233px; }
 .site-nav { gap:13px; }
 .site-nav a { font-size:11px; }
 .music-panel { bottom:13px;left:13px; }
}
@media(prefers-reduced-transparency:reduce) { .glass,.hero-sound-indicator,.language-option { background:#1B1B1B;backdrop-filter:none; } }
@supports not (backdrop-filter:blur(13px)) { .glass,.hero-sound-indicator,.language-option { background:#1B1B1B; } }
@media(prefers-reduced-motion:reduce) { .resonance-scene,.phone-story,.resonance-heading { transform:none!important;translate:none!important; } }

/* Quiet glass shared with the second preview. */
.glass,.hero-sound-indicator{background:#ffffff06;border:1px solid #ffffff24;box-shadow:none}
.glass:hover,.hero-sound-indicator:hover{background:#ffffff10;border-color:#ffffff66;box-shadow:0 0 21px #ffffff0d}
.language-option,.language-option:hover{background:none;border:0;box-shadow:none;backdrop-filter:none}
.linkedin-link,.linkedin-link:hover,.thesis-access .glass-button,.thesis-access .glass-button:hover{background:none;border:0;box-shadow:none;backdrop-filter:none;padding-inline:0}

/* Readable desktop scroll timer. */
.scroll-time{font-size:13px;color:rgba(255,255,255,.65);gap:13px;right:21px;font-variant-numeric:tabular-nums}
.scroll-track{height:144px}

/* Header from the new preview: centered navigation and separate language choices. */
.site-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:21px}
.site-header .header-app-logo{justify-self:start}
.site-header .site-nav{display:flex;align-items:center;gap:34px;margin:0;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none}
.site-header .site-nav>a{font-size:13px;font-weight:400;letter-spacing:0;color:#bababa}
.site-header .site-nav>a:hover{color:#fff}
.site-header .language-options{justify-self:end;display:flex;align-items:center;gap:13px;margin:0}
.site-header .language-option{width:55px;height:55px;padding:0;border:0;border-radius:50%;font:400 13px/1 var(--mono);color:#ffffff66;background:transparent;box-shadow:none}
.site-header .language-option[aria-pressed="true"]{background:#fff;color:#000;box-shadow:0 3px 13px #00000021}
.site-header .language-option[aria-pressed="true"]:hover{background:#f5f5f5;color:#000}
@media(max-width:610px){.site-header{gap:8px}.site-header .site-nav{gap:13px}.site-header .header-app-logo{width:55px;border-radius:13px}.site-header .language-options{gap:0}.site-header .language-option{width:44px;height:44px}.site-header .site-nav>a{font-size:13px}}

/* Voice caption is rendered once in the particle-free canvas center. */
.hero-orb-link.is-introducing #hero-orb{width:100%}.hero-orb-link.is-introducing .hero-orb-intro{opacity:0!important}


.hero h1,.start-identity,.hero-orb-link canvas{pointer-events:none}
.hero-sound-indicator{z-index:5;animation:none!important}
.hero-orb-link{transition:opacity 233ms ease}

/* Negative tracking extends the e beyond its advance box: preserve its full outline. */
.morph-e{overflow:visible}

/* Shorter scroll distance for the Time → Enola transformation. */
.hero{min-height:233svh}

/* Selected sections from the second design, scoped to the original landing. */
.selected-enola,.selected-credits,.selected-finale{background:#000}
.selected-name-morph{margin:55px auto;max-width:987px}
.selected-name-letters{display:flex;justify-content:space-between;font-size:clamp(55px,13vw,233px);font-weight:100;line-height:1;letter-spacing:-.05em}
.selected-name-letters span{display:inline-block;position:relative;will-change:transform}
.selected-name-letters span:last-child{color:var(--aubergine)}
.selected-name-caption{display:block;text-align:center;color:#aaa;margin-top:34px}
.selected-enola-definition{text-align:center;font-size:21px;font-weight:200;color:#b3b3b3;max-width:610px;margin:auto}
.selected-credits-grid{display:grid;grid-template-columns:1fr 1.618034fr;gap:89px;align-items:center}
.selected-credits h2{white-space:pre-line;font-size:clamp(55px,6.5vw,89px);font-weight:100;line-height:1.05;letter-spacing:-.065em;margin:0}
.selected-credits p{font-size:21px;font-weight:200;color:#b3b3b3;margin:0}
.selected-finale{display:block;position:relative;isolation:isolate;overflow:hidden;text-align:center;min-height:610px;padding:144px var(--gutter)}
.selected-finale h2{font-size:clamp(89px,16vw,233px);font-weight:100;letter-spacing:-.075em;line-height:1.05;margin:34px 0 0}
.selected-signature{font-size:clamp(21px,3.8vw,55px);font-weight:200;margin:21px 0 0;letter-spacing:-.035em;color:white}
.selected-coming{display:inline-block;margin-top:55px;color:#a9a9a9;font-size:13px}
.selected-final-ring{position:absolute;z-index:-1;width:120%;height:610px;left:-10%;bottom:-377px;border:1px solid rgb(var(--aubergine-rgb) / 0.439);border-radius:50%;box-shadow:0 -13px 89px var(--aubergine-halo-outer)}
.selected-footer{display:flex;align-items:center;justify-content:space-between;gap:34px;padding:55px var(--gutter) 89px;border-top:1px solid #ffffff12;background:#000}
.selected-wordmark{font-size:34px;font-weight:100;letter-spacing:-.08em;white-space:nowrap}.selected-wordmark b{font-weight:800}
.selected-footer>.mono{font-size:8px;color:#aaa}
@media(max-width:610px){.selected-name-letters{font-size:20vw}.selected-credits-grid{grid-template-columns:1fr;gap:34px}.selected-credits h2{font-size:55px}.selected-finale h2{font-size:clamp(89px,18vw,144px)}.selected-signature{font-size:34px}.selected-footer{flex-wrap:wrap;padding-bottom:144px}}
.selected-finale::before,.selected-finale::after{content:none}
.selected-footer .footer-links a{font-size:13px;color:#ddd}
/* Enola is experienced directly: native-inspired information, one action. */
.resonance-layout{grid-template-columns:1fr}.resonance-scene{width:100%;max-width:987px;margin:auto}
.enola-experience{display:grid;grid-template-columns:1fr 1.618034fr;align-items:center;gap:89px;min-height:89svh}
.enola-experience-heading h2{font-size:clamp(55px,5.5vw,89px);font-weight:100;line-height:1.05;letter-spacing:-.055em;white-space:pre-line;margin:0}
.enola-experience-intro{font-size:21px;color:#aaa;font-weight:200;margin:34px 0}
.enola-credit{display:inline-flex;gap:8px;align-items:center;font-size:13px;color:#888;text-decoration:none;padding:13px 0}.enola-credit span{color:#eee}.enola-credit:hover{color:#fff}
.enola-preview{position:relative;isolation:isolate;min-height:610px;padding:55px 34px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.enola-preview-label{font-size:8px;color:#888;letter-spacing:.13em;margin-bottom:34px}
.enola-preview-line{font-size:clamp(34px,3vw,55px);line-height:1.2;font-weight:100;letter-spacing:-.035em;margin:0 0 34px;max-width:610px;min-height:3.6em}
.presence-person{display:grid;grid-template-columns:55px 1fr;gap:13px 21px;align-items:center;background:#1b1b1b;border-radius:34px;padding:21px 34px;width:100%;max-width:610px;margin:0 0 34px;animation:presence-in 610ms both}.presence-person[hidden]{display:none}
.presence-avatar{width:55px;height:55px;display:grid;place-items:center;border-radius:50%;background:#080808;box-shadow:inset 0 1px 5px #ffffff18;color:#ddd;font-size:34px;font-weight:100}
.presence-person strong{display:block;font-size:34px;font-weight:800;line-height:1.2}.presence-person span{font-size:13px;color:#999}.presence-person p{grid-column:1/-1;font-size:21px;font-weight:200;margin:0;color:#ddd}
.presence-action{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:55px;min-width:144px;padding:13px 34px;border-radius:55px;border:1px solid #ffffff29;background:#ffffff08;color:white;backdrop-filter:blur(13px);font:800 21px/1.2 var(--font-body,inherit);cursor:pointer;transition:background 233ms}.presence-action:hover{background:#ffffff14}.presence-action:focus-visible{outline:2px solid #fff;outline-offset:5px}
.presence-wave{display:flex;gap:3px;align-items:center;height:21px}.presence-wave i{width:2px;height:8px;background:currentColor;border-radius:2px}.presence-wave i:nth-child(2),.presence-wave i:nth-child(4){height:13px}.presence-wave i:nth-child(3){height:21px}
.enola-preview[data-state=playing] .presence-wave i{animation:presence-wave 610ms ease-in-out infinite alternate}.presence-wave i:nth-child(2n){animation-delay:-233ms!important}
.presence-note{color:#999;font-size:13px;min-height:21px;margin:21px 0 0}
.presence-dust{position:absolute;z-index:-1;pointer-events:none;left:0;right:0;bottom:0;height:144px;mask-image:linear-gradient(transparent,#000)}.presence-dust i{position:absolute;width:2px;height:2px;background:white;border-radius:50%;animation:presence-drift 8s var(--delay) ease-in-out infinite alternate}.presence-dust i:nth-child(13n){background:var(--aubergine)}
@keyframes presence-in{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}@keyframes presence-wave{to{transform:scaleY(.38)}}@keyframes presence-drift{to{transform:translateY(-13px)}}
@media(max-width:760px){.enola-experience{grid-template-columns:1fr;gap:34px}.enola-preview{padding:34px 0;min-height:610px}.enola-preview-line{font-size:34px}.presence-person{padding:21px}.enola-experience-heading h2{font-size:55px}}
@media(prefers-reduced-motion:reduce){.presence-person,.presence-wave i,.presence-dust i{animation:none!important}}

/* Short, functional transitions; no ambient motion competing with the choice. */
.presence-person{animation-duration:233ms}.presence-dust i{animation:none}
.presence-route{position:relative;width:100%;max-width:610px;margin-bottom:34px;border-radius:34px;overflow:hidden;background:#15191e;animation:presence-in 233ms ease-out both}.presence-route[hidden]{display:none}
.presence-route svg{display:block;width:100%;height:auto}.route-demo{display:block;padding:13px 21px;color:#aaa;font-size:8px;letter-spacing:.08em}
.presence-route:not([hidden]) .route-line{stroke-dasharray:1;animation:route-reveal 610ms ease-out both}
@keyframes route-reveal{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.presence-action{font-family:inherit;font-size:21px;font-weight:800;line-height:1.2}
@media(prefers-reduced-motion:reduce){.presence-route,.presence-route .route-line{animation:none!important}}