:root{
  --bg:#06070a; --bg2:#0b0d12;
  --chrome:#8b919c; --chrome-dim:#565b66; --chrome-hi:#e6e8ec;
  --line:rgba(255,255,255,.09); --panel:rgba(16,18,24,.78);
  --item:#F2D9A8; --concept:#5FD3C4; --author:#A78BFA; --period:#7FA7FF;
  --material:#E88AA6; --technique:#9FD470; --classification:#F0A868;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--chrome);-webkit-font-smoothing:antialiased}
canvas{display:block}
#stage{position:fixed;inset:0}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse 120% 85% at 50% 45%,transparent 40%,rgba(0,0,0,.55) 100%)}
.brand{position:fixed;top:26px;left:34px;z-index:20;pointer-events:none}
.brand b{display:block;font-size:13px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chrome-hi);opacity:.92}
.brand span{display:block;margin-top:5px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-dim)}
.dock{position:fixed;z-index:20;display:flex;gap:9px;align-items:center}
.dock.bottom{left:50%;transform:translateX(-50%);bottom:30px}
.dock.topright{right:34px;top:26px}
.chip{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:999px;
  border:1px solid var(--line);background:rgba(18,20,26,.72);backdrop-filter:blur(14px);
  color:var(--chrome-dim);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;cursor:pointer;user-select:none;
  transition:color .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease),opacity .5s var(--ease)}
.chip .dot{width:9px;height:9px;border-radius:50%;background:currentColor;
  opacity:.28;transition:opacity .5s var(--ease),box-shadow .5s var(--ease)}
.chip.on{color:var(--chrome-hi);border-color:rgba(255,255,255,.22);background:rgba(30,33,42,.85)}
.chip.on .dot{opacity:1}
.chip[data-t="depicts"]{--c:var(--concept)} .chip[data-t="created_by"]{--c:var(--author)}
.chip[data-t="from_period"]{--c:var(--period)} .chip[data-t="made_of"]{--c:var(--material)}
.chip[data-t="uses_technique"]{--c:var(--technique)} .chip[data-t="classified_as"]{--c:var(--classification)}
.chip .dot{background:var(--c,var(--chrome))}
.chip.hero{padding:12px 22px}
.chip.hero.on{box-shadow:0 0 0 1px rgba(95,211,196,.35),0 0 34px rgba(95,211,196,.14)}
.btn{padding:11px 20px;border-radius:999px;border:1px solid var(--line);
  background:rgba(18,20,26,.72);backdrop-filter:blur(14px);color:var(--chrome);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;cursor:pointer;
  font-family:inherit;transition:all .45s var(--ease)}
