/* Fermata: market infrastructure. Amber only ever means held. Teal means trading. Red is only the limit. */
:root{
  --bg:#0a0d12;--bg2:#0f141b;--panel:#121820;--panel2:#18202a;--well:#070a0e;--line:rgba(160,180,204,.13);--line2:rgba(160,180,204,.24);
  --ink:#e6ebf1;--t2:#9aa8b8;--t3:#66748a;--steel:#aebccc;--held:#e8a33d;--trade:#55b8a6;--limit:#d84a3e;
  --ui:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;--mono:'Azeret Mono',ui-monospace,monospace;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2l6 18 2.8-7.2L19 10z' fill='%23e6ebf1' stroke='%230a0d12' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto;
  --aim:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg stroke='%230a0d12' stroke-width='3.4'%3E%3Cpath d='M14 2v8M14 18v8M2 14h8M18 14h8'/%3E%3C/g%3E%3Cg stroke='%23e6ebf1' stroke-width='1.5'%3E%3Cpath d='M14 2v8M14 18v8M2 14h8M18 14h8'/%3E%3C/g%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%23e6ebf1'/%3E%3C/svg%3E") 14 14,pointer;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
html.gated,html.gated body{overflow:hidden}
body{background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--ui);-webkit-font-smoothing:antialiased;cursor:var(--arrow)}

/* the shutter between pages */
html::after{content:'';position:fixed;inset:0;z-index:40;pointer-events:none;background:linear-gradient(#1b232d,#0f141b);box-shadow:0 0 0 1px #000,0 -1px 0 rgba(200,215,235,.2);transform:translate3d(0,102%,0);will-change:transform}
html.closing::after{transition:transform .42s cubic-bezier(.72,0,.2,1);transform:none}
html.veiled::after{animation:open .62s cubic-bezier(.72,0,.2,1) .04s both}
@keyframes open{from{transform:none}to{transform:translate3d(0,-102%,0)}}
/* parts arrive and settle */
@keyframes settle{from{opacity:0;transform:translate3d(0,14px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes slide-r{from{opacity:0;transform:translate3d(26px,0,0)}to{opacity:1;transform:none}}
@keyframes slide-l{from{opacity:0;transform:translate3d(-26px,0,0)}to{opacity:1;transform:none}}
.in{animation:settle .7s cubic-bezier(.16,.84,.3,1) backwards;animation-delay:calc(var(--i,0)*45ms + var(--d,.12s))}
html.gated .in,html.gated .in-r,html.gated .in-l{animation-play-state:paused}
.in-r{animation:slide-r .8s cubic-bezier(.16,.84,.3,1) .16s backwards}
.in-l{animation:slide-l .8s cubic-bezier(.16,.84,.3,1) .1s backwards}
/* a soft specular that follows the pointer across a panel */
.lit{position:relative;isolation:isolate}
.lit::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0),rgba(190,210,235,.1),transparent 70%);transition:opacity .35s ease}
.lit:hover::after{opacity:1}
#ring{position:fixed;left:-15px;top:-15px;z-index:60;width:30px;height:30px;border-radius:50%;border:1px solid rgba(214,226,240,.42);pointer-events:none;will-change:transform}
a,button,label{cursor:var(--aim)}
button[disabled]{cursor:var(--arrow)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
:focus-visible{outline:1.5px solid var(--steel);outline-offset:2px}
.mark{display:block;fill:currentColor}
.mono{font-family:var(--mono)}

/* the header: one machined rail */
.bar{position:relative;z-index:20;flex:none;display:flex;align-items:center;gap:28px;height:56px;padding:0 20px;background:linear-gradient(#171e27,#10151c);border-bottom:1px solid #000;box-shadow:inset 0 1px 0 rgba(200,215,235,.08),0 10px 24px -14px #000;color:var(--ink)}
.brand{display:flex;align-items:center;gap:8px;font:600 18px/1 var(--ui);letter-spacing:-.01em}
.brand .mark{width:28px;height:28px}
.bar nav{display:flex;align-self:stretch;gap:2px}
.bar nav a{position:relative;display:flex;align-items:center;padding:0 14px;font:500 14px/1 var(--ui);color:var(--t2)}
.bar nav a{transition:color .25s ease}
.bar nav a::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--steel);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,.84,.3,1)}
.bar nav a:hover{color:var(--ink)}
.bar nav a:hover::after{transform:scaleX(.45)}
.bar nav a.on{color:var(--ink)}
.bar nav a.on::after{transform:none}
.spec{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:3px;overflow:hidden}
.spec span{display:flex;align-items:baseline;gap:7px;padding:5px 10px;background:#0c1117;font:500 12px/1.2 var(--mono);color:var(--ink)}
.spec i{font-style:normal;color:var(--t3);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.bar .right{display:flex;align-items:center;gap:14px;margin-left:auto;font:500 12px/1 var(--mono);color:var(--t2)}
.bar time{font-variant-numeric:tabular-nums}
.demo{font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#0a0d12;background:var(--steel);padding:6px 8px;border-radius:2px}
.pre{font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t2);padding:5px 8px;border:1px solid var(--line2);border-radius:2px}

/* the enter screen */
#gate{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:6px;background:#000;transition:opacity .85s ease}
#gate.out{opacity:0;pointer-events:none}
#gate svg{width:210px;height:210px;overflow:visible}
#gate .arc{fill:none;stroke:#eef1f5;stroke-width:13;stroke-linecap:round;stroke-dasharray:480;stroke-dashoffset:480;animation:draw 1.9s .3s cubic-bezier(.6,0,.2,1) forwards}
#gate .dot{fill:#eef1f5;opacity:0;transform-origin:200px 262px;transform:scale(.4);animation:dot .8s 1.9s cubic-bezier(.2,.8,.2,1) forwards}
#enter{margin-top:26px;height:42px;padding:0 30px;font:500 15px/1 var(--mono);letter-spacing:.3em;text-indent:.3em;text-transform:lowercase;color:#eef1f5;border:1px solid rgba(238,241,245,.3);border-radius:2px;opacity:0;animation:fade .7s 2.5s forwards;transition:background .3s ease,color .3s ease}
#enter:hover{background:#eef1f5;color:#000}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes dot{to{opacity:1;transform:none}}@keyframes fade{to{opacity:1}}

@media (max-width:1180px){.spec{display:none}}
@media (max-width:760px){
  .bar{height:auto;flex-wrap:wrap;gap:6px 12px;padding:9px 14px 0}
  .bar nav{order:3;width:100%;height:40px;justify-content:space-between}
  .bar nav a{padding:0 4px}.bar nav a.on::after{left:4px;right:4px}
  .bar time{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}#ring{display:none}}
@media (pointer:coarse){#ring{display:none}}