:root {
  color-scheme: dark;
  --chrome: #181818;
  --panel: #252526;
  --canvas: #1e1e1e;
  --text: #cccccc;
  --orange: #ff9900;
  --blue: #569cd6;
  --teal: #4ec9b0;
  --string: #ce9178;
  --comment: #6a9955;
  --property: #9cdcfe;
  font-family: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-width: 320px; margin: 0; overflow: hidden; }
body { height: 100vh; height: 100dvh; padding: 24px; background: #111111; color: var(--text); }
a { color: inherit; }
button { font: inherit; }

.ide-window {
  display: flex;
  flex-direction: column;
  width: min(1420px, 100%);
  height: calc(100vh - 48px);
  height: calc(100dvh - 48px);
  min-height: 0;
  margin: auto;
  overflow: hidden;
  border: 1px solid #3a3a3a;
  background: var(--canvas);
  box-shadow: 0 24px 80px #0008;
}
.titlebar, .menubar, .tab-strip, .breadcrumbs, .statusbar, .page-footer { display: flex; align-items: center; }
.titlebar {
  position: relative;
  justify-content: space-between;
  height: 42px;
  flex: 0 0 42px;
  padding: 0 15px;
  border-bottom: 1px solid #111;
  background: var(--chrome);
}
.site-title { color: #eeeeee; font-size: 13px; font-weight: 600; letter-spacing: .01em; text-decoration: none; }
.site-title span { color: var(--orange); }
.window-title { position: absolute; left: 50%; transform: translateX(-50%); color: #b8b8b8; font-size: 12px; white-space: nowrap; }
.csharp-icon, .file-icon { color: #8a78c6; font-size: 10px; font-weight: 700; }
.window-controls { display: flex; align-items: center; gap: 5px; }
.window-control { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 4px; background: transparent; color: #aaaaaa; cursor: pointer; }
.window-control svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.window-control:hover, .window-control:focus-visible { background: #333333; color: #ffffff; outline: none; }
.close-control:hover, .close-control:focus-visible { background: #c42b1c; color: #ffffff; }
.restore-icon { display: none; }
.ide-window.is-maximized .maximize-icon { display: none; }
.ide-window.is-maximized .restore-icon { display: block; }
.ide-window[hidden], .closed-screen[hidden] { display: none; }
body.window-maximized { padding: 0; }
.ide-window.is-maximized { position: fixed; z-index: 50; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; margin: 0; border: 0; box-shadow: none; }
.closed-screen { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: #0b0c0deF; }
.closed-card { display: flex; width: min(360px, 100%); flex-direction: column; align-items: center; gap: 28px; padding: 40px 36px; border: 1px solid #3b3b3b; background: #1e1e1e; box-shadow: 0 22px 70px #0009; }
.closed-brand { color: #eeeeee; font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.closed-brand span { color: var(--orange); }
.open-window { min-width: 112px; padding: 9px 22px; border: 0; border-radius: 3px; background: #0e639c; color: #ffffff; font-size: 13px; cursor: pointer; }
.open-window:hover, .open-window:focus-visible { background: #1177bb; outline: 2px solid #6cb6e8; outline-offset: 2px; }

.menubar { justify-content: space-between; height: 34px; flex: 0 0 34px; padding: 0 14px; background: var(--chrome); color: #bdbdbd; font-size: 12px; }
.menu-items { display: flex; align-items: center; gap: 4px; height: 100%; }
.menu-group { position: relative; display: flex; align-items: center; height: 100%; }
.menu-trigger { height: 26px; padding: 0 9px; border: 0; border-radius: 3px; background: transparent; color: inherit; cursor: pointer; }
.menu-trigger:hover, .menu-trigger[aria-expanded="true"] { background: #333333; color: #ffffff; }
.menu-dropdown {
  position: absolute;
  z-index: 5;
  top: calc(100% - 1px);
  left: 0;
  display: none;
  min-width: 200px;
  padding: 5px;
  border: 1px solid #454545;
  background: #252526;
  box-shadow: 0 8px 24px #0008;
}
.menu-group.open .menu-dropdown { display: block; }
.menu-dropdown button, .menu-dropdown a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: #dddddd;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.menu-dropdown button:hover, .menu-dropdown a:hover { background: #094771; color: white; }
.menu-dropdown small { margin-left: 20px; color: #858585; font-size: 10px; font-weight: 400; }
.language-dropdown button[aria-checked="true"] small { color: var(--orange); }
.workspace-name { color: #777777; font-size: 10px; letter-spacing: .12em; }

.workbench { display: flex; min-width: 0; min-height: 0; flex: 1 1 0; overflow: hidden; }
.explorer {
  position: relative;
  display: flex;
  width: 294px;
  min-width: 0;
  min-height: 0;
  flex: 0 0 294px;
  flex-direction: column;
  border-right: 1px solid #1a1a1a;
  background: var(--panel);
  font-size: 11px;
  transition: width .16s ease, flex-basis .16s ease;
  overflow: hidden;
}
.explorer-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 37px;
  flex: 0 0 37px;
  padding: 0 10px 0 17px;
  color: #bbbbbb;
  font-size: 10px;
  letter-spacing: .12em;
}
.explorer-toggle {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #aaaaaa;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.explorer-toggle:hover, .explorer-toggle:focus-visible { background: #3a3a3a; color: white; }
.tree-content { min-width: 0; min-height: 0; flex: 1 1 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: 32px; }
.tree-folder { min-height: 23px; padding: 5px 9px; color: #dedede; white-space: nowrap; }
.tree-parent { display: flex; align-items: center; width: 100%; border: 0; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.tree-parent:hover, .tree-parent:focus-visible { background: #2a2d2e; color: #ffffff; outline: none; }
.tree-parent .chevron { position: relative; display: inline-grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; margin-right: 4px; color: transparent; font-size: 0; }
.tree-parent .chevron::before { width: 5px; height: 5px; border-right: 1.5px solid #aaaaaa; border-bottom: 1.5px solid #aaaaaa; content: ""; transform: translateY(-1px) rotate(45deg); transition: transform .12s ease; }
.tree-parent[aria-expanded="false"] .chevron::before { transform: translateY(-1px) rotate(-45deg); }
.tree-children { display: block; }
.tree-branch.is-collapsed > .tree-children { display: none; }
.role-parent { min-height: 22px; }
.tree-item { min-height: 22px; padding-top: 4px; padding-bottom: 4px; color: #bcbcbc; white-space: nowrap; }
.tree-item.indent-1 { padding-left: 34px; }
.tree-item.indent-2 { padding-left: 48px; color: #929292; font-size: 10px; }
.project-item::before { padding-right: 7px; color: #8a78c6; content: "▧"; }
.tree-project-row { display: flex; align-items: center; min-height: 22px; padding-right: 8px; }
.tree-project-row.indent-1 { padding-left: 34px; }
.tree-project-row > .project-item { min-width: 0; flex: 1; padding-left: 0; }
.project-link { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 3px; color: #999999; }
.project-link svg { width: 12px; height: 12px; fill: currentColor; }
.project-link:hover, .project-link:focus-visible { background: #3a3a3a; color: var(--orange); outline: none; }
.explorer-footer { padding: 11px 14px; border-top: 1px solid #333333; color: #888888; font-size: 10px; }
.orange-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--orange); }
.explorer.is-collapsed { width: 52px; flex-basis: 52px; }
.explorer.is-collapsed .explorer-heading { height: auto; flex-basis: auto; flex-direction: column; justify-content: flex-start; gap: 12px; padding: 12px 0; }
.explorer.is-collapsed .explorer-label { writing-mode: vertical-rl; }
.explorer.is-collapsed .tree-content, .explorer.is-collapsed .explorer-footer { display: none; }
.explorer.is-collapsed .explorer-toggle { transform: rotate(180deg); }

.editor { position: relative; display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: column; background: var(--canvas); }
.tab-strip { height: 36px; flex: 0 0 36px; background: var(--panel); }
.tab { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px; border: 0; border-top: 1px solid transparent; background: var(--panel); color: #bdbdbd; font-size: 12px; cursor: pointer; }
.tab.active-tab { min-width: 155px; border-top-color: var(--orange); background: var(--canvas); color: #dedede; }
.tab[hidden] { display: none; }
.breadcrumbs { height: 30px; flex: 0 0 30px; gap: 10px; padding-left: 22px; color: #888888; font-size: 11px; }
.crumb-sep { color: #555555; }
.crumb-current { color: #bdbdbd; }
.code-view { position: relative; min-width: 0; min-height: 0; flex: 1 1 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px 70px 38px 0; }
.code-lines { min-width: max-content; counter-reset: line; color: #d4d4d4; font: 13px/1.85 Consolas, "Courier New", monospace; }
.code-lines[hidden] { display: none; }
.line { position: relative; display: block; min-height: 24px; padding-left: 76px; white-space: pre; }
.line::before { position: absolute; top: 0; left: 0; display: block; width: 54px; padding-right: 12px; color: #858585; font-variant-numeric: tabular-nums; text-align: right; content: counter(line); counter-increment: line; user-select: none; }
.line.blank { height: 24px; }
.line.blank::before { content: counter(line); }
.indent-1 { padding-left: calc(76px + 4ch); }
.indent-2 { padding-left: calc(76px + 8ch); }
.indent-3 { padding-left: calc(76px + 12ch); }
.kw { color: var(--blue); }
.ns { color: #dcdcaa; }
.type { color: var(--teal); }
.prop { color: var(--property); }
.method { color: #dcdcaa; }
.str { color: var(--string); text-decoration: none; }
.str:hover { text-decoration: underline; }
.comment { color: var(--comment); }
.doc-link { text-decoration: none; }
.doc-link:hover { color: #8fbd78; text-decoration: underline; }
.brace { color: #d4d4d4; }
.minimap { position: absolute; top: 18px; right: 14px; display: flex; width: 48px; flex-direction: column; gap: 5px; opacity: .36; }
.minimap i { height: 3px; background: #6c8291; }
.minimap i:nth-child(3n) { width: 68%; background: #967b65; }
.minimap i:nth-child(4n) { width: 83%; background: #688b65; }
.minimap i:nth-child(5n) { width: 52%; }
.statusbar { justify-content: space-between; min-height: 23px; padding: 0 10px; background: #007acc; color: #ffffff; font-size: 10px; }
.statusbar b { font-size: 11px; }
.page-footer { justify-content: space-between; min-height: 34px; flex: 0 0 auto; gap: 12px; padding: 6px 12px; background: var(--chrome); color: #777777; font-size: 10px; }
.footer-credit { flex: 1; color: #aaaaaa; text-align: center; }

@media (max-width: 760px) {
  body { padding: 0; }
  .ide-window { height: 100vh; height: 100dvh; min-height: 0; border: 0; }
  .window-title, .workspace-name { display: none; }
  .workbench { height: 0; min-height: 0; flex: 1 1 0; }
  .explorer { width: 224px; height: 100%; flex-basis: 224px; }
  .explorer.is-collapsed { width: 46px; flex-basis: 46px; }
  .tree-content { height: 0; flex: 1 1 0; overflow-x: auto; overflow-y: auto; touch-action: pan-y; }
  .editor { height: 100%; }
  .code-view { height: 0; flex: 1 1 0; overflow-x: auto; overflow-y: auto; touch-action: pan-x pan-y; padding-right: 12px; }
  .minimap { display: none; }
  .status-right { display: none; }
}

@media (max-width: 540px) {
  .explorer { width: 185px; flex-basis: 185px; }
  .explorer.is-collapsed { width: 42px; flex-basis: 42px; }
  .explorer-heading { padding-left: 12px; }
  .breadcrumbs { padding-left: 12px; }
  .tab { padding-right: 9px; padding-left: 9px; }
  .tab.active-tab { min-width: 128px; }
  .code-lines { font-size: 11px; }
  .line { padding-left: 42px; }
  .line::before { width: 30px; padding-right: 8px; }
  .indent-1 { padding-left: calc(42px + 4ch); }
  .indent-2 { padding-left: calc(42px + 8ch); }
  .indent-3 { padding-left: calc(42px + 12ch); }
  .statusbar { font-size: 9px; }
  .page-footer { justify-content: center; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; text-align: center; }
  .footer-credit { flex-basis: 100%; order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .explorer { transition: none; }
}