.character-showcase{max-width:1320px!important;margin:45px auto!important;padding:64px 44px!important;border-radius:32px;background:radial-gradient(ellipse at 20% 0%,#143c4e,transparent 55%),#091923;color:#f0f8fb;overflow:hidden;position:relative}.character-heading{display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:end;margin-bottom:36px}.character-kicker{display:block;font:700 10px/1.5 Arial,sans-serif;letter-spacing:2.5px;color:#50ccbf}.character-heading h2,.live-action-copy h2{font-size:clamp(26px,3vw,42px);line-height:1.25;letter-spacing:-1.2px;margin:18px 0 0}.character-heading em{font-style:normal;color:#77dfd0}.character-heading>p{color:#b5cbd5;line-height:1.85;font-size:14px;margin:0}.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start}.character-card{border:1px solid #47708077;background:#102631;border-radius:22px;padding:9px;transition:transform .3s,box-shadow .3s,border-color .3s;min-width:0}.character-card:nth-child(2){margin-top:28px}.character-card:hover{transform:translateY(-6px);border-color:#64e5ca;box-shadow:0 20px 60px #0005}.character-screen{position:relative;aspect-ratio:9/16;overflow:hidden;border-radius:15px;background:#101d27}.character-screen video{width:100%;height:100%;display:block;object-fit:contain}.character-number{position:absolute;top:14px;left:14px;padding:7px 10px;background:#061a20bc;border:1px solid #fff3;backdrop-filter:blur(8px);border-radius:30px;font-size:9px;letter-spacing:1.5px;pointer-events:none;color:white}.character-caption{padding:20px 12px 12px}.character-caption h3{font-size:17px!important;line-height:1.4;margin:0 0 9px;color:#f3f9ff}.character-caption p{font-size:12px;line-height:1.7;color:#acc4d0;margin:0}.character-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px}.character-toolbar p{font-size:11px;color:#a2bdc9}.character-toolbar button{border:1px solid #51717c;border-radius:20px;padding:10px 16px;color:#d3efef;background:transparent;cursor:pointer;font:inherit;font-size:11px}.character-toolbar button:hover{background:#284651}.character-bottom{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:22px;padding-top:25px;border-top:1px solid #42647277}.character-bottom p{font-size:13px;line-height:1.9;color:#a9c2cf;max-width:690px;margin:0}.character-bottom b{color:white}.character-bottom>a,.live-action-links>a{display:inline-flex;padding:14px 20px;border-radius:10px;background:#6be0c8;color:#102d34;font-size:12px;font-weight:700;text-decoration:none;white-space:nowrap}.live-in-action{max-width:1180px!important;display:grid;grid-template-columns:minmax(260px,350px) 1fr;gap:80px;align-items:center;padding:70px 40px!important;margin:auto}.live-video-frame{aspect-ratio:9/16;background:#0a1c28;border:8px solid #18394b;border-radius:30px;overflow:hidden;box-shadow:0 24px 70px #173f542b;position:relative}.live-video-frame iframe{height:100%;width:100%;border:0;display:block}.youtube-facade{width:100%;height:100%;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#236269,#081b27)}.youtube-facade img{width:100%;height:auto;max-height:100%;object-fit:contain}.load-live-demo{position:absolute;inset:0;border:0;width:100%;height:100%;background:linear-gradient(0deg,#051b2ddd,transparent 80%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:white;font:600 14px Arial,sans-serif;cursor:pointer}.load-live-demo span{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;background:#66e0c8;color:#12313a;font-size:24px;box-shadow:0 0 0 12px #62dfc322;transition:transform .25s}.load-live-demo:hover span{transform:scale(1.1)}.live-action-copy>p{font-size:15px;line-height:1.9;color:#648293;margin:24px 0}.live-detail{display:flex;gap:20px;margin:24px 0}.live-detail>span{font-size:13px;color:#08a89a;font-weight:700}.live-detail b{font-size:15px}.live-detail p{font-size:13px;line-height:1.8;color:#648293;margin-top:8px}.live-action-links{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.live-action-links>a:last-child{background:transparent;border:1px solid #5ac9b5;color:inherit}.youtube-backup{font-size:12px;color:#169282;text-decoration:underline}.live-action-copy>small{display:block;color:#6a8593;font-size:11px;line-height:1.7;margin-top:20px}.character-showcase button:focus-visible,.live-in-action button:focus-visible,.character-showcase a:focus-visible{outline:3px solid #36d9b0;outline-offset:5px}@media(max-width:800px){.character-showcase{margin:20px 12px!important;padding:32px 18px!important;border-radius:24px}.character-heading{grid-template-columns:1fr;gap:20px}.character-grid{gap:18px;grid-template-columns:repeat(3,minmax(240px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 3px 20px}.character-card{scroll-snap-align:center}.character-card:nth-child(2){margin-top:0}.character-toolbar,.character-bottom{align-items:start;flex-direction:column}.live-in-action{grid-template-columns:1fr;gap:30px;padding:40px 24px!important}.live-video-frame{width:min(100%,340px);margin:auto}.live-action-copy h2{font-size:32px}}@media(prefers-reduced-motion:reduce){.character-card,.load-live-demo span{transition:none}.character-card:hover,.load-live-demo:hover span{transform:none}}

.hover-cue{position:absolute;left:0;right:0;top:44%;display:flex;align-items:center;flex-direction:column;gap:12px;pointer-events:none;transition:opacity .2s}.hover-cue>span{display:grid;place-items:center;height:54px;width:54px;border-radius:50%;background:#062932a8;border:1px solid #fff7;color:white;backdrop-filter:blur(10px);font-size:21px}.hover-cue b{background:#062932c9;color:white;font-size:11px;font-weight:500;padding:8px 13px;border-radius:18px}.character-card.is-playing .hover-cue{opacity:0}.character-card.is-playing{border-color:#6ae0c7;box-shadow:0 12px 35px #2ce8ba18}.touch-cue{display:none}.expand-character{width:100%;display:flex;justify-content:space-between;align-items:center;border:1px solid #45636e;background:#183b47;color:#d6f8ef;border-radius:9px;padding:12px 14px;margin-top:18px;cursor:pointer;font:600 12px Arial,sans-serif}.expand-character:hover{background:#235563}.character-dialog{width:min(94vw,680px);max-height:94dvh;box-sizing:border-box;overflow:auto;padding:20px;border:1px solid #456a78;border-radius:24px;background:#0c222d;color:#edf9fc;box-shadow:0 30px 100px #0007}.character-dialog::backdrop{background:#02111ae0;backdrop-filter:blur(10px)}.viewer-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.viewer-head small{font-size:9px;letter-spacing:2px;color:#6be0c8}.viewer-head h2{font-size:20px;line-height:1.4;letter-spacing:0;margin:8px 0 0;color:white}.viewer-head button{height:40px;min-width:40px;border-radius:50%;border:1px solid #607f89;background:#173d49;color:white;cursor:pointer}.character-dialog video{display:block;height:min(65dvh,660px);max-width:100%;width:auto;aspect-ratio:9/16;object-fit:contain;margin:auto;background:#000;border-radius:12px}.viewer-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}.viewer-nav button{border:1px solid #4c707b;background:#173a46;color:#def9f4;padding:12px;border-radius:8px;cursor:pointer;font-size:11px}.viewer-nav span{font-size:12px;white-space:nowrap}.viewer-note{font-size:11px;color:#9ebbc7;text-align:center;margin-bottom:0}.character-dialog button:focus-visible{outline:3px solid #6ae0c7;outline-offset:3px}body.viewer-open{overflow:hidden}@media(hover:none),(pointer:coarse){.desktop-cue{display:none}.touch-cue{display:block}}@media(prefers-reduced-motion:reduce){.hover-cue{transition:none}}