/* VAULT · the marketing page · the frame (9 Nov 2026, from board 10). Dark, like VAULT. One sans (the system's, Inter elsewhere),
   mono only for small labels and codes. Each part's own pictures and motion live in m-<part>.css. */
@font-face{font-family:"Inter VAULT";src:url(assets/fonts/Inter-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Inter VAULT";src:url(assets/fonts/Inter-SemiBold.ttf) format("truetype");font-weight:500 700;font-display:swap}
:root{
 --bg:#000;--t:#F5F5F7;--m:rgba(245,245,247,.66);--f:rgba(245,245,247,.42);--ff:rgba(245,245,247,.22);
 --ln:rgba(255,255,255,.08);--ln2:rgba(255,255,255,.14);
 --o:#ff9f0a;--y:#ffd60a;--b:#4da3ff;--g:#30d158;--bad:#ff453a;--cos:#d6c4ff;--acc:#4da3ff;
 --ease:cubic-bezier(.16,1,.3,1);
 --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter VAULT","Helvetica Neue",Helvetica,Arial,sans-serif;
 --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
 --gut:clamp(16px,5vw,72px);--maxw:1296px;
 --side:0px;--railw:0px;                                  /* chronos.css reads these */
 color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--t);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}
::selection{background:rgba(77,163,255,.35)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.k{font:500 11.5px/1.2 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--f)}
.h2{font-size:clamp(38px,5.2vw,68px);font-weight:600;letter-spacing:-.045em;line-height:1.04;margin:14px 0 0;max-width:15em}
.h2 em,.h2c em{font-style:normal;color:var(--b)}
.h2c{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.03em;text-align:center;margin:0}.h2c em{color:var(--m)}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--m);margin:20px 0 0;letter-spacing:-.01em;max-width:34em}
.demo{font:500 10px/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ff)}
.card{position:relative;border-radius:24px;background:linear-gradient(180deg,rgba(30,31,36,.9),rgba(14,15,18,.95));
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 40px 110px rgba(0,0,0,.6),0 0 120px rgba(77,163,255,.05);padding:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border-radius:999px;font:500 16px var(--sans);letter-spacing:-.005em;white-space:nowrap;border:0;cursor:pointer;
 transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.btn.w{background:var(--t);color:#000}.btn.g{background:rgba(255,255,255,.06);color:var(--t);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn.w:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 14px 50px rgba(255,255,255,.2)}
.btn.g:hover{background:rgba(255,255,255,.1)}
.btn i{font-style:normal;transition:transform .35s var(--ease)}.btn:hover i{transform:translateX(3px)}
.btn.sm{height:34px;padding:0 16px;font-size:13px}
:focus-visible{outline:2px solid var(--b);outline-offset:3px;border-radius:8px}

/* the bar on top: clear over the opening, glass once the page moves */
.top{position:fixed;top:0;left:0;right:0;z-index:60;height:64px;display:flex;align-items:center;gap:28px;padding:0 var(--gut);border-bottom:1px solid transparent;
 transition:background .5s,border-color .5s,backdrop-filter .5s}
.top.solid{background:rgba(0,0,0,.78);backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);border-bottom-color:rgba(255,255,255,.08)}
.top .br{display:flex;align-items:center;gap:12px}.top .br img{height:19px}
.top .br em{font:500 9.5px/1 var(--mono);letter-spacing:.2em;color:var(--f);font-style:normal;text-transform:uppercase}
.top nav{margin-left:auto;display:flex;gap:28px;font-size:13.5px;color:var(--m)}.top nav a:hover,.top .si:hover{color:var(--t)}
.top-r{display:flex;align-items:center;gap:18px}.top .si{font-size:13.5px;color:var(--m)}

/* headings arrive from behind a line, word by word (site.js wraps the words) */
.reveal .rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.reveal .rw>span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i) * 55ms)}
.reveal.in .rw>span{transform:none}

