/* NovelAI V5 Portfolio — shared stylesheet (owned by brain; build agents must not edit) */
*{box-sizing:border-box}
body{margin:0;padding:0 0 40px;background:#12101a;color:#eae6f2;font-family:'Segoe UI','Hiragino Sans','Meiryo',sans-serif;line-height:1.6}
a{color:#c9a6ff}
h1{font-size:26px;margin:18px 0 6px}
h2{font-size:20px;color:#e0c8ff;margin:26px 0 8px}
.wrap{max-width:1240px;margin:0 auto;padding:0 18px}
.topnav{position:sticky;top:0;z-index:20;display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:#1b1626ee;backdrop-filter:blur(6px);border-bottom:1px solid #3a2f4a;padding:10px 18px}
.topnav a{background:#2a2038;border:1px solid #4a3a5a;color:#d9c8f5;padding:6px 12px;border-radius:7px;font-size:13px;text-decoration:none}
.topnav a:hover{background:#3a2560}
.topnav a.nsfw{border-color:#7a3a4a;color:#ffb3c0}
.lead{color:#b9a9d0;font-size:14px;margin:4px 0 14px}
.stats{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 18px}
.stats span{background:#241a30;border:1px solid #4a3a5a;border-radius:999px;padding:5px 14px;font-size:12.5px;color:#d9c8f5}
.section{border:1px solid #3a2f4a;border-radius:12px;background:#181320;padding:16px 18px;margin:0 0 22px}
.section .desc{font-size:13px;color:#b9a9d0;margin:2px 0 10px}
.strip{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px}
.strip img{height:220px;width:auto;border-radius:8px;background:#000;cursor:zoom-in;border:1px solid #2a2338;flex:0 0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.grid figure{margin:0;background:#141020;border:1px solid #2a2338;border-radius:10px;overflow:hidden}
.grid img{width:100%;height:auto;display:block;cursor:zoom-in}
.grid figcaption{font-size:12px;color:#b9a9d0;padding:7px 10px}
.compare{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.compare figure{flex:1 1 180px;margin:0;text-align:center}
.compare img{width:100%;height:auto;border-radius:8px;cursor:zoom-in;border:1px solid #2a2338}
.compare figcaption{font-size:12px;color:#c9a6ff;padding-top:5px}
.btn{display:inline-block;background:#7a4fd6;color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;text-decoration:none;font-weight:bold;border:0;cursor:pointer}
.btn:hover{background:#8f66e6}
.btn.ghost{background:transparent;border:1px solid #7a4fd6;color:#c9a6ff}
.btn.danger{background:#8a2f45}
footer{margin:34px auto 0;max-width:1240px;padding:14px 18px 0;border-top:1px solid #2a2338;font-size:12px;color:#8a7fa0}
#langbtn{position:fixed;top:10px;right:12px;z-index:60;background:#2a2038;color:#d9c8f5;border:1px solid #6a5a8a;border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer}
#lb{position:fixed;inset:0;background:rgba(0,0,0,.96);display:none;align-items:center;justify-content:center;z-index:50;cursor:zoom-out}
#lb img{max-width:96vw;max-height:96vh;object-fit:contain}
.gate{max-width:560px;margin:12vh auto;text-align:center;border:1px solid #7a3a4a;border-radius:14px;background:#1d1420;padding:34px 26px}
.gate h1{color:#ffb3c0}
.gate p{color:#c9a9b5;font-size:14px}
.gate .row{display:flex;gap:14px;justify-content:center;margin-top:22px}
@media(max-width:700px){.strip img{height:150px}h1{font-size:21px}}