*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#131316;
  --sidebar-bg:#1a1b20;
  --tabbar-bg:#1e1f25;
  --active-tab-bg:#131316;
  --inactive-tab-bg:#1e1f25;
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.14);
  --statusbar-bg:#0b5cad;
  --text:#d4d4d4;
  --text-bright:#f0f0f0;
  --text-dim:#8a8a8a;
  --text-faint:#5c5c5c;
  --green:#34d399;
  --yellow:#fbbf24;
  --red:#f87171;
  --blue:#7dd3fc;
  --cyan:#67e8f9;
  --magenta:#c084fc;
  --link:#7dd3fc;
  --dir-color:#7dd3fc;
  --file-color:#d4d4d4;
  --sidebar-hover:#23242c;
  --sidebar-active:#2b2d38;
  --sidebar-indent:16px;
  --prompt-user:#34d399;
  --prompt-path:#7dd3fc;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-press:cubic-bezier(0.34,1.3,0.64,1);
  --chrome-font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

html,body{
  height:100%;
  background:#050507;
  font-family:'Overpass Mono','Menlo','Monaco','Courier New',monospace;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

body{
  display:flex;
  justify-content:center;
  align-items:center;
}

#particles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  opacity:0.55;
  pointer-events:none;
}

.vscode-window{
  width:100%;
  height:calc(100vh - 30px);
  max-width:1400px;
  max-height:900px;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  box-shadow:0 24px 70px rgba(0,0,0,0.55);
  border:1px solid var(--border);
  position:relative;
  z-index:1;
}

@media(min-width:1401px){
  .vscode-window{
    margin:20px;
    height:calc(100vh - 70px);
    border-radius:8px;
    overflow:hidden;
  }
}

.titlebar{
  height:32px;
  min-height:32px;
  background:var(--tabbar-bg);
  display:flex;
  align-items:center;
  padding:0 12px;
  gap:8px;
  border-bottom:1px solid #1a1a1a;
  -webkit-user-select:none;
  user-select:none;
}

.traffic-light{width:12px;height:12px;border-radius:50%}
.tl-red{background:var(--red)}
.tl-yellow{background:var(--yellow)}
.tl-green{background:var(--green)}

