/* Shared styles for the lesson demos: live-drawn scene layer, lesson card, maths page. */
.kit-view { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; overflow: hidden; background: #151515; }

/* the page section around it */
.big-demo { max-width: 1160px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .big-demo { grid-template-columns: minmax(0, 1fr); } }
.lesson-card { padding: 22px; display: grid; gap: 14px; position: sticky; top: 96px; }
.lesson-card h3 { font-size: 22px; }
.lesson { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: l; opacity: 0; transition: opacity .6s; }
.lesson.show { opacity: 1; }
.lesson li { counter-increment: l; position: relative; padding: 11px 12px 11px 46px; border-radius: 12px; background: rgba(255, 255, 255, .55); border: 1px solid #fff; color: var(--ink-2); font-size: 15.5px; transition: background .35s, color .35s, transform .45s var(--spring); }
.lesson li::before { content: counter(l); position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 24px; height: 24px; border-radius: 50%; background: rgba(20, 20, 43, .12); color: var(--ink); font: 600 12px/24px var(--font-mono); text-align: center; }
.lesson li.on { background: #fff; color: var(--ink); transform: translateX(4px); box-shadow: 0 10px 24px -12px rgba(79, 91, 255, .5); }
.lesson li.on::before { background: var(--accent); color: #fff; }
.lesson li.done { color: var(--ink); }
.lesson li.done::before { content: "✓"; background: #1f9d6b; color: #fff; }
.chip.ok { background: #1a7f55; }
.demo-cursor[data-carry]::after { content: attr(data-carry); position: absolute; left: 22px; top: 18px; padding: 4px 9px; border-radius: 6px; background: rgba(45, 140, 235, .95); color: #fff; font: 600 11px/1 var(--font-body); white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); }

/* CapCut demo: screens are 1440x679 and crossfade between states */
.cc-demo .mac-screen .demo-stage { aspect-ratio: 1440 / 679; }
.kit-img.b { opacity: 0; transition: opacity .3s ease; }
.kit-img.b.on { opacity: 1; }

.ln-demo .mac-screen .demo-stage { aspect-ratio: 1512 / 945; }
.ln-demo .lesson li { font-size: 14.5px; }

.kit-view[hidden], .kit-img[hidden] { display: none; }

/* ---------- maths page (MathML, vector-sharp) ---------- */
.mt { position: absolute; inset: 0; width: 1440px; height: 900px; background: #e9e8e4; color: #1b1b1f; font-family: Inter, system-ui, sans-serif; overflow: hidden; }
.mt-bar { position: absolute; left: 0; top: 0; width: 1440px; height: 44px; background: #f3f2ee; border-bottom: 1px solid #d6d4cd; text-align: center; font: 600 15px/44px Inter, system-ui, sans-serif; color: #55534d; }
.mt-bar i { position: absolute; top: 15px; width: 14px; height: 14px; border-radius: 50%; } .mt-bar .r { left: 18px; background: #ff5f57; } .mt-bar .y { left: 42px; background: #febc2e; } .mt-bar .g { left: 66px; background: #28c840; }
.mt-page { position: absolute; left: 70px; top: 84px; width: 840px; height: 780px; background: #fffefb; border-radius: 6px; box-shadow: 0 2px 18px rgba(0, 0, 0, .12); padding: 54px 60px; }
.mt-row { display: flex; align-items: center; gap: 30px; min-height: 112px; }
.mt-row em { width: 90px; flex: none; font: 600 14px/1.2 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #8d8a80; font-style: normal; }
.mt-row > span { display: inline-block; padding: 4px 8px; }
.mt math { font-family: "Latin Modern Math", "STIX Two Math", "Cambria Math", math, serif; font-size: 44px; color: #1b1b1f; }
.mt-side { position: absolute; left: 950px; top: 84px; width: 420px; height: 780px; background: #fffefb; border-radius: 6px; box-shadow: 0 2px 18px rgba(0, 0, 0, .12); padding: 30px; }
.mt-side b { display: block; font: 600 15px/1.2 Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #8d8a80; margin-bottom: 20px; }
.mt-board { position: relative; width: 360px; height: 360px; margin: 30px auto 0; background-image: radial-gradient(#d8d5cc 1.4px, transparent 1.6px); background-size: 24px 24px; border-radius: 6px; }
.mt-board i { position: absolute; font: italic 500 26px/1 "Latin Modern Math", "STIX Two Math", "Cambria Math", serif; color: #55534d; opacity: 0; transition: opacity .5s; }
.mt .lx { right: 6px; bottom: 6px; } .mt .ly { left: 20px; top: 2px; } .mt .lr { left: 160px; top: 160px; } .mt .lt { left: 62px; top: 280px; }
.mt.labels .mt-board i { opacity: 1; }

/* ---------- mail demo (live HTML, public/js/mail.js) ---------- */
.ml { position: absolute; inset: 0; width: 1440px; height: 900px; background: #f6f6f4; color: #1b1b1f; font-family: Inter, system-ui, sans-serif; overflow: hidden; }
.ml-bar { position: absolute; left: 0; top: 0; width: 1440px; height: 52px; background: #ececea; border-bottom: 1px solid #d6d4cd; text-align: center; font: 600 16px/52px Inter, system-ui, sans-serif; color: #55534d; }
.ml-bar i { position: absolute; top: 19px; width: 14px; height: 14px; border-radius: 50%; } .ml-bar .r { left: 18px; background: #ff5f57; } .ml-bar .y { left: 42px; background: #febc2e; } .ml-bar .g { left: 66px; background: #28c840; }
.ml-list { position: absolute; left: 0; top: 52px; bottom: 0; width: 460px; background: #fbfbf9; border-right: 1px solid #deddd7; }
.ml-row { position: relative; height: 124px; padding: 0 24px; display: grid; grid-template-columns: 1fr auto; align-content: center; row-gap: 4px; border-bottom: 1px solid #e8e7e1; }
.ml-row b { font: 700 20px/1.2 Inter, system-ui, sans-serif; } .ml-row time { font: 400 15px/1.2 Inter, system-ui, sans-serif; color: #8d8a80; }
.ml-row span { grid-column: 1 / 3; font: 500 18px/1.2 Inter, system-ui, sans-serif; } .ml-row small { grid-column: 1 / 3; font: 400 15px/1.3 Inter, system-ui, sans-serif; color: #77746b; }
.ml-row.on { background: #dde8fb; }
.ml-tag { position: absolute; right: 20px; bottom: 14px; padding: 3px 9px; border-radius: 6px; font: 600 13px/1.3 Inter, system-ui, sans-serif; } .ml-tag:empty { display: none; }
.ml-row.done .ml-tag { background: #dff3e5; color: #1f7a3d; } .ml-row.flag .ml-tag { background: #fde7d6; color: #a64b00; }
.ml-pane { position: absolute; left: 460px; top: 52px; right: 0; bottom: 0; padding: 36px 48px; }
.ml-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ml-from { display: block; font: 700 26px/1.2 Inter, system-ui, sans-serif; } .ml-subj { display: block; margin-top: 6px; font: 400 20px/1.3 Inter, system-ui, sans-serif; color: #55534d; }
.ml-btn { padding: 12px 28px; font: 600 18px/1 Inter, system-ui, sans-serif; border: 1px solid #c9c7bf; border-radius: 10px; background: #fff; color: #1b1b1f; }
.ml-body { margin: 30px 0 0; max-width: 760px; font: 400 20px/1.5 Inter, system-ui, sans-serif; color: #2a2a2e; }
.ml-compose { position: absolute; left: 48px; right: 48px; bottom: 40px; height: 400px; padding: 22px 28px; background: #fff; border: 1px solid #cfcdc5; border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(24px); transition: opacity .35s, transform .35s; pointer-events: none; }
.ml.composing .ml-compose { opacity: 1; transform: none; }
.ml-meta { display: flex; gap: 16px; padding: 8px 0; border-bottom: 1px solid #eceae4; font: 400 17px/1.3 Inter, system-ui, sans-serif; } .ml-meta span { width: 80px; color: #8d8a80; } .ml-meta u { text-decoration: none; }
.ml-draft { margin: 18px 0 0; min-height: 150px; font: 400 21px/1.55 Inter, system-ui, sans-serif; color: #1b1b1f; }
.ml.composing .ml-draft::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -3px; background: #2f6bf0; }
.ml-foot { position: absolute; left: 28px; bottom: 20px; display: flex; gap: 12px; }
.ml-send { padding: 12px 34px; border: 0; border-radius: 10px; background: #2f6bf0; color: #fff; font: 700 18px/1 Inter, system-ui, sans-serif; } .ml-discard { padding: 12px 24px; border: 0; background: transparent; color: #77746b; font: 600 18px/1 Inter, system-ui, sans-serif; }
.ml-sent { position: absolute; right: 48px; bottom: 60px; padding: 12px 22px; border-radius: 10px; background: #1f7a3d; color: #fff; font: 700 18px/1 Inter, system-ui, sans-serif; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.ml.sent .ml-sent { opacity: 1; transform: none; }

/* ---------- Gmail reply demo (live view over two kit screens, public/js/mail.js) ---------- */
.gm { position: absolute; inset: 0; width: 1440px; height: 900px; background: #fff; overflow: hidden; font-family: Roboto, Arial, sans-serif; color: #202124; }
.gm img { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; display: block; }
.gm .gm-b { opacity: 0; transition: opacity .3s; }
.gm.composing .gm-b { opacity: 1; } .gm.sent .gm-b { opacity: 0; }
.gp, .gc { position: absolute; background: #fff; }
.gp-sub { left: 312px; top: 126px; width: 236px; height: 36px; } .gp-sub b { font: 400 21px/36px Roboto, Arial, sans-serif; }
.gp-from { left: 316px; top: 187px; width: 300px; height: 22px; font: 400 12.5px/22px Roboto, Arial, sans-serif; } .gp-from b { font-weight: 700; } .gp-from span { color: #5f6368; }
.gp-body { left: 316px; top: 242px; width: 1040px; height: 38px; font: 400 12.8px/17px Roboto, Arial, sans-serif; padding-top: 2px; }
.gp-chips { left: 316px; top: 419px; width: 458px; height: 40px; display: flex; gap: 8px; align-items: center; }
.gp-chips i { font: 400 14px/1 Roboto, Arial, sans-serif; font-style: normal; color: #1a73e8; border: 1px solid #dadce0; border-radius: 16px; padding: 9px 15px; white-space: nowrap; }
.gm.sent .gp-chips { visibility: hidden; }
.gc { display: none; }
.gm.composing .gc { display: block; }
.gc-to { left: 790px; top: 338px; width: 480px; height: 24px; font: 400 13.5px/24px Roboto, Arial, sans-serif; padding-left: 2px; }
.gc-sub { left: 790px; top: 374px; width: 520px; height: 24px; font: 400 13.5px/24px Roboto, Arial, sans-serif; padding-left: 2px; }
.gc-draft { left: 790px; top: 408px; width: 560px; height: 150px; font: 400 14px/22px Roboto, Arial, sans-serif; padding: 3px 2px 0; }
.gm-draft { margin: 0; white-space: pre-wrap; }
.gm.composing .gm-draft::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: #202124; animation: blink 1s steps(1) infinite; }
.gm-reply { position: absolute; left: 264px; top: 296px; width: 1090px; display: flex; gap: 16px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.gm.sent .gm-reply { opacity: 1; transform: none; }
.gm-reply .av { width: 40px; height: 40px; border-radius: 50%; background: #e8eaed; display: grid; place-items: center; font: 500 13px/1 Roboto, Arial, sans-serif; color: #5f6368; flex: none; }
.gm-reply b { font: 700 12.5px/1.3 Roboto, Arial, sans-serif; } .gm-reply em { font: 400 12px/1.3 Roboto, Arial, sans-serif; font-style: normal; color: #5f6368; }
.gm-reply p { margin: 8px 0 0; font: 400 12.8px/17px Roboto, Arial, sans-serif; }
.gm-toast { position: absolute; left: 24px; top: 826px; padding: 14px 20px; border-radius: 4px; background: #323232; color: #fff; font: 400 14px/1.2 Roboto, Arial, sans-serif; display: flex; gap: 40px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.gm-toast u { color: #8ab4f8; text-decoration: none; font-weight: 500; }
.gm.sent .gm-toast { opacity: 1; transform: none; }
.gm-t { position: absolute; pointer-events: none; }
.gm-t[data-t="mailtext"] { left: 316px; top: 242px; width: 640px; height: 38px; }
.gm-t[data-t="replybtn"] { left: 318px; top: 503px; width: 104px; height: 37px; }
.gm-t[data-t="draft"] { left: 782px; top: 330px; width: 588px; height: 250px; }
.gm-t[data-t="sendbtn"] { left: 792px; top: 851px; width: 98px; height: 36px; }

/* ---------- VS Code demo: Git workflow (live HTML, public/js/vscode.js) ---------- */
.vs, .vs * { box-sizing: border-box; }
.vs { position: absolute; inset: 0; width: 1440px; height: 900px; background: #1e1e1e; color: #ccc; font-family: "Segoe UI", Inter, system-ui, sans-serif; overflow: hidden; }
.vs p, .vs h4 { margin: 0; }
.vs-title { position: absolute; left: 0; top: 0; right: 0; height: 32px; background: #3c3c3c; text-align: center; font: 400 13px/32px "Segoe UI", Inter, sans-serif; color: #cccccc; }
.vs-act { position: absolute; left: 0; top: 32px; bottom: 22px; width: 48px; background: #333; }
.vs-act i { position: relative; display: grid; place-items: center; width: 48px; height: 48px; color: #858585; }
.vs-act svg { width: 24px; height: 24px; }
.vs-act i.on { color: #fff; box-shadow: inset 2px 0 #fff; }
.vs-act s { position: absolute; right: 6px; bottom: 7px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #007acc; color: #fff; font: 600 10px/16px "Segoe UI", sans-serif; text-decoration: none; text-align: center; }
.vs.scm .vs-act .ex { color: #858585; box-shadow: none; } .vs.scm .vs-act .sc { color: #fff; box-shadow: inset 2px 0 #fff; }
.vs-side { position: absolute; left: 48px; top: 32px; bottom: 22px; width: 300px; background: #252526; }
.vs-side h4 { padding: 11px 20px 9px; font: 400 11px/1 "Segoe UI", sans-serif; letter-spacing: .04em; color: #bbbbbb; }
.vs-ex p { font: 400 13px/22px "Segoe UI", sans-serif; padding-left: 18px; white-space: nowrap; } .vs-ex .i1 { padding-left: 30px; } .vs-ex .i2 { padding-left: 44px; } .vs-ex .sel { background: #37373d; color: #fff; }
.vs b.js, .vs b.css, .vs b.md { display: inline-block; width: 16px; margin-right: 5px; font: 700 9px/16px "Segoe UI", sans-serif; text-align: center; border-radius: 2px; }
.vs b.js { color: #e8d44d; } .vs b.css { color: #42a5f5; font-size: 13px; } .vs b.md { color: #6a9fd6; font-size: 11px; }
.vs-sc { display: none; } .vs.scm .vs-sc { display: block; } .vs.scm .vs-ex { display: none; }
.vs-msgbox { margin: 2px 12px 8px; height: 28px; padding: 0 8px; background: #3c3c3c; border: 1px solid #3c3c3c; border-radius: 2px; font: 400 13px/26px "Segoe UI", sans-serif; overflow: hidden; white-space: nowrap; }
.vs-msgbox u { color: #8b8b8b; text-decoration: none; } .vs-msgbox b { font-weight: 400; } .vs.typing .vs-msgbox { border-color: #007fd4; } .vs.typing .vs-msgbox u { display: none; } .vs-msg { color: #ddd; }
.vs-btn { margin: 0 12px 10px; height: 28px; border-radius: 2px; background: #0e639c; color: #fff; text-align: center; font: 400 13px/28px "Segoe UI", sans-serif; }
.vs-btn .b-pub { display: none; } .vs.committed .vs-btn .b-commit { display: none; } .vs.committed .vs-btn .b-pub { display: inline; }
.vs-nochg { display: none; padding: 6px 14px; font: 400 12px/1.4 "Segoe UI", sans-serif; color: #8b8b8b; } .vs.committed .vs-nochg { display: block; }
.vs-grp .vsgh { padding: 0 12px; height: 22px; font: 700 11px/22px "Segoe UI", sans-serif; color: #ccc; display: flex; align-items: center; gap: 6px; }
.vs-grp .vsgh i { font-style: normal; background: #4d4d4d; color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; line-height: 16px; font-weight: 400; }
.vs-grp .plus { margin-left: auto; width: 22px; text-align: center; font: 400 17px/22px "Segoe UI", sans-serif; }
.vs-f { display: flex; align-items: center; height: 22px; padding: 0 14px 0 24px; font: 400 13px/22px "Segoe UI", sans-serif; } .vs-f span { flex: 1; } .vs-f em { font-style: normal; color: #e2c08d; font-weight: 600; }
.vs-staged { display: none; } .vs.staged .vs-staged { display: block; } .vs.staged .vs-chg { display: none; } .vs.committed .vs-staged, .vs.committed .vs-chg { display: none; }
.vs-tabs { position: absolute; left: 348px; right: 0; top: 32px; height: 35px; background: #252526; display: flex; }
.vs-tabs span { display: flex; align-items: center; padding: 0 16px; font: 400 13px/35px "Segoe UI", sans-serif; color: #969696; background: #2d2d2d; border-right: 1px solid #252526; } .vs-tabs .on { background: #1e1e1e; color: #fff; box-shadow: inset 0 1px #007acc; } .vs-tabs i { font-style: normal; margin-left: 10px; font-size: 11px; }
.vs-code { position: absolute; left: 348px; right: 0; top: 67px; bottom: 22px; padding: 14px 0; background: #1e1e1e; }
.vs-code p { font: 400 15px/22px Consolas, "Cascadia Mono", monospace; color: #d4d4d4; white-space: pre; }
.vs-code em { display: inline-block; width: 56px; padding-right: 24px; text-align: right; font-style: normal; color: #6e7681; }
.vs-code .k { color: #569cd6; } .vs-code .s { color: #ce9178; } .vs-code .f { color: #dcdcaa; } .vs-code .chg { box-shadow: inset 3px 0 #1b81a8; }
.vs-status { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: #007acc; color: #fff; font: 400 12px/22px "Segoe UI", sans-serif; }
.vs-status .br { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px; background: #16825d; } .vs-status svg { width: 13px; height: 13px; } .vs-status b { font-weight: 400; }
.vs-status .r { position: absolute; right: 16px; top: 0; }
.vs-status .sync { display: none; width: 11px; height: 11px; border: 2px solid #fff; border-top-color: transparent; border-radius: 50%; } .vs.publishing .sync { display: inline-block; animation: spin 1s linear infinite; }
.vs-pick { position: absolute; left: 520px; top: 40px; width: 400px; display: none; background: #252526; border: 1px solid #454545; border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .55); padding-bottom: 4px; } .vs.pick .vs-pick { display: block; }
.vs-pick .pin { margin: 6px 8px; padding: 0 8px; height: 26px; background: #3c3c3c; border: 1px solid #007fd4; border-radius: 2px; font: 400 13px/24px "Segoe UI", sans-serif; white-space: nowrap; overflow: hidden; }
.vs-pick .pin u { display: none; color: #8b8b8b; text-decoration: none; } .vs-pick .vs-pin:empty + u { display: inline; }
.vs-pick .pl p { height: 24px; padding: 0 12px; font: 400 13px/24px "Segoe UI", sans-serif; } .vs-pick .pl .first { background: #04395e; color: #fff; } .vs-pick .pl .rule { height: 20px; line-height: 20px; font-size: 11px; color: #8b8b8b; }
.vs.naming .vs-pick .pl { display: none; }
.vs-toast { position: absolute; right: 24px; bottom: 40px; padding: 12px 18px; background: #252526; border: 1px solid #454545; border-radius: 4px; font: 400 13px/1.3 "Segoe UI", sans-serif; box-shadow: 0 4px 14px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; } .vs.published .vs-toast { opacity: 1; transform: none; }

/* ---------- GitHub demo (live HTML, public/js/github.js): dark theme as in the GitHub UI kit ---------- */
.gh, .gh * { box-sizing: border-box; }
.gh { position: absolute; inset: 0; width: 1440px; height: 900px; background: #0d1117; color: #c9d1d9; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; overflow: hidden; }
.gh p, .gh h1 { margin: 0; }
.gh-head { position: absolute; left: 0; top: 0; right: 0; height: 62px; background: #161b22; border-bottom: 1px solid #30363d; display: flex; align-items: center; gap: 22px; padding: 0 32px; }
.gh-head b { font: 600 14px/1 -apple-system, "Segoe UI", sans-serif; color: #e6edf3; }
.gh-search { width: 270px; height: 30px; border: 1px solid #30363d; border-radius: 6px; padding: 0 10px; font: 400 14px/28px -apple-system, "Segoe UI", sans-serif; color: #8b949e; display: flex; justify-content: space-between; }
.gh-search kbd { font: 400 11px/18px monospace; margin-top: 5px; border: 1px solid #30363d; border-radius: 4px; padding: 0 5px; color: #8b949e; }
.gh-av { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #8957e5, #58a6ff); }
.gh-repo { position: absolute; left: 48px; top: 82px; font: 400 20px/1 -apple-system, "Segoe UI", sans-serif; color: #58a6ff; } .gh-repo b { font-weight: 600; } .gh-repo i { font: 500 12px/1 sans-serif; font-style: normal; color: #8b949e; border: 1px solid #30363d; border-radius: 12px; padding: 3px 8px; margin-left: 10px; vertical-align: 3px; }
.gh-tabs { position: absolute; left: 0; right: 0; top: 118px; height: 46px; border-bottom: 1px solid #30363d; display: flex; gap: 6px; padding: 0 48px; }
.gh-tabs span { padding: 0 14px; font: 400 14px/46px -apple-system, "Segoe UI", sans-serif; color: #c9d1d9; } .gh-tabs .cnt { font-style: normal; background: #30363d; border-radius: 10px; padding: 1px 7px; font-size: 12px; margin-left: 4px; }
.gh-tabs.sub { top: 168px; left: 170px; right: auto; width: 1100px; padding: 0; } .gh-tabs .on { box-shadow: inset 0 -2px #f78166; font-weight: 600; }
.gh-p1, .gh-p2, .gh-p3 { display: none; position: absolute; inset: 62px 0 0; }
.gh.s1 .gh-p1, .gh.s2 .gh-p2, .gh.s3 .gh-p3 { display: block; }
.gh.s2 .gh-repo, .gh.s2 .gh-tabs:not(.sub), .gh.s3 .gh-repo, .gh.s3 .gh-tabs:not(.sub) { display: none; }
.gh-banner { position: absolute; left: 48px; right: 48px; top: 120px; height: 58px; background: rgba(187, 128, 9, .15); border: 1px solid rgba(187, 128, 9, .4); border-radius: 6px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font: 400 14px/1 -apple-system, "Segoe UI", sans-serif; color: #e6edf3; }
.gh button { font-family: -apple-system, "Segoe UI", sans-serif; }
.gh-banner button { height: 32px; padding: 0 14px; border: 1px solid rgba(240, 246, 252, .1); border-radius: 6px; background: #238636; color: #fff; font: 600 13px/1 -apple-system, "Segoe UI", sans-serif; }
.gh-files { position: absolute; left: 48px; right: 48px; top: 198px; border: 1px solid #30363d; border-radius: 6px; overflow: hidden; }
.gh-files .fh { height: 44px; background: #161b22; border-bottom: 1px solid #30363d; padding: 0 16px; font: 400 14px/44px -apple-system, "Segoe UI", sans-serif; } .gh-files .fh em, .gh-files .fr em { float: right; font-style: normal; color: #8b949e; }
.gh-files .fr { height: 42px; border-bottom: 1px solid #21262d; padding: 0 16px; font: 400 14px/42px -apple-system, "Segoe UI", sans-serif; display: flex; gap: 0; } .gh-files .fr span { width: 280px; } .gh-files .fr u { flex: 1; text-decoration: none; color: #8b949e; } .gh-files .fr:last-child { border: 0; }
.gh h1 { font: 400 28px/1.25 -apple-system, "Segoe UI", sans-serif; color: #e6edf3; } .gh h1 span { color: #8b949e; }
.gh-p2 h1 { position: absolute; left: 170px; top: 40px; } .gh-p2 .sub { position: absolute; left: 170px; top: 84px; font: 400 14px/1.4 sans-serif; color: #8b949e; }
.gh-cmp { position: absolute; left: 170px; top: 118px; width: 1100px; height: 56px; background: #161b22; border: 1px solid #30363d; border-radius: 6px; display: flex; align-items: center; gap: 12px; padding: 0 14px; font: 400 14px/1 -apple-system, "Segoe UI", sans-serif; }
.gh-cmp .chip { height: 30px; padding: 0 12px; border: 1px solid #30363d; border-radius: 6px; background: #21262d; line-height: 28px; color: #c9d1d9; } .gh-cmp .arr { color: #8b949e; } .gh-cmp .ok { color: #3fb950; margin-left: 10px; }
.gh-form { position: absolute; left: 170px; top: 200px; width: 760px; }
.gh-in { height: 36px; border: 1px solid #30363d; border-radius: 6px; background: #0d1117; padding: 0 12px; font: 400 14px/34px -apple-system, "Segoe UI", sans-serif; color: #e6edf3; }
.gh-ta { margin-top: 16px; border: 1px solid #30363d; border-radius: 6px; background: #0d1117; overflow: hidden; } .gh.typing .gh-ta { border-color: #58a6ff; }
.gh-ta .tt { height: 42px; background: #161b22; border-bottom: 1px solid #30363d; display: flex; padding-left: 10px; } .gh-ta .tt span { padding: 0 14px; font: 400 14px/42px sans-serif; color: #8b949e; } .gh-ta .tt .on { color: #e6edf3; box-shadow: inset 0 -2px #f78166; }
.gh-ta .bd { height: 190px; padding: 14px; font: 400 14px/1.5 -apple-system, "Segoe UI", sans-serif; color: #e6edf3; } .gh-ta u { text-decoration: none; color: #6e7681; } .gh.typing .gh-ta u { display: none; }
.gh.typing .gh-typed::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: #e6edf3; animation: blink 1s steps(1) infinite; }
.gh-create { margin-top: 16px; text-align: right; } .gh-create button { height: 34px; padding: 0 16px; border: 1px solid rgba(240, 246, 252, .1); border-radius: 6px; background: #238636; color: #fff; font: 600 14px/1 sans-serif; }
.gh-side { position: absolute; left: 970px; top: 200px; width: 300px; font: 400 14px/1.4 -apple-system, "Segoe UI", sans-serif; }
.gh-side .row { display: flex; justify-content: space-between; padding: 10px 0 8px; margin-top: 8px; border-top: 1px solid #21262d; color: #8b949e; font-size: 12px; } .gh-side .row b { font-weight: 600; } .gh-side .row:first-child { border: 0; margin-top: 0; }
.gh-side .mut, .gh-revs u { text-decoration: none; color: #8b949e; font-size: 12px; }
.gh-revs .chosen { display: none; } .gh.rev .gh-revs .chosen { display: inline-flex; } .gh.rev .gh-revs u { display: none; }
.gh-revs em { font-style: normal; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #e6edf3; } .gh-revs em s { color: #d29922; text-decoration: none; font-size: 10px; }
.a2, .a3 { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #8957e5; color: #fff; font: 600 10px/1 sans-serif; } .a3 { background: #1f6feb; }
.gh-drop { position: absolute; left: 0; top: 40px; width: 290px; display: none; background: #161b22; border: 1px solid #30363d; border-radius: 8px; box-shadow: 0 8px 24px rgba(1, 4, 9, .6); z-index: 4; } .gh.drop .gh-drop { display: block; }
.gh-drop .dh { padding: 10px 14px; border-bottom: 1px solid #30363d; font: 600 12px/1 sans-serif; color: #e6edf3; } .gh-drop .opt { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13px; color: #8b949e; border-bottom: 1px solid #21262d; } .gh-drop .opt b { color: #e6edf3; font-weight: 600; }
.gh-p3 h1 { position: absolute; left: 170px; top: 34px; }
.gh-state { position: absolute; left: 170px; top: 82px; display: flex; align-items: center; gap: 12px; font: 400 14px/1 sans-serif; color: #8b949e; } .gh-state b { color: #e6edf3; } .gh-state code { background: rgba(110, 118, 129, .4); color: #58a6ff; border-radius: 6px; padding: 3px 7px; font: 400 12px/1 monospace; }
.gh-state .open { font-style: normal; background: #238636; color: #fff; border-radius: 16px; padding: 7px 13px; font: 600 13px/1 sans-serif; }
.gh-comment { position: absolute; left: 170px; top: 238px; width: 760px; border: 1px solid #30363d; border-radius: 6px; overflow: hidden; } .gh-comment .ch { height: 42px; background: #161b22; border-bottom: 1px solid #30363d; padding: 0 16px; font: 400 14px/42px sans-serif; color: #8b949e; } .gh-comment .ch b { color: #e6edf3; } .gh-comment .cb { padding: 16px; font: 400 14px/1.5 sans-serif; color: #e6edf3; }
.gh-merge { position: absolute; left: 170px; top: 360px; width: 760px; border: 1px solid #30363d; border-radius: 6px; overflow: hidden; }
.gh-merge .mr { display: flex; gap: 14px; padding: 14px 16px; border-bottom: 1px solid #21262d; font: 400 14px/1.4 sans-serif; color: #e6edf3; } .gh-merge .mr em { font-style: normal; color: #8b949e; font-size: 13px; } .gh-merge .mr i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; flex: none; } .gh-merge .g { background: #238636; color: #fff; } .gh-merge .y { background: rgba(187, 128, 9, .3); color: #d29922; }
.gh-merge .mb { margin: 14px 16px; height: 34px; padding: 0 16px; border: 1px solid rgba(240, 246, 252, .1); border-radius: 6px; background: #238636; color: #fff; font: 600 14px/1 sans-serif; opacity: .6; }
.gh-side.s3 { left: 970px; top: 238px; } .gh-side.s3 .row:first-child { border: 0; }
.gh .chip, .gh .cnt { text-transform: none; letter-spacing: 0; }