:root {
  color-scheme: dark;
  --bg: #07111f;
  --panel: #0b1828;
  --line: rgba(133, 176, 202, .16);
  --text: #e9f2f8;
  --muted: #89a2b7;
  --accent: #54d4df;
  --green: #54d6a2;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
.lab-shell { width: 100%; height: 100%; display: grid; grid-template-rows: 68px minmax(0, 1fr) 34px; background: #07111f; }
.topbar {
  z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  background: rgba(8, 20, 34, .98); border-bottom: 1px solid var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.16);
}
.brand { display: flex; align-items: center; min-width: 0; gap: 13px; }
.brand-mark { position: relative; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid rgba(84,212,223,.45); border-radius: 10px; transform: rotate(45deg); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--accent); border-radius: 4px; }
.brand-mark::after { inset: 13px; background: var(--accent); border: 0; box-shadow: 0 0 14px rgba(84,212,223,.55); }
.brand-copy { min-width: 0; }
.brand-name { font-size: 16px; font-weight: 650; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { margin-top: 4px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.topbar-actions { display: flex; align-items: center; gap: 20px; margin-left: 20px; }
.system-state { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.state-dot, .runtime-dot { width: 6px; height: 6px; border-radius: 50%; background: #e9b654; box-shadow: 0 0 10px rgba(233,182,84,.45); }
body.is-ready .state-dot { background: var(--green); box-shadow: 0 0 10px rgba(84,214,162,.5); }
.icon-button { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #b7cad8; background: #102236; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: .18s ease; }
.icon-button:hover { color: white; border-color: rgba(84,212,223,.42); background: #143049; }
.fullscreen-icon { width: 12px; height: 12px; border: 1px solid currentColor; border-radius: 1px; }
.button-label { font-size: 12px; }
.viewport { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle at 45% 40%, #142a3d 0%, #091726 48%, #06101c 100%); }
.viewport::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: linear-gradient(rgba(96,161,188,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(96,161,188,.12) 1px, transparent 1px); background-size: 44px 44px; }
#gameContainer { position: absolute; inset: 0; }
#gameContainer canvas { display: block; width: 100% !important; height: 100% !important; outline: none; }
.loading-layer { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(18,47,65,.96), rgba(5,15,27,.99) 68%); transition: opacity .5s ease, visibility .5s ease; }
.loading-layer.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-card { width: min(480px, calc(100vw - 48px)); padding: 40px 42px 34px; text-align: center; background: rgba(10,28,45,.76); border: 1px solid rgba(108,178,199,.18); border-radius: 20px; box-shadow: 0 28px 80px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.03); backdrop-filter: blur(16px); }
.loading-emblem { position: relative; width: 68px; height: 68px; margin: 0 auto 25px; border: 1px solid rgba(84,212,223,.25); border-radius: 50%; animation: breathe 2.4s ease-in-out infinite; }
.loading-emblem::before, .loading-emblem::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(84,212,223,.45); }
.loading-emblem::before { inset: 9px; border-left-color: transparent; animation: spin 3s linear infinite; }
.loading-emblem::after { inset: 22px; background: rgba(84,212,223,.14); border-color: var(--accent); box-shadow: 0 0 24px rgba(84,212,223,.22); }
.loading-emblem span, .loading-emblem i, .loading-emblem b { position: absolute; z-index: 2; left: 31px; top: 17px; width: 5px; height: 34px; border-radius: 4px; background: var(--accent); transform-origin: center; }
.loading-emblem i { transform: rotate(60deg); opacity: .72; }
.loading-emblem b { transform: rotate(-60deg); opacity: .4; }
.eyebrow { color: var(--accent); font-size: 10px; letter-spacing: .28em; }
.loading-card h1 { margin: 12px 0 10px; font-size: 25px; font-weight: 600; letter-spacing: .05em; }
.loading-intro { margin: 0 0 30px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.progress-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; color: #a9bdcc; font-size: 11px; }
.progress-meta strong { color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.loading-track { height: 5px; overflow: hidden; background: #071522; border-radius: 5px; }
.loading-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #248fa5, #63e0d5); box-shadow: 0 0 16px rgba(84,212,223,.45); transition: width .25s ease; }
.loading-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 20px; color: #6f8ca3; font-size: 10px; }
.pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.loading-foot { margin-top: 24px; color: #5d7a90; font-size: 10px; letter-spacing: .14em; }
.statusbar { z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: #69849a; background: #081422; border-top: 1px solid var(--line); font-size: 10px; letter-spacing: .03em; }
.interaction-hints { display: flex; gap: 22px; }
.hint-separator { padding: 0 6px; color: #3e5d73; }
.runtime-label { display: flex; align-items: center; white-space: nowrap; }
.runtime-dot { margin-right: 7px; background: var(--green); box-shadow: none; }
.fatal-message { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: #07111f; color: white; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.04); } }
@keyframes pulse { 50% { opacity: .25; } }
@media (max-width: 760px) {
  .lab-shell { grid-template-rows: 58px minmax(0, 1fr) 28px; }
  .topbar { padding: 0 14px; }
  .brand-name { max-width: 52vw; font-size: 13px; }
  .brand-sub, .system-state, .button-label, .interaction-hints { display: none; }
  .topbar-actions { gap: 8px; margin-left: 8px; }
  .statusbar { justify-content: center; padding: 0 12px; }
  .loading-card { padding: 30px 24px 26px; }
  .loading-card h1 { font-size: 21px; }
  .loading-foot { text-align: center; line-height: 1.8; }
}