/* CHRONOS · VAULT's start page (web/chronos.js). VAULT's own sans, no italics; white points, red only when serious; one card per
   point. The room between the header, the rail and Kostas's field is CHRONOS's; nothing on it can be selected by a drag (a selected
   glow layer is tinted, and the tint was added onto the light). */
.chr{position:fixed;top:86px;left:calc(var(--side) + var(--railw) + 18px);right:0;bottom:98px;z-index:5;overflow:hidden;color:#F5F5F7;
 --t:#F5F5F7;--m:rgba(245,245,247,.64);--f:rgba(245,245,247,.36);--bad:#ff453a;--lab:500 10.5px/1.25 var(--sans);
 -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.chr *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.chr.pt{overflow-x:hidden;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
body.chr-on main .tmk{display:none}
body.chr-on main{min-height:0}
@media (max-width:860px){.chr{left:0;top:66px;bottom:94px}}

.chr-st{position:absolute;left:0;transform-origin:0 0}
.chr-cv{position:absolute;left:0;top:0;pointer-events:none}
.chr-lans{position:absolute;left:0;top:0}
.chr-k{text-transform:uppercase;letter-spacing:.14em;font:var(--lab);font-size:11px;color:var(--f)}

.chr-head{position:absolute;left:28px;top:8px;width:760px}
.chr-head h1{font-weight:300;font-size:58px;line-height:1.04;letter-spacing:-.03em;margin:14px 0 16px;color:var(--t)}
.chr-head p{font-size:16px;line-height:1.6;color:var(--m);margin:0;max-width:600px}.chr-head p b{color:var(--t);font-weight:500}
.chr-back{display:none;margin-top:18px;padding:0 0 2px;border:0;border-bottom:1px solid rgba(245,245,247,.35);background:none;color:var(--t);font:14px var(--sans);cursor:pointer}
.chr-back.on{display:inline-flex}

.chr-tick{position:absolute;right:40px;top:16px;width:330px;text-align:right}
.chr-tl{font-size:17px;font-weight:300;line-height:1.35;margin-top:10px;color:var(--t);transition:opacity .42s,transform .42s}
.chr-ok{font-size:12px;color:rgba(48,209,88,.85);margin-top:5px}.chr-ok.bad{color:var(--bad)}

/* the points */
.chr-lan{position:absolute;width:0;height:0;cursor:pointer;transition:opacity .6s}
.chr-lan b{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%}
.chr-lan i{position:absolute;left:-2.5px;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--t);box-shadow:0 0 0 2px rgba(11,12,14,.85);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.chr-lan.quiet i{opacity:.72}
.chr-lan.svr i{left:-3px;top:-3px;width:6px;height:6px;background:var(--bad);box-shadow:0 0 0 2.5px rgba(11,12,14,.9),0 0 0 3.5px rgba(255,69,58,.5)}
.chr-lan:hover i,.chr-lan.sel i{transform:scale(1.6)}
.chr-lan .tether{position:absolute;left:0;bottom:12px;width:1px;background:linear-gradient(transparent,rgba(245,245,247,.28))}
.chr-lan.dn .tether{background:linear-gradient(rgba(245,245,247,.28),transparent)}
.chr-lan .cap{position:absolute;bottom:0;left:10px;width:max-content;max-width:290px;text-shadow:0 0 10px #0b0c0e,0 0 22px #0b0c0e,0 0 2px #0b0c0e}
.chr-lan .cap .cd{white-space:nowrap;text-transform:uppercase;letter-spacing:.14em;font:var(--lab);color:var(--m)}.chr-lan.svr .cap .cd{color:var(--bad)}
.chr-lan .cap .ct{font-size:14px;line-height:1.42;color:var(--t);margin-top:5px}
.chr-lan.r .cap{left:auto;right:10px;text-align:right}
.chr-lan.innote .cap,.chr-lan.hide .cap,.chr-lan.hide .tether,.chr-lan.after .cap,.chr-lan.after .tether{display:none}
.chr-lan.innote .tether{background:linear-gradient(rgba(245,245,247,.04),rgba(245,245,247,.26))}
.chr-st.reading .chr-lan .cap,.chr-st.reading .chr-lan .tether{opacity:.12;transition:opacity .3s}

/* the card a point opens */
.chr-card{position:absolute;z-index:6;left:0;top:0;width:max-content;max-width:300px;padding:12px 15px 13px;border-radius:12px;background:rgba(20,20,24,.92);border:1px solid rgba(255,255,255,.1);
 backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(6px);
 transition:opacity .22s,transform .4s cubic-bezier(.16,1,.3,1);pointer-events:none}
.chr-card.on{opacity:1;transform:none}
.chr-card .cd{text-transform:uppercase;letter-spacing:.14em;font:var(--lab);color:var(--m)}.chr-card .cd.svr{color:var(--bad)}
.chr-card .ct{font-size:14.5px;line-height:1.45;color:var(--t);margin-top:7px}
.chr-card .cs{font-size:12px;color:var(--f);margin-top:8px}
.chr-cln{position:absolute;z-index:6;width:1px;background:rgba(245,245,247,.35);opacity:0;transition:opacity .22s;pointer-events:none}.chr-cln.on{opacity:1}

/* now: what is held, what is open */
.chr-note{position:absolute;width:410px;text-align:right;text-shadow:0 0 12px #0b0c0e;opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1);pointer-events:none}.chr-note.on{opacity:1;pointer-events:auto}
.chr-note .nh{text-transform:uppercase;letter-spacing:.14em;font:var(--lab);color:var(--bad)}.chr-note .nh.o{color:var(--f)}
.chr-note .nt{font-size:26px;font-weight:300;line-height:1.15;letter-spacing:-.02em;margin-top:8px;color:var(--t)}
.chr-note .ns{font-size:14px;color:var(--m);margin-top:5px;line-height:1.4}
.chr-note hr{border:0;height:1px;margin:18px 0 14px auto;width:180px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18))}
.chr-note ol{list-style:none;margin:8px 0 0;padding:0}.chr-note li{font-size:14px;line-height:1.75;color:rgba(245,245,247,.86);cursor:pointer}.chr-note li:hover{color:#fff}
.chr-note li span{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-size:12px;color:var(--f);margin-left:12px}

/* ahead */
.chr-ahead{position:absolute;text-transform:uppercase;letter-spacing:.14em;font:var(--lab);font-size:11px;color:var(--f)}
.chr-ev{position:absolute;transform:translate(-50%,0);text-align:center;width:180px}
.chr-ev .cd{text-transform:uppercase;letter-spacing:.14em;font:var(--lab);color:var(--m)}.chr-ev .ct{font-size:14px;color:var(--t);margin-top:5px}

/* the legend, the hint, the slider */
.chr-leg{position:absolute;left:28px;top:600px;display:flex;gap:22px;text-transform:uppercase;letter-spacing:.14em;font:var(--lab);color:var(--m)}
.chr-leg span{display:flex;align-items:center;gap:8px}.chr-leg i{width:20px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--b));box-shadow:0 0 6px var(--b)}
.chr-hint{position:absolute;left:28px;top:626px;font-size:13px;color:var(--f)}
.chr-sl{position:absolute;left:28px;top:654px;height:46px;cursor:pointer;touch-action:none;outline:none}
.chr-sl .str{position:absolute;left:0;right:0;top:18px;height:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.chr-sl .sfill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,rgba(245,245,247,.06),rgba(245,245,247,.55))}
.chr-sl .smarks i{position:absolute;top:-4px;width:1px;height:10px;background:rgba(245,245,247,.3)}.chr-sl .smarks i.svr{width:2px;background:var(--bad)}
.chr-sl .sth{position:absolute;top:19px;width:0;height:0}
.chr-sl .sth::before{content:'';position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--t);box-shadow:0 0 0 4px rgba(245,245,247,.1),0 0 18px rgba(255,255,255,.45);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.chr-sl:hover .th::before,.chr-sl.drag .th::before,.chr-sl:focus-visible .th::before{transform:scale(1.25)}
.chr-sl .sth span{position:absolute;bottom:13px;left:0;transform:translateX(-50%);white-space:nowrap;text-transform:uppercase;letter-spacing:.14em;font:var(--lab);color:var(--t);opacity:0;transition:opacity .25s}
.chr-sl.away .th span,.chr-sl.drag .th span{opacity:1}
.chr-sl .slb span{position:absolute;top:30px;transform:translateX(-50%);font:400 12.5px/1 var(--sans);color:var(--m)}
.chr-sl .slb span.now{text-transform:uppercase;letter-spacing:.14em;font:var(--lab);color:var(--t)}

