@font-face{font-family:Cormorant;src:url('/portfolio-demo/assets/cormorant-garamond-normal-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Cormorant;src:url('/portfolio-demo/assets/cormorant-garamond-italic-400.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Manrope;src:url('/portfolio-demo/assets/manrope-normal-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/portfolio-demo/assets/manrope-normal-600.ttf') format('truetype');font-weight:600;font-display:swap}
:root{color-scheme:dark;--bg:#09090b;--white:#f5f1ec;--muted:#b8b2c0;--purple:#c4a0f4;--line:rgba(213,199,231,.22);--pad:clamp(24px,4.5vw,86px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:#655574 var(--bg);scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--white);font:400 14px/1.65 Manrope,sans-serif;-webkit-font-smoothing:antialiased}::selection{background:#a581d8;color:#09090b}a{color:inherit;text-decoration:none;text-underline-offset:6px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:not-allowed;opacity:.45}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--purple);outline-offset:7px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.skip-link{position:fixed;top:12px;left:12px;z-index:100;background:var(--white);color:var(--bg);padding:12px 18px;transform:translateY(-180%)}.skip-link:focus{transform:none}
.scene-wrap{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}#scene{width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s}.scene-ready #scene{opacity:1}.scene-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,11,.32),transparent 60%);pointer-events:none}.fallback-art{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,#25202e 0,transparent 49%);opacity:.65;transition:opacity .5s}.scene-ready .fallback-art{opacity:0}.fallback-orbit{position:absolute;top:22%;left:56%;width:30vw;height:48vh;border:2px solid #ac9ebc;border-radius:50%;box-shadow:12px 20px 45px #020204;transform:rotate(-26deg)}.orbit-two{transform:rotate(37deg);border-width:18px;border-color:#645c71}.orbit-three{transform:rotate(81deg);border-color:#eee6f7}
.site-header{position:absolute;top:0;left:0;right:0;padding:27px var(--pad);display:flex;align-items:center;gap:40px;z-index:5}.wordmark{display:flex;align-items:center;gap:12px;font-size:16px;letter-spacing:.19em;font-weight:600;white-space:nowrap}.wordmark-dot{font-size:11px;margin:-17px 0 0 -7px;letter-spacing:0}.site-header nav{display:flex;gap:35px;margin-left:auto}.site-header nav a{font-size:12px;transition:color .2s}.site-header nav a:hover{color:var(--purple)}.site-header nav a span{margin-left:15px}.header-note{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:28px;margin-left:8px}
.chapter{position:relative;min-height:100svh;padding:var(--pad)}.hero{min-height:790px;height:100svh;display:flex;align-items:center;padding-top:126px;padding-bottom:112px}.hero-copy{width:64%;max-width:850px;position:relative}.hero h1{font:400 clamp(84px,9.8vw,162px)/.85 Cormorant,Georgia,serif;letter-spacing:-.035em;margin:0;text-wrap:balance}.hero h1 em{color:var(--purple);font-weight:400}.hero-bottom{display:flex;align-items:center;gap:60px;margin-top:36px}.hero-bottom p{font-size:12px;line-height:1.9;color:var(--muted);margin:0}.round-link{display:flex;align-items:center;gap:15px;font-size:11px}.round-link-circle{display:grid;place-items:center;width:51px;height:51px;border:1px solid #8d7c9f;border-radius:50%;transition:background .25s,border-color .25s,transform .25s}.round-link:hover .round-link-circle{background:#7e52ad;border-color:var(--purple);transform:translateY(3px)}.round-link svg{width:19px;height:19px}.art-caption{position:absolute;right:var(--pad);bottom:26%;display:flex;gap:16px;align-items:center;font-size:12px;color:#c1b6cd;line-height:1.8;max-width:200px}.caption-line{display:block;width:33px;height:1px;background:#bca9ce}.hero-foot{position:absolute;bottom:32px;left:var(--pad);right:var(--pad);padding-top:23px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:12px;letter-spacing:.03em;color:var(--muted)}.live-label{display:flex;align-items:center;gap:9px}.status-dot{height:5px;width:5px;background:var(--purple);border-radius:50%}.pointer-note{display:flex;align-items:center;gap:10px;margin:0}.pointer-note svg{width:15px;height:15px}.scroll-note span{margin-left:18px}
.playground{display:flex;justify-content:flex-end;align-items:center;min-height:940px;padding-top:120px;padding-bottom:140px}.play-copy{width:39%;max-width:510px;margin-right:3.5%}h2{font:400 clamp(76px,8.5vw,132px)/.9 Cormorant,Georgia,serif;letter-spacing:-.03em;margin:0}h2 em{color:var(--purple);font-weight:400}.section-description{color:var(--muted);font-size:14px;line-height:1.9;margin-top:33px}.controls{margin-top:42px;max-width:350px}.range-control{display:grid;grid-template-columns:1fr auto;margin-bottom:29px;column-gap:12px}.range-control label{font-size:12px}.range-control output{font-size:12px;color:var(--purple)}.range-control input{width:100%;grid-column:1/-1;margin:17px 0 9px;appearance:none;-webkit-appearance:none;height:2px;background:linear-gradient(to right,var(--purple) var(--fill,55%),#49404f var(--fill,55%));border:0;cursor:ew-resize}.range-control input::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:var(--white);border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--purple)}.range-control input::-moz-range-thumb{width:10px;height:10px;background:var(--white);border:2px solid var(--bg);border-radius:50%}.range-ends{grid-column:1/-1;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:3px}.text-button{display:flex;width:100%;justify-content:space-between;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);padding:7px 0 15px;font-size:12px;text-align:left}.text-button svg{width:20px;transition:transform .25s}.text-button:hover{color:var(--purple)}.text-button:hover svg{transform:translateX(5px)}.touch-note{font-size:12px;line-height:1.7;color:var(--muted);margin-top:18px;max-width:280px}.section-side-note{position:absolute;left:var(--pad);bottom:14%;font-size:11px;color:var(--muted)}
.about{min-height:950px;text-align:center;display:flex;flex-direction:column;justify-content:center;padding-top:180px;padding-bottom:180px;background:linear-gradient(180deg,transparent,rgba(9,9,11,.62) 45%,var(--bg) 100%)}.about-heading h2{font-size:clamp(95px,11vw,160px);line-height:.88}.about-heading p{font-size:13px;line-height:1.9;color:var(--muted);margin-top:35px}.return-link{display:inline-block;font-size:11px;padding-bottom:8px;border-bottom:1px solid #8a719f;margin-top:20px}.return-link span{margin-left:25px}.return-link:hover{color:var(--purple)}.study-details{position:absolute;left:var(--pad);right:var(--pad);bottom:45px;display:flex;justify-content:space-between;text-align:left;font-size:12px;color:var(--muted);line-height:1.9}.study-details p:last-child{text-align:right}footer{position:relative;display:flex;align-items:center;gap:45px;padding:30px var(--pad) 75px;background:var(--bg);border-top:1px solid var(--line);font-size:12px;color:var(--muted)}.footer-wordmark{font-size:14px;letter-spacing:.2em;color:var(--white)}footer span:last-child{margin-left:auto}.motion-tools{position:fixed;bottom:17px;right:18px;z-index:10}.motion-tools button{display:flex;align-items:center;gap:7px;border:1px solid #504359;border-radius:30px;background:rgba(15,12,19,.92);padding:9px 13px;font-size:12px}.motion-tools svg{width:13px;height:13px}.motion-tools button:hover{border-color:var(--purple)}.scene-status:not(:empty),.noscript{position:fixed;z-index:20;left:20px;bottom:15px;max-width:min(65vw,500px);padding:12px 18px;background:#211929;color:#e3d6f2;border:1px solid #70568b;font-size:11px}.scene-fallback .controls{opacity:.6}.scene-fallback .pointer-note{visibility:hidden}
@media(min-width:1700px){.hero-copy{margin-left:2vw}.hero{min-height:920px}.playground{min-height:1100px}}
@media(max-width:1000px){.header-note{display:none}.hero{min-height:740px}.hero h1{font-size:clamp(85px,12vw,130px)}.hero-bottom{gap:28px}.art-caption{right:25px;bottom:23%;font-size:11px}.play-copy{width:43%;margin:0}.playground{min-height:900px}.hero-foot{font-size:11px}}
@media(max-width:650px){:root{--pad:24px}.site-header{padding-top:23px;gap:12px}.wordmark{font-size:12px;gap:8px;letter-spacing:.14em}.wordmark img{width:28px;height:28px}.site-header nav{gap:0}.site-header nav a{font-size:12px}.site-header nav a:first-child{display:none}.hero{min-height:820px;height:100svh;align-items:flex-start;padding-top:142px;padding-bottom:85px}.hero-copy{width:100%}.hero h1{font-size:clamp(55px,16vw,102px);line-height:.9}.hero-bottom{margin-top:285px;justify-content:space-between;gap:12px}.hero-bottom p{font-size:12px;line-height:1.7}.round-link{font-size:12px;gap:10px}.round-link-circle{width:40px;height:40px}.art-caption{display:none}.hero-foot{bottom:25px;padding-top:17px}.hero-foot .pointer-note{display:none}.scroll-note{font-size:11px}.scroll-note span{margin-left:10px}.playground{min-height:1010px;align-items:flex-end;padding-top:320px;padding-bottom:90px}.play-copy{width:100%;max-width:none;background:linear-gradient(0deg,rgba(9,9,11,.85) 75%,transparent);padding-top:30px}.play-copy h2{font-size:85px}.section-description{font-size:12px;margin-top:22px}.controls{max-width:none;margin-top:30px}.section-side-note{display:none}.about{min-height:800px;padding-top:120px;padding-bottom:170px}.about-heading h2{font-size:90px}.study-details{bottom:30px;display:block;font-size:11px}.study-details p:last-child{text-align:left;margin-top:20px}.about-heading p{font-size:12px}footer{flex-wrap:wrap;gap:16px;padding-top:25px;padding-bottom:85px}footer .footer-wordmark{width:100%;font-size:13px}footer span:last-child{margin-left:auto}.scene-vignette{background:linear-gradient(0deg,transparent 15%,rgba(9,9,11,.16) 65%)}.fallback-orbit{top:45%;left:25%;width:55vw;height:28vh}.motion-tools{bottom:12px;right:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:0s!important;animation:none!important}}
/* Keep adjacent sculpture and atmosphere actions distinct and easy to tap. */
.text-button + .text-button{margin-top:16px}
#sculpture-toggle[aria-pressed=true]{color:var(--purple)}

/* The art accepts a single-finger drag; pinch zoom and surrounding scroll remain native. */
.touch-surface,.touch-cue{display:none}
@media(any-pointer:coarse),(max-width:650px){
  .scene-ready .touch-surface{display:block;position:fixed;inset:90px 24px 84px;z-index:0;touch-action:pinch-zoom;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  main{position:relative;z-index:1;pointer-events:none}
  .hero-copy{pointer-events:none}
  .hero h1,.hero-bottom,.hero-foot,.art-caption,.play-copy,.about,a,button,input{pointer-events:auto}
  .touch-cue{display:block;font-size:12px;color:var(--purple);margin:0 0 12px;flex-basis:100%}
  .hero-foot{flex-wrap:wrap}
  .scene-fallback .touch-cue{display:none}
  .text-button,.motion-tools button,.site-header nav a,.return-link{min-height:44px}
  .site-header nav a{display:inline-flex;align-items:center}
  .range-control input{height:44px;margin:8px 0;background-size:100% 2px;background-repeat:no-repeat;background-position:center}
  .range-control input::-webkit-slider-thumb{width:22px;height:22px}
  .range-control input::-moz-range-thumb{width:20px;height:20px}
  .motion-tools{bottom:max(12px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))}
  .round-link-circle{width:44px;height:44px}
  .touch-note{max-width:38ch;font-size:13px}
}
@media(max-width:650px){
  .hero-bottom{margin-top:clamp(265px,34svh,340px)}
  .about-heading h2{font-size:clamp(66px,20vw,90px)}
  .play-copy h2{font-size:clamp(64px,20vw,85px)}
  .hero{min-height:max(850px,100svh)}
}

/* Keep the host-site return link above the demo header and touch surface. */
.portfolio-return{position:fixed;top:88px;left:24px;z-index:8;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid #66506e;border-radius:24px;background:rgba(9,9,11,.94);font-size:12px;color:#f5f1ec}
.portfolio-return:hover{border-color:var(--purple);color:var(--purple)}