/* 1 · the opening */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:radial-gradient(1200px 640px at 50% 18%,#0c0f16 0%,#000 66%)}
.hero .chr{position:absolute;inset:0;z-index:0;will-change:opacity}
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(min(820px,90vw) 380px at 50% 34%,rgba(0,0,0,.62),rgba(0,0,0,0) 72%)}
.hero-c{position:absolute;left:0;right:0;top:clamp(110px,15vh,150px);z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--gut);will-change:transform,opacity}
.hero .logo{position:relative;display:block;padding:4px 10px}
.hero .logo .gl{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero .logo img{height:clamp(34px,4vw,50px);filter:drop-shadow(0 0 24px rgba(255,255,255,.18))}
.hero .glint{position:absolute;top:-30%;bottom:-30%;left:-30%;width:18%;transform:skewX(-18deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),rgba(255,255,255,0));filter:blur(3px);opacity:0}
.claim{margin:clamp(20px,3.4vh,32px) 0 0;font-size:clamp(46px,8.4vw,112px);font-weight:600;letter-spacing:-.052em;line-height:1.02;
 background:linear-gradient(90deg,#F5F5F7 0%,#F5F5F7 30%,#ff9f0a 38%,#ffd60a 44%,#4da3ff 50%,#30d158 56%,rgba(245,245,247,.16) 66%,rgba(245,245,247,.16) 100%);
 background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.claim span{display:inline-block}
.hero .lede{margin:26px 0 0;font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--m);letter-spacing:-.01em}
.hero .cta{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero .line-now{position:absolute;left:0;right:0;top:73%;height:2px;margin-top:-1px;z-index:1;opacity:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(255,255,255,0),#fff 18%,#fff 82%,rgba(255,255,255,0));box-shadow:0 0 18px rgba(255,255,255,.9),0 0 60px rgba(160,200,255,.6)}
.cue{position:absolute;left:50%;bottom:26px;width:1px;height:48px;z-index:3;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.4))}
.cue i{position:absolute;left:-2.5px;top:0;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff;animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(44px);opacity:0}}
.hero .pre{opacity:0}

/* 2 · what VAULT is */
.what{padding:clamp(110px,16vh,190px) 0 clamp(60px,9vh,110px)}
.statement{margin:18px 0 clamp(90px,14vh,160px);font-size:clamp(28px,4vw,54px);font-weight:600;letter-spacing:-.04em;line-height:1.14;max-width:23em}
.statement .sw{color:rgba(245,245,247,.14);transition:color .45s var(--ease)}
.statement .sw.on{color:var(--t)}
.statement .sw.on.c-b{color:var(--b)}.statement .sw.on.c-g{color:var(--g)}.statement .sw.on.c-o{color:var(--o)}.statement .sw.on.c-w{color:var(--t)}
.statement b{font-weight:inherit}

/* 3 · how it works (the module builds the pictures; the frame sets the steps) */
.how{padding:clamp(80px,12vh,140px) 0 40px}
.how-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);margin-top:clamp(30px,6vh,70px)}
.steps{position:relative}
.step{min-height:82vh;display:flex;flex-direction:column;justify-content:center;transition:opacity .7s var(--ease)}
.how-g.live .step{opacity:.26}.how-g.live .step.on{opacity:1}          /* dimmed only while the part's own motion runs */
.step .n{font:500 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--f)}
.step h3{margin:12px 0 0;font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.04em;line-height:1.08}
.step p{margin:16px 0 0;font-size:17.5px;line-height:1.55;color:var(--m);max-width:30em}
.steps .rail{position:absolute;left:-28px;top:9vh;bottom:9vh;width:1px;background:rgba(255,255,255,.1)}
.steps .rail i{position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff,0 0 30px rgba(77,163,255,.8);transition:top .9s var(--ease)}
.how-r{position:relative}
.stage{position:sticky;top:calc(50vh - 330px);height:660px}
.vig-m{display:none}

/* 4 · day one */
.dayone{padding:clamp(90px,14vh,160px) 0}
.d1{margin-top:clamp(30px,5vh,56px)}
.dayone .demo{margin-top:22px}

