:root { color-scheme: dark; background: #080607; font-family: Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #080607; }
button, a { -webkit-tap-highlight-color: transparent; }
.lab-start { min-height: 100%; display: grid; place-content: center; gap: 1.2rem; padding: 2rem; text-align: center; background: radial-gradient(circle at 50% 30%, #291a16, #080607 65%); }
.lab-start[hidden], .viewer[hidden] { display: none; }
.lab-start img { width: min(34vw, 10rem); aspect-ratio: 1; object-fit: cover; margin: auto; border-radius: 22%; box-shadow: 0 1.5rem 4rem #0009; }
.lab-start p { margin: .2rem 0 0; font-size: .72rem; font-weight: 800; letter-spacing: .28em; color: #e5ded2; }
.lab-start nav { display: grid; gap: .7rem; min-width: min(78vw, 24rem); }
.lab-start a { padding: 1rem 1.2rem; color: #fff; text-decoration: none; border: 1px solid #ffffff35; border-radius: .8rem; background: #090808d9; font-size: .86rem; font-weight: 800; letter-spacing: .12em; text-align: left; }
.lab-start small { display: block; margin-top: .35rem; color: #bdb4aa; font-size: .68rem; font-weight: 400; letter-spacing: .05em; }
.viewer { position: fixed; inset: 0; background: #000; }
.rail { width: 100%; height: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; background: #000; }
.slide img { width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.slide.landscape img { object-fit: contain; }
.pick { position: absolute; z-index: 4; top: max(.8rem, env(safe-area-inset-top)); right: max(.8rem, env(safe-area-inset-right)); width: 3rem; height: 3rem; border: 1px solid #ffffff66; border-radius: 50%; background: #060606b8; color: white; font-size: 1.35rem; font-weight: 800; backdrop-filter: blur(12px); }
.pick.is-picked { background: #176b42e8; border-color: #79dfa9; }
.meta { position: absolute; z-index: 3; left: max(.9rem, env(safe-area-inset-left)); bottom: max(.75rem, env(safe-area-inset-bottom)); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-shadow: 0 1px 5px #000; }
.count { position: absolute; z-index: 3; right: max(.9rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); color: #fff; font-size: .68rem; font-weight: 800; text-shadow: 0 1px 5px #000; }
.back { position: fixed; z-index: 9; top: max(.8rem, env(safe-area-inset-top)); left: max(.8rem, env(safe-area-inset-left)); display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid #ffffff55; border-radius: 50%; color: white; text-decoration: none; background: #060606a8; font-size: 2rem; line-height: 1; backdrop-filter: blur(12px); }
.toast { position: fixed; z-index: 10; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translate(-50%, 1rem); padding: .65rem 1rem; border-radius: 999px; background: #176b42ee; color: white; font-size: .7rem; font-weight: 800; letter-spacing: .1em; opacity: 0; transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: #7b2727ee; }
@media (orientation: landscape) { .slide.landscape img { object-fit: cover; } }
@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } .toast { transition: none; } }