.characterArchive{--character-accent:#42d9ff;color:#f2f5f7;isolation:isolate;-webkit-user-select:none;user-select:none;background:#080b0f;border:1px solid #ffffff1f;outline:none;min-height:min(900px,92svh);position:relative;overflow:hidden}.characterArchive:focus-visible{box-shadow:inset 0 0 0 2px var(--blue)}.characterArchiveGrid{z-index:-4;background-image:linear-gradient(#ffffff0e 1px,#0000 1px),linear-gradient(90deg,#ffffff0e 1px,#0000 1px);background-size:100% 24%,12.5% 100%;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#000,#000000a6 68%,#0000);mask-image:linear-gradient(90deg,#000,#000000a6 68%,#0000)}.characterArchiveGrid:after{content:"";background:repeating-linear-gradient(128deg,#0000 0 112px,#ffffff06 113px 114px);position:absolute;inset:0}.characterGlow{z-index:-3;background:radial-gradient(circle, color-mix(in srgb, var(--character-accent) 28%, transparent), transparent 67%);filter:blur(22px);width:780px;height:780px;transition:background .6s;position:absolute;top:45%;left:52%;transform:translate(-50%,-50%)}.characterWatermark{z-index:-2;color:#ffffff09;letter-spacing:-.13em;font:800 clamp(280px,35vw,620px)/.8 Inter,sans-serif;position:absolute;top:47%;left:35%;transform:translateY(-50%)}.characterInfo{z-index:3;width:min(420px,30%);position:absolute;top:clamp(46px,8vh,96px);left:clamp(32px,4.5vw,76px)}.characterKicker{color:#7c8791;letter-spacing:.18em;margin:0 0 88px;font:9px/1.3 ui-monospace,monospace}.characterKicker:before{content:"";vertical-align:middle;background:var(--character-accent);width:30px;height:1px;margin-right:12px;display:inline-block}.characterTitle{animation:.48s cubic-bezier(.22,.75,.2,1) both characterTextIn}.characterTitle>span{color:#7d8790;letter-spacing:.16em;text-transform:uppercase;font:600 12px ui-monospace,monospace}.characterTitle h3{letter-spacing:-.07em;margin:8px 0 6px;font-size:clamp(48px,5vw,86px);font-weight:580;line-height:.92}.characterTitle>p{color:var(--character-accent);letter-spacing:.15em;margin:0;font:10px ui-monospace,monospace;transition:color .5s}.characterDescription{color:#929ba4;max-width:370px;margin:38px 0 0;font-size:13px;line-height:1.8;animation:.52s cubic-bezier(.22,.75,.2,1) 50ms both characterTextIn}.characterTags{flex-wrap:wrap;gap:8px;margin-top:26px;display:flex}.characterTags span{color:#7e8892;letter-spacing:.12em;border:1px solid #ffffff24;padding:7px 10px;font:8px ui-monospace,monospace}.characterStage{z-index:2;cursor:grab;touch-action:pan-y;position:absolute;inset:0 13% 82px 26%}.characterStage:active{cursor:grabbing}.characterFigure,.characterEcho{object-fit:contain;object-position:62% 100%;pointer-events:none;width:100%;height:100%;position:absolute}.characterFigure{z-index:2;filter:drop-shadow(0 32px 48px #0009);animation:.66s cubic-bezier(.16,.82,.2,1) both characterSlideIn}.characterEcho{z-index:0;opacity:.06;filter:grayscale()blur(1px);transform:scale(1.12)translate(-9%)}.dragHint{z-index:4;color:#ffffff61;letter-spacing:.16em;font:8px ui-monospace,monospace;position:absolute;bottom:10px;left:50%;transform:translate(-50%)}.dragHint i{color:var(--character-accent);margin-left:8px;font-style:normal}.characterCounter{z-index:3;align-items:end;gap:14px;display:flex;position:absolute;top:31%;right:clamp(28px,3vw,56px)}.characterCounter strong{color:var(--character-accent);letter-spacing:-.09em;font-size:clamp(62px,6vw,104px);line-height:.75;transition:color .5s}.characterCounter span{color:#d7dce0;letter-spacing:.08em;border-left:1px solid #ffffff40;padding-left:12px;font:9px/1.45 ui-monospace,monospace}.characterControls{z-index:5;grid-template-columns:auto minmax(120px,360px) auto;align-items:end;gap:28px;display:grid;position:absolute;bottom:34px;left:clamp(32px,4.5vw,76px);right:clamp(32px,4.5vw,76px)}.characterThumbs{gap:10px;display:flex}.characterThumb{cursor:pointer;opacity:.55;background:#11161c;border:1px solid #fff3;width:72px;height:94px;padding:0;transition:opacity .25s,border-color .25s,transform .25s;position:relative;overflow:hidden}.characterThumb:hover,.characterThumb.isActive{opacity:1;border-color:var(--character-accent);transform:translateY(-4px)}.characterThumb img{object-fit:contain;object-position:center bottom;width:100%;height:100%}.characterThumb span{color:#fff;text-shadow:0 1px 4px #000;font:8px ui-monospace,monospace;position:absolute;bottom:4px;left:5px}.characterProgress{background:#ffffff38;height:1px;margin-bottom:10px}.characterProgress span{background:var(--character-accent);height:100%;transition:width .45s cubic-bezier(.2,.75,.2,1),background .5s;display:block}.characterArrows{gap:8px;display:flex}.characterArrows button{color:#fff;cursor:pointer;background:#080b0f99;border:1px solid #ffffff3d;place-items:center;width:48px;height:48px;transition:background .25s,border-color .25s,transform .25s;display:grid}.characterArrows button:hover{background:var(--character-accent);border-color:var(--character-accent);color:#071016;transform:translateY(-3px)}.characterArrows svg{fill:none;stroke:currentColor;stroke-width:1.5px;width:18px}@keyframes characterSlideIn{0%{opacity:0;filter:blur(8px)drop-shadow(0 32px 48px #0009);transform:translate(10%)scale(.98)}to{opacity:1;filter:blur()drop-shadow(0 32px 48px #0009);transform:none}}@keyframes characterTextIn{0%{opacity:0;transform:translate(-18px)}to{opacity:1;transform:none}}@media (max-width:1000px){.characterArchive{min-height:820px}.characterInfo{width:35%}.characterKicker{margin-bottom:54px}.characterStage{left:29%;right:4%}.characterCounter{top:18%}.characterControls{grid-template-columns:auto 1fr}.characterProgress{display:none}}@media (max-width:720px){.characterArchive{min-height:780px}.characterInfo{width:calc(100% - 64px);top:34px}.characterKicker{margin-bottom:30px}.characterTitle h3{font-size:54px}.characterDescription{max-width:88%;margin-top:20px}.characterTags{display:none}.characterStage{inset:245px -12% 106px -5%}.characterFigure,.characterEcho{object-position:center bottom}.characterCounter{top:auto;bottom:156px;right:24px}.characterCounter strong{font-size:64px}.characterControls{justify-content:space-between;gap:12px;display:flex;bottom:18px;left:16px;right:16px}.characterThumbs{gap:5px}.characterThumb{width:45px;height:62px}.characterArrows button{width:42px;height:42px}.dragHint{display:none}}@media (prefers-reduced-motion:reduce){.characterFigure,.characterTitle,.characterDescription{animation:none}}