:root{--color-bg: #0f0f14;--color-surface: #1a1a24;--color-surface-hover: #22222e;--color-border: #2a2a3a;--color-text: #e8e8f0;--color-text-muted: #8888a0;--color-accent: #6c8cff;--color-accent-hover: #8aa4ff;--radius: 8px;--max-width: 1200px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}a{color:var(--color-accent);text-decoration:none;transition:color .2s}a:hover{color:var(--color-accent-hover)}img{max-width:100%;height:auto;display:block}.site-header{position:sticky;top:0;z-index:100;background:var(--color-surface);border-bottom:1px solid var(--color-border);backdrop-filter:blur(12px)}.site-header nav{max-width:var(--max-width);margin:0 auto;padding:.75rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.site-header .logo{font-size:1.2rem;font-weight:700;color:var(--color-text)}.site-header .nav-links{display:flex;gap:1.5rem}.site-header .nav-links a{color:var(--color-text-muted);font-size:.9rem}.site-header .nav-links a:hover{color:var(--color-text)}main{max-width:var(--max-width);margin:0 auto;padding:2rem 1.5rem}footer{max-width:var(--max-width);margin:0 auto;padding:2rem 1.5rem;text-align:center;color:var(--color-text-muted);font-size:.8rem;border-top:1px solid var(--color-border)}.page-title{font-size:2rem;font-weight:700;margin-bottom:1.5rem}.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem}.char-grid-sm{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.6rem}.char-grid-sm .char-card .name{font-size:.75rem;padding:.3rem .5rem}.char-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s}.char-card:hover{transform:translateY(-2px);border-color:var(--color-accent)}.char-card img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--color-bg)}.char-card .name{padding:.5rem .75rem;font-size:.85rem;text-align:center;color:var(--color-text)}.section-title{font-size:1.4rem;font-weight:600;margin:2rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--color-border)}.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}.gallery-item{border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s}.gallery-item:hover{transform:scale(1.02)}.gallery-item img{width:100%;aspect-ratio:auto;object-fit:contain;background:var(--color-surface);border-radius:var(--radius)}.audio-list{display:flex;flex-direction:column;gap:.5rem}.audio-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}.audio-item .audio-name{flex:1;font-size:.9rem;color:var(--color-text-muted)}.audio-item audio{height:32px;flex-shrink:0}.dialog-section{margin-top:1rem}.dialog-entry{padding:.75rem 1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:.5rem}.dialog-entry .speaker{font-weight:600;color:var(--color-accent);font-size:.85rem;margin-bottom:.25rem}.dialog-entry .text{font-size:.9rem;color:var(--color-text)}.char-header{display:flex;gap:2rem;margin-bottom:2rem;align-items:flex-start}.char-header .portrait{width:200px;flex-shrink:0;border-radius:var(--radius);border:1px solid var(--color-border)}.char-header .info{flex:1}.char-header .info h1{font-size:2rem;margin-bottom:.5rem}.char-header .info .char-id{color:var(--color-text-muted);font-size:.9rem;margin-bottom:1rem}.char-header .info .description{color:var(--color-text);line-height:1.8}.tabs{display:flex;gap:0;border-bottom:1px solid var(--color-border);margin-bottom:1.5rem}.tab{padding:.75rem 1.5rem;cursor:pointer;color:var(--color-text-muted);border-bottom:2px solid transparent;transition:all .2s;font-size:.9rem}.tab:hover{color:var(--color-text)}.tab.active{color:var(--color-accent);border-bottom-color:var(--color-accent)}.tab-content{display:none}.tab-content.active{display:block}.skills-section{display:flex;flex-direction:column;gap:1.5rem}.skill-group{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1rem 1.25rem}.skill-rarity{font-size:1rem;font-weight:600;color:var(--color-accent);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--color-border)}.skill-list{display:flex;flex-direction:column;gap:.5rem}.skill-item{display:flex;gap:.75rem;padding:.5rem 0;align-items:baseline}.skill-type{flex-shrink:0;font-size:.8rem;font-weight:600;color:var(--color-text-muted);background:var(--color-bg);padding:.2rem .5rem;border-radius:4px;min-width:3rem;text-align:center}.skill-desc{font-size:.9rem;color:var(--color-text);line-height:1.6}@media(max-width:768px){.char-header{flex-direction:column;align-items:center;text-align:center}.char-header .portrait{width:150px}.gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.char-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
