.resource-viewer{position:relative;border-radius:1.75rem;background:#120320;padding:clamp(.75rem,2vw,1.5rem);box-shadow:0 0 0 1px #ffffff0f inset,0 50px 120px -40px #5b0e9ea6,0 30px 60px -30px #00000080;color:#fff;max-width:max(40rem,calc((100vh - 15rem) * var(--ratio, 1.7778) + 3rem));margin-inline:auto}.resource-viewer.is-fullscreen{max-width:none;border-radius:0;display:flex;flex-direction:column;justify-content:center;height:100vh;padding:2rem clamp(1rem,4vw,4rem)}.resource-viewer.is-fullscreen .resource-stage-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.resource-viewer.is-fullscreen .resource-stage{max-height:100%;height:auto;width:min(100%,calc((100vh - 13rem) * var(--ratio, 1.7778)))}.resource-stage{position:relative;width:100%;overflow:hidden;border-radius:1rem;background:#1f0235;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:grab}.resource-stage:active{cursor:grabbing}.resource-slide{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;opacity:0;transform:translate(calc(var(--shift, 0) * 1%)) scale(.985);transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .52s cubic-bezier(.22,1,.36,1);pointer-events:none}.resource-slide[data-state=past]{--shift: -3}.resource-slide[data-state=future]{--shift: 3}.resource-slide[data-state=active]{--shift: 0;opacity:1;transform:none}.resource-slide:first-child{position:relative}.resource-endcard{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;background:radial-gradient(120% 90% at 50% 110%,rgba(107,31,179,.85),transparent 60%),linear-gradient(160deg,#1f0235,#320456);opacity:0;transform:scale(1.02);pointer-events:none;transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .52s cubic-bezier(.22,1,.36,1)}.resource-endcard[data-visible=true]{opacity:1;transform:none;pointer-events:auto}.resource-nav{position:absolute;top:50%;z-index:3;display:none;width:3rem;height:3rem;margin-top:-1.5rem;align-items:center;justify-content:center;border-radius:9999px;background:#1203208c;color:#fff;border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);opacity:0;transition:opacity .2s ease,background-color .2s ease,transform .2s ease}.resource-nav-prev{left:1rem}.resource-nav-next{right:1rem}.resource-nav:hover:not(:disabled){background:#6b1fb3e6;transform:scale(1.06)}.resource-nav:disabled{opacity:0!important;pointer-events:none}.resource-stage:hover .resource-nav,.resource-nav:focus-visible{opacity:1}@media(min-width:768px){.resource-nav{display:inline-flex}}.resource-controls{padding-top:1rem}.resource-progress{height:3px;border-radius:9999px;background:#ffffff1a;overflow:hidden;margin-bottom:.875rem}.resource-progress-fill{height:100%;background:linear-gradient(90deg,#a972dd,#7cf29c);transform-origin:left;transition:transform .42s cubic-bezier(.22,1,.36,1)}.resource-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;flex-shrink:0;border-radius:9999px;color:#ffffffd9;border:1px solid rgba(255,255,255,.12);transition:background-color .15s ease,color .15s ease}.resource-icon-btn:hover:not(:disabled){background:#ffffff1a;color:#fff}.resource-icon-btn:disabled{opacity:.35}.resource-strip{display:flex;gap:.625rem;margin-top:1rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none}.resource-strip::-webkit-scrollbar{display:none}.resource-viewer.is-fullscreen .resource-strip{justify-content:center}.resource-thumb{position:relative;flex:0 0 auto;width:clamp(5.5rem,12vw,8.5rem);border-radius:.5rem;overflow:hidden;outline:2px solid transparent;outline-offset:2px;opacity:.45;transition:opacity .2s ease,outline-color .2s ease}.resource-thumb[data-seen=true]{opacity:.7}.resource-thumb:hover,.resource-thumb[data-active=true]{opacity:1}.resource-thumb[data-active=true]{outline-color:#a972dd}.resource-thumb img{display:block;width:100%;height:auto}.resource-thumb span{position:absolute;left:.375rem;bottom:.25rem;font-size:.625rem;font-weight:700;font-family:ui-monospace,monospace;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}@media(prefers-reduced-motion:reduce){.resource-slide,.resource-endcard,.resource-progress-fill{transition:none}}.resource-card-cover{transition:transform .6s cubic-bezier(.22,1,.36,1)}.resource-card:hover .resource-card-cover{transform:scale(1.03)}