::-webkit-scrollbar{width:var(--v);height:9px}
::-webkit-scrollbar-track{background:rgba(150,150,150,0.2);border-radius:15px}
::-webkit-scrollbar-thumb{background:rgba(150,150,150,0.3);border-radius:15px}
::-webkit-scrollbar-thumb:hover{background:rgba(150,150,150,0.4)}
::-webkit-scrollbar-thumb:active{background:rgba(150,150,150,0.5)}
@font-face{font-family:t;src:url('t.woff2') format('woff2')}


body{margin:0;font-family:t;overflow:hidden}
h1{margin:0}
header {position:fixed;top:0; left:0; right:0;height:60px;background:#0077b6;color:white;display:flex;align-items:center;padding:0 20px;z-index:1000}
header .logo { height:50px; width:auto; margin-right:20px; object-fit:contain; }
header a{user-select:none;cursor:pointer;color:white;text-decoration:none;margin-right:15px;font-weight:bold;padding:4px 8px;border-radius:4px;transition:background 0.3s}
header a:hover { background:#00b4d8; }
footer{position:fixed;bottom:0;left:0;right:0;height:40px;background:#359;color:white;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:1000}
footer p{margin:0 20px}
footer a{color:#bcf}
#c{position:absolute;top:60px;bottom:40px;left:0;right:0;overflow-y:auto;padding:20px 10px;background:#f5f5f5;pointerEvents:auto}
#c.h{pointer-events:none}
.section img{max-width:100%;height:auto;margin:10px 0;border-radius:6px;box-shadow:0 2px 5px rgba(0,0,0,0.2)}
#o{position:fixed;top:0; left:0; right:0; bottom:0;background:rgba(0,0,0,0.85);color:white;font-size:1.2em;text-align:center;z-index:9999;flex-direction:column;justify-content:center;align-items:center;pointerEvents:auto}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
#o .spinner{font-size:50px;animation:spin 2s linear infinite;margin-bottom:20px}
#h.h,#c.h,#f.h,#o{display:none}
#o.h{display:flex}