.btn:hover{color:var(--chrome-hi);border-color:rgba(255,255,255,.24)}
.btn.active{color:#06070a;background:var(--chrome-hi);border-color:var(--chrome-hi)}
.card{position:fixed;z-index:30;width:330px;background:var(--panel);backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.card.show{opacity:1;transform:none;pointer-events:auto}
.card .img{position:relative;width:100%;aspect-ratio:1;background:#0b0d12}
.card .img img{width:100%;height:100%;object-fit:cover;display:block}
.card .img svg{position:absolute;inset:0;width:100%;height:100%}
.card .meta{padding:16px 18px 18px}
.card .ttl{color:var(--chrome-hi);font-size:15px;font-weight:600;line-height:1.35;letter-spacing:.01em}
.card .sub{margin-top:7px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-dim)}
.card .tags{margin-top:13px;display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:11px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--chrome)}
.card .ev{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.6;color:var(--chrome);min-height:2.6em}
.card .ev i{color:var(--concept);font-style:normal}
.film{position:fixed;left:0;right:0;bottom:92px;height:118px;z-index:22;display:flex;gap:12px;
  align-items:flex-end;justify-content:center;padding:0 40px 4px;
  opacity:0;transform:translateY(30px);transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;background:linear-gradient(to top,rgba(6,7,10,.86) 10%,transparent)}
.film.show{opacity:1;transform:none}
.film .fr{width:86px;height:86px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  opacity:0;transform:scale(.86);transition:all .6s var(--ease);flex:0 0 auto}
.film .fr.in{opacity:1;transform:none}
.film .fr img{width:100%;height:100%;object-fit:cover}
.film .lk{width:26px;height:1px;background:var(--line);margin-bottom:42px;flex:0 0 auto;
  opacity:0;transition:opacity .6s var(--ease)}
.film .lk.in{opacity:1}
.search{position:relative}
.search input{width:290px;padding:12px 20px;border-radius:999px;border:1px solid var(--line);
  background:rgba(18,20,26,.72);backdrop-filter:blur(14px);color:var(--chrome-hi);
  font-size:13px;letter-spacing:.06em;font-family:inherit;outline:none;
  transition:border-color .45s var(--ease),width .45s var(--ease)}
.search input:focus{border-color:rgba(255,255,255,.28);width:330px}
.search input::placeholder{color:var(--chrome-dim);letter-spacing:.12em;text-transform:uppercase;font-size:11.5px}
.legend{position:fixed;left:34px;bottom:30px;z-index:20;display:flex;flex-direction:column;gap:8px}
.legend div{display:flex;align-items:center;gap:9px;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome-dim);transition:color .5s var(--ease),opacity .5s var(--ease)}
.legend i{width:8px;height:8px;border-radius:50%;display:block}
.legend div.off{opacity:.22}
.pick{position:fixed;left:50%;transform:translateX(-50%);top:26px;z-index:25;display:flex;gap:14px;
  align-items:center;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.pick.show{opacity:1}
.pick .slot{width:64px;height:64px;border-radius:12px;border:1px dashed rgba(255,255,255,.18);
  overflow:hidden;background:rgba(18,20,26,.6)}
.pick .slot img{width:100%;height:100%;object-fit:cover}
.pick .slot.full{border-style:solid;border-color:rgba(255,255,255,.3)}
.pick .arrow{color:var(--chrome-dim);font-size:16px;letter-spacing:.2em}

/* ============ Poisci povezavo — proof overlay ============ */
.proof{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:rgba(6,7,10,.965);opacity:0;pointer-events:none;
  transition:opacity .9s var(--ease)}
.proof.show{opacity:1;pointer-events:auto}
.pr-inner{width:min(1060px,84vw);position:relative}
.pr-count{position:absolute;top:-34px;right:0;font-size:11px;letter-spacing:.24em;
  color:var(--chrome-dim);font-variant-numeric:tabular-nums}
.pr-grid{display:grid;grid-template-columns:1fr 150px 1fr;
  column-gap:26px;row-gap:0;align-items:center}
.pr-gap{grid-column:2}
.pr-side{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:22px;
  opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.pr-side.in{opacity:1;transform:none}
.pr-side.pr-a{align-items:flex-end} .pr-side.pr-b{align-items:flex-start}
.pr-th{width:188px;height:188px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:#0b0d12;
  box-shadow:0 26px 60px rgba(0,0,0,.55)}
.pr-th img{width:100%;height:100%;object-fit:cover;display:block}
.pr-ttl{max-width:300px;color:var(--chrome-hi);font-size:16px;font-weight:600;line-height:1.35}
.pr-side.pr-a .pr-ttl{text-align:right} .pr-side.pr-b .pr-ttl{text-align:left}
.pr-k,.pr-v{padding:9px 0;opacity:0;transform:translateY(8px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  border-top:1px solid rgba(255,255,255,.055)}
.pr-k.in,.pr-v.in{opacity:1;transform:none}
.pr-k{text-align:center;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--chrome-dim)}
.pr-v{font-size:14.5px;line-height:1.45;color:var(--chrome-hi);font-weight:500}
.pr-va{text-align:right} .pr-vb{text-align:left}
.pr-v em{color:#3d424c;font-style:normal}
.pr-zero{margin-top:30px;text-align:center;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--chrome-dim);font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity 1.1s var(--ease)}
.pr-zero.in{opacity:1}
.pr-rail{margin-top:38px;display:flex;align-items:flex-start;justify-content:center;gap:14px;
  flex-wrap:nowrap}
.pr-node{display:flex;flex-direction:column;align-items:center;gap:9px;width:124px;
  opacity:0;transform:translateY(12px) scale(.94);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.pr-node.in{opacity:1;transform:none}
.pr-nth{width:66px;height:66px;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.18);background:#0b0d12}
.pr-nth img{width:100%;height:100%;object-fit:cover;display:block}
.pr-node.first .pr-nth,.pr-node.last .pr-nth{border-color:rgba(242,217,168,.8);
  box-shadow:0 0 0 3px rgba(242,217,168,.12)}
.pr-ndot{width:13px;height:13px;border-radius:50%;background:var(--concept);margin:26px 0 27px;
  box-shadow:0 0 0 5px rgba(95,211,196,.14),0 0 26px rgba(95,211,196,.45)}
.pr-nlb{font-size:11.5px;line-height:1.35;text-align:center;color:var(--chrome);
  letter-spacing:.02em;max-width:124px;overflow-wrap:anywhere}
.pr-node.cn .pr-nlb{color:var(--concept);letter-spacing:.06em}
.pr-node.it .pr-nlb{color:var(--item)}
.pr-arrow{margin-top:32px;color:#3d424c;font-size:15px;opacity:0;
  transition:opacity .7s var(--ease)}
.pr-arrow.in{opacity:1}

/* ============ /record — the bottom inline panel ============ */
body.rec{overflow:hidden}
.switch{position:fixed;left:50%;transform:translateX(-50%);top:24px;z-index:22;
  display:flex;gap:10px;align-items:center}
.switch .sw{width:52px;height:52px;border-radius:9px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.10);background:#0b0d12;opacity:.42;
  transition:opacity .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.switch .sw img{width:100%;height:100%;object-fit:cover;display:block}
.switch .sw:hover{opacity:.8}
.switch .sw.on{opacity:1;border-color:rgba(242,217,168,.85);transform:translateY(-3px);
  box-shadow:0 0 0 3px rgba(242,217,168,.12)}

.panel{position:fixed;left:0;right:0;bottom:0;height:436px;z-index:20;
  background:linear-gradient(to bottom,rgba(13,15,20,.97),rgba(9,10,14,.99));
  border-top:1px solid rgba(255,255,255,.12);display:flex;align-items:stretch;
  box-shadow:0 -30px 70px rgba(0,0,0,.6)}
.zone{padding:22px 24px 24px;display:flex;flex-direction:column;min-width:0;
  border-right:1px solid rgba(255,255,255,.06)}
.zone:last-child{border-right:none}
.zone h3{margin:0 0 15px;font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chrome-dim)}
.z-id{width:290px;flex:0 0 auto}
.z-bridge{flex:1 1 auto}
.z-machine{width:352px;flex:0 0 auto}
.z-side{width:274px;flex:0 0 auto;gap:0;padding:0}

/* identity */
.id-row{display:flex;gap:16px}
.id-th{width:112px;height:112px;flex:0 0 auto;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:#0b0d12}
.id-th img{width:100%;height:100%;object-fit:cover;display:block}
.id-ttl{color:var(--chrome-hi);font-size:14.5px;font-weight:600;line-height:1.32;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.id-inv{margin-top:6px;font-size:10.5px;letter-spacing:.16em;color:var(--chrome-dim);
  font-variant-numeric:tabular-nums}
.id-facets{margin-top:18px;display:grid;grid-template-columns:62px 1fr;column-gap:12px;row-gap:7px;
  align-content:start}
.id-facets dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#4a4f59;
  padding-top:2px}
.id-facets dd{margin:0;font-size:12.5px;color:var(--chrome-hi);line-height:1.4}
.id-facets dd em{color:#3d424c;font-style:normal}
.id-facets dd .q{color:#4a4f59;font-size:10px;letter-spacing:.12em;text-transform:uppercase}

/* 1 - povezani, kar katalog ne vidi */
.strip{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;flex:1 1 auto;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.strip::-webkit-scrollbar{height:5px}
.strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.bcard{width:124px;flex:0 0 auto;opacity:0;transform:translateY(14px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.bcard.in{opacity:1;transform:none}
.bcard .bt{width:124px;height:124px;border-radius:10px;overflow:hidden;background:#0b0d12;
  border:1px solid rgba(255,255,255,.12);transition:border-color .5s var(--ease)}
.bcard:hover .bt{border-color:rgba(95,211,196,.55)}
.bcard .bt img{width:100%;height:100%;object-fit:cover;display:block}
.bcard .bl{margin-top:9px;font-size:11.5px;line-height:1.32;color:var(--chrome-hi);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bcard .ba{margin-top:4px;font-size:10.5px;color:#565b66;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cchip{margin-top:9px;display:inline-block;font-size:11px;padding:3px 10px;border-radius:999px;
  color:var(--concept);border:1px solid rgba(95,211,196,.36);background:rgba(95,211,196,.07)}

/* 2 - kaj vidi stroj */
.mach{position:relative;width:100%;flex:1 1 auto;border-radius:11px;overflow:hidden;
  background:#0b0d12;border:1px solid rgba(255,255,255,.12);min-height:0}
.mach img{width:100%;height:100%;object-fit:cover;display:block;opacity:.62}
.mach svg{position:absolute;inset:0;width:100%;height:100%}
.mach .nl{font-size:5.6px;fill:#dff5f1;letter-spacing:.02em}
.mach .pl{font-size:4.6px;fill:#5FD3C4;letter-spacing:.08em}
.ev{margin-top:13px;flex:0 0 auto}
.ev .evk{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#4a4f59}
.ev .evt{margin-top:6px;font-size:12px;line-height:1.5;color:var(--chrome);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.5em}

/* 6 - redkost */
.z-side .sub{padding:22px 24px 18px;border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;min-height:0;flex:0 0 214px}
.z-side .sub:last-child{border-bottom:none;flex:1 1 auto}
.z-side .sub h3{margin:0 0 13px;font-size:10px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--chrome-dim)}
.rare{display:flex;flex-direction:column;gap:9px;overflow-y:auto;scrollbar-width:none;flex:1 1 auto;min-height:0}
.rare::-webkit-scrollbar{display:none}
.rbadge{border:1px solid rgba(242,217,168,.30);background:rgba(242,217,168,.06);
  border-radius:9px;padding:8px 11px;font-size:11.5px;line-height:1.42;color:var(--chrome);
  opacity:0;transform:translateX(-8px);transition:all .7s var(--ease)}
.rbadge.in{opacity:1;transform:none}
.rbadge b{color:var(--item);font-weight:600}
.rnone{font-size:11.5px;color:#3d424c}

/* 5 - kje na zemljevidu */
.mini{position:relative;flex:1 1 auto;min-height:0;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);background:#080a0e}
.mini canvas{position:absolute;inset:0;width:100%;height:100%}
.mini .ml{position:absolute;left:10px;bottom:9px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chrome-hi);text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* the host record view the panel opens under */
.stage{position:fixed;left:0;right:0;top:96px;bottom:436px;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  pointer-events:none}
.stage .sh{height:min(46vh,330px);aspect-ratio:auto;border-radius:14px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);background:#0b0d12;
  box-shadow:0 30px 80px rgba(0,0,0,.6);opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stage .sh.in{opacity:1;transform:none}
.stage .sh img{height:100%;width:auto;display:block}
.stage .st{text-align:center;opacity:0;transition:opacity .9s var(--ease)}
.stage .st.in{opacity:1}
.stage .st b{display:block;color:var(--chrome-hi);font-size:19px;font-weight:600;letter-spacing:.01em}
.stage .st span{display:block;margin-top:7px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chrome-dim)}