/* 5 · CHRONOS live */
.chron{padding:clamp(80px,12vh,140px) 0 clamp(60px,8vh,100px)}
.chron-h{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}.chron-h .lead{max-width:30em;margin:0}
.chr-frame{position:relative;max-width:1340px;margin:clamp(30px,5vh,56px) auto 0;height:clamp(540px,74vh,780px);border-radius:28px;overflow:hidden;
 background:radial-gradient(1200px 600px at 50% -10%,#0c0f16 0%,#000 64%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 40px 120px rgba(0,0,0,.6)}
@media (min-width:1420px){.chr-frame{width:calc(100% - 2 * var(--gut))}}
.chr.inpage{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;z-index:1;touch-action:pan-y}
.chr.inpage .chr-hint{display:none!important}
.chr.inpage.pt{position:relative;height:auto;overflow:visible}
.chr-frame .turn{position:absolute;right:28px;bottom:26px;z-index:4;display:flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:var(--t);color:#000;font-size:14px;font-weight:600;
 box-shadow:0 0 0 6px rgba(245,245,247,.08),0 10px 40px rgba(255,255,255,.18);opacity:0;transform:translateY(8px) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none}
.chr-frame.yours .turn{opacity:1;transform:none}
.chr-cap{display:flex;justify-content:space-between;gap:20px;margin-top:16px;font-size:13.5px;color:var(--f)}

/* 6 · Kostas */
.ask{padding:clamp(90px,14vh,160px) 0}
.ask-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.kface{position:relative;width:min(380px,70vw);aspect-ratio:1;margin:0 auto}
.kface .ring{position:absolute;left:-40%;top:-40%;width:180%;height:180%;pointer-events:none}
.kface .im{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.15),0 30px 90px rgba(0,0,0,.7)}
.kface .im img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.kface .nm{position:absolute;left:0;right:0;top:calc(100% + 44px);text-align:center}
.kface .nm b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em}.kface .nm small{font-size:14px;color:var(--f)}
.convo{margin-top:30px;min-height:260px}

/* 7 · donors */
.donors{padding:clamp(90px,14vh,160px) 0}
.don-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:center}
.ticks{list-style:none;padding:0;margin:28px 0 0}.ticks li{position:relative;padding:0 0 14px 28px;font-size:16px;line-height:1.5;color:var(--m)}
.ticks li:before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--g);box-shadow:0 0 10px rgba(48,209,88,.7)}.ticks b{color:var(--t);font-weight:600}

/* 8 · trust */
.trust{padding:clamp(90px,14vh,160px) 0}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(36px,6vh,64px)}
.tc{position:relative;border-radius:22px;padding:22px 24px 26px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.tc .il{height:100px;margin:-2px 0 16px;position:relative}
.tc b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em}.tc p{margin:8px 0 0;font-size:14.5px;line-height:1.5;color:var(--m)}

/* 9 · by invitation */
.invite{padding:clamp(90px,14vh,160px) 0 clamp(100px,14vh,160px)}
.inv-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:start}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.tw{border-radius:20px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tw .ill{height:70px;margin-bottom:14px}
.tw b{display:block;font-size:17px;font-weight:600}.tw span{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--m)}
.form{padding:28px}
.form label{display:block;margin-top:16px;font-size:13px;color:var(--f)}
.form input{display:block;width:100%;margin-top:7px;height:50px;border-radius:14px;border:0;outline:0;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
 padding:0 16px;font:400 16px var(--sans);color:var(--t);transition:box-shadow .3s var(--ease),background .3s}
