/* Weightless web — VSCode dark-theme variable shim + landing styles.
 * The viewer (main.js/style.css) is reused verbatim from the extension;
 * these variables stand in for the ones VSCode injects. */
:root {
  --vscode-font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
  --vscode-font-size: 13px;
  --vscode-foreground: #cccccc;
  --vscode-editor-background: #1e1e1e;
  --vscode-panel-border: #3c3c3c;
  --vscode-editorWidget-background: #252526;
  --vscode-badge-background: #4d4d4d;
  --vscode-badge-foreground: #ffffff;
  --vscode-focusBorder: #007fd4;
  --vscode-progressBar-background: #0e70c0;
  --vscode-list-hoverBackground: #2a2d2e;
  --vscode-list-activeSelectionBackground: #094771;
  --vscode-input-background: #3c3c3c;
  --vscode-input-foreground: #cccccc;
  --vscode-input-border: #3c3c3c;
  --vscode-textLink-foreground: #3794ff;
  --vscode-descriptionForeground: #9d9d9d;
  --vscode-textCodeBlock-background: #0a0a0a;
  --vscode-button-secondaryBackground: #3a3d41;
  --vscode-button-secondaryForeground: #ffffff;
  --vscode-button-secondaryHoverBackground: #45494e;
  --vscode-toolbar-hoverBackground: #383a3d;
  --vscode-errorForeground: #f48771;
  --vscode-editor-font-family: 'SF Mono', Menlo, Consolas, monospace;
}
html, body { margin: 0; background: var(--vscode-editor-background); }
.hidden { display: none !important; }

/* top bar (shown once a model is open) */
#topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; border-bottom: 1px solid var(--vscode-panel-border);
  position: sticky; top: 0; background: var(--vscode-editor-background); z-index: 10;
}
#topbar .brand { font-weight: 700; color: var(--vscode-foreground); }
#topbar .topspacer { flex: 1; }
#topbar .toplink { color: var(--vscode-textLink-foreground); font-size: 12.5px; text-decoration: none; }
#topbar .toplink:hover { text-decoration: underline; }

/* hero */
#hero {
  max-width: 760px; margin: 0 auto; padding: 9vh 24px 40px;
  text-align: center; color: var(--vscode-foreground);
  font-family: var(--vscode-font-family);
}
.hero-icon { border-radius: 20px; box-shadow: 0 8px 32px rgba(34, 211, 238, 0.18); }
#hero h1 { font-size: 44px; margin: 18px 0 8px; letter-spacing: -0.5px; }
#hero .tag { font-size: 16.5px; line-height: 1.6; opacity: 0.85; margin: 0 auto 30px; max-width: 620px; }
#hero .tag code { background: rgba(127,127,127,0.18); padding: 1px 6px; border-radius: 5px; font-size: 14px; }

.hub-row { display: flex; gap: 10px; max-width: 640px; margin: 0 auto 16px; }
#hubid {
  flex: 1; padding: 12px 16px; border-radius: 9px; font-size: 14px;
  background: var(--vscode-input-background); color: var(--vscode-input-foreground);
  border: 1px solid var(--vscode-panel-border); outline: none;
}
#hubid:focus { border-color: var(--vscode-focusBorder); }
.cta {
  padding: 12px 26px; border-radius: 9px; border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #0e70c0);
}
.cta:hover { filter: brightness(1.12); }
.cta:disabled { opacity: 0.6; cursor: wait; }

#drop {
  max-width: 640px; margin: 0 auto; padding: 26px 20px; font-size: 13px; opacity: 0.75;
  border: 2px dashed var(--vscode-panel-border); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
#drop.over, #drop:hover { border-color: #22d3ee; background: rgba(34,211,238,0.06); opacity: 1; }
#drop code { background: rgba(127,127,127,0.18); padding: 0 5px; border-radius: 4px; }

#hero-err {
  max-width: 640px; margin: 16px auto 0; padding: 10px 14px; border-radius: 8px;
  color: var(--vscode-errorForeground); background: rgba(244,135,113,0.10);
  border: 1px solid rgba(244,135,113,0.35); font-size: 13px; text-align: left;
}
.try { margin-top: 22px; font-size: 13px; opacity: 0.75; }
.try a, .links a { color: var(--vscode-textLink-foreground); text-decoration: none; }
.try a:hover, .links a:hover { text-decoration: underline; }
.links { margin-top: 26px; font-size: 12.5px; opacity: 0.7; }