:root{color-scheme:dark;--bg:#050505;--text:#f0efed;--muted:#929294;--accent:#67e8f9;--line:#ffffff21}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--text);font-family:"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button{border:0}::selection{background:#67e8f9;color:#050505}.skip{position:fixed;top:-80px;left:20px;background:var(--accent);color:#000;z-index:20;padding:15px}.skip:focus{top:15px}header{height:88px;position:sticky;top:0;z-index:10;background:#050505ed;backdrop-filter:blur(18px);display:flex;align-items:center;gap:55px;padding:0 5%;border-bottom:1px solid var(--line)}.wordmark{font-size:43px;line-height:1;font-weight:700;letter-spacing:-5px;padding-right:5px}.wordmark span{color:var(--accent)}nav{display:flex;gap:30px}nav a{font-size:11px;letter-spacing:.6px;font-weight:600;position:relative;padding:12px 0;transition:color .2s}nav a:hover,nav a[aria-current]{color:var(--accent)}nav a[aria-current]:after{content:"";position:absolute;bottom:3px;left:0;width:16px;height:2px;background:var(--accent)}.header-note{margin-left:auto;font-size:11px;color:#aaa;white-space:nowrap}.header-note i{display:inline-block;background:var(--accent);width:5px;height:5px;border-radius:50%;margin-left:12px;box-shadow:0 0 10px #67e8f94f}main,footer{max-width:1800px;margin:auto}.hero{padding:45px 5% 0}.hero-top{display:flex;justify-content:space-between;color:#8e8e93;font-size:12px}.hero-title{position:relative;padding-top:56px}h1{font-size:clamp(65px,10.8vw,180px);line-height:.89;letter-spacing:-.075em;font-weight:500;margin:0}h1 span{color:var(--accent)}.hero-asterisk{position:absolute;right:6%;top:55px;color:var(--accent);font-size:clamp(70px,12vw,170px);line-height:1;font-weight:200;transform:rotate(12deg)}.hero-bottom{display:flex;justify-content:space-between;align-items:center;margin:38px 0 55px}.hero-bottom p{color:#999;font-size:14px;line-height:1.75}.round-link{display:flex;gap:28px;align-items:center;font-size:12px}.round-link b{display:grid;place-items:center;width:54px;height:54px;border:1px solid #ffffff48;border-radius:50%;font-size:24px;font-weight:400;transition:background .25s,color .25s,transform .25s}.round-link:hover b{background:var(--accent);color:#000;transform:rotate(45deg)}.worlds{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.worlds a{padding:23px 18px 25px 0;position:relative;border-right:1px solid var(--line);margin-right:22px;transition:color .2s}.worlds a:last-child{border:0;margin:0}.worlds a>span:not(.world-color){display:block;font-size:12px;font-weight:600;margin:15px 0 8px}.worlds small{font-size:10px;color:#89898c}.worlds b{position:absolute;right:17px;top:26px;font-weight:400;color:#818185}.world-color{display:block;width:24px;height:4px}.gallery-color{background:#7f8990}.music-color{background:#ae92db}.what-color{background:#6f5d91}.chain-color{background:var(--accent)}.system-color{background:#c4bcae}.worlds a:hover{color:var(--accent)}.section{padding:100px 5% 0;scroll-margin-top:0}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:46px;gap:20px}.section-heading h2{font-size:clamp(38px,5.6vw,82px);line-height:1;letter-spacing:-.06em;font-weight:500;margin:0}.section-heading h2 span{color:var(--accent)}.section-heading>p{margin:4px 0 0;font-size:12px;line-height:1.8;color:#929296}.gallery{padding-top:112px}.gallery-layout{display:grid;grid-template-columns:1.2fr 1fr .6fr;gap:20px;align-items:stretch}.mood{position:relative;width:100%;display:block;overflow:hidden;text-align:left;border:1px solid #ffffff12;background:#15171b;transition:border-color .4s}.mood:hover{border-color:#ffffff55}.mood:before{content:"";position:absolute;inset:0;transition:transform 1s}.mood:hover:before{transform:scale(1.05)}.mood-large{height:460px}.mood-large:before{background:linear-gradient(90deg,#111418 0%,#20262b 42%,#495259 49.7%,#20262a 50.2%,#171a1e 78%,#101215)}.mood-line{position:absolute;width:1px;top:0;bottom:0;left:50%;background:#c1cdd319;box-shadow:0 0 75px 15px #b0c0ca14}.mood-caption{position:absolute;left:23px;right:23px;bottom:22px;font-size:12px;color:#c6c8cc;display:flex;justify-content:space-between}.mood-caption b{font-weight:400}.gallery-side{display:flex;flex-direction:column;justify-content:space-between;gap:35px}.editorial{font-family:Georgia,serif;font-size:clamp(20px,2.15vw,34px);line-height:1.4;letter-spacing:-.5px;margin:15px 0 0 10px;color:#b9b9bd}.mood-small{height:255px}.mood-small:before{background:radial-gradient(ellipse at 60% 110%,#52555d 0%,#252831 40%,#15171c 75%)}.mood-narrow:before{background:linear-gradient(165deg,#373b41,#16191e 49%,#08090b);box-shadow:inset 25px 0 70px #0009}.section-foot{border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:10px;color:#79797f;line-height:1.7}.music{padding-top:105px}.music>.section-heading{margin-bottom:30px}.era-selector{display:flex;gap:25px;margin-bottom:35px;font-size:11px;color:#96969b}.era-selector a{padding:9px 0;border-bottom:1px solid #ffffff35}.era-selector a:hover{color:var(--accent)}.era{display:grid;grid-template-columns:1fr 290px .7fr;gap:7%;padding:45px 5%;border-top:1px solid #ffffff25;position:relative;overflow:hidden;scroll-margin-top:105px}.era-label{font-size:11px}.era h3{font-size:clamp(48px,5.5vw,78px);font-weight:400;letter-spacing:-.06em;line-height:.98;margin:28px 0 25px}.era h3 span{font-size:.6em}.era p{font-size:12px;line-height:1.8;opacity:.65}.vintage{background:linear-gradient(115deg,#1e1b16,#14120f 55%,#0b0a09);color:#c4b394}.warm{background:linear-gradient(115deg,#261c18,#19120f 55%,#0b0908);color:#dcaf92}.modern{background:radial-gradient(ellipse at 52% 20%,#251442,#0d0916 70%);color:#c4a7fc}.record-card{padding:0;background:none;text-align:left;max-width:290px;width:100%;transition:transform .3s}.record-card:hover{transform:translateY(-5px)}.record-art{aspect-ratio:1;position:relative;display:block;overflow:hidden;border:1px solid #ffffff1e}.vintage-art{background:linear-gradient(145deg,#5b5142,#302d26 65%)}.cover-type{position:absolute;bottom:22px;left:22px;font-family:Georgia,serif;font-size:27px;line-height:1.05;letter-spacing:-1px;color:#e2d5bd}.vinyl{position:absolute;width:240px;height:240px;right:-95px;top:-25px;border-radius:50%;background:repeating-radial-gradient(circle,#121210 0 2px,#29271f 3px,#121210 4px 6px);box-shadow:-10px 15px 30px #0006}.vinyl i{position:absolute;inset:38%;border:20px solid #a18c63;border-radius:50%;background:#151411}.warm-art{background:linear-gradient(140deg,#895e44,#3e2922 65%)}.warm-art .cover-type{color:#ead6bf}.cd{position:absolute;border-radius:50%;height:240px;width:240px;right:-65px;top:-38px;background:conic-gradient(from 20deg,#ad957a,#51453f,#dec4a0,#647073,#dec4a0,#58463a,#ad957a);box-shadow:-10px 15px 30px #0005}.cd:after{content:"";position:absolute;inset:42%;border:7px solid #6c5a48;border-radius:50%;background:#3e2c24}.modern-art{background:linear-gradient(130deg,#100b21,#3a1b5e 50%,#10182d)}.neon-disc{position:absolute;width:220px;height:220px;border:1px solid #a38bed;border-radius:50%;top:-35px;right:-55px;box-shadow:0 0 25px #9a56ff6b,inset 0 0 40px #9257fb4f;background:repeating-radial-gradient(circle,transparent 0 15px,#b0a6f820 16px 17px)}.modern-art .cover-type{font-family:inherit;font-weight:500;color:#d8c8ff}.record-caption{display:flex;justify-content:space-between;font-size:12px;margin-top:17px}.record-caption b{font-weight:400}.record-card small{display:block;margin-top:7px;font-size:10px;opacity:.6}.era-aside{display:flex;flex-direction:column;justify-content:space-between;padding:10px 0 50px;font-size:11px;line-height:1.8;opacity:.65}.sound-bars{font-size:25px;letter-spacing:3px;white-space:nowrap}.tiny-note{font-size:11px;color:#8b8993;margin-top:9px}.thoughts{background:radial-gradient(ellipse at 70% 65%,#181121 0%,#09070d 43%,#050505 74%);padding-bottom:90px}.thought-body{position:relative;display:grid;grid-template-columns:1.3fr .6fr;gap:15%;align-items:end;padding:55px 5% 30px}.opening-quote{position:absolute;left:0;top:0;font-family:Georgia,serif;font-size:140px;color:#4c3d62;line-height:1}.thought-statement{font-family:Georgia,serif;font-size:clamp(34px,4.3vw,64px);line-height:1.14;letter-spacing:-1.6px;margin:0;position:relative}.thought-statement span{color:#8f819f}.thought-note{padding-bottom:8px}.short-rule{display:block;width:36px;height:1px;background:#b1a4c5;opacity:.5}.thought-note p{font-size:12px;line-height:1.9;color:#97909f;margin:25px 0}.text-button{padding:12px 0;background:none;font-size:12px;border-bottom:1px solid #ffffff35;display:inline-flex;gap:32px;align-items:center}.text-button:hover{color:var(--accent)}.blockchain{border-top:1px solid var(--line);background:#050608}.chain-main{display:grid;grid-template-columns:1.3fr 1fr;gap:3%;align-items:center;padding:18px 0 50px}.chain-intro{font-size:13px;color:#86959a;line-height:1.8}.chain-main h3{font-size:clamp(48px,6.9vw,100px);font-weight:500;line-height:.96;letter-spacing:-.065em;margin:30px 0}.chain-main h3 span{color:var(--accent)}.chain-description{font-size:12px;line-height:1.9;color:#8d999d}.chain-sculpture{height:335px;position:relative;perspective:600px}.cube{position:absolute;width:135px;height:135px;border:1px solid #67e8f977;transform:rotateX(57deg) rotateZ(-35deg);left:calc(50% - 67px);background:linear-gradient(145deg,#67e8f907,#67e8f91e);box-shadow:0 0 40px #67e8f909,inset 0 0 35px #67e8f90a}.cube:after,.cube:before{content:"";position:absolute;inset:18px;border:1px solid #67e8f926}.cube:after{inset:38px}.cube-one{top:22px}.cube-two{top:98px}.cube-three{top:174px}.sculpture-axis{position:absolute;width:1px;height:230px;top:40px;left:50%;background:linear-gradient(transparent,#67e8f9aa,transparent)}.chain-sculpture>span{position:absolute;bottom:0;width:100%;text-align:center;font-size:9px;letter-spacing:2px;color:#68838a}.chain-topics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #67e8f930;border-bottom:1px solid #67e8f930}.chain-topics button{position:relative;background:none;text-align:left;padding:27px 25px 27px 0;margin-right:30px;border-right:1px solid #67e8f930}.chain-topics button:last-child{border:0;margin:0}.chain-topics span{font-size:18px;display:block;letter-spacing:-.5px}.chain-topics small{display:block;color:#7f979c;font-size:10px;margin-top:10px}.chain-topics b{position:absolute;right:23px;top:30px;color:var(--accent);font-weight:400}.chain-topics button:hover span{color:var(--accent)}.system{padding-top:110px;background:radial-gradient(ellipse at 50% 60%,#25231e44,#050505 65%)}.system .section-heading h2 span{color:#c5bdad}.system-center{text-align:center;min-height:470px;padding:45px 0 90px}.quiet-mark{width:5px;height:5px;background:#d3c9b4;border-radius:50%;margin:0 auto 40px;box-shadow:0 0 34px 10px #d3c9b40b}.system-lead{font-family:Georgia,serif;font-size:clamp(32px,4vw,58px);line-height:1.25;letter-spacing:-1px;color:#dbd5cb;margin:0 0 30px}.system-center .short-rule{margin:auto;background:#b9ae98}.system-placeholder{font-size:12px;color:#8b877f;line-height:1.8;margin:28px 0 13px}.system-center .text-button{color:#c8c0b2}.system .section-foot{border-bottom:0}.section-foot a:hover{color:var(--text)}footer{padding:45px 5% 25px;border-top:1px solid var(--line)}.footer-top{display:flex;align-items:flex-start;gap:35px;margin-bottom:35px}.footer-top p{font-size:12px;color:#9b9b9f;line-height:1.7;margin:0}.back-top{margin-left:auto;border:1px solid #ffffff30;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;font-size:20px}.back-top:hover{color:var(--accent);border-color:var(--accent)}footer nav{justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0}.footer-bottom{display:flex;justify-content:space-between;font-size:10px;color:#6f6f75;padding-top:25px}dialog{width:min(520px,calc(100% - 36px));max-height:85dvh;overflow:auto;background:#101014;color:var(--text);border:1px solid #ffffff2b;padding:45px;border-radius:3px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:16px;top:14px;width:32px;height:32px;background:none;color:#aaa;font-size:16px}.dialog-swatch{height:100px;margin:5px 0 28px;background:linear-gradient(130deg,#1b242a,#3a434d,#171a22)}.dialog-label{font-size:10px;color:var(--accent)}dialog h2{font-size:32px;font-weight:400;letter-spacing:-1px;margin:16px 0}dialog p{font-size:14px;line-height:1.85;color:#a6a6ae}.dialog-done{padding:13px 18px;background:#ededed;color:#111;font-size:12px;margin-top:20px}.dialog-close:hover{color:white}dialog[open]{animation:dialog-enter .25s ease}@keyframes dialog-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1800px){header{padding-left:calc((100% - 1620px)/2);padding-right:calc((100% - 1620px)/2)}}
@media(max-width:1050px){header{gap:30px}nav{gap:22px}.header-note{display:none}.hero-asterisk{right:0}.era{grid-template-columns:1fr 260px;gap:8%;padding:35px 4%}.era-aside{display:none}.gallery-layout{grid-template-columns:1.1fr 1fr .5fr;gap:14px}.mood-large{height:380px}.mood-small{height:205px}.editorial{font-size:24px}.thought-body{gap:8%}.chain-sculpture{transform:scale(.9)}}
@media(max-width:700px){html{scroll-padding-top:110px}header{height:96px;display:grid;grid-template-columns:1fr;padding:12px 5% 0;gap:0}.wordmark{font-size:34px;justify-self:start}header nav{width:100%;gap:0;justify-content:space-between;align-items:center}nav a{font-size:9px;letter-spacing:0;padding:12px 0}header nav a[aria-current]:after{bottom:5px}.hero{padding-top:28px}.hero-top{font-size:10px}.hero-top>span:last-child{display:none}.hero-title{padding-top:50px}h1{font-size:clamp(48px,11.1vw,77px);line-height:.98;letter-spacing:-.075em}.hero-asterisk{font-size:65px;top:30px;right:0}.hero-bottom{margin:25px 0 35px;gap:10px;align-items:flex-end}.hero-bottom p{font-size:11px;line-height:1.8;margin:0}.round-link{gap:0}.round-link>span{display:none}.round-link b{height:43px;width:43px;font-size:20px}.worlds{grid-template-columns:repeat(3,1fr);border-bottom:0}.worlds a{padding:19px 5px 20px 0;margin-right:12px;border-bottom:1px solid var(--line);min-width:0}.worlds a:nth-child(3){border-right:0;margin-right:0}.worlds a:last-child{border-bottom:1px solid var(--line)}.worlds a>span:not(.world-color){font-size:10px;margin:12px 0 6px}.worlds small{font-size:8px}.worlds b{right:8px;top:19px;font-size:12px}.section{padding-top:70px}.section-heading{margin-bottom:30px;align-items:flex-start}.section-heading h2{font-size:clamp(32px,7.5vw,49px)}.section-heading>p{font-size:10px;margin:0}.tiny-note{font-size:9px;margin:3px 0 0}.gallery-layout{grid-template-columns:1.15fr 1fr;gap:12px}.mood-large{height:330px}.gallery-side{gap:20px}.editorial{font-size:19px;margin:5px 0 0;line-height:1.4}.mood-small{height:190px}.mood-narrow{grid-column:1/-1;height:130px}.mood-caption{font-size:10px;left:15px;right:15px;bottom:15px}.section-foot{padding:18px 0;font-size:9px}.section-foot span:last-child{max-width:52%;text-align:right}.era-selector{gap:22px;font-size:10px;margin-bottom:25px}.era{grid-template-columns:1fr 1fr;gap:18px;padding:28px 14px;scroll-margin-top:110px}.era h3{font-size:43px;margin:22px 0}.era-label{font-size:9px}.era p{font-size:10px;line-height:1.7}.record-card{align-self:center}.cover-type{font-size:20px;left:13px;bottom:14px}.vinyl,.cd{width:160px;height:160px;right:-65px;top:-30px}.vinyl i{border-width:12px}.neon-disc{width:150px;height:150px;right:-40px}.record-caption{font-size:10px;margin-top:12px}.record-card small{font-size:8px;line-height:1.7}.thoughts{padding-bottom:45px}.thought-body{grid-template-columns:1fr;gap:40px;padding:45px 3% 20px}.opening-quote{font-size:100px}.thought-statement{font-size:41px}.thought-note{margin-left:35%;padding:0}.thought-note p{font-size:11px;margin:18px 0}.text-button{font-size:11px}.chain-main{grid-template-columns:1fr;padding-bottom:35px}.chain-intro{font-size:11px}.chain-main h3{font-size:60px;margin:24px 0}.chain-description{font-size:11px}.chain-sculpture{height:275px;transform:scale(.85);margin:0 0 -20px}.chain-topics{grid-template-columns:1fr}.chain-topics button{margin:0;padding:20px 0;border-right:0;border-bottom:1px solid #67e8f925}.chain-topics button:last-child{border:0}.chain-topics span{font-size:16px}.chain-topics small{font-size:10px;margin-top:7px}.chain-topics b{right:5px;top:22px}.system-center{min-height:400px;padding:40px 0 65px}.system-lead{font-size:38px}.system-placeholder{font-size:11px}footer{padding-top:30px}.footer-top{gap:25px;margin-bottom:25px}footer .wordmark{font-size:40px}.footer-top p{font-size:11px}footer nav{flex-wrap:wrap;justify-content:flex-start;gap:0 25px;padding:12px 0}footer nav a{font-size:10px}.footer-bottom{font-size:8px;padding-top:20px}dialog{padding:35px 25px}.dialog-swatch{height:85px}dialog h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
/* Give the lower layer and its caption separate space on narrow screens. */
@media(max-width:700px){.chain-sculpture{height:320px;margin-bottom:0}.chain-sculpture>span{bottom:-8px}}
/* Each scene is a separate destination, never a continuation of another. */
[hidden]{display:none!important}
main{min-height:calc(100svh - 88px);outline:none}
main>.section{min-height:calc(100svh - 88px);padding-top:65px;padding-bottom:45px;transform-origin:50% 15%}
.section-heading h2:focus{outline:none}
body{transition:background-color .65s ease}
body[data-scene="galery"]{--nature-start:#080a0c;--gallery-art-end:#1b1412;background:var(--nature-start)}
body[data-scene="music"]{--music-now-base:#120f15;background:var(--music-now-base)}
body[data-scene="what"]{
 --cosmo-night:#03050a;
 --cosmo-starfield:url("cosmo-stars.svg") center / 950px 710px repeat;
 background:var(--cosmo-night);
}
body[data-scene="blockchain"]{background:#040c0f}
body[data-scene="system"]{background:#0c0b09}
body[data-scene="galery"] .gallery,body[data-scene="galery"] header{background:var(--nature-start)}
body[data-scene="music"] .music,body[data-scene="music"] header{background:var(--music-now-base)}
body[data-scene="what"] :is(header,footer) {
 background-color: var(--cosmo-night);
 background-image:
  radial-gradient(circle at 17px 23px, #e1edff8c 0 .65px, transparent 1.2px),
  radial-gradient(circle at 79px 61px, #e1edff65 0 .55px, transparent 1.15px),
  radial-gradient(circle at 111px 36px, #f7e5d078 0 .75px, transparent 1.35px),
  url("cosmo-stars.svg");
 background-size: 131px 89px, 173px 113px, 211px 139px, 950px 710px;
}
body[data-scene="what"] header { transition: none; }
body[data-scene="blockchain"] header{background:#040c0fed}
body[data-scene="system"] header{background:#0c0b09ed}
.era h3{font-size:clamp(30px,3.5vw,52px);line-height:1.08;margin:25px 0;letter-spacing:-.055em}
.scene-enter.gallery .mood-line{animation:gallery-light 1.5s ease both}
.scene-enter.music:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,#a367e926 48%,transparent 75%);animation:music-wave 1.2s ease both;z-index:2}
.scene-enter.blockchain .cube-one{animation:layer-one 1.2s ease both}
.scene-enter.blockchain .cube-three{animation:layer-three 1.2s ease both}
.scene-enter.system .quiet-mark{animation:quiet-light 1.8s ease both}
@keyframes gallery-light{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@keyframes music-wave{from{transform:translateX(-100%);opacity:0}40%{opacity:1}to{transform:translateX(100%);opacity:0}}
@keyframes layer-one{from{opacity:0;translate:0 65px}to{opacity:1;translate:0 0}}
@keyframes layer-three{from{opacity:0;translate:0 -65px}to{opacity:1;translate:0 0}}
@keyframes quiet-light{from{opacity:0;box-shadow:0 0 90px 40px #d3c9b400}to{opacity:1;box-shadow:0 0 34px 10px #d3c9b40b}}
@media(max-width:700px){main,main>.section{min-height:calc(100svh - 96px)}main>.section{padding-top:40px;padding-bottom:30px}.era h3{font-size:clamp(24px,6.5vw,36px)}.music>.section-heading{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){body{transition:none}.scene-enter.music:before{display:none}}
.wordmark{display:block;padding:0;letter-spacing:normal;flex-shrink:0;line-height:0}
.avatar{display:block;width:43px;height:43px;object-fit:cover;border-radius:50%;border:1px solid #ffffff20}
.footer-top .avatar{width:46px;height:46px}
body{transition:background-color 2.2s ease}
header{transition:background-color 2.2s ease}
.era{grid-template-columns:1fr 290px .7fr;row-gap:30px}
.track-list{grid-column:1/-1;border-top:1px solid #ffffff20;margin-top:8px}
.track-row{width:100%;display:grid;grid-template-columns:22px 40px 1fr 45px 24px;align-items:center;gap:18px;text-align:left;padding:13px 10px;background:transparent;border-bottom:1px solid #ffffff12;transition:background .2s ease}
.track-row:hover{background:#ffffff07}
.track-number,.track-duration{font-size:11px;opacity:.55}
.track-cover{width:40px;height:40px;border:1px solid #ffffff15}
.track-name{font-size:12px;line-height:1.5}
.track-name small{display:block;font-size:10px;opacity:.5;margin-top:3px}
.track-play{font-size:23px;text-align:right}
.scene-enter.gallery .mood-line{animation-duration:2.6s}
.scene-enter.music:before{animation-duration:2.4s}
.scene-enter.blockchain .cube-one,.scene-enter.blockchain .cube-three{animation-duration:2.5s}
.scene-enter.system .quiet-mark{animation-duration:3s}
@media(max-width:1050px){.era{grid-template-columns:1fr 260px}}
@media(max-width:700px){header .avatar{width:32px;height:32px}.era{grid-template-columns:1fr 1fr;row-gap:20px}.track-row{grid-template-columns:16px 34px 1fr 22px;gap:10px;padding:12px 0}.track-cover{width:34px;height:34px}.track-duration{display:none}.track-name{font-size:11px}.track-name small{font-size:9px}.track-play{font-size:21px}}
@media(prefers-reduced-motion:reduce){body,header{transition:none}}
/* Soft vertical echoes keep the lettering legible. */
#music-title,#thoughts-title{position:relative;isolation:isolate}
#music-title{color:#d9e5ff;text-shadow:0 0 9px #998cff80,0 0 30px #8260e84d;animation:neon-shift 7s ease-in-out infinite alternate}
#music-title:after,#thoughts-title:after{content:attr(data-glow);position:absolute;inset:0;z-index:-1;pointer-events:none;filter:blur(4px);transform:translateY(5px) scaleY(1.09);opacity:.5}
#thoughts-title{color:#b6b9c2;text-shadow:0 0 12px #a4afc640}
#thoughts-title span{color:inherit}
#thoughts-title:after{filter:blur(3px);opacity:.3}
@keyframes neon-shift{0%{color:#e4dcff;text-shadow:0 0 8px #b47fff99,0 0 28px #a47aff55}100%{color:#d1f7ff;text-shadow:0 0 9px #7bdfff99,0 0 30px #7479e866}}
.music-tools{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:0 0 35px}.music-tools>span{font-size:11px;color:#92909b}.pill-button{background:#d8d3ed;color:#100d18;padding:12px 18px;border-radius:30px;font-size:12px}.pill-button:disabled{opacity:.5;cursor:wait}
.era{grid-template-columns:1fr 290px 1fr;column-gap:25px}.era-info{grid-column:1}.era .record-card{grid-column:2}.era-aside{display:flex;grid-column:3}.track-list:empty:after{content:'Добавь первый трек в эту эпоху';display:block;padding:25px 0;font-size:12px;opacity:.55}.track-row[aria-current]{background:#ffffff0c}.track-cover img{width:100%;height:100%;object-fit:cover}.record-art>img{width:100%;height:100%;object-fit:cover}.track-row .track-name{min-width:0;overflow-wrap:anywhere}
.glass-dialog{background:#08080cde;backdrop-filter:blur(16px);border:1px solid #ffffff25;box-shadow:0 30px 100px #000b}.glass-dialog::backdrop{background:#0008;backdrop-filter:blur(7px)}.modal-close{position:absolute;right:15px;top:12px;padding:9px;background:transparent;color:#bbb}.profile-photo{display:block;width:100px;height:100px;border-radius:50%;border:1px solid #ffffff25;object-fit:cover;margin:5px 0 25px}.glass-dialog h2{font-size:27px}.glass-dialog label{display:block;font-size:12px;color:#aaa;line-height:1.7;margin:17px 0}.glass-dialog input:not([type=checkbox]),.glass-dialog textarea,.glass-dialog select{display:block;width:100%;margin-top:7px;background:#ffffff08;border:1px solid #ffffff25;border-radius:5px;padding:11px;color:#eee;font:inherit;resize:vertical}.glass-dialog input[type=file]{font-size:11px}.glass-dialog select option{background:#17171c}.glass-dialog .check-label{display:flex;gap:10px;align-items:center}.glass-dialog p[role=status]{font-size:12px;line-height:1.6;min-height:18px}.profile-trigger{background:none}.audio-dock{position:sticky;bottom:0;z-index:12;padding:16px 5%;background:#111017f2;backdrop-filter:blur(15px);border-top:1px solid #ffffff25;display:flex;align-items:center;gap:25px;flex-wrap:wrap}.audio-dock #now-playing{font-size:12px;max-width:30%;overflow-wrap:anywhere}.audio-dock audio{width:min(500px,100%);height:36px}.audio-dock p{font-size:11px;color:#bab1c7;margin:0}
.market-intro{position:fixed;inset:88px 0 0;z-index:9;background:#030a0e;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;animation:intro-exit 3s both}.market-intro svg{width:min(850px,90vw);overflow:visible}.market-intro>span{color:#67e8f9;font-size:12px;letter-spacing:4px}.falling-chart{fill:none;stroke:#91aab3;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;animation:market-fall 1.7s cubic-bezier(.4,0,.7,1) forwards}.rising-candle{fill:#67e8f9;stroke:#67e8f9;stroke-width:2;transform-origin:640px 335px;animation:market-rise 3s both;filter:drop-shadow(0 0 12px #67e8f988)}
@keyframes market-fall{to{stroke-dashoffset:0}}@keyframes market-rise{0%,55%{transform:scaleY(0);opacity:0}57%{opacity:1}72%,100%{transform:scaleY(1);opacity:1}}@keyframes intro-exit{0%,78%{opacity:1}100%{opacity:0}}
@media(max-width:1050px){.era{grid-template-columns:1fr 260px 1fr}.era-aside{display:flex}.era-aside .sound-bars{font-size:16px;letter-spacing:0}}
@media(max-width:700px){.era{grid-template-columns:minmax(0,1fr)}.era-info,.era .record-card{grid-column:1}.era-info{text-align:center}.era-info h3 br{display:none}.era-info h3{margin:12px 0}.era-info h3 br:after{content:' '}.era-aside{display:none}.era .record-card{justify-self:center;max-width:260px;width:80%}.era .track-list{min-width:0}.track-row{grid-template-columns:16px 34px minmax(0,1fr) 22px}.audio-dock{gap:10px;padding:12px 5%}.audio-dock #now-playing{max-width:100%;width:100%}.audio-dock audio{width:100%}.market-intro{top:96px}.market-intro>span{font-size:10px;letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){#music-title{animation:none}.market-intro{display:none}.rising-candle,.falling-chart{animation:none}}
/* Reference blur belongs to profile entrance, not the section lettering. */
#music-title:after,#thoughts-title:after{content:none}
#profile-dialog[open]{animation:profile-emerge .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes profile-emerge{from{opacity:0;filter:blur(7px);transform:translateY(14px) scale(.97)}to{opacity:1;filter:blur(0);transform:none}}
@media(prefers-reduced-motion:reduce){#profile-dialog[open]{animation:none}}
.era .record-card{justify-self:center}
#profile-dialog{text-align:center;padding-top:50px}
#profile-dialog .profile-photo{margin:0 auto 25px;width:110px;height:110px}
#profile-dialog h2{margin:0 0 30px;letter-spacing:-.6px}
#profile-form label{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#profile-dialog #profile-bio{border:0;border-bottom:1px solid #ffffff20;border-radius:0;background:transparent;text-align:center;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:20px;line-height:1.6;color:#d6d0df;padding:10px 0;margin:0 0 28px;outline-offset:5px}
#profile-dialog #profile-bio::placeholder{color:#7e7888}
#profile-dialog #profile-bio:focus{border-bottom-color:#bca8e4;outline:0}
#profile-form .pill-button{background:#ffffff0d;color:#d9d2e4;border:1px solid #ffffff24;font-size:11px}
#profile-dialog #profile-status{font-size:11px;margin-top:20px;color:#a99db9}
.music>.section-heading{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.owner-mode .music>.section-heading{margin-bottom:105px}
.music>.section-heading>p{margin:0}.music.section{padding-bottom:0}
.era > .music-tools{grid-column:1 / -1;justify-content:center;margin:0;position:relative;z-index:3}
.falling-chart{stroke:#f24d62;filter:drop-shadow(0 0 6px #f24d6230)}
.rising-candle{fill:#59ef98;stroke:#59ef98;filter:drop-shadow(0 0 12px #59ef9877)}
.market-intro>span{text-transform:none;letter-spacing:1px;font-size:19px;color:#67e8f9}
.system-intro{position:fixed;inset:88px 0 0;z-index:9;background:#080807;display:grid;place-items:center;pointer-events:none}
.patient-word{position:absolute;font-family:Georgia,serif;font-style:normal;font-size:clamp(35px,5vw,65px);letter-spacing:2px;color:#dbd4c6;opacity:0;animation:patient-reveal 4s linear both}
@keyframes patient-reveal{0%,74.99%{opacity:0}75%,99.99%{opacity:1}100%{opacity:0}}
.gallery-tools{display:flex;justify-content:center;margin:24px 0 0}
.photo-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px 25px}.photo-item{margin:0;min-width:0}.photo-item img{display:block;width:100%;height:auto;object-fit:cover;background:#151719}.photo-item.ratio-square img{aspect-ratio:1}.photo-item.ratio-portrait img{aspect-ratio:3/4}.photo-item.ratio-landscape img{aspect-ratio:16/9}.photo-item figcaption{font:italic 17px/1.6 Georgia,serif;color:#bbbcc3;padding:16px 0;overflow-wrap:anywhere}.photo-gallery:empty{display:none}
body:not(.owner-mode) .track-list:empty:after{content:'Коллекция скоро появится'}
#profile-bio[readonly]{border-bottom:0;cursor:default}#profile-bio[readonly]:placeholder-shown{visibility:hidden}
@media(max-width:700px){.system-intro{top:96px}.photo-gallery{grid-template-columns:minmax(0,1fr);gap:25px}.photo-item figcaption{font-size:16px}}
@media(prefers-reduced-motion:reduce){.system-intro{display:none}}
.market-intro{animation:none}.market-intro svg{animation:chart-depart 3s both}.market-intro>span{position:absolute;opacity:0;animation:words-arrive 6.5s both}
@keyframes chart-depart{0%,85%{opacity:1}100%{opacity:0;filter:blur(4px)}}
@keyframes words-arrive{0%,46.15%{opacity:0;transform:translateY(8px);filter:blur(6px)}55%,94%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;filter:blur(2px)}}
.patient-word{animation:words-arrive 6.5s both}
.music-intro{position:fixed;inset:88px 0 0;z-index:9;display:grid;place-items:center;background:radial-gradient(ellipse,#251a2c,#09070e 65%);pointer-events:none;animation:gram-depart 3.5s both}
.gramophone{width:320px;height:300px;position:relative;filter:drop-shadow(0 15px 30px #0008)}.gram-base{position:absolute;left:30px;bottom:30px;width:260px;height:70px;border:1px solid #a18da060;border-radius:8px;background:linear-gradient(#382632,#160f1b);transform:skewY(-5deg)}.turntable{position:absolute;bottom:80px;left:60px;width:200px;height:70px;border-radius:50%;background:#08070b;border:1px solid #a6a0b94f}.intro-vinyl{position:absolute;bottom:85px;left:65px;width:190px;height:65px;border-radius:50%;background:repeating-radial-gradient(ellipse,#0b0910 0 4px,#3a2b414d 5px 6px);border:1px solid #ba91c770;animation:vinyl-lower 2.1s cubic-bezier(.2,.6,.2,1) both}.intro-vinyl:after{content:'';position:absolute;inset:34% 40%;border-radius:50%;background:#a391b0}.tonearm{position:absolute;right:33px;bottom:113px;width:125px;height:5px;background:#c0a4b9;transform-origin:right;animation:arm-set 3s both;border-radius:4px}.gram-horn{position:absolute;left:40px;top:20px;width:110px;height:115px;border-radius:50% 50% 10% 10%;background:radial-gradient(ellipse at 45% 25%,#120d18 15%,#7d5c76 50%,#c1a1b4 55%,#463044 70%);transform:rotate(-25deg);border:1px solid #bd96b375}
@keyframes vinyl-lower{from{transform:translateY(-140px) rotate(-18deg);opacity:0}25%{opacity:1}to{transform:translateY(0) rotate(0)}}
@keyframes arm-set{0%,60%{transform:rotate(-55deg)}85%,100%{transform:rotate(-12deg)}}
@keyframes gram-depart{0%,85%{opacity:1}100%{opacity:0}}
.sound-toggle,.editor-toggle{position:fixed;z-index:15;right:20px;bottom:20px;background:#17121fe8;border:1px solid #ffffff28;border-radius:30px;color:#c9c0d6;font-size:11px;padding:11px 15px}.editor-toggle{right:auto;left:20px}.audio-dock:not([hidden])~.sound-toggle{bottom:110px}#text-dialog{width:min(750px,calc(100% - 30px))}#text-fields{max-height:48vh;overflow:auto;padding-right:15px}#text-fields label{font-size:10px;margin:15px 0}#text-fields textarea{font-size:14px}
@media(max-width:700px){.music-intro{top:96px}.gramophone{transform:scale(.85)}.sound-toggle,.editor-toggle{bottom:12px;font-size:9px;padding:9px 11px;right:10px}.editor-toggle{right:auto;left:10px}footer{padding-bottom:65px}}
@media(prefers-reduced-motion:reduce){.music-intro{display:none}}
.intro-vinyl:before{content:'';position:absolute;inset:8% 4%;border-radius:50%;background:conic-gradient(transparent,#d9b1ec24,transparent 35%,#d9b1ec1a,transparent 70%);animation:vinyl-spin 2s linear 2s infinite}
@keyframes vinyl-spin{to{transform:rotate(360deg)}}
.audio-dock{padding-bottom:65px}
body{overflow-x:clip}
.music-intro{background:#000;animation:sketch-exit 5s both}
.gram-sketch{display:block;width:min(460px,85vw);height:auto;overflow:visible}
.sketch-disc-drop{animation:sketch-drop 2.2s cubic-bezier(.35,0,.3,1) both}
.sketch-disc-spin{transform-box:view-box;transform-origin:220px 250px;animation:sketch-spin 2.4s linear 2.2s infinite}
.sketch-arm{transform-box:view-box;transform-origin:338px 187px;animation:sketch-arm 3.4s cubic-bezier(.3,0,.3,1) both}
@keyframes sketch-drop{0%{transform:translateY(-175px);opacity:0}12%{opacity:1}85%{transform:translateY(-8px)}100%{transform:translateY(0);opacity:1}}
@keyframes sketch-spin{to{transform:rotate(360deg)}}
@keyframes sketch-arm{0%,67%{transform:rotate(-55deg)}100%{transform:rotate(0)}}
@keyframes sketch-exit{0%,92%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.sketch-disc-drop,.sketch-disc-spin,.sketch-arm{animation:none}}
html{overflow-x:clip}
.music.scene-enter:before{display:none}
/* Let the section appear underneath a fading entrance instead of cutting to it. */
.gram-sketch{width:min(184px,34vw)}
.market-intro,.system-intro{animation:entrance-crossfade 7.7s linear both}
.music-intro{animation:music-crossfade 6.2s linear both}
@keyframes entrance-crossfade{0%,84.4156%{opacity:1}100%{opacity:0}}
@keyframes music-crossfade{0%,80.6452%{opacity:1}100%{opacity:0}}
@keyframes chart-depart{0%,85%{opacity:1;filter:none}100%{opacity:0;filter:none}}
.falling-chart,.rising-candle{filter:none}
.market-intro>span,.patient-word{animation:entrance-words 7.7s both}
@keyframes entrance-words{0%,38.96%{opacity:0;transform:translateY(8px);filter:blur(6px)}46.43%,100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.market-intro,.system-intro,.music-intro{animation:none}}
/* Words finish fading before the section starts to appear at 6.5 seconds. */
@keyframes entrance-words{0%,38.96%{opacity:0;transform:translateY(8px);filter:blur(6px)}46.43%,75.325%{opacity:1;transform:translateY(0);filter:blur(0)}84.4156%,100%{opacity:0;transform:translateY(-4px);filter:blur(2px)}}
.system>.section-heading{position:relative;justify-content:center;text-align:center}
.system>.section-heading>.tiny-note{position:absolute;right:0;top:0}
@media(max-width:700px){.system>.section-heading{flex-direction:column;align-items:center;gap:15px}.system>.section-heading>.tiny-note{position:static;margin:0}}
.thoughts>.section-heading{position:relative;justify-content:center;text-align:center}
.thoughts>.section-heading>.tiny-note{position:absolute;right:0;top:0}
@media(max-width:700px){.thoughts>.section-heading{flex-direction:column;align-items:center;gap:15px}.thoughts>.section-heading>.tiny-note{position:static;margin:0}}
/* Carry each era's existing atmosphere to both edges of the viewport. */
.era{overflow:visible;isolation:isolate}
.era::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:inherit;pointer-events:none;border-top:1px solid #ffffff12}
/* The eras meet in moving pigment; content stays still above and below. */
.era-blend{position:relative;isolation:isolate;height:190px;width:100vw;left:50%;transform:translateX(-50%);overflow:hidden;pointer-events:none}
.neon-to-warm{--pigment-a:#57266b;--pigment-b:#a56b3c;--fusion:#85535d;background:linear-gradient(#0d0916,#1c111a 25%,#3c2528 55%,#261c18)}
.warm-to-vintage{--pigment-a:#825132;--pigment-b:#777044;--fusion:#6e5938;background:linear-gradient(#0b0908,#231b13 30%,#30281a 60%,#1e1b16)}
.blend-wave{position:absolute;left:-15%;width:130%;height:180px;border-radius:45% 55% 42% 58% / 55% 42% 58% 45%;filter:blur(28px);opacity:.48;will-change:transform}
.wave-outgoing{top:-105px;background:radial-gradient(ellipse at 35% 65%,var(--pigment-a),transparent 70%);animation:era-flow-out 16s ease-in-out infinite alternate}
.wave-incoming{bottom:-105px;background:radial-gradient(ellipse at 65% 35%,var(--pigment-b),transparent 70%);animation:era-flow-in 19s ease-in-out infinite alternate}
.blend-fusion{position:absolute;inset:15% -10%;background:radial-gradient(ellipse at 50% 50%,var(--fusion),transparent 60%);opacity:.15;filter:blur(30px);animation:era-fuse 13s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes era-flow-out{from{transform:translate(-4%,0) rotate(-3deg) scaleY(.8)}to{transform:translate(5%,70px) rotate(4deg) scaleY(1.4)}}
@keyframes era-flow-in{from{transform:translate(4%,0) rotate(3deg) scaleY(.9)}to{transform:translate(-5%,-65px) rotate(-4deg) scaleY(1.35)}}
@keyframes era-fuse{0%{opacity:.13;transform:translateX(-5%) scaleY(.7)}100%{opacity:.4;transform:translateX(6%) scaleY(1.2)}}
.eras>.era:not(:first-child){border-top:0}
.era-blend+.era::before{border-top:0}
@media(max-width:700px){.era-blend{height:140px}.blend-wave{height:150px;filter:blur(20px)}.wave-outgoing{top:-95px}.wave-incoming{bottom:-95px}}
@media(prefers-reduced-motion:reduce){.blend-wave,.blend-fusion{animation:none;will-change:auto}.wave-outgoing{transform:translateY(30px)}.wave-incoming{transform:translateY(-30px)}.blend-fusion{opacity:.25}}
/* Interwoven currents use the existing pigments; motion starts on visibility. */
.era-blend{height:250px}
.wave-ribbons{position:absolute;inset:0;width:100%;height:100%;opacity:.55;filter:blur(.8px);mask-image:linear-gradient(transparent,#000 25%,#000 75%,transparent)}
.ribbon-current{stroke-width:2;transform-origin:center;will-change:transform}
.ribbon-current-a{stroke:var(--pigment-a);animation:ribbon-drift-a 26s ease-in-out infinite alternate}
.ribbon-current-b{stroke:var(--pigment-b);animation:ribbon-drift-b 31s ease-in-out infinite alternate;mix-blend-mode:screen}
.ribbon-current path:nth-child(2){stroke-width:5;opacity:.55}.ribbon-current path:nth-child(3){stroke-width:10;opacity:.25}.ribbon-current path:nth-child(4){stroke-width:18;opacity:.12}
.blend-wave{animation-duration:30s}.blend-fusion{animation-duration:35s}
.era-blend .blend-wave,.era-blend .blend-fusion,.era-blend .ribbon-current{animation-play-state:paused}
.era-blend.is-in-view .blend-wave,.era-blend.is-in-view .blend-fusion,.era-blend.is-in-view .ribbon-current{animation-play-state:running}
@keyframes ribbon-drift-a{from{transform:translate(-35px,-12px) scaleY(.85) rotate(-2deg)}to{transform:translate(45px,18px) scaleY(1.2) rotate(3deg)}}
@keyframes ribbon-drift-b{from{transform:translate(40px,15px) scaleY(1.15) rotate(2deg)}to{transform:translate(-40px,-20px) scaleY(.8) rotate(-3deg)}}
@media(max-width:700px){.era-blend{height:180px}.wave-ribbons{opacity:.65}}
@media(prefers-reduced-motion:reduce){.ribbon-current{animation:none;will-change:auto}}
.era-blend::before,.era-blend::after{content:'';position:absolute;left:0;right:0;height:60px;pointer-events:none;z-index:2}
.era-blend::before{top:0;mask-image:linear-gradient(#000,transparent)}
.era-blend::after{bottom:0;mask-image:linear-gradient(transparent,#000)}
.neon-to-warm::before{background:#0d0916}.neon-to-warm::after,.warm-to-vintage::before{background:linear-gradient(115deg,#261c18,#19120f 55%,#0b0908)}
.warm-to-vintage::after{background:linear-gradient(115deg,#1e1b16,#14120f 55%,#0b0a09)}
/* Thick vertical pigments replace the fine horizontal ribbons. */
.era-blend{height:330px}
.paint-streams{position:absolute;inset:-10% -5%;width:110%;height:120%;filter:blur(13px);mask-image:linear-gradient(transparent,#000 18%,#000 82%,transparent);opacity:.78}
.paint-current{transform-origin:center;animation-play-state:paused!important;will-change:transform}
.paint-current-a{fill:var(--pigment-a);animation:paint-descend 32s ease-in-out infinite alternate}
.paint-current-b{fill:var(--pigment-b);animation:paint-ascend 37s ease-in-out infinite alternate;mix-blend-mode:screen;opacity:.7}
.paint-current-mix{fill:var(--fusion);animation:paint-knead 29s ease-in-out infinite alternate;mix-blend-mode:screen;opacity:.45}
.era-blend.is-in-view .paint-current{animation-play-state:running!important}
.blend-wave{opacity:.25}.blend-fusion{opacity:.2}
@keyframes paint-descend{from{transform:translate(-20px,-45px) skewY(-4deg) scaleX(.96)}to{transform:translate(25px,50px) skewY(5deg) scaleX(1.09)}}
@keyframes paint-ascend{from{transform:translate(22px,50px) skewY(5deg) scaleX(1.06)}to{transform:translate(-28px,-50px) skewY(-5deg) scaleX(.95)}}
@keyframes paint-knead{from{transform:translate(-15px,-35px) scaleX(.85) rotate(-3deg)}to{transform:translate(25px,40px) scaleX(1.2) rotate(4deg)}}
@media(max-width:700px){.era-blend{height:230px}.paint-streams{filter:blur(7px)}}
@media(prefers-reduced-motion:reduce){.paint-current{animation:none!important;will-change:auto}}
/* Actual adjacent backgrounds, with clean wave fronts moving in opposite directions. */
.era-blend{height:300px;background:var(--flow-lower);filter:none;mask-image:none}
.era-blend::before,.era-blend::after{content:none}
.flow-shapes{position:absolute;pointer-events:none}
.flow-upper,.flow-lower{position:absolute;inset:0;filter:none;mask-image:none;transform:none}
.flow-upper{background:var(--flow-upper)}
.flow-lower{background:var(--flow-lower);opacity:.78}
@media(max-width:700px){.era-blend{height:220px}}
/* Detailed sea transitions: shaded water, fine ripples and broken foam crests. */
.era-blend{height:430px;background:var(--flow-lower);isolation:isolate}
.era-blend::before{content:'';display:block;position:absolute;inset:0 0 50%;height:auto;background:var(--flow-upper);mask-image:none;z-index:0}
.era-blend::after{content:'';display:block;position:absolute;inset:35% 0 35%;height:auto;background:linear-gradient(transparent,#16101b,transparent);opacity:.5;mask-image:none;z-index:0}
.ocean-canvas{display:block;position:relative;z-index:1;width:100%;height:100%;pointer-events:none;filter:none}
@media(max-width:700px){.era-blend{height:330px}}
/* Persistent chrome follows the background occupying the largest visible area. */
header{transition:background-color 1.1s ease,border-color 1.1s ease}
body{transition:background-color 1.1s ease}
.era-blend::before,.era-blend::after{display:none}
@media(prefers-reduced-motion:reduce){header,body{transition:none}}
/* Wave tips overlap the quiet backgrounds; article content stays above them. */
.eras{isolation:isolate}
.era{isolation:auto;background:none}
.era.modern{--era-surface:linear-gradient(180deg,var(--music-now-base,#120f15) 0%,#261d28 28%,#1b161e 56%,var(--music-now-base,#120f15) 100%)}
.era.warm{--era-surface:linear-gradient(115deg,#261c18,#19120f 55%,#0b0908)}
.era.vintage{--era-surface:linear-gradient(115deg,#1e1b16,#14120f 55%,#0b0a09)}
.era::before{background:var(--era-surface);z-index:-1}
.era>.era-info,.era>.record-card,.era>.era-aside,.era>.track-list{position:relative;z-index:3}
.era-blend{--wave-spill:100px;isolation:auto;overflow:visible;background:none}
.ocean-canvas{position:absolute;top:calc(-1 * var(--wave-spill));left:0;height:calc(100% + var(--wave-spill) * 2);width:100%;z-index:1}
@media(max-width:700px){.era-blend{--wave-spill:75px}}
/* Fixed bridge background; only transparent water inclusions overlap track areas. */
.era-blend{background-repeat:no-repeat;background-size:100% 100%;background-color:transparent}
.neon-to-warm{background-image:linear-gradient(#120f15,#2c2024 48%,#261c18)}
.era::before{transition:none}
/* Transparent surrealist outline studies; the reading area remains clear. */
.thoughts{position:relative;isolation:isolate;overflow:hidden}
.thoughts>.section-heading,.thoughts>.thought-body{position:relative;z-index:1}
.surreal-field{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none}
.surreal-object{position:absolute;fill:none;stroke:#fff;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;opacity:.13}
.melting-clock{width:115px;top:140px;right:3%;transform:rotate(16deg)}
.long-elephant{width:160px;bottom:-15px;right:4%;opacity:.12}
.drawer-body{width:85px;bottom:10px;left:1%;transform:rotate(-9deg)}
.surreal-key{width:145px;top:10px;left:6%;transform:rotate(-17deg);opacity:.1}
.egg-form{width:70px;top:85px;left:48%;transform:rotate(12deg);opacity:.09}
.fork-form{width:50px;bottom:-65px;left:55%;transform:rotate(32deg);opacity:.1}
@media(max-width:700px){.melting-clock{width:60px;top:115px;right:0;opacity:.10}.long-elephant{width:100px;right:-24px;bottom:-10px;opacity:.09}.drawer-body{width:60px;bottom:25px;left:-15px;opacity:.08}.surreal-key{width:85px;left:-25px;top:5px}.egg-form{width:45px;left:auto;right:4%;top:55px;opacity:.06}.fork-form{width:38px;left:15%;bottom:-45px}}
.egg-form{left:28%;top:18px}
@media(max-width:700px){.egg-form{left:auto;right:5%;top:5px}}

.cosmo-intro {
 position: fixed;
 inset: 0;
 z-index: 9;
 overflow: hidden;
 background: #000;
 pointer-events: none;
}
.cosmo-flight { display: block; width: 100%; height: 100%; }

/* The laptop display hands off to the actual market board. */
.market-runway {
 position: relative;
 --market-sticky-height: min(calc(100svh - var(--market-header, 88px)), calc(50vw + 145px), 700px);
 height: calc(var(--market-sticky-height) + clamp(145px, 35svh, 310px));
 margin-top: clamp(38px, 7svh, 72px);
 background: #050608;
}
.market-sticky {
 position: sticky;
 top: var(--market-header, 88px);
 height: var(--market-sticky-height);
 display: grid;
 place-items: center;
 overflow: clip;
 background: #050608;
}
.market-laptop {
 width: min(83vw, 900px);
 transform: scale(var(--market-zoom, .91));
 will-change: transform;
}
.market-display {
 width: 91%;
 margin: auto;
 padding: 5% 6%;
 border: clamp(5px, 1vw, 12px) solid #131519;
 border-radius: clamp(8px, 2vw, 22px) clamp(8px, 2vw, 22px) 4px 4px;
 aspect-ratio: 16 / 10;
 background: radial-gradient(ellipse at 12% -12%, #31343e 0%, transparent 45%),
  radial-gradient(ellipse at 96% 98%, #171b22, transparent 58%),
  linear-gradient(140deg, #15161a, #08090b 58%, #090b0e);
 box-shadow: 0 0 0 1px #70757e, 0 18px 65px #000b, inset 0 0 0 1px #ffffff14;
}
.market-demo-heading,.market-demo-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.market-demo-heading { margin-bottom: 3%; color: #eef6ff; }
.market-demo-heading strong { font-size: clamp(11px, 2.5vw, 32px); }
.market-demo-heading small { font-size: clamp(6px, .95vw, 11px); letter-spacing: .11em; color: #a3b0c2; }
.market-demo-row {
 display: grid;
 grid-template-columns: 1fr .9fr .7fr;
 padding: 1.55% 3%;
 margin-top: 1%;
 background: linear-gradient(110deg,#ffffff0b,#ffffff03 70%);
 border: 1px solid #ffffff16;
 border-radius: 6px;
 font-size: clamp(8px, 1.65vw, 19px);
 color: #e5ebf6;
}
.market-demo-row svg { width: 100%; height: clamp(17px, 3.25vw, 38px); color: #68eab0; }
.market-demo-row[data-down] svg { color: #ff627b; }
.market-demo-fill { fill: currentColor; opacity: .085; }
.market-reels {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 font: 500 .94em/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
 white-space: nowrap;
}
.market-digit { display: inline-block; height: 1.2em; overflow: hidden; }
.market-digit-strip,.market-digit-strip span { display: block; }
.market-laptop-base {
 height: clamp(6px, 1.35vw, 15px);
 border-radius: 0 0 38% 38% / 0 0 85% 85%;
 background: linear-gradient(#b1b4ba, #71747b 26%, #292d34);
 box-shadow: 0 14px 30px #000c;
 position: relative;
}
.market-laptop-base::after { content: ""; position: absolute; inset: 0 42% 45%; border-radius: 0 0 8px 8px; background: #333840; }
.market-shade { position: absolute; inset: 0; pointer-events: none; background: #050608; opacity: var(--market-shade, 0); }
.market-board {
 margin-inline: auto;
 max-width: 1120px;
 padding: clamp(34px, 6vw, 74px) 0;
}
.market-board-heading p { color: #9baab4; font-size: .78rem; }
.market-board-heading p { letter-spacing: .18em; }
.market-board-heading h3 { font-size: clamp(42px, 8vw, 106px); font-weight: 500; margin: .08em 0; letter-spacing: .015em; }
/* One surface expands from the ticker strip into the chart. */
.market-board { position: relative; isolation: isolate; }
.market-board::before {
 content: "";
 position: absolute;
 inset: 0;
 z-index: -1;
 background: #050608;
 box-shadow: 0 0 0 100vmax #050608;
 clip-path: inset(0 -100vmax);
}
.market-list { max-width: 414px; margin: 34px auto 0; }
.market-card {
 --market-trend: #49cda4;
 --market-emblem: #37383b;
 margin-bottom: 14px;
 overflow: hidden;
 border: 1px solid #ffffff17;
 border-radius: 11px;
 background: linear-gradient(137deg,#242424 0%,#171717 39%,#0d0d0d 76%,#080808 100%);
 box-shadow: inset 0 1px #ffffff0d;
 transition: border-color .5s ease, border-radius .52s cubic-bezier(.22,.82,.25,1);
}
.market-card[data-trend="down"] { --market-trend: #f96e80; }
.market-emblem[data-logo="bitcoin"] { --market-emblem: #df821d; }
.market-emblem[data-logo="ethereum"] { --market-emblem: #5462a3; }
.market-emblem[data-logo="solana"] { --market-emblem: #5d4b8d; }
.market-emblem[data-logo="alphabet"],.market-emblem[data-logo="gram"] { --market-emblem: #151516; }
.market-card[data-open] { border-color: #ffffff21; border-radius: 21px; }
.market-card-button {
 width: 100%;
 min-height: 61px;
 position: relative;
 display: flex;
 align-items: center;
 padding: 10px 18px;
 background: transparent;
 text-align: left;
}
.market-card-button:focus-visible { outline-offset: -4px; border-radius: 11px; }
.market-card-identity { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.market-emblem {
 display: grid;
 place-items: center;
 flex: none;
 width: 34px;
 height: 34px;
 border-radius: 50%;
 color: #fff;
 font-weight: 700;
 background: var(--market-emblem);
 box-shadow: inset 0 1px 1px #ffffff29;
 transition: width .48s cubic-bezier(.22,.82,.25,1),height .48s cubic-bezier(.22,.82,.25,1);
}
.market-card[data-open] .market-emblem { width: 43px; height: 43px; }
.market-card-symbol,.market-card-name,.market-live-price { display: block; }
.market-card-symbol { color: #f1f0f0; font-size: .95rem; font-weight: 640; letter-spacing: -.01em; }
.market-card-name { position: absolute; opacity: 0; color: #a6a5a5; font-size: .77rem; white-space: nowrap; transition: opacity .25s; }
.market-card[data-open] .market-card-name { opacity: 1; }
.market-live-price { margin-top: 2px; color: #d1cfcf; font-size: .74rem; font-variant-numeric: tabular-nums; transition: opacity .23s; }
.market-card[data-open] .market-live-price { opacity: 0; }
.market-mini {
 position: absolute;
 inset: 0 0 0 auto;
 width: 48%;
 height: 100%;
 color: var(--market-trend);
 opacity: .74;
 transition: opacity .25s;
}
.market-mini path { fill: currentColor; opacity: .18; }
.market-mini polyline { stroke-width: 1.05; }
.market-card[data-open] .market-mini { opacity: 0; }
.market-card-arrow {
 position: absolute;
 z-index: 2;
 top: 5px;
 right: 6px;
 display: grid;
 place-items: center;
 width: 26px;
 height: 26px;
 color: #fff;
 font-size: 16px;
 line-height: 1;
 transition: transform .45s;
}
.market-card[data-open] .market-card-arrow { transform: rotate(180deg); }
.market-chart {
 display: grid;
 grid-template-rows: 0fr;
 opacity: 0;
 transform: translateY(-5px);
 transition: grid-template-rows .52s cubic-bezier(.22,.82,.25,1), opacity .34s ease, transform .45s ease;
}
.market-card[data-open] .market-chart { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.market-chart-clip { overflow: hidden; min-height: 0; }
.market-chart-status { padding: 0 18px; color: #a7a7a7; font-size: .75rem; }
.market-chart-heading { display: grid; gap: 3px; padding: 2px 18px 0; font-variant-numeric: tabular-nums; }
.market-detail-chart output { color: #f2f2f2; font-size: clamp(22px, 6vw, 26px); font-weight: 660; letter-spacing: -.035em; }
.market-point-change,.market-point-date { font-size: .87rem; line-height: 1.25; }
.market-point-change { color: #a4a4a4; }
.market-point-change[data-direction="up"] { color: #54d1a8; }
.market-point-change[data-direction="down"] { color: #fa7587; }
.market-point-date { color: #a4a4a4; }
.market-detail-chart svg {
 display: block;
 width: 100%;
 height: clamp(134px, 38vw, 173px);
 color: var(--market-trend);
 touch-action: pan-y;
 cursor: crosshair;
}
.market-detail-chart svg:focus-visible { outline-offset: -4px; }
.market-chart-trail { stroke: #818583; opacity: .65; stroke-width: 1.5; }
.market-cursor { stroke: currentColor; stroke-width: 1; opacity: .38; }
.market-baseline { stroke: #adadad; stroke-width: 1; stroke-dasharray: 5 4; opacity: .23; }
.market-chart-foot {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 8px;
 padding: 8px 18px 14px;
 color: #aaa;
 font-size: .74rem;
 font-variant-numeric: tabular-nums;
}
.market-latest { color: #e9e9e9; font-weight: 600; }
.market-card[data-open] .market-chart-line { stroke-dasharray: 1; animation: market-line-reveal .78s .06s cubic-bezier(.21,.62,.35,1) both; }
.market-card[data-open] .market-chart-fill { animation: market-fill-reveal .68s .1s ease both; }
@keyframes market-line-reveal { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes market-fill-reveal { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 .market-runway { height: auto; }
 .market-sticky { position: relative; top: 0; height: auto; min-height: 48svh; }
 .market-laptop { transform: none; }
 .market-shade { opacity: 0; }
 .market-chart,.market-card,.market-emblem,.market-mini,.market-card-arrow { transition: none; }
 .market-card[data-open] .market-chart-line,.market-card[data-open] .market-chart-fill { animation: none; }
}
.market-display { position: relative; }
.market-display::before {
 content: "";
 position: absolute;
 top: 0;
 left: 44%;
 width: 12%;
 height: clamp(4px, .85vw, 10px);
 border-radius: 0 0 6px 6px;
 background: #131519;
}
.market-board { background: #050608; }

.market-emblem img { width: 55%; height: 55%; object-fit: contain; }
.market-emblem[data-logo="alphabet"] img,.market-emblem[data-logo="gram"] img { width: 79%; height: 79%; }
.market-laptop-name { display: flex; align-items: center; gap: clamp(3px, .8vw, 9px); }
.market-laptop-name img { width: clamp(9px, 1.8vw, 21px); height: clamp(9px, 1.8vw, 21px); object-fit: contain; flex: none; }
.market-emblem[data-logo="alphabet"] img,.market-laptop-name img[src$="alphabet.svg"] { border-radius: 4px; }

.market-emblem[data-logo="bitcoin"],.market-emblem[data-logo="ethereum"],.market-emblem[data-logo="solana"] {
 background: transparent;
 box-shadow: none;
}
.market-emblem[data-logo="bitcoin"] img,.market-emblem[data-logo="ethereum"] img,.market-emblem[data-logo="solana"] img {
 width: 100%;
 height: 100%;
}
.market-laptop-name img[src$="alphabet.svg"] { filter: grayscale(1); }
.market-laptop-name img[src$="spacex.svg"] { width: clamp(13px, 2.8vw, 34px); }

.blockchain-heading {
 flex-direction: column;
 align-items: center;
 gap: 9px;
 text-align: center;
}
.blockchain-heading .blockchain-subtitle {
 margin: 0;
 color: var(--accent);
 font-size: clamp(13px, 2.2vw, 20px);
 letter-spacing: .075em;
 background: linear-gradient(100deg, #67e8f9 30%, #e3fcff 50%, #67e8f9 70%) 0 50% / 230% 100%;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 animation: blockchain-subtitle-shimmer 4s ease-in-out infinite alternate;
}
.blockchain-space { min-height: clamp(155px, 32svh, 330px); }
.market-intro > span { max-width: 92vw; text-align: center; }
@keyframes blockchain-subtitle-shimmer {
 to { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
 .blockchain-heading .blockchain-subtitle { animation: none; }
}

.blockchain-reading {
 display: grid;
 align-content: center;
 gap: clamp(14px, 2vw, 23px);
 max-width: 740px;
 margin-inline: auto;
 padding: clamp(26px, 6vw, 62px) 0;
 color: #d9e2e4;
 font-family: inherit;
 font-size: clamp(16px, 1.65vw, 20px);
 font-weight: 400;
 line-height: 1.55;
 text-align: center;
}
.blockchain-reading p { margin: 0; }

/* Three connected rooms for the gallery collection. */
.gallery-chapters { margin-inline: -5.5556%; }
.gallery-chapter {
 position: relative;
 isolation: isolate;
 --gallery-accent: #c6d9eb;
 --era-surface: linear-gradient(180deg, var(--nature-start, #080a0c) 0%, #11202b 40%, #121d22 78%, #0c0b0a 100%);
 background: var(--era-surface);
 color: var(--gallery-accent);
}
.gallery-chapter::before,.gallery-chapter::after {
 content: "";
 position: absolute;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 mask-image: linear-gradient(transparent, #000 14%, #000 84%, transparent);
}
.gallery-chapter::before { background: var(--gallery-light); }
.gallery-chapter::after {
 background: var(--gallery-grain);
 opacity: var(--gallery-grain-strength, .14);
}
.gallery-dusk {
 --gallery-light:
  radial-gradient(ellipse 75% 13% at 8% 25%, #8ba6bb3b, transparent 93%),
  radial-gradient(ellipse 83% 10% at 83% 52%, #a2bcd838, transparent 90%),
  radial-gradient(ellipse 67% 9% at 7% 72%, #6c8d8730, transparent 92%),
  radial-gradient(ellipse 58% 45% at 0% 54%, #0b1510ba, transparent 90%),
  radial-gradient(ellipse 55% 51% at 100% 57%, #090d15bf, transparent 90%);
 --gallery-grain:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.73' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.32' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gallery-night {
 --era-surface: linear-gradient(180deg, #0c0b0a 0%, #1d1710 34%, #15110f 74%, #120f0e 100%);
 --gallery-accent: #e6c7a0;
 --gallery-light:
  radial-gradient(ellipse 48% 27% at 83% 18%, #a5783a64, transparent 82%),
  radial-gradient(ellipse 40% 27% at 15% 68%, #81562544, transparent 80%),
  conic-gradient(from 149deg at 82% 9%, transparent, #ac803e19 27deg, #ba864321 41deg, transparent 68deg),
  radial-gradient(ellipse 75% 76% at 50% 47%, transparent 37%, #060506a6 100%);
 --gallery-grain: repeating-linear-gradient(118deg, transparent 0 4px, #d3ad6b20 5px, transparent 6px 13px);
 --gallery-grain-strength: .16;
}
.gallery-timeless {
 --era-surface: linear-gradient(180deg, #120f0e 0%, #241a16 38%, #1b1412 74%, var(--gallery-art-end) 100%);
 --gallery-accent: #ead4bf;
 --gallery-light:
  radial-gradient(ellipse 53% 52% at 5% 31%, #a8794c5c, transparent 87%),
  radial-gradient(ellipse 47% 40% at 88% 74%, #6e413942, transparent 88%),
  linear-gradient(113deg, #03030380 4%, transparent 30%, #20131035 47%, #02020382 91%);
 --gallery-grain:
  repeating-linear-gradient(0deg, #d3b09523 0 1px, #08050336 1px 2px, transparent 2px 4px),
  repeating-linear-gradient(90deg, #f2cfa424 0 1px, #09060533 1px 2px, transparent 2px 4px);
 --gallery-grain-strength: .32;
}
.gallery-chapter-inner {
 width: min(88%, 960px);
 margin-inline: auto;
 padding: clamp(56px, 10vw, 130px) 0 clamp(65px, 10vw, 145px);
}
.gallery-chapter-heading { margin-bottom: clamp(27px, 5vw, 62px); }
.gallery-chapter-heading h3 {
 margin: 0;
 font: 400 clamp(36px, 6.5vw, 82px)/1.02 Georgia, serif;
 letter-spacing: -.047em;
}
.gallery-night .gallery-chapter-heading { text-align: right; }
.gallery-timeless .gallery-chapter-heading { text-align: center; }
.gallery-frames {
 display: grid;
 grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
 gap: clamp(14px, 4vw, 55px);
 align-items: center;
}
.gallery-night .gallery-frames { grid-template-columns: minmax(0, .79fr) minmax(0, 1.21fr); }
.gallery-timeless .gallery-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery-frames figure { margin: 0; }
.gallery-frames img {
 display: block;
 width: 100%;
 height: auto;
 opacity: .8;
 box-shadow: 0 17px 42px #0005;
}
.gallery-night .gallery-frames figure:nth-child(4) { width: 76%; justify-self: center; }
.gallery-timeless .gallery-frames figure:nth-child(3) { width: 85%; justify-self: end; }
@media (max-width: 620px) {
 .gallery-chapter-inner { width: 90%; }
 .gallery-night .gallery-frames figure:nth-child(4),.gallery-timeless .gallery-frames figure:nth-child(3) { width: 100%; }
}

.gallery-books-image { clip-path: inset(0 0 0 .7%); }
.gallery-replace-controls {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
 margin-top: 9px;
}
.gallery-replace-status { font-size: 12px; color: #d4d4d8; }
.gallery-books-image[data-replaced] { clip-path: none; }
.photo-item img[data-replaced] { height: auto; aspect-ratio: auto; }

.gallery-passage {
 --passage-header: 88px;
 --passage-progress: 0;
 --passage-blur: 0px;
 --passage-from: #0c0b0a;
 --passage-to: #0c0b0a;
 position: relative;
 height: calc(76.5svh - var(--passage-header) / 2);
 background: linear-gradient(var(--passage-from), var(--passage-to));
}
.gallery-passage-focus { --passage-from: #120f0e; --passage-to: #120f0e; }
.gallery-passage-screen {
 position: sticky;
 top: var(--passage-header);
 height: calc(50svh - var(--passage-header) / 2);
 overflow: clip;
 isolation: isolate;
 background: var(--passage-from);
}
.gallery-passage-screen::before,.gallery-passage-light {
 content: "";
 position: absolute;
 inset: -5%;
}
.gallery-passage-screen::before {
 background: var(--passage-cold);
 opacity: calc(1 - var(--passage-progress));
 transform: translateX(calc(-32% * var(--passage-progress)));
}
.gallery-passage-light {
 background: var(--passage-warm);
 opacity: var(--passage-progress);
 transform: translateX(calc(28% * (1 - var(--passage-progress))));
}
.gallery-passage-slide {
 --passage-cold: radial-gradient(ellipse 84% 21% at 42% 50%, #718e9c, transparent 92%),
  radial-gradient(ellipse at 16% 65%, #213c46, transparent 72%), #0a131a;
 --passage-warm: radial-gradient(ellipse 42% 65% at 68% 45%, #97632e, transparent 85%),
  radial-gradient(ellipse at 87% 40%, #54331c, transparent 75%), #160e09;
}
.gallery-passage-focus {
 --passage-cold: radial-gradient(ellipse 54% 54% at 20% 63%, #76512b, transparent 88%), #1d140d;
 --passage-warm: radial-gradient(ellipse 42% 64% at 78% 34%, #805838, transparent 85%),
  radial-gradient(ellipse 49% 34% at 35% 65%, #4c3425, transparent 82%), #1b1412;
}
.gallery-passage-focus .gallery-passage-light,.gallery-passage-focus .gallery-passage-screen::before {
 filter: blur(var(--passage-blur));
}
.gallery-passage-screen::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(var(--passage-from), transparent 19% 79%, var(--passage-to));
 pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
 .gallery-passage { height: 8svh; }
 .gallery-passage-screen { position: static; height: 100%; }
 .gallery-passage-screen::before,.gallery-passage-light { display: none; }
}

.gallery-touch-photo {
 touch-action: pan-y pinch-zoom;
 -webkit-user-select: none;
 user-select: none;
 -webkit-touch-callout: none;
}
@media (hover: none) {
 .gallery-touch-photo {
  transform: perspective(780px) rotateX(var(--photo-tilt-x, 0deg)) rotateY(var(--photo-tilt-y, 0deg));
 }
 .gallery-touch-photo.is-tilting {
  transform: perspective(780px) rotateX(var(--photo-tilt-x, 0deg)) rotateY(var(--photo-tilt-y, 0deg)) scale(.98);
 }
}

@media (prefers-reduced-motion: no-preference) {
 .gallery-touch-photo {
  cursor: grab;
  transform: perspective(780px) rotateX(var(--photo-tilt-x, 0deg)) rotateY(var(--photo-tilt-y, 0deg));
  transition: transform .48s cubic-bezier(.22,.72,.27,1);
 }
 .gallery-touch-photo.is-tilting {
  cursor: grabbing;
  transform: perspective(780px) rotateX(var(--photo-tilt-x, 0deg)) rotateY(var(--photo-tilt-y, 0deg)) scale(.98);
  transition: transform .13s ease-out;
 }
}

.system-prayer {
 max-width: 650px;
 margin-inline: auto;
 color: #dbd5cb;
 font: 400 clamp(17px, 2.1vw, 24px)/1.65 Georgia, serif;
}
.system-prayer p { margin: 0; }
.system-prayer p + p { margin-top: 1.15em; }

/* SYSTEM: a landscape fades from the edges into the quiet center. */
.system {
 position: relative;
 isolation: isolate;
 background: linear-gradient(180deg, #090a09 0%, #12120f 55%, #070807 100%);
}
.system-landscape {
 position: absolute;
 inset: 0;
 z-index: -1;
 overflow: hidden;
 pointer-events: none;
}
.system-landscape img { position: absolute; display: block; height: auto; }
.system-landscape-cliffs {
 top: 67%;
 left: 12%;
 width: clamp(380px, 55vw, 800px);
 transform: translate(-49%, -50%);
 opacity: .26;
 mask-image: radial-gradient(ellipse 49% 40% at 57% 47%, #000 14%, transparent 100%);
}
.system-landscape-ridge {
 top: 66%;
 left: 77%;
 width: clamp(430px, 64vw, 900px);
 transform: translate(-50%, -54%);
 opacity: .46;
 mask-image: radial-gradient(ellipse 48% 40% at 52% 52%, #000 13%, transparent 100%);
}
.system-landscape::after {
 content: "";
 position: absolute;
 inset: 0;
 background:
  radial-gradient(ellipse 46% 47% at 50% 43%, #090a09e8 18%, #090a0980 63%, transparent 100%),
  linear-gradient(180deg, #090a09 0%, transparent 26% 79%, #070807 100%);
}
.system-prayer { text-shadow: 0 1px 10px #070807; }
@media (max-width: 700px) {
 .system-landscape-cliffs { left: 3%; top: 79%; }
 .system-landscape-ridge { left: 83%; top: 23%; }
 .system-landscape::after {
  background:
   radial-gradient(ellipse 70% 46% at 43% 52%, #090a09eb 14%, #090a0980 67%, transparent 100%),
   linear-gradient(180deg, #090a09 0%, transparent 26% 79%, #070807 100%);
 }
}

/* The cloud and cross recede before the existing Religion title arrives. */
.system-intro { overflow: hidden; isolation: isolate; }
.system-vision {
 position: absolute;
 inset: 0;
 pointer-events: none;
 animation: system-vision-depart 3s ease-in-out both;
}
.system-vision-clouds {
 position: absolute;
 left: 50%;
 top: 43%;
 width: clamp(390px, 64vw, 850px);
 height: auto;
 transform-origin: 51% 36%;
 mask-image: radial-gradient(ellipse 49% 46% at 51% 38%, #000 13%, #000b 52%, transparent 100%);
 animation: system-clouds-reveal 3s cubic-bezier(.2,.6,.25,1) both;
}
.system-vision-rays {
 position: absolute;
 inset: 0;
 transform-origin: 50% 43%;
 background:
  radial-gradient(ellipse 36% 40% at 50% 43%, #ead7af25, transparent),
  conic-gradient(from 0deg at 50% 43%,
   #f3e4c018, transparent 18deg 143deg, #e8d2a01b 174deg, #f1dbb532 181deg,
   transparent 198deg 336deg, #e8d2a01b 351deg, #f3e4c018);
 mask-image: radial-gradient(ellipse 44% 63% at 50% 43%, #000 4%, transparent);
 animation: system-rays-open 3s cubic-bezier(.24,.62,.24,1) both;
}
.system-vision-cross {
 position: absolute;
 left: 50%;
 top: 43%;
 width: clamp(112px, 21vw, 210px);
 height: auto;
 transform: translate(-50%, -49.375%);
 stroke: #f0e6d1;
 stroke-width: 1.35;
 stroke-linecap: round;
 filter: drop-shadow(0 0 6px #efdbb7aa);
}
.system-vision-cross path {
 stroke-dasharray: 1;
 stroke-dashoffset: 1;
}
.system-cross-stem { animation: system-cross-draw 1.05s .35s cubic-bezier(.2,.57,.25,1) both; }
.system-cross-arms { animation: system-cross-draw .8s .8s cubic-bezier(.2,.57,.25,1) both; }

@keyframes system-vision-depart {
 0%, 64% { opacity: 1; }
 100% { opacity: 0; }
}
@keyframes system-clouds-reveal {
 0% { opacity: 0; transform: translate(-51%, -36%) scale(.87); }
 66%, 100% { opacity: .62; transform: translate(-51%, -36%) scale(1.06); }
}
@keyframes system-rays-open {
 0%, 15% { opacity: 0; transform: scaleX(.24); }
 72%, 100% { opacity: 1; transform: scaleX(1); }
}
@keyframes system-cross-draw { to { stroke-dashoffset: 0; } }

.religion-preface {
 margin: 0 auto clamp(26px, 4vw, 42px);
 color: #fff;
 font: 400 clamp(15px, 2vw, 20px)/1.5 "Helvetica Neue", Arial, sans-serif;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
 #system-title {
  background: linear-gradient(105deg, #d7d4cc 34%, #efe6d2 44%, #fffaf0 50%, #efe6d2 56%, #d7d4cc 66%) 0% 50% / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: religion-title-light 10s ease-in-out infinite;
 }
}
@keyframes religion-title-light {
 0%, 12% { background-position: 100% 50%; }
 76%, 100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
 #system-title { animation: none; }
}

/* Anchor the message to the actual profile button, regardless of header layout. */
.profile-arrival {
 position: relative;
 z-index: 1;
 flex: none;
 justify-self: start;
}
.avatar-monologue {
 position: absolute;
 z-index: 1;
 left: calc(100% + 10px);
 top: 50%;
 width: min(322px, calc(90vw - 54px));
 min-height: 54px;
 display: flex;
 align-items: center;
 padding: 9px 13px;
 border: 1px solid #b6d4e52e;
 border-radius: 16px;
 background: linear-gradient(125deg, #18212a, #0b1016 82%);
 box-shadow: 0 12px 36px #0008, inset 0 1px #e2f2ff12;
 color: #eef2f5;
 font: 400 13px/1.35 "Helvetica Neue", Arial, sans-serif;
 pointer-events: none;
 opacity: 0;
 visibility: hidden;
 transform: translateY(-50%);
 transform-origin: left center;
 animation: avatar-monologue 5.1s .2s both;
}
.avatar-monologue::before {
 content: "";
 position: absolute;
 left: -6px;
 top: calc(50% - 5px);
 width: 10px;
 height: 10px;
 border-bottom: 1px solid #b6d4e52e;
 border-left: 1px solid #b6d4e52e;
 background: #172029;
 transform: rotate(45deg);
}
@media (max-width: 700px) {
 .avatar-monologue { min-height: 44px; padding: 6px 9px; }
}
@keyframes avatar-monologue {
 0% { visibility: visible; opacity: 0; transform: translate(-26px, -50%) scale(.18); animation-timing-function: cubic-bezier(.2,.72,.3,1); }
 10%, 88% { visibility: visible; opacity: 1; transform: translateY(-50%) scale(1); }
 100% { visibility: hidden; opacity: 0; transform: translate(-12px, -50%) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
 @keyframes avatar-monologue {
  0%, 88% { visibility: visible; opacity: 1; }
  100% { visibility: hidden; opacity: 0; }
 }
}

/* The same star field stays in view for the whole scroll. */
main > .thoughts {
 padding: 0;
 overflow: clip;
 background: var(--cosmo-night);
}
.cosmo-route {
 --cosmo-header: 88px;
 --cosmo-view-height: calc(100svh - var(--cosmo-header));
 min-height: var(--cosmo-view-height);
 display: grid;
 grid-template-columns: minmax(0, 1fr);
 isolation: isolate;
}
.cosmo-route-view,.cosmo-opening { grid-area: 1 / 1; align-self: start; }
.cosmo-route.is-animated { min-height: calc(var(--cosmo-view-height) * 4.5); }
.cosmo-route-view {
 position: sticky;
 top: var(--cosmo-header);
 height: var(--cosmo-view-height);
 display: grid;
 place-items: center;
 isolation: isolate;
 overflow: hidden;
 background: var(--cosmo-night) var(--cosmo-starfield);
}
.cosmo-route-canvas {
 position: absolute;
 inset: 0;
 display: block;
 width: 100%;
 height: 100%;
 pointer-events: none;
}
.cosmo-opening {
 position: relative;
 z-index: 1;
 padding: calc(65px + clamp(62px, 9svh, 112px)) 5% 0;
 pointer-events: none;
}
.cosmo-opening .section-heading { justify-content: center; text-align: center; }
.cosmo-opening #thoughts-title,.cosmo-title-flight h2 {
 color: rgb(255 255 255 / 34%);
 text-shadow: 0 0 9px #ffffff28;
}
#thoughts-title.is-in-flight { visibility: hidden; }
#thoughts-title.is-landed {
 color: #fff;
 font-weight: 700;
 -webkit-text-stroke: .8px #ffffff88;
 text-shadow: 0 0 12px #ffffff48;
 animation: cosmo-title-light 1s ease-in-out both;
}
#thoughts-title.is-landed::after {
 content: attr(data-landing-text) / "";
 position: absolute;
 inset: 0;
 z-index: 1;
 color: rgb(255 255 255 / 34%);
 font-weight: 500;
 -webkit-text-stroke: 0;
 text-shadow: 0 0 9px #ffffff28;
 filter: none;
 transform: none;
 animation: cosmo-title-afterimage 1s ease-in-out both;
}
@keyframes cosmo-title-light {
 from { color: transparent; -webkit-text-stroke-color: transparent; text-shadow: 0 0 12px transparent; }
 to { color: #fff; -webkit-text-stroke-color: #ffffff88; text-shadow: 0 0 12px #ffffff48; }
}
@keyframes cosmo-title-afterimage {
 from { opacity: 1; }
 to { opacity: 0; }
}
.cosmo-title-flight {
 position: fixed;
 inset: 0;
 z-index: 9;
 justify-content: center;
 align-items: center;
 margin: 0;
 pointer-events: none;
}
.cosmo-finale {
 position: relative;
 padding-inline: 7%;
 text-align: center;
 opacity: var(--cosmo-finale-opacity, 1);
}
.cosmo-finale p {
 margin: 0;
 max-width: 18ch;
 color: #f4f5f8;
 font-size: clamp(32px, 6vw, 80px);
 font-weight: 500;
 line-height: 1.06;
 letter-spacing: -.045em;
 text-wrap: balance;
 text-shadow: 0 0 26px #b5d4ee38;
}
@media (max-width: 700px) {
 .cosmo-route { --cosmo-header: 96px; }
 .cosmo-opening { padding-top: calc(40px + clamp(62px, 9svh, 112px)); }
}
@media (prefers-reduced-motion: reduce) {
 .cosmo-opening { padding-top: clamp(32px, 7svh, 72px); }
 .cosmo-opening #thoughts-title { color: #fff; font-weight: 700; text-shadow: 0 0 12px #ffffff48; }
 #thoughts-title.is-landed,#thoughts-title.is-landed::after { animation: none; }
 #thoughts-title.is-landed::after { content: none; }
}

/* A blue edge light ties the section and the market cards together. */
.blockchain {
 --blockchain-base: #050810;
 background:
  radial-gradient(ellipse 64% 38% at 101% 32%, #132741a6, transparent 82%),
  radial-gradient(ellipse 57% 36% at -5% 69%, #0e1e34b8, transparent 88%),
  var(--blockchain-base);
 --era-surface: linear-gradient(180deg, #050810 0%, #0a1320 46%, #050810 100%);
}
.blockchain .market-runway,.blockchain .market-board,.blockchain .market-board::before {
 background: transparent;
 box-shadow: none;
}
.blockchain .market-sticky {
 background: radial-gradient(ellipse at 50% 56%, #16324b40, transparent 70%);
}
.blockchain .market-laptop { opacity: calc(1 - var(--market-shade, 0)); }
.blockchain .market-shade { background: radial-gradient(ellipse at 50% 50%, var(--blockchain-base), transparent 74%); }
.blockchain .market-card {
 border-color: #7297c12b;
 background:
  radial-gradient(ellipse 96% 115% at 13% 0%, #4b79a02e, transparent 76%),
  linear-gradient(137deg, #151c27, #0c1018 48%, #080b11);
}
.blockchain .market-card[data-open] { border-color: #91b4d845; }

.track-entry { display: flex; align-items: center; gap: 8px; }
.track-entry .track-row { flex: 1; min-width: 0; }
.track-row { grid-template-columns: 22px 40px minmax(0, 1fr) 24px; }
.track-edit {
 flex: none;
 padding: 6px 0;
 background: none;
 color: inherit;
 font-size: 11px;
}
.track-edit:hover,.track-edit:focus-visible { text-decoration: underline; }
.era > .featured-review {
 grid-column: 2;
 position: relative;
 z-index: 3;
 margin: -10px 0 0;
 line-height: 1.65;
 font-size: 14px;
 white-space: pre-wrap;
 overflow-wrap: anywhere;
}
#track-review { width: 100%; resize: vertical; }
@media (max-width: 700px) {
 .track-row { grid-template-columns: 16px 34px minmax(0, 1fr) 22px; }
 .era > .featured-review { grid-column: 1; width: min(100%, 290px); justify-self: center; }
}

.era.modern { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.era.modern > .era-aside { grid-row: 1; }
.modern-podium {
 grid-column: 1 / -1;
 position: relative;
 z-index: 3;
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 182px));
 gap: clamp(16px, 5vw, 80px);
 padding: 10px 0 20px;
 justify-content: center;
 min-width: 0;
}
.podium-slot { min-width: 0; min-height: 242px; text-align: center; }
.podium-slot:first-child { margin-top: 27px; }
.podium-slot:last-child { margin-top: 42px; }
.podium-track {
 display: block;
 width: 100%;
 padding: 0;
 text-align: center;
 background: none;
}
.podium-track > .track-name { display: block; margin-top: 12px; overflow-wrap: anywhere; }
.podium-track .track-name small { font-size: 11px; }
.era.modern .track-name,
.era.modern .track-name small,
.era.modern .podium-review,
.era.modern .podium-slot .track-edit { color: #fff; opacity: 1; }
.podium-track .record-art { width: min(100%, 116px); margin-inline: auto; border-radius: 3px; }
.podium-slot .track-edit { margin-top: 12px; }
.podium-review { margin: 8px 0 0; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 700px) {
 .era.modern { grid-template-columns: minmax(0, 1fr); }
 .modern-podium { grid-template-columns: repeat(3, minmax(0, 122px)); gap: clamp(10px, 4vw, 22px); }
 .podium-track .record-art { width: min(100%, 104px); }
 .podium-slot { min-height: 195px; }
 .podium-slot:first-child { margin-top: 21px; }
 .podium-slot:last-child { margin-top: 33px; }
}

.track-row .track-rank { color: #fff; font-weight: 600; opacity: 1; }

.era .record-card:disabled { cursor: default; transform: none; }

.gallery > .section-heading { justify-content: center; text-align: center; }
#era-now-title { color: #fff; }

.market-scenes {
 width: min(100%, 1080px);
 margin: clamp(80px, 12vw, 160px) auto 0;
 display: grid;
 gap: clamp(72px, 11vw, 135px);
}
.market-scene {
 --scene-accent: #92d4fa;
 display: grid;
 grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
 align-items: center;
 gap: clamp(28px, 5vw, 70px);
 padding-block: 28px;
 border-top: 1px solid #a2ceef38;
}
.market-scene-caption > span,.market-pulse span {
 color: #9eb6cb;
 font-size: .68rem;
 font-weight: 650;
 letter-spacing: .15em;
}
.market-scene-caption h3 { margin: 13px 0; font-size: clamp(32px, 5vw, 68px); line-height: 1; letter-spacing: -.055em; }
.market-scene-caption p { margin: 0; color: #a7b4c0; font-size: .95rem; line-height: 1.5; }
.trade-path,.market-shock { padding: clamp(16px, 3vw, 34px); border: 1px solid #a4d3f32b; border-radius: 18px; background: linear-gradient(135deg,#121e2c,#080d14 75%); }
.trade-path-track { position: relative; height: 2px; margin: 18px 0 22px; background: #a1c7e044; }
.trade-path-track i { position: absolute; inset: -3px auto auto 0; width: 8px; height: 8px; border-radius: 50%; background: #e4f5ff; box-shadow: 0 0 17px 3px #83d6ffa0; }
.trade-path ol { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.trade-path li { display: grid; align-content: start; gap: 9px; }
.trade-path li span { color: var(--scene-accent); font-size: .72rem; }
.trade-path li strong { font-size: clamp(.85rem, 1.65vw, 1.2rem); }
.trade-path li small { color: #adbdcb; line-height: 1.4; }
.market-pulse { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.market-pulse > div { --pulse-color:#91d4ff; min-width: 0; padding: 16px; display: grid; gap: 9px; border: 1px solid #acd2eb28; border-radius: 14px; background: radial-gradient(ellipse at 100% 100%,#1a3c56,#101823 72%); }
.market-pulse > div:nth-child(2) { --pulse-color:#b3a1ff; }
.market-pulse > div:nth-child(3) { --pulse-color:#8ce2bc; }
.market-pulse > div:nth-child(4) { --pulse-color:#efcf87; }
.market-pulse strong { font-size: clamp(1.15rem, 3vw, 1.8rem); }
.market-pulse svg { display: block; width: 100%; height: 30px; color: var(--pulse-color); }
.market-pulse path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.market-shock { --crypto:#a9d5ff; --equity:#88dbb1; --gold:#f4d389; }
.market-shock svg { display: block; width: 100%; overflow: visible; }
.market-shock svg path { fill: none; vector-effect: non-scaling-stroke; }
.shock-grid { stroke: #abc6db25; }
.shock-trigger { stroke: #e6f5ff88; stroke-dasharray: 3 6; }
.shock-line { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shock-crypto { stroke: var(--crypto); }
.shock-equity { stroke: var(--equity); }
.shock-gold { stroke: var(--gold); }
.market-shock ul { display: flex; flex-wrap: wrap; gap: 12px 20px; list-style: none; padding: 0; margin: 14px 0 0; font-size: .8rem; }
.market-shock li:first-child { color: var(--crypto); }
.market-shock li:nth-child(2) { color: var(--equity); }
.market-shock li:last-child { color: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
 .market-scene.can-animate.is-in-view > * { animation: market-scene-arrive 850ms cubic-bezier(.2,.65,.3,1) both; }
 .market-scene.is-in-view .trade-path-track i { animation: trade-travel 2.8s cubic-bezier(.65,0,.35,1) both; }
 .market-scene.is-in-view .trade-path li { animation: market-scene-arrive .65s ease-out both; }
 .market-scene.is-in-view .trade-path li:nth-child(2) { animation-delay: .9s; }
 .market-scene.is-in-view .trade-path li:nth-child(3) { animation-delay: 1.8s; }
 .market-scene.is-in-view .market-pulse > div { animation: market-pulse-wave 1.8s ease-in-out both; }
 .market-scene.is-in-view .market-pulse > div:nth-child(2) { animation-delay: .38s; }
 .market-scene.is-in-view .market-pulse > div:nth-child(3) { animation-delay: .76s; }
 .market-scene.is-in-view .market-pulse > div:nth-child(4) { animation-delay: 1.14s; }
 .market-scene.is-in-view .shock-trigger { animation: shock-flash 1.5s ease-out both; }
 .market-scene.is-in-view .shock-line { stroke-dasharray: 1; animation: shock-draw 2s cubic-bezier(.4,0,.35,1) both; }
 .market-scene.is-in-view .shock-gold { animation-delay: .2s; }
 .market-scene.is-in-view .shock-equity { animation-delay: .42s; }
}
@keyframes market-scene-arrive { from { opacity: .12; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes trade-travel { from { left: 0; } to { left: calc(100% - 8px); } }
@keyframes market-pulse-wave {
 0%, 100% { box-shadow: none; transform: translateY(0); }
 40%, 58% {
  transform: translateY(-5px);
  border-color: var(--pulse-color);
  box-shadow: inset 0 0 32px color-mix(in srgb, var(--pulse-color) 30%, transparent),
   0 0 26px color-mix(in srgb, var(--pulse-color) 35%, transparent);
 }
}
@keyframes shock-flash { 0%,100% { opacity: .55; } 30% { opacity: 1; } }
@keyframes shock-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (max-width: 700px) { .market-scene { grid-template-columns: minmax(0,1fr); } }

body[data-scene="galery"] .gallery { background: linear-gradient(var(--nature-start) 0% 85%, var(--gallery-art-end) 98%); }
body[data-scene="galery"] footer { background: var(--gallery-art-end); }

.ocean-canvas {
 -webkit-mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
 mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent);
}

@media (max-width:700px) and (prefers-reduced-motion:no-preference) {
 .market-runway {
  --market-sticky-height:calc(100svh - var(--market-header,96px));
  height:calc(var(--market-sticky-height) + 100svh);
 }
}

body[data-scene="system"] footer { background:#070807; }
@media (max-width:700px) and (prefers-reduced-motion:no-preference) {
 .market-runway { width:100vw; left:50%; transform:translateX(-50%); }
}

.audio-dock { padding-top:24px; padding-right:calc(5% + 44px); }
#close-audio {
 position:absolute;
 top:4px;
 right:8px;
 display:grid;
 place-items:center;
 width:44px;
 height:44px;
 padding:0;
 background:transparent;
 color:#fff;
 font-size:18px;
}
#close-audio:hover { color:#67e8f9; }