.form input:focus{box-shadow:inset 0 0 0 1.5px var(--b),0 0 0 4px rgba(77,163,255,.15);background:rgba(255,255,255,.07)}
.form input.bad{box-shadow:inset 0 0 0 1.5px var(--bad),0 0 0 4px rgba(255,69,58,.12)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .send{position:relative;width:100%;margin-top:22px;height:54px}
.form .small{margin:14px 0 0;font-size:12.5px;color:var(--f);text-align:center}.form .small a{color:var(--m);text-decoration:underline;text-underline-offset:3px}

/* the foot */
.foot{border-top:1px solid rgba(255,255,255,.08);padding:28px 0 34px}
.f-a{display:flex;align-items:center;gap:22px;flex-wrap:wrap}.f-a img{height:16px}.f-a>span{font-size:13px;color:var(--f)}
.f-a nav{margin-left:auto;display:flex;gap:24px;font-size:13px;color:var(--m)}.f-a nav a:hover{color:var(--t)}
.foot .legal{margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-wrap:wrap;gap:6px 22px}
.foot .legal p{margin:0;font-size:11.5px;line-height:1.6;color:var(--ff)}
.foot .legal .pw{display:flex;align-items:center;gap:8px;color:var(--f)}.foot .legal .pw img{height:12px;opacity:.7}

/* tablet and phone */
@media (max-width:1000px){
 .top nav{display:none}
 .how-g{grid-template-columns:1fr}.how-r{display:none}.steps .rail{display:none}
 .step,.how-g.live .step{min-height:0;opacity:1;padding:34px 0}.vig-m{display:block;margin-top:26px}
 .ask-g,.don-g,.inv-g{grid-template-columns:1fr}
 .kface .nm{position:static;margin-top:28px}
 .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .chron-h{display:block}.chron-h .lead{margin-top:16px}
}
@media (max-width:640px){
 .top{gap:12px}.top .br em,.top .si{display:none}
 .tgrid,.two{grid-template-columns:1fr}
 .chr-frame{height:auto;min-height:640px;border-radius:22px;margin-left:var(--gut);margin-right:var(--gut)}
 .chr-cap{flex-direction:column;gap:6px}
 .f-a nav{margin-left:0;flex-wrap:wrap;gap:14px 20px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---- the light behind the whole page, and each part's arrival (9 Nov: "they look isolated, the background is black") ----
   One canvas, fixed, a fraction of the screen's size and drawn soft: four slow lights in the beams' colours, tinted for the part
   in view. Each part's top edge is crossed by a hairline of light when it arrives (the line of now passing on), with a glow
   under it; its texts come into focus after the heading. */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;overflow:hidden;transition:opacity 1.2s var(--ease)}
/* 9 Nov ("the background looks pixelated"): no canvas any more — three soft lights drawn by the browser itself at full sharpness,
   drifting on the GPU; their colours (registered, so they glide) set for the part in view by site.js. */
@property --c1{syntax:'<color>';inherits:true;initial-value:#4da3ff}
@property --c2{syntax:'<color>';inherits:true;initial-value:#ff9f0a}
@property --c3{syntax:'<color>';inherits:true;initial-value:#30d158}
.ambient{--c1:#4da3ff;--c2:#ff9f0a;--c3:#30d158;transition:opacity 1.2s var(--ease),--c1 2.4s ease,--c2 2.4s ease,--c3 2.4s ease}
.ambient i{position:absolute;width:96vmax;height:96vmax;border-radius:50%;will-change:transform;transform:translateZ(0)}
.ambient .l1{left:-38vmax;top:-48vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--c1) 17%,transparent),color-mix(in srgb,var(--c1) 7%,transparent) 45%,transparent);animation:amb1 46s ease-in-out infinite alternate}
.ambient .l2{right:-44vmax;top:-12vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--c2) 15%,transparent),color-mix(in srgb,var(--c2) 6%,transparent) 45%,transparent);animation:amb2 58s ease-in-out infinite alternate}
.ambient .l3{left:-6vmax;bottom:-62vmax;background:radial-gradient(closest-side,color-mix(in srgb,var(--c3) 14%,transparent),color-mix(in srgb,var(--c3) 5%,transparent) 45%,transparent);animation:amb3 52s ease-in-out infinite alternate}
@keyframes amb1{to{transform:translate(14vmax,9vmax) scale(1.08)}}
@keyframes amb2{to{transform:translate(-12vmax,10vmax) scale(.94)}}
@keyframes amb3{to{transform:translate(10vmax,-8vmax) scale(1.06)}}
main,.foot{position:relative;z-index:1}
.hero{z-index:1}
.what,.how,.dayone,.chron,.ask,.donors,.trust,.invite{position:relative}
.what:before,.how:before,.dayone:before,.chron:before,.ask:before,.donors:before,.trust:before,.invite:before{
 content:"";position:absolute;left:8%;right:8%;top:0;height:1px;transform:scaleX(0);opacity:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.55) 50%,rgba(255,255,255,0));box-shadow:0 0 14px rgba(255,255,255,.35);
 transition:transform 1.8s var(--ease),opacity 2.6s var(--ease)}
.what:after,.how:after,.dayone:after,.chron:after,.ask:after,.donors:after,.trust:after,.invite:after{
 content:"";position:absolute;left:50%;top:0;width:min(1100px,90vw);height:320px;margin-left:min(-550px,-45vw);pointer-events:none;opacity:0;
 background:radial-gradient(50% 60% at 50% 0%,var(--tint,rgba(77,163,255,.16)),rgba(0,0,0,0) 70%);transition:opacity 2.4s var(--ease)}
