.format-page { --tv:#ff4d59; --ova:#f2c75c; --ona:#62b5f3; --movie:#b18bf4; }
.format-page .hero h1 { max-width:780px; }
.format-page .hero-glow-one { background:radial-gradient(circle,rgba(177,139,244,.14),transparent 68%); }
.format-page .formats-visual::before { display:none; }
.formats-visual { min-height:410px; }
.formats-orbit { position:absolute; left:50%; top:50%; border:1px dashed rgba(255,255,255,.12); border-radius:50%; transform:translate(-50%,-50%) rotate(-15deg); }
.orbit-a { width:415px; height:245px; }
.orbit-b { width:245px; height:415px; transform:translate(-50%,-50%) rotate(32deg); }
.formats-core { position:absolute; left:50%; top:50%; width:260px; height:260px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.08); border-radius:50%; background:radial-gradient(circle at 35% 28%,#2b2933,#18181f 64%,#111115); box-shadow:0 38px 75px rgba(0,0,0,.45),inset -20px -20px 45px rgba(0,0,0,.23); line-height:1; }
.formats-core small { color:var(--accent); font-size:9px; font-weight:700; letter-spacing:.3em; }
.formats-core strong { margin:7px 0 4px; font-size:82px; letter-spacing:-.06em; }
.formats-core span { color:#89858e; font-size:11px; }
.format-node { position:absolute; z-index:3; min-width:120px; padding:13px 15px; display:grid; grid-template-columns:1fr auto; border:1px solid rgba(255,255,255,.1); border-radius:14px; background:rgba(30,30,38,.92); box-shadow:0 16px 35px rgba(0,0,0,.3); backdrop-filter:blur(10px); animation:float-card 5s ease-in-out infinite; }
.format-node b { grid-column:1/-1; color:#fff; font:700 17px "Yume Quicksand",sans-serif; }
.format-node span { color:#8c8891; font-size:9px; text-transform:uppercase; }
.format-node i { grid-column:1/-1; margin-top:2px; color:#69656e; font-size:8px; font-style:normal; text-align:right; text-transform:uppercase; }
.node-tv { left:-3%; top:12%; border-left:3px solid var(--tv); }
.node-ova { right:-3%; top:10%; border-left:3px solid var(--ova); animation-delay:-1.3s; }
.node-ona { left:-2%; bottom:10%; border-left:3px solid var(--ona); animation-delay:-2.6s; }
.node-movie { right:-4%; bottom:12%; border-left:3px solid var(--movie); animation-delay:-3.9s; }
.signal-dot { position:absolute; z-index:4; width:10px; height:10px; border:2px solid #18181f; border-radius:50%; }
.dot-a { left:21%; top:47%; background:var(--ona); box-shadow:0 0 0 6px rgba(98,181,243,.1),0 0 18px rgba(98,181,243,.5); }
.dot-b { right:18%; top:46%; background:var(--ova); box-shadow:0 0 0 6px rgba(242,199,92,.1),0 0 18px rgba(242,199,92,.5); }

.format-overview { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:27px; }
.format-overview article { min-height:145px; padding:17px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.018); }
.format-overview span { display:inline-flex; padding:5px 8px; border-radius:8px; font:700 10px "Yume Quicksand",sans-serif; }
.format-overview h3 { margin:13px 0 5px; font-size:13px; }
.format-overview p { margin:0; color:#89858e; font-size:10px; line-height:1.55; }
.overview-tv span { color:var(--tv); background:rgba(255,77,89,.12); }
.overview-ova span { color:var(--ova); background:rgba(242,199,92,.11); }
.overview-ona span { color:var(--ona); background:rgba(98,181,243,.11); }
.overview-movie span { color:var(--movie); background:rgba(177,139,244,.11); }
.format-features>div>span { border-radius:9px; font-family:"Yume Quicksand",sans-serif; }
.tv-features>div>span { color:var(--tv); background:rgba(255,77,89,.12); }
.ona-features>div>span { color:var(--ona); background:rgba(98,181,243,.11); }
.movie-features>div>span { color:var(--movie); background:rgba(177,139,244,.11); }
.format-caveat { margin-top:22px!important; padding:15px 17px; border-left:3px solid var(--tv); border-radius:0 12px 12px 0; background:rgba(255,77,89,.045); color:#96919a!important; font-size:12px; }
.format-caveat strong { color:#e8e4e8; }
.ova-definition { border-color:rgba(242,199,92,.18); background:rgba(242,199,92,.05); }
.ova-definition .definition-symbol { width:52px; flex-basis:52px; color:var(--ova); background:rgba(242,199,92,.11); font:700 10px "Yume Quicksand",sans-serif; }

.network-card { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:10px; align-items:center; margin:28px 0; padding:20px; border:1px solid rgba(98,181,243,.16); border-radius:18px; background:rgba(98,181,243,.04); }
.network-card span { display:grid; place-items:center; min-height:58px; border:1px solid var(--line); border-radius:12px; color:#a8a4ad; background:#191920; font:700 9px "Yume Quicksand",sans-serif; letter-spacing:.08em; }
.network-card .network-cloud { color:var(--ona); border-color:rgba(98,181,243,.22); background:rgba(98,181,243,.08); }
.network-card i { color:#5e5a63; font-style:normal; font-size:12px; }
.cinema-frame { position:relative; overflow:hidden; display:grid; place-items:center; min-height:190px; margin:28px 0; border:1px solid rgba(177,139,244,.18); border-radius:19px; background:radial-gradient(circle,rgba(177,139,244,.14),transparent 55%),#15151b; }
.cinema-frame::before,.cinema-frame::after { content:""; position:absolute; left:0; right:0; height:23px; background:repeating-linear-gradient(90deg,#272630 0 17px,#111115 17px 25px); }
.cinema-frame::before { top:0; }.cinema-frame::after { bottom:0; }
.cinema-frame>div { display:flex; flex-direction:column; align-items:center; line-height:1; }
.cinema-frame span { color:var(--movie); font-size:8px; font-weight:700; letter-spacing:.25em; }
.cinema-frame strong { margin:9px 0 6px; font-size:38px; }
.cinema-frame small { color:#706c75; font-size:8px; letter-spacing:.14em; }
.formats-table { min-width:720px; }
.table-tag.online { color:var(--ona); background:rgba(98,181,243,.1); }

.ecosystem-flow { display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr; gap:9px; align-items:center; margin:29px 0; }
.ecosystem-flow article { min-height:92px; padding:15px 10px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.018); text-align:center; }
.ecosystem-flow article span { color:var(--accent); font:700 11px "Yume Quicksand",sans-serif; }
.ecosystem-flow article:nth-of-type(2) span { color:var(--ova); }.ecosystem-flow article:nth-of-type(3) span { color:var(--ona); }.ecosystem-flow article:nth-of-type(4) span { color:var(--movie); }
.ecosystem-flow strong { margin-top:5px; color:#aaa6ae; font-size:9px; }
.ecosystem-flow>i { color:#59555e; font-style:normal; }
.format-conclusion { background:linear-gradient(145deg,rgba(177,139,244,.08),rgba(255,77,89,.03) 65%),var(--surface); border-color:rgba(177,139,244,.18); }
.format-conclusion .conclusion-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(177,139,244,.25); border-radius:50%; color:var(--movie); font:700 12px "Yume Quicksand",sans-serif; }

@media(max-width:640px){
  .format-overview { grid-template-columns:1fr 1fr; }
  .network-card { grid-template-columns:1fr; }
  .network-card i { transform:rotate(90deg); justify-self:center; }
  .ecosystem-flow { grid-template-columns:1fr 1fr; }
  .ecosystem-flow>i { display:none; }
}