.theme-dots{display:flex;align-items:center;gap:6px}
.theme-dot{
  width:11px;
  height:11px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  padding:0;
  cursor:pointer;
  transition:transform 120ms var(--ease-out),box-shadow 150ms var(--ease-out);
}
.theme-dot[data-theme-set="midnight"]{background:#23242c}
.theme-dot[data-theme-set="glass"]{background:linear-gradient(135deg,#3b82a0,#1e3a4c)}
.theme-dot[data-theme-set="phosphor"]{background:#052e16}
.theme-dot[data-theme-set="ghost"]{background:transparent}
.theme-dot[aria-pressed="true"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--blue)}
.theme-dot:active{transform:scale(0.85)}
.theme-dot:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .theme-dot:hover{transform:scale(1.25)}
}

.titlebar-text{
  flex:1;
  text-align:center;
  font-size:0.7rem;
  font-family:var(--chrome-font);
  color:#a0a0a0;
}

.main-area{
  flex:1;
  display:flex;
  overflow:hidden;
  min-height:0;
}

.sidebar{
  width:220px;
  min-width:220px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.sidebar-header{
  padding:12px 16px 8px;
  font-size:0.68rem;
  font-family:var(--chrome-font);
  letter-spacing:0.1em;
  color:#a0a0a0;
  text-transform:uppercase;
  font-weight:600;
  -webkit-user-select:none;
  user-select:none;
}

.sidebar-tree{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  font-size:0.75rem;
  line-height:1.5;
}

.sidebar-tree::-webkit-scrollbar{width:5px}
.sidebar-tree::-webkit-scrollbar-track{background:transparent}
.sidebar-tree::-webkit-scrollbar-thumb{background:#444;border-radius:3px}

.tree-item{
  display:flex;
  align-items:center;
  padding:3px 0 3px 0;
  cursor:pointer;
  white-space:nowrap;
  color:var(--text);
  border-radius:4px;
  margin-right:4px;
  -webkit-user-select:none;
  user-select:none;
  transition:background-color 150ms var(--ease-out),transform 120ms var(--ease-out);
}

.tree-item.active{background:var(--sidebar-active)}
.tree-item:active{transform:scale(0.98)}
.tree-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

@media(hover:hover) and (pointer:fine){
  .tree-item:hover{background:var(--sidebar-hover);transform:translateX(2px)}
}

.tree-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  min-width:16px;
  font-size:0.55rem;
  color:var(--text-dim);
  transition:transform 0.15s;
}

.tree-arrow.expanded{transform:rotate(90deg)}
.tree-arrow.empty{visibility:hidden}

.tree-icon{
  margin-right:4px;
  font-size:0.7rem;
}

.tree-label{overflow:hidden;text-overflow:ellipsis}
.tree-label.dir-label{color:var(--dir-color)}
.tree-label.file-label{color:var(--text)}

.tree-children{display:none}
.tree-children.open{display:block}

.editor-area{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}

.right-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
}

.tab-bar{
  display:flex;
  align-items:stretch;
  background:var(--tabbar-bg);
  border-bottom:1px solid var(--border);
  min-height:35px;
  max-height:35px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  scrollbar-color:#444 transparent;
}

.tab-bar::-webkit-scrollbar{height:4px}
.tab-bar::-webkit-scrollbar-track{background:transparent}
.tab-bar::-webkit-scrollbar-thumb{background:#444;border-radius:2px}

.tab{
  display:flex;
  align-items:center;
  padding:0 12px;
  font-size:0.72rem;
  font-family:var(--chrome-font);
  color:#8f8f8f;
  cursor:pointer;
  border-right:1px solid var(--border);
  white-space:nowrap;
  gap:8px;
  min-width:fit-content;
  flex-shrink:0;
  -webkit-user-select:none;
  user-select:none;
  transition:background-color 150ms var(--ease-out),color 150ms var(--ease-out),transform 120ms var(--ease-out);
}
.tab:active{transform:scale(0.97)}

.tab.active{
  background:var(--active-tab-bg);
  color:var(--text-bright);
  border-bottom:1px solid var(--active-tab-bg);
  margin-bottom:-1px;
}

@media(hover:hover) and (pointer:fine){
  .tab:hover:not(.active){background:#24252c;transform:translateY(-1px)}
}
.tab:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

.tab-close{
  font-size:0.6rem;
  width:16px;
  height:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:3px;
  opacity:0;
}

.tab:hover .tab-close,.tab.active .tab-close{opacity:0.7}
.tab-close:hover{background:rgba(255,255,255,0.1);opacity:1!important}

.editor-content{
  flex:1;
  overflow-y:auto;
  padding:16px 20px;
  font-size:0.78rem;
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
}

.editor-content::-webkit-scrollbar{width:8px}
.editor-content::-webkit-scrollbar-track{background:transparent}
.editor-content::-webkit-scrollbar-thumb{background:#333;border-radius:4px}

.editor-content a{color:var(--link);text-decoration:none;border-radius:2px}
@media(hover:hover) and (pointer:fine){
  .editor-content a:hover{text-decoration:underline}
}
.editor-content a:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.editor-line{white-space:pre-wrap;word-break:break-word}

.editor-line-numbered{
  display:flex;
  white-space:pre-wrap;
}

.line-number{
  display:inline-block;
  min-width:36px;
  text-align:right;
  padding-right:16px;
  color:var(--text-faint);
  -webkit-user-select:none;
  user-select:none;
}

.line-content{flex:1;word-break:break-word}

.welcome-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100%;
  color:var(--text-dim);
  gap:10px;
  text-align:center;
  padding:24px;
  -webkit-user-select:none;
  user-select:none;
}

.welcome-title{font-size:2rem;color:var(--text-bright);font-weight:600;letter-spacing:-0.01em}
.welcome-sub{font-size:0.8rem;color:var(--text-dim)}
.welcome-hint{font-size:0.72rem;color:var(--text-dim);margin-top:10px}
.welcome-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;max-width:460px}
.welcome-chip{
  font-family:inherit;
  font-size:0.72rem;
  color:var(--text);
  background:var(--sidebar-active);
  border:1px solid var(--border-strong);
  border-radius:999px;
  padding:6px 14px;
  cursor:pointer;
  transition:background-color 150ms var(--ease-out),border-color 150ms var(--ease-out),transform 120ms var(--ease-out);
}
.welcome-chip:active{transform:scale(0.95)}
.welcome-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .welcome-chip:hover{background:#343644;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,0.4)}
}

.resize-handle{
  height:4px;
  background:var(--border);
  cursor:ns-resize;
  flex-shrink:0;
}

.resize-handle{transition:background-color 150ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .resize-handle:hover{background:var(--statusbar-bg)}
}

.terminal-panel{
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border-top:1px solid var(--border);
  min-height:60px;
  overflow:hidden;
}

.terminal-panel-header{
  display:flex;
  align-items:center;
  padding:0 12px;
  height:30px;
  min-height:30px;
  background:var(--tabbar-bg);
  border-bottom:1px solid var(--border);
  font-size:0.65rem;
  color:#999;
  -webkit-user-select:none;
  user-select:none;
  gap:12px;
}

.terminal-panel-title{
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:600;
  font-family:var(--chrome-font);
  font-size:0.68rem;
  color:var(--text);
  border-bottom:1px solid var(--border-strong);
  padding-bottom:2px;
}

.terminal-toggle{
  margin-left:auto;
  cursor:pointer;
  font-size:0.7rem;
  color:var(--text-dim);
  padding:2px 6px;
  border-radius:3px;
  transition:background-color 150ms var(--ease-out),transform 120ms var(--ease-out);
}
.terminal-toggle:active{transform:scale(0.95)}
.terminal-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
@media(hover:hover) and (pointer:fine){
  .terminal-toggle:hover{background:rgba(255,255,255,0.1)}
}

.terminal-body{
  flex:1;
  overflow-y:auto;
  padding:8px 14px;
  font-size:0.75rem;
  line-height:1.6;
  color:var(--text);
  cursor:text;
}

.terminal-body::-webkit-scrollbar{width:8px}
.terminal-body::-webkit-scrollbar-track{background:transparent}
.terminal-body::-webkit-scrollbar-thumb{background:#333;border-radius:4px}

.output-line{white-space:pre-wrap;word-break:break-word}
.output-line a{color:var(--link);text-decoration:none;border-radius:2px}
@media(hover:hover) and (pointer:fine){
  .output-line a:hover{text-decoration:underline}
}
.output-line a:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

.prompt-line{
  display:flex;
  align-items:flex-start;
  gap:0;
  white-space:nowrap;
}

.prompt-text{white-space:nowrap;flex-shrink:0}
.prompt-user{color:var(--prompt-user)}
.prompt-at{color:var(--text-dim)}
.prompt-host{color:var(--prompt-user)}
.prompt-path{color:var(--prompt-path)}
.prompt-char{color:var(--text-bright)}

.prompt-input{
  background:none;
  border:none;
  color:var(--text-bright);
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  outline:none;
  flex:1;
  min-width:0;
  padding-left:8px;
  caret-color:transparent;
}

.fake-cursor{
  display:inline-block;
  width:7px;
  height:1.15em;
  background:var(--text-bright);
  vertical-align:text-bottom;
  animation:blink 1s step-end infinite;
  pointer-events:none;
  flex-shrink:0;
}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

.dir-name{color:var(--dir-color);font-weight:500}
.file-name{color:var(--file-color)}
.exe-name{color:var(--green)}
.heading{color:var(--yellow);font-weight:500}
.accent{color:var(--cyan)}
.error{color:var(--red)}
.dim{color:var(--text-dim)}
.green{color:var(--green)}
.yellow{color:var(--yellow)}
.magenta{color:var(--magenta)}

.statusbar{
  height:26px;
  min-height:26px;
  background:var(--statusbar-bg);
  display:flex;
  align-items:center;
  padding:0 12px;
  font-size:0.66rem;
  font-family:var(--chrome-font);
  color:#fff;
  gap:16px;
  -webkit-user-select:none;
  user-select:none;
}

.statusbar-item{opacity:0.95;white-space:nowrap}

.mobile-hamburger{
  display:none;
  position:fixed;
  top:8px;
  left:8px;
  z-index:100;
  background:var(--sidebar-bg);
  border:1px solid var(--border);
  color:var(--text);
  font-size:1.2rem;
  width:32px;
  height:32px;
  border-radius:4px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  font-family:inherit;
}

.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.5);
  z-index:90;
}

.donut-frame{color:var(--green);line-height:1.25;letter-spacing:1px}
.donut-frame.blocks{line-height:1;letter-spacing:0}

html[data-theme="glass"] body{
  background:radial-gradient(1200px 800px at 20% 10%,#0e2a38 0%,#050507 60%),#050507;
}
html[data-theme="glass"] .vscode-window{
  background:rgba(19,20,26,0.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 24px 80px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.08);
}
html[data-theme="glass"] .sidebar,
html[data-theme="glass"] .tab-bar,
html[data-theme="glass"] .terminal-panel-header{background:rgba(255,255,255,0.03)}
html[data-theme="glass"] .editor-content,
html[data-theme="glass"] .terminal-body{background:transparent}
html[data-theme="glass"] .welcome-chip{
  background:rgba(255,255,255,0.06);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}

html[data-theme="phosphor"]{
  --bg:#000000;
  --sidebar-bg:#020604;
  --tabbar-bg:#030805;
  --active-tab-bg:#000000;
  --inactive-tab-bg:#030805;
  --text:#33ff99;
  --text-bright:#b6ffd9;
  --text-dim:#1d9e5f;
  --text-faint:#14663e;
  --green:#33ff99;
  --link:#7dffc4;
  --dir-color:#7dffc4;
  --file-color:#33ff99;
  --sidebar-hover:#062915;
  --sidebar-active:#0a3a1e;
  --prompt-user:#33ff99;
  --prompt-path:#7dffc4;
  --chrome-font:'Overpass Mono','Menlo','Monaco','Courier New',monospace;
}
html[data-theme="phosphor"] body{background:#000}
html[data-theme="phosphor"] .vscode-window{border:1px solid #0a3a1e;box-shadow:0 0 60px rgba(51,255,153,0.08)}
html[data-theme="phosphor"] .vscode-window::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.28) 0 1px,transparent 1px 3px);
  z-index:5;
}
html[data-theme="phosphor"] .editor-content,
html[data-theme="phosphor"] .terminal-body,
html[data-theme="phosphor"] .welcome-title{text-shadow:0 0 8px rgba(51,255,153,0.45)}

html[data-theme="ghost"] .vscode-window{
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
}
html[data-theme="ghost"] .sidebar,
html[data-theme="ghost"] .tab-bar,
html[data-theme="ghost"] .editor-content,
html[data-theme="ghost"] .terminal-body,
html[data-theme="ghost"] .terminal-panel,
html[data-theme="ghost"] .terminal-panel-header,
html[data-theme="ghost"] .editor-area,
html[data-theme="ghost"] .right-panel,
html[data-theme="ghost"] .main-area{background:transparent}
html[data-theme="ghost"] .titlebar,
html[data-theme="ghost"] .statusbar{opacity:0;transition:opacity 200ms var(--ease-out)}
html[data-theme="ghost"] .titlebar:focus-within,
html[data-theme="ghost"] .statusbar:focus-within{opacity:1}
html[data-theme="ghost"] .editor-content,
html[data-theme="ghost"] .terminal-body{text-shadow:0 2px 18px rgba(0,0,0,0.9)}
@media(hover:hover) and (pointer:fine){
  html[data-theme="ghost"] .vscode-window:hover .titlebar,
  html[data-theme="ghost"] .vscode-window:hover .statusbar{opacity:1}
}

@media(max-width:700px){
  .sidebar{
    position:fixed;
    left:-220px;
    top:0;
    bottom:0;
    z-index:95;
    transition:left 200ms var(--ease-out);
  }
  .sidebar.mobile-open{left:0}
  .sidebar-overlay.mobile-open{display:block}
  .mobile-hamburger{display:flex}
  .mobile-hamburger:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  .vscode-window{max-height:100vh;border-radius:0}
  .editor-content{padding:14px 14px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;transition-duration:0.01ms!important}
  .fake-cursor{animation:none;opacity:1}
  #particles{display:none}
}

body{padding-top:30px}
.menubar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:30px;
  z-index:200;
  display:flex;
  align-items:stretch;
  padding:0 12px 0 8px;
  background:rgba(20,21,27,0.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--border);
  font-family:var(--chrome-font);
  font-size:0.78rem;
  color:var(--text);
  -webkit-user-select:none;
  user-select:none;
}
.menu{position:relative;display:flex;align-items:stretch}
.menu-label{
  background:none;
  border:0;
  color:inherit;
  font:inherit;
  padding:0 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  border-radius:4px;
}
.menu-label svg{display:block}
.menu.open .menu-label,.menu-label:hover{background:rgba(255,255,255,0.12)}
.menu-label:focus-visible,.menu-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.menu-blog{font-weight:700}
.menu-dropdown{
  display:none;
  position:absolute;
  top:30px;
  left:0;
  min-width:220px;
  background:var(--sidebar-bg);
  border:1px solid var(--border-strong);
  border-radius:8px;
  padding:4px;
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
}
.menu.open .menu-dropdown{display:block}
.menu-item{
  display:flex;
  width:100%;
  background:none;
  border:0;
  color:var(--text);
  font:inherit;
  font-size:0.76rem;
  text-align:left;
  padding:5px 10px;
  border-radius:4px;
  cursor:pointer;
  white-space:nowrap;
}
.menu-item:hover{background:var(--statusbar-bg);color:#fff}
.menu-sep{height:1px;background:var(--border);margin:4px 8px}
.menubar-clock{margin-left:auto;display:flex;align-items:center;color:var(--text);font-size:0.76rem;white-space:nowrap}
html[data-theme="glass"] .menubar{background:rgba(10,18,24,0.55)}
html[data-theme="phosphor"] .menubar{background:rgba(2,6,4,0.88);border-bottom:1px solid rgba(51,255,153,0.25)}
@media(max-width:820px){
  .menu.opt{display:none}
}
@media(max-width:560px){
  .menu.opt2{display:none}
  .menubar{font-size:0.72rem}
  .menu-label{padding:0 7px}
}
@media(max-width:700px){
  .mobile-hamburger{top:38px}
}