.class-name-text,.page-title{letter-spacing:2px;text-transform:uppercase}.class-info-title,.class-name-text,.page-title,.pent-label{text-transform:uppercase}*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--border) transparent}:root{--bg-deep:#0a0a0f;--bg-main:#121117;--bg-card:#16151d;--bg-elevated:#1e1c2a;--bg-hover:#252336;--border:#2a2838;--text-primary:#f0f0f5;--text-secondary:#a7a9be;--text-muted:#54536b;--accent:#ff8906;--accent-glow:rgba(255, 137, 6, 0.25);--radius-sm:6px;--radius-md:12px;--radius-lg:18px;--radius-xl:28px;--transition:0.25s ease}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::selection{background:var(--accent);color:var(--bg-deep)}body{background:linear-gradient(135deg,#0a0a14 0,#0f0e1a 30%,#0d0c18 70%,#0a0a14 100%);font-family:'Segoe UI',Inter,Roboto,system-ui,sans-serif;display:flex;justify-content:center;min-height:100vh;padding:32px 24px;color:var(--text-primary);-webkit-font-smoothing:antialiased}.showcase{max-width:1100px;width:100%;background:var(--bg-main);border-radius:var(--radius-xl);box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px var(--border);display:flex;flex-direction:column;overflow:hidden}.page-header{padding:20px 32px;text-align:center;background:linear-gradient(180deg,#0a0a12,var(--bg-main));border-bottom:1px solid var(--border);position:relative}.page-title{font-size:2rem;font-weight:800;color:var(--accent);text-shadow:0 0 30px var(--accent-glow)}.page-subtitle{margin-top:4px;color:var(--text-muted);font-size:.85rem}.lang-toggle,.race-tab{color:var(--text-secondary);font-family:inherit}.lang-toggle{position:absolute;right:24px;top:50%;transform:translateY(-50%);background:var(--bg-elevated);border:1px solid var(--border);padding:6px 14px;border-radius:18px;cursor:pointer;font-size:.78rem;font-weight:600;transition:all var(--transition)}.character-bg,.race-content{position:relative;max-height:800px}.lang-toggle:hover,.race-tab:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-muted)}.race-tabs{display:flex;justify-content:center;gap:2px;padding:14px 24px;background:var(--bg-card);border-bottom:1px solid var(--border)}.class-slot,.race-tab{background:var(--bg-elevated);transition:all var(--transition);cursor:pointer}.race-tab{padding:10px 20px;border:1px solid var(--border);font-size:.82rem;font-weight:500;white-space:nowrap}.race-tab:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.race-tab:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}.race-tab.active{background:var(--accent);color:#0f0e17;border-color:var(--accent);font-weight:700;z-index:1;box-shadow:0 0 14px var(--accent-glow)}.race-content{display:flex;min-height:600px;flex:1}.class-selector{display:flex;flex-direction:column;gap:6px;padding:50px 24px;z-index:5}.class-slot{width:56px;height:56px;border:2px solid var(--border);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden;opacity:.5;filter:grayscale(.4)}.class-slot img{width:70%;height:70%;object-fit:contain;transition:transform var(--transition)}.class-slot:hover{opacity:.85;filter:grayscale(.1);border-color:rgba(255,137,6,.3);transform:translateY(-2px)}.class-slot.active{border-color:#df0;box-shadow:0 0 14px rgba(221,255,0,.3);opacity:1;filter:grayscale(0);background:#2a2838;transform:translateY(-3px)}.class-slot.active img{transform:scale(1.1)}.character-bg{--bg-image:none;flex:1;z-index:0;overflow:hidden}.character-bg::before{content:'';position:absolute;inset:0;background-image:var(--bg-image);background-size:contain;background-repeat:no-repeat;background-position:center center;z-index:0;transition:background-image .4s}.class-name-overlay{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:4;text-align:center}.class-name-text{font-size:2rem;font-weight:800;color:var(--accent);text-shadow:0 0 30px var(--accent-glow),0 2px 8px rgba(0,0,0,.8)}.class-name-sub{font-size:.8rem;color:var(--text-secondary);text-shadow:0 0 8px rgba(0,0,0,.8);margin-top:2px}.pentagon-container{position:absolute;top:40px;left:60px;width:200px;height:200px;z-index:3}.class-info,.video-btn{position:absolute;z-index:5}.pentagon-svg{width:100%;height:100%}.pentagon-labels{position:absolute;inset:0;pointer-events:none}.pent-label{position:absolute;font-size:.65rem;font-weight:600;letter-spacing:.5px;color:#81c784;white-space:nowrap;text-shadow:0 0 6px rgba(0,0,0,.8);line-height:1.3}.class-info-title,.video-close:hover{color:var(--accent)}.pent-label strong{display:block;color:#fff;font-size:.7rem}.class-info{top:260px;left:20px;background:rgba(0,0,0,.75);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 18px;min-width:200px;backdrop-filter:blur(8px)}.class-info-title{font-size:.7rem;font-weight:700;letter-spacing:1.5px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}.class-info-grid{display:flex;flex-direction:column;gap:8px}.info-item{display:flex;align-items:center;gap:8px;font-size:.75rem}.info-icon{flex-shrink:0;font-size:.9rem}.info-label{color:var(--text-muted);min-width:70px}.info-value{color:var(--text-primary);font-weight:500}.video-btn{left:5%;bottom:15%;width:71px;height:77px;background:url('images/play2.png') center/contain no-repeat;cursor:pointer;transition:all var(--transition);filter:brightness(.8)}.video-btn:hover{filter:brightness(1.2);transform:scale(1.08)}.video-btn:active{transform:scale(.95)}.video-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center}.video-modal.hidden{display:none}.video-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85)}.video-wrapper{position:relative;width:90%;max-width:900px;z-index:1}.video-wrapper video{width:100%;border-radius:var(--radius-lg)}.video-close{position:absolute;top:-40px;right:0;background:0 0;border:none;color:#fff;font-size:1.8rem;cursor:pointer;padding:8px}.info-item-link{margin-top:4px;padding-top:8px;border-top:1px solid var(--border)}.skills-link{color:var(--accent)!important;text-decoration:none;font-weight:600!important;transition:color var(--transition)}.skills-link:hover{color:#fa3!important;text-decoration:underline}@media (max-width:900px){.class-info,.class-name-overlay,.pentagon-container{position:relative;top:auto;left:auto}body{padding:12px 8px}.showcase{border-radius:var(--radius-lg)}.race-tab,.race-tab:first-child,.race-tab:last-child{border-radius:var(--radius-sm)}.page-header{padding:14px 16px}.class-name-text,.page-title{font-size:1.5rem}.page-subtitle{font-size:.75rem}.lang-toggle,.pent-label strong{font-size:.7rem}.lang-toggle{right:10px;padding:5px 10px}.race-tabs{gap:2px;padding:8px 10px;overflow-x:auto;justify-content:flex-start}.race-tab{padding:8px 14px;font-size:.75rem;flex-shrink:0}.character-bg,.race-content{flex-direction:column;min-height:auto}.class-selector{flex-direction:row;gap:6px;padding:10px 12px;overflow-x:auto;order:-1}.class-slot{width:48px;height:48px}.character-bg{display:flex;position:relative;z-index:0;padding:0}.class-name-overlay{transform:none;z-index:4;text-align:center;padding:14px 10px 8px;order:0}.class-name-sub{font-size:.8rem}.character-bg::before{position:relative;display:block;content:'';width:100%;height:300px;background-size:contain;background-position:center center;background-repeat:no-repeat;order:1;z-index:0}.character-bg-inner{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px 12px;order:2;z-index:3;position:relative}.pentagon-container{width:180px;height:180px;flex-shrink:0}.class-info{right:auto;width:100%;max-width:400px;padding:14px 16px}.class-info-grid{flex-direction:column;gap:8px}.info-item{font-size:.78rem}.info-label{min-width:70px}.pent-label{font-size:.5rem}}@media (max-width:600px){body{padding:4px}.page-title{font-size:1.2rem}.race-tab{padding:7px 10px;font-size:.7rem}.class-slot{width:42px;height:42px;border-radius:4px}.class-name-text{font-size:1.3rem}.character-bg::before{height:240px}.character-bg-inner{gap:10px;padding:12px 8px}.pentagon-container{width:150px;height:150px}.class-info{max-width:100%}.pent-label{font-size:.45rem}.pent-label strong{font-size:.6rem}.info-item{font-size:.7rem}.info-label{min-width:60px}}@media (max-width:400px){.class-name-text,.page-title{font-size:1.1rem}.race-tab{padding:6px 8px;font-size:.65rem}.class-slot{width:36px;height:36px}.character-bg::before{height:200px}.character-bg-inner{gap:8px;padding:10px 6px}.pentagon-container{width:130px;height:130px}.pent-label{font-size:.38rem}.pent-label strong{font-size:.5rem}.info-item{font-size:.65rem}.info-label{min-width:50px}}