:root { color-scheme: dark; font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #d9e2f5; background: #121827; }
* { box-sizing: border-box; }
body { margin: 0; }
button, select { font: inherit; }
a { color: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #9cafef; outline-offset: 3px; }
.viewer-header { display: flex; align-items: center; gap: 28px; border-bottom: 1px solid #2d374e; padding: 19px 28px; }
.viewer-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 700; white-space: nowrap; }
.viewer-brand > span { background: #4261ed; border-radius: 8px; padding: 7px; font-family: monospace; }
h1 { font-size: 1rem; font-weight: 500; margin: 0; padding-left: 28px; border-left: 1px solid #3c455a; }
.back-link { margin-left: auto; font-size: .875rem; text-underline-offset: 4px; color: #b6c5eb; }
.update-toolbar { padding: 18px 28px 10px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.update-toolbar > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .875rem; }
.sync-indicator { width: 8px; height: 8px; border-radius: 50%; background: #8291b0; }
.sync-indicator.connected { background: #9dd6ab; }
.sync-indicator.error { background: #edb77c; }
.version-label { color: #a1aeca; font-family: monospace; font-size: .75rem; margin-left: 5px; }
#refresh-source { border: 1px solid #3a4865; padding: 9px 13px; background: #1b253b; color: #cedbfa; border-radius: 7px; font-size: .875rem; white-space: nowrap; }
#refresh-source:hover { background: #283654; }
#refresh-source:disabled { opacity: .65; cursor: progress; }
.viewer-intro { margin: 0; padding: 0 28px 20px; color: #aab7d0; font-size: .875rem; line-height: 1.6; }
.live-workspace { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, .85fr); margin: 0 20px; gap: 18px; }
.source-panel { background: #111725; border: 1px solid #34415c; border-radius: 12px; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.source-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 18px; background: #1d2639; }
.source-tools label { font-size: .875rem; color: #aab7d0; }
.source-tools select { padding: 8px 30px 8px 10px; border: 1px solid #455475; border-radius: 6px; color: #e2e9fc; background: #152038; font: .9375rem ui-monospace, SFMono-Regular, Menlo, monospace; max-width: 100%; }
.language-label { font-size: .75rem; color: #b8c8ef; margin-left: auto; }
.file-purpose { padding: 13px 18px; margin: 0; background: #192234; border-top: 1px solid #34415c; border-bottom: 1px solid #34415c; font-size: .875rem; line-height: 1.5; color: #b6c3df; min-height: 49px; }
.source-scroll { height: min(65vh, 740px); min-height: 330px; overflow: auto; scrollbar-color: #44526e #141c2d; }
.source-scroll pre { margin: 0; padding: 17px 0; min-width: 100%; width: max-content; tab-size: 2; font: .875rem/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.source-row { display: block; padding-right: 22px; }
.source-row .line-no { display: inline-block; width: 55px; padding-right: 16px; text-align: right; color: #8190ae; user-select: none; }
.source-row.changed { background: #2c4739; border-left: 3px solid #a5dbb3; }
.source-row.changed .line-no { width: 52px; }
.source-bottom { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; border-top: 1px solid #34415c; padding: 11px 17px; font-size: .75rem; color: #a7b7d4; }
.preview-panel { border-radius: 12px; background: #f3f5f9; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.preview-heading { background: #e9edf5; display: flex; justify-content: space-between; gap: 12px; padding: 19px 20px; align-items: center; border-bottom: 1px solid #d8dfec; color: #36445f; flex-wrap: wrap; }
.preview-heading h2 { font-size: .9375rem; margin: 0; font-weight: 600; }
.preview-heading span { font-size: .75rem; color: #5e6d86; }
iframe { border: 0; width: 100%; flex: 1; min-height: 520px; display: block; background: #f3f5f9; }
.hosting-note { display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 19px 28px 24px; font-size: .8125rem; color: #9eacc6; line-height: 1.7; }
.hosting-note strong { font-weight: 500; color: #c5d1e7; }
.mobile-views { display: none; }
@media (max-width: 900px) {
  .viewer-header { gap: 17px; padding: 16px 20px; }
  h1 { padding-left: 17px; }
  .live-workspace { grid-template-columns: minmax(0, 1fr); margin: 0 16px; }
  .mobile-views { display: flex; gap: 8px; margin: 0 16px 14px; }
  .mobile-views button { flex: 1; padding: 11px; border: 1px solid #3b4965; color: #c5d2ee; background: #1c263b; border-radius: 7px; }
  .mobile-views button[aria-pressed=true] { color: white; background: #3856dc; border-color: #5674f5; }
  .live-workspace[data-view=code] .preview-panel, .live-workspace[data-view=preview] .source-panel { display: none; }
  .source-scroll { height: 60vh; }
  iframe { height: 68vh; flex: auto; }
  .update-toolbar { padding: 17px 20px 10px; }
  .viewer-intro { padding: 0 20px 16px; }
  .hosting-note { padding: 18px 20px; }
}
@media (max-width: 560px) {
  .viewer-header { flex-wrap: wrap; gap: 12px; }
  h1 { order: 3; flex-basis: 100%; border: none; padding-left: 0; }
  .update-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .source-tools { padding: 12px; gap: 8px; }
  .file-purpose { padding: 12px; }
  .language-label { margin-left: 0; }
  .source-row .line-no { width: 42px; padding-right: 12px; }
  .source-row.changed .line-no { width: 39px; }
}