/* Reset (tiny) */
*{box-sizing:border-box} html,body{height:100%} body{margin:0;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
button{font:inherit}

/* Background + overlays */
.bg{background:#0a0a0a url('/assets/bg/noise-tiling.png') repeat}
.noise,.scanlines{position:fixed;inset:0;pointer-events:none}
.noise{opacity:.08;mix-blend-mode:overlay;background:url('/assets/bg/static.gif') repeat}
.scanlines{background:linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,.15) 50%);
  background-size:100% 2px; opacity:.2}

/* Splash */
.splash{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse at center,#111 0%,#000 70%)}
.splash-inner{text-align:center;color:#f0f0f0;letter-spacing:.08em}
.splash .mark{width:90px;margin:0 auto 18px}
.splash h1{margin:0 0 6px;font-weight:800}
.splash .tag{opacity:.8;margin:0 0 20px}
.splash .sys{opacity:.5;margin-top:16px;font-size:12px}
.btn.enter{padding:10px 22px;border:1px solid #aaa;border-radius:999px;background:linear-gradient(#1d1d1d,#101010);color:#eaeaea}
.btn.enter:hover{filter:brightness(1.2)}

/* Stage */
.stage{position:fixed;inset:0;display:grid;grid-template-rows:auto 1fr auto;max-width:100vw;opacity:0;transition:opacity .8s ease}
.stage[aria-hidden="false"]{opacity:1}
.topbar{display:grid;grid-template-columns:200px 1fr 90px;align-items:center;gap:16px;
  padding:10px 14px;border-bottom:1px solid #303030;background:
  linear-gradient(#1b1b1b,#141414); box-shadow: inset 0 1px #3a3a3a}
.logo img{height:22px;filter:contrast(1.1) brightness(.95)}
.tabs{display:flex;gap:8px}
.tab{padding:8px 12px;border:1px solid #2a2a2a;border-radius:4px;background:linear-gradient(#202020,#111);color:#ddd;letter-spacing:.06em}
.tab:hover{color:#fff;border-color:#3b3b3b}
.tab.is-active{background:linear-gradient(#303030,#1a1a1a);border-color:#555;color:#fff;box-shadow:inset 0 0 0 1px #000}

.syslights{display:flex;gap:6px;justify-self:end}
.dot{width:8px;height:8px;border-radius:50%;background:#333;box-shadow:0 0 8px #000 inset}
.dot.on{background:#4cff78;box-shadow:0 0 6px #3eff6a}

.viewport{position:relative;padding:14px;height:calc(100vh - 110px);max-width:1000px;margin:0 auto}
.panel{position:absolute;inset:14px;border:1px solid #2b2b2b;border-radius:6px;background:linear-gradient(#101010,#0d0d0d);
  color:#d8d8d8;display:none;overflow:hidden;box-shadow:0 0 0 1px #000 inset, 0 8px 22px rgba(0,0,0,.6)}
.panel.is-visible{display:block}
.panel-inner{padding:18px 18px 22px}
.scroll{overflow:auto}

h2{margin:0 0 10px;font-weight:800;letter-spacing:.1em}

/* Lists / gallery */
.list{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
.list-item{padding:8px 12px;border:1px solid #2a2a2a;border-radius:4px;background:#161616;color:#e8e8e8}
.list-item:hover{border-color:#444}
.player{margin-top:8px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid figure{border:1px solid #2a2a2a;background:#111;border-radius:6px;overflow:hidden}
.grid figcaption{padding:6px 8px;font-size:12px;color:#aaa}

.home-links{list-style:none;padding:0;margin:14px 0;display:flex;gap:16px}
.home-links a{border-bottom:1px dashed #777}
.home-links a:hover{color:#fff;border-bottom-color:#fff}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:14px;line-height:1.5}

/* Statusbar */
.statusbar{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;color:#9b9b9b;border-top:1px solid #2d2d2d;background:#0c0c0c}

/* Popups (draggable, resizable) */
.popup{position:absolute;top:100px;left:100px;width:380px;min-width:220px;min-height:140px;border:1px solid #2c2c2c;border-radius:6px;background:#0f0f0f;color:#e0e0e0;
  box-shadow:0 12px 26px rgba(0,0,0,.6)}
.popup-titlebar{cursor:move;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:linear-gradient(#232323,#171717);border-bottom:1px solid #2a2a2a}
.popup .title{font-weight:700;letter-spacing:.08em}
.popup .close{background:none;border:0;color:#bbb;font-size:18px;line-height:1;padding:2px 6px;border-radius:4px}
.popup .close:hover{background:#1b1b1b;color:#fff}
.popup-body{padding:12px 12px 16px}
.popup-resize{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;background:
  linear-gradient(135deg, transparent 50%, #333 50%);opacity:.5}

/* Small screens (allow scrolling the whole stage) */
@media (max-width: 1060px){
  .viewport{height:auto}
  .panel{position:relative;inset:auto;margin-top:14px}
  .grid{grid-template-columns:repeat(2,1fr)}
}