:root{--primary-bg:#f6f7f9;--secondary-bg:#fff;--accent:#383838;--media-highlight:#a20707;--media-border:#e4e5e7;--gold:#ffc107;--media-radius:13px;--media-shadow:0 4px 18px 0 rgba(50,50,60,0.07)}body{background:var(--primary-bg)}.class-main-container{max-width:1060px;margin:2.7rem auto 2rem;padding:0 1.3rem}@media (max-width:700px){.class-main-container{padding:0}}.breadcrumb{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.5em;width:100%;overflow-x:auto;white-space:nowrap;background:none;padding:.3em 0;margin-bottom:1.6em;font-size:1rem;color:#686868;scrollbar-width:thin;scrollbar-color:#e4e5e7 #f6f7f9;-webkit-overflow-scrolling:touch}.breadcrumb .divider{color:#bbb;font-size:1.2em;padding:0 .15em;user-select:none}.breadcrumb a,.breadcrumb span{display:inline;white-space:nowrap;color:var(--media-highlight);text-decoration:none;font-weight:600;transition:color 0.16s}.breadcrumb a:hover{text-decoration:underline;color:#d01111}.breadcrumb::-webkit-scrollbar{height:6px;background:#f6f7f9}.breadcrumb::-webkit-scrollbar-thumb{background:#e4e5e7;border-radius:5px}@media (max-width:700px){.breadcrumb{font-size:.96rem;padding:.2em 0;gap:.36em;margin-bottom:1.15em}}.class-card{position:relative;background:var(--secondary-bg);border-radius:var(--media-radius);box-shadow:var(--media-shadow);border:1.2px solid var(--media-border);display:flex;flex-direction:column;align-items:center;padding:2.7rem 2rem 2.6rem;margin-bottom:2.8rem;animation:cardPopIn 0.6s cubic-bezier(.28,1.25,.51,1.02);overflow:visible;z-index:1}.class-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgb(255 255 255 / .08) 25%,rgb(162 7 7 / .08) 56%,rgb(255 255 255 / .14) 81%);background-size:260% 120%;animation:classShimmerMove 12s linear infinite;pointer-events:none;opacity:.34;z-index:0}@keyframes classShimmerMove{0%{background-position:110% 20%}55%{background-position:0 100%}100%{background-position:110% 20%}}@keyframes cardPopIn{0%{opacity:0;transform:scale(.95) translateY(30px)}65%{opacity:1;transform:scale(1.02) translateY(-8px)}100%{opacity:1;transform:scale(1) translateY(0)}}@media (max-width:700px){.class-card{padding:1.1rem .2rem 1rem}}.class-card-image{display:block;width:100%;max-width:500px;aspect-ratio:1/1;border-radius:20px;margin-bottom:1.5rem;box-shadow:0 8px 32px 0 rgb(162 7 7 / .13),0 2px 22px rgb(40 40 40 / .07),0 0 0 1.5px #fff inset;background:linear-gradient(120deg,#f8fafb 80%,#f0eaea 100%);object-fit:contain;border:2.5px solid #ede9e3;transition:box-shadow 0.23s cubic-bezier(.77,0,.19,1),transform 0.29s cubic-bezier(.34,1.56,.64,1),border-color 0.19s;animation:imgZoom 1.15s cubic-bezier(.22,1.12,.31,.89);position:relative;z-index:2;cursor:pointer;will-change:transform,box-shadow}@keyframes imgZoom{0%{transform:scale(.87);opacity:.1}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}.class-card-image:hover,.class-card-image:focus{box-shadow:0 12px 44px 0 rgb(162 7 7 / .18),0 4px 26px rgb(40 40 40 / .1),0 0 0 3.5px #ffc10799 inset;border-color:#ffd875;transform:scale(1.03) rotate(-2deg)}@media (max-width:700px){.class-card-image{max-width:100vw;width:100vw;border-radius:10px;margin-bottom:1.1rem;aspect-ratio:1/1;min-width:0;object-fit:contain}}.class-speech-bubble{position:absolute;left:48%;top:7%;transform:translate(-50%,-10%);background:rgb(243 244 248 / .87);color:#a20707;font-weight:700;border-radius:32px 44px 36px 33px / 44px 38px 33px 34px;box-shadow:0 6px 32px 0 rgb(40 40 60 / .12),0 2px 16px rgb(170 35 35 / .07);font-size:1.14rem;text-align:center;max-width:62%;min-width:210px;padding:1.12em 2.1em 1.15em 2.1em;z-index:10;border:2.5px solid #ece4ee;opacity:0;pointer-events:none;transition:opacity 0.66s cubic-bezier(.22,1,.36,1),background 0.22s;backdrop-filter:blur(2px)}.class-card-image:hover~.class-speech-bubble,.class-speech-bubble:hover{opacity:1;pointer-events:auto;background:rgb(243 244 248 / .95);box-shadow:0 10px 38px rgb(170 35 35 / .14),0 2px 16px rgb(60 0 0 / .09);border-color:#f5e4f3}.class-speech-bubble::after{content:"";position:absolute;left:235px;top:99%;width:48px;height:28px;background:url("data:image/svg+xml;utf8,<svg width='48' height='28' xmlns='http://www.w3.org/2000/svg'><ellipse cx='14' cy='20' rx='13' ry='9' fill='rgba(243,244,248,0.87)' stroke='%23ece4ee' stroke-width='2.5'/><ellipse cx='34' cy='10' rx='8' ry='6' fill='rgba(243,244,248,0.87)' stroke='%23ece4ee' stroke-width='2.5'/></svg>") no-repeat center center;background-size:contain;filter:drop-shadow(0 2px 2px rgb(40 40 60 / .07));pointer-events:none;opacity:.93;z-index:2}@media (max-width:700px){.class-speech-bubble{position:static;left:auto;top:auto;transform:none;margin:1.1rem auto 0 auto;max-width:94vw;min-width:0;opacity:1;pointer-events:auto;transition:none;background:rgb(243 244 248 / .98);border-radius:32px;box-shadow:0 3px 16px rgb(170 35 35 / .09);border-color:#ece4ee;font-size:1rem;backdrop-filter:none}.class-speech-bubble::after{display:none}}.class-card h1{font-size:2.3rem;margin-bottom:.7rem;font-weight:900;color:var(--accent);letter-spacing:.01em;text-align:center;animation:titleFadeIn 1.1s cubic-bezier(.12,1.15,.31,.87)}@keyframes titleFadeIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:translateY(0)}}.class-card-desc{color:#666;font-size:1.13rem;margin-bottom:1.1rem;text-align:center;line-height:1.6;max-width:650px;opacity:.94}.matchups{display:flex;justify-content:center;gap:2.2rem;margin:1.1rem 0 1.8rem;flex-wrap:wrap}.matchup{font-size:1.06rem;background:#f2f2f6;border-radius:8px;padding:.67em 1.18em;color:#222;font-weight:500;border:1px solid #ececec;min-width:160px;box-shadow:0 1px 5px rgb(100 100 100 / .03);transition:box-shadow 0.14s,border-color 0.13s}.matchup strong{color:var(--media-highlight);margin-right:.2em}.matchup.strong strong{color:#14b914}.matchup.weak strong{color:#e10000}.class-longdesc{margin-top:1.7rem;color:#4a4a4a;font-size:1.13rem;background:#fafbfc;padding:1.5rem 1.2rem;border-radius:11px;box-shadow:0 2px 8px rgb(0 0 0 / .03);text-align:center;line-height:1.77;opacity:.96;animation:fadeIn 1.2s cubic-bezier(.16,.92,.44,1)}@keyframes fadeIn{from{opacity:0}to{opacity:.96}}.class-arrow{position:absolute;top:48%;transform:translateY(-50%);z-index:20;width:48px;height:48px;background:#fff;border:2.5px solid #a20707;border-radius:50%;color:#a20707;font-size:2.2rem;display:flex;align-items:center;justify-content:center;text-decoration:none;box-shadow:0 2px 8px rgb(162 7 7 / .06);transition:background 0.14s,border-color 0.16s,color 0.17s,transform 0.13s;cursor:pointer;opacity:.97;font-weight:800;outline:none;background-clip:padding-box;animation:arrowPulse 2.5s infinite cubic-bezier(.77,0,.19,1)}.class-arrow.prev{left:8px}.class-arrow.next{right:8px}.class-arrow span{display:block;line-height:1}.class-arrow:hover,.class-arrow:focus{background:#a20707;color:#fff;border-color:#a20707;transform:translateY(-50%) scale(1.13);box-shadow:0 4px 18px rgb(162 7 7 / .16);animation:none}@keyframes arrowPulse{0%,100%{box-shadow:0 0 0 0 #a2070733}70%{box-shadow:0 0 0 8px #a2070708}}@media (max-width:1080px){.class-arrow.prev{left:-38px}.class-arrow.next{right:-38px}}@media (max-width:700px){.class-card h1{font-size:1.5rem}.class-arrow{width:36px;height:36px;font-size:1.3rem}.class-arrow.prev{left:5px;top:18%}.class-arrow.next{right:5px;top:18%}}@media (max-width:400px){.class-card h1{font-size:1.5rem}.class-arrow{width:36px;height:36px;font-size:1.3rem}.class-arrow.prev{left:5px;top:18%}.class-arrow.next{right:5px;top:18%}}.class-button-bar{margin-top:2.2rem;margin-bottom:2.2rem;display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap}.class-link-btn{background:var(--gold);color:#383838;padding:.77em 2.1em;border-radius:8px;font-weight:700;text-decoration:none;box-shadow:0 2px 8px rgb(0 0 0 / .09);transition:background 0.16s,color 0.16s,transform 0.13s;min-width:180px;text-align:center;border:none;display:inline-block;font-size:1.12rem;letter-spacing:.02em}.class-link-btn:hover,.class-link-btn:focus{background:#e5b003;color:#000;transform:scale(1.06) translateY(-1px)}.class-related-section{margin-top:2.5rem;padding:0;background:none}.class-related-section h2{font-size:1.5rem;color:var(--media-highlight);margin-bottom:.6rem;text-align:center;font-weight:800;letter-spacing:.01em;text-shadow:0 2px 12px rgb(100 10 10 / .03);opacity:.97}.class-related-section p{color:#666;text-align:center;margin-bottom:1.2rem;font-size:1.01rem}.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:1.2rem;margin-bottom:2.5rem}.related-item{background:#fff;border-radius:13px;border:1.2px solid #e4e5e7;box-shadow:0 2px 10px rgb(0 0 0 / .05);text-align:center;color:#a20707;text-decoration:none;transition:box-shadow 0.14s,border-color 0.14s,transform 0.16s;padding:1.2rem .5rem .7rem .5rem;display:flex;flex-direction:column;align-items:center;animation:relatedIn 0.7s cubic-bezier(.12,1.15,.31,.97)}@keyframes relatedIn{from{opacity:0;transform:scale(.91) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.related-item:hover,.related-item:focus{border-color:#a20707;box-shadow:0 4px 18px rgb(162 7 7 / .08),0 2px 10px rgb(40 40 40 / .07);transform:translateY(-4px) scale(1.045)}.related-item img{max-width:112px;max-height:120px;min-height:70px;border-radius:8px;box-shadow:0 1px 8px rgb(100 100 100 / .06);background:#f6f7f9;margin-bottom:.8em;object-fit:contain;transition:transform 0.16s}.related-item span{font-size:1.09rem;font-weight:800;color:#a20707;letter-spacing:.01em;margin-top:.25em}