:root { color-scheme: dark; font-family: "Segoe UI", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; color: #abb2bf; background: #282c34; }
a { color: #abb2bf; text-decoration: none; }
button { font: inherit; }
.titlebar { display: flex; align-items: center; gap: 1rem; min-height: 3.25rem; padding: 0 .9rem; background: #21252b; border-bottom: 1px solid #181a1f; }
.back { font-size: 1.4rem; width: 1.6rem; text-align: center; }
.back:hover, .actions a:hover { color: #61afef; }
.title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .92rem; color: #e5e6e8; }
.actions { display: flex; gap: .55rem; margin-left: auto; white-space: nowrap; }
.actions a, .actions button { padding: .38rem .65rem; border: 1px solid #4b5263; border-radius: 4px; background: #2c313a; color: #d7dae0; font-size: .8rem; cursor: pointer; }
.actions button:hover { background: #3e4452; }
main { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.tab { display: flex; align-items: center; gap: .5rem; align-self: flex-start; max-width: 100%; padding: .65rem 1rem; background: #282c34; border-right: 1px solid #181a1f; border-top: 1px solid #528bff; color: #e5e6e8; font-size: .82rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.python-icon { color: #e5c07b; font-weight: 700; }
.breadcrumbs { padding: .5rem 1.25rem; border-top: 1px solid #181a1f; color: #7f848e; font-size: .78rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.editor { display: flex; flex: 1; overflow: auto; background: #282c34; font: 14px/1.55 "Cascadia Code", "Fira Code", Consolas, "Microsoft YaHei", monospace; tab-size: 4; }
.line-numbers { position: sticky; left: 0; display: flex; flex-direction: column; min-width: 4.5rem; padding: 0 1rem 2rem 0; text-align: right; color: #636d83; background: #282c34; border-right: 1px solid #3e4452; user-select: none; }
.line-numbers span { display: block; height: 1.55em; }
pre { margin: 0; padding: 0 2rem 2rem 1rem; min-width: max-content; font: inherit; }
code { font: inherit; white-space: pre; }
.tok-keyword { color: #c678dd; }
.tok-string { color: #98c379; }
.tok-number { color: #d19a66; }
.tok-comment { color: #5c6370; font-style: italic; }
.tok-function { color: #61afef; }
.tok-class { color: #e5c07b; }
.tok-variable { color: #e06c75; }
footer { padding: .2rem 1rem; background: #21252b; color: #abb2bf; font-size: .72rem; text-align: right; }
:focus-visible { outline: 2px solid #61afef; outline-offset: 2px; }
@media (max-width: 600px) { .title { display: none; } .titlebar { gap: .4rem; } .actions { gap: .3rem; } .actions a, .actions button { padding: .35rem .45rem; } .editor { font-size: 12px; } .line-numbers { min-width: 3rem; padding-right: .5rem; } }