.arrived:before{transform:scaleX(1);opacity:.55}.arrived:after{opacity:1}
.what{--tint:rgba(77,163,255,.13)}.how{--tint:rgba(77,163,255,.15)}.dayone{--tint:rgba(255,159,10,.13)}.chron{--tint:rgba(255,214,10,.10)}
.ask{--tint:rgba(48,209,88,.10)}.donors{--tint:rgba(48,209,88,.12)}.trust{--tint:rgba(214,196,255,.12)}.invite{--tint:rgba(245,245,247,.10)}
.focus{opacity:0;transform:translateY(10px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease);transition-delay:var(--fd,0ms)}
.arrived .focus,.focus.in{opacity:1;transform:none}

/* ---- the page appears only when it is ready (9 Nov: "The loading should be ready when the site appears") ----
   Black until the fonts, the logos and the beams' first frames are in; a faint VAULT breathes only if that takes a moment;
   then the whole page fades in and the opening begins. If the script never runs, the page shows itself after 5 s anyway. */
html.loading body{opacity:0;animation:vs-show .6s ease 5s forwards}
body{transition:opacity .35s ease}
/* the beams' entrance (9 Nov: "smoother — a quick fade in, left to right" · "over the beam animation, NOT over the entire site"):
   a soft-edged shadow draws back from the beams, left to right, the way they flow (the past on the left, now on the right);
   the rest of the page simply appears; then the mask is dropped. */
html.revealing #hero-chr{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,0) 56%,rgba(0,0,0,0) 100%);
 mask-image:linear-gradient(90deg,#000 0%,#000 40%,rgba(0,0,0,0) 56%,rgba(0,0,0,0) 100%);-webkit-mask-size:300% 100%;mask-size:300% 100%;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;animation:vs-wipe 1.6s cubic-bezier(.4,.05,.2,1) both}
@keyframes vs-wipe{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0% 0;mask-position:0% 0}}
html.loading::after{content:"";position:fixed;left:50%;top:50%;width:96px;height:22px;margin:-11px 0 0 -48px;pointer-events:none;
 background:url(assets/VAULT_logo_white.svg) center/contain no-repeat;opacity:0;animation:vs-breathe 1.8s ease-in-out .7s infinite}
@keyframes vs-show{to{opacity:1}}
@keyframes vs-breathe{0%,100%{opacity:0;filter:blur(2px)}50%{opacity:.32;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){html.loading::after{display:none}}

/* 9 Nov ("the back in time has issues on mobile"): on a phone CHRONOS reads down. Its room is kept (nothing below moves when the
   visitor slides through time and its texts grow or shrink), the empty "Checked today" is not shown, and "Your turn" is the caption's
   own words lighting up instead of a pill over the open cases. */
.chr-cap span:last-child{transition:color .6s var(--ease),text-shadow .6s var(--ease)}
.chr-cap.yours span:last-child{color:var(--t);text-shadow:0 0 18px rgba(255,255,255,.35)}
@media (max-width:759px){
 .chr-frame{height:auto;min-height:1110px}
 .chr-frame .turn{display:none}
 .chr.inpage.pt .chr-tick{display:none}
 .chr-cap.yours span:last-child:before{content:"↑ Your turn: ";font-weight:600}
}

}

/* 9 Nov (DevTeam6: "it looked better before — the description needs a fixed height" · "don't change the desktop version"): PHONES ONLY
   (the page that reads down, under 760 px): the date and its description keep a fixed room — the tallest they become on any day,
   measured at each width — so the river and the timeline below never move as one slides. The desktop is untouched. */
@media (max-width:759px){ .chr.inpage .chr-st.pt .chr-head{min-height:225px} }
@media (max-width:640px){ .chr.inpage .chr-st.pt .chr-head{min-height:240px} }
@media (max-width:560px){ .chr.inpage .chr-st.pt .chr-head{min-height:290px} }
@media (max-width:390px){ .chr.inpage .chr-st.pt .chr-head{min-height:314px} }
@media (max-width:375px){ .chr.inpage .chr-st.pt .chr-head{min-height:340px} }