/* portrait (a phone, an iPad upright): it reads down — the date, the river, the slider under it, the legend, the note */
.chr-st.pt{position:relative;padding:4px 0 36px}
.pt .chr-head{position:static;width:auto;padding:0 24px}.pt .chr-head h1{font-size:36px;margin:10px 0 12px}
.pt .chr-tick{position:static;width:auto;text-align:left;margin:16px 24px 0}.pt .chr-tl{font-size:16px;margin-top:6px}
.pt .chr-zone{margin-top:4px}
.pt .chr-sl{position:relative;left:auto;top:auto;margin:0 24px}
.pt .chr-leg{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin:34px 24px 0}
.pt .chr-hint{display:none}
.pt .chr-note{position:static;width:auto;text-align:left;margin:30px 24px 0}
.pt .chr-note hr{margin:18px 0 14px}.pt .chr-note .nt{font-size:23px}
.pt .chr-note li{display:flex;justify-content:space-between;gap:14px;line-height:1.5;padding:5px 0}

/* Kostas's words beside his face, on CHRONOS */
.asay{position:fixed;right:34px;bottom:140px;z-index:46;width:max-content;max-width:min(420px,calc(100vw - 68px));padding:14px 18px 15px;border-radius:16px;background:rgba(20,20,24,.92);
 border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 14px 40px rgba(0,0,0,.5);font-size:15px;line-height:1.5;color:rgba(245,245,247,.9);
 opacity:0;transform:translateY(8px);transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
.asay.on{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.asay .who{text-transform:uppercase;letter-spacing:.14em;font:500 10.5px/1.2 var(--sans);color:rgba(245,245,247,.36);margin-bottom:7px}
@media (max-width:860px){.asay{right:16px;bottom:120px}}
@media (prefers-reduced-motion:reduce){.chr-card,.chr-note,.asay,.chr-tl{transition:none}}

/* ---- the intro (8 Nov 2026, DevTeam6: "the animation we made for CHRONOS on the starting page, the logo and the claim fade in, then an
   Enter the VAULT button that leads to the app"): the beams across the whole screen; VAULT, then "Trust you can show.", then the way in */
.intro{position:fixed;inset:0;z-index:80;background:radial-gradient(1200px 640px at 50% 18%,#0c0f16 0%,#000 66%);overflow:hidden;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.intro.out{opacity:0;pointer-events:none}
.chr.hero{position:absolute;inset:0;top:0;left:0;right:0;bottom:0;z-index:0;touch-action:auto}
.chr.hero .chr-head,.chr.hero .chr-tick,.chr.hero .chr-sl,.chr.hero .chr-leg,.chr.hero .chr-hint,.chr.hero .chr-note,.chr.hero .chr-ahead,.chr.hero .chr-evs,
.chr.hero .chr-lans,.chr.hero .chr-card,.chr.hero .chr-cln{display:none!important}
.intro-c{position:absolute;left:0;right:0;top:15vh;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:2;padding:0 24px}
.intro-c img{height:44px;opacity:0;transform:translateY(10px);filter:drop-shadow(0 0 24px rgba(255,255,255,.15))}
.intro-c .claim{margin:26px 0 0;font-size:clamp(26px,3.4vw,44px);font-weight:300;letter-spacing:-.025em;color:#F5F5F7;opacity:0;transform:translateY(10px)}
.intro-c .by{margin-top:12px;text-transform:uppercase;letter-spacing:.18em;font:500 11px/1.2 var(--sans);color:rgba(245,245,247,.38);opacity:0}
.intro-c .enter{margin-top:46px;height:52px;padding:0 30px;border-radius:26px;background:#F5F5F7;color:#000;font:500 16px var(--sans);letter-spacing:-.005em;cursor:pointer;
 display:inline-flex;align-items:center;gap:12px;opacity:0;transform:translateY(10px);box-shadow:0 0 0 1px rgba(255,255,255,.2),0 12px 40px rgba(255,255,255,.12);
 transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.intro-c .enter:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 0 0 1px rgba(255,255,255,.3),0 14px 50px rgba(255,255,255,.2)}
.intro-c .enter i{font-style:normal;transition:transform .3s}.intro-c .enter:hover i{transform:translateX(3px)}
.intro.go .intro-c img{animation:inUp 1.4s cubic-bezier(.16,1,.3,1) 1.1s forwards}
.intro.go .intro-c .claim{animation:inUp 1.4s cubic-bezier(.16,1,.3,1) 2.1s forwards}
.intro.go .intro-c .by{animation:inUp 1.2s cubic-bezier(.16,1,.3,1) 2.7s forwards}
.intro.go .intro-c .enter{animation:inUp 1.2s cubic-bezier(.16,1,.3,1) 3.3s forwards}
@keyframes inUp{to{opacity:1;transform:none}}
.intro .tm{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:11px;color:rgba(245,245,247,.28);opacity:0;animation:inUp 1.2s ease 3.6s forwards}
body.intro-on .hdr,body.intro-on .rail,body.intro-on .dock,body.intro-on .face,body.intro-on main{visibility:hidden}
@media (prefers-reduced-motion:reduce){.intro.go .intro-c *,.intro .tm{animation:none!important;opacity:1!important;transform:none!important}}