:root{
  --bg:#0f1115; --panel:#14171c; --panel-2:#1a1e24; --line:#242932; --fg:#c9ced8; --dim:#6b7380; --bright:#eef1f6;
  --orange:#e8893a; --blue:#7fb4ff; --green:#8fd18f; --purple:#c59cff; --yellow:#e6c86e; --red:#ef7b7b;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:14px/1.65 var(--mono)}
a{color:var(--blue)}

.ide{display:grid;height:100vh;height:100dvh;grid-template:
  "title title title" 34px
  "act   exp   main"  1fr
  "stat  stat  stat"  24px / 48px 250px 1fr}

/* title bar */
.titlebar{grid-area:title;display:flex;align-items:center;gap:14px;padding:0 12px;background:var(--panel);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.titlebar .lights{display:flex;gap:7px}
.titlebar .lights span{width:11px;height:11px;border-radius:50%;background:#2b3039}
.titlebar .lights span:first-child{background:#ef7b7b}.titlebar .lights span:nth-child(2){background:#e6c86e}.titlebar .lights span:nth-child(3){background:#8fd18f}
.titlebar .ttl{flex:1;text-align:center}
.titlebar a{color:var(--dim);text-decoration:none}
.titlebar a:hover{color:var(--bright)}

/* activity bar */
.activity{grid-area:act;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding-top:8px;gap:4px}
.activity a,.activity button{width:40px;height:40px;display:grid;place-items:center;color:var(--dim);background:none;border:0;border-left:2px solid transparent;cursor:pointer;text-decoration:none;font:16px var(--mono)}
.activity .on{color:var(--bright);border-left-color:var(--orange)}
.activity a:hover,.activity button:hover{color:var(--bright)}
.activity svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6}

/* explorer */
.explorer{grid-area:exp;background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding-bottom:20px}
.explorer h2{font:500 11px var(--mono);letter-spacing:.12em;color:var(--dim);margin:0;padding:12px 16px 8px}
.explorer .root{padding:4px 16px;color:var(--bright);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
details>summary{list-style:none;cursor:pointer}
details>summary::-webkit-details-marker{display:none}
.node{display:flex;align-items:center;gap:6px;padding:3px 10px 3px calc(14px + var(--d)*16px);color:var(--fg);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.node:hover{background:var(--panel-2)}
.node.active{background:#1f2630;color:var(--bright);box-shadow:inset 2px 0 var(--orange)}
.node.draft{color:var(--dim);font-style:italic}
summary.node::before{content:"▸";color:var(--dim);width:10px;margin-left:-14px;transition:transform .15s}
details[open]>summary.node::before{transform:rotate(90deg)}
.ic{display:inline-block;width:14px;height:14px;flex:none;border-radius:2px}
.ic.dir{background:linear-gradient(var(--yellow),var(--yellow)) 0 3px/14px 10px no-repeat,linear-gradient(var(--yellow),var(--yellow)) 0 1px/6px 3px no-repeat;opacity:.8}
.ic.md{font:600 9px/14px var(--mono);text-align:center;color:var(--blue)}
.ic.md::before{content:"M↓";letter-spacing:-1px}
.outline{margin-top:16px;border-top:1px solid var(--line)}
.outline a{display:block;padding:3px 16px;color:var(--dim);text-decoration:none;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.outline a:hover{color:var(--bright)}

/* main editor */
.main{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0}
.tabs{display:flex;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;flex:none}
.tab{display:flex;align-items:center;gap:8px;padding:8px 16px;border-right:1px solid var(--line);color:var(--dim);text-decoration:none;font-size:13px;white-space:nowrap}
.tab.on{background:var(--bg);color:var(--bright);box-shadow:inset 0 2px var(--orange)}
.tab .x{opacity:.5}
.crumbs{padding:6px 24px;font-size:12px;color:var(--dim);border-bottom:1px solid var(--line);flex:none}
.crumbs b{color:var(--fg);font-weight:400}
.editor{flex:1;overflow:auto;scroll-behavior:smooth}

/* document with line-number gutter */
.doc{counter-reset:ln;max-width:900px;padding:28px 40px 120px 0;color:var(--fg)}
.doc>*{position:relative;margin:0 0 14px 72px}
.doc>*::before{counter-increment:ln;content:counter(ln);position:absolute;left:-72px;width:48px;text-align:right;color:#3c434e;font-size:12.5px;line-height:inherit;top:0;user-select:none}
.doc h1{font:600 26px/1.3 var(--mono);color:var(--bright);margin-top:6px}
.doc h1::after{content:"";display:block;width:64px;height:3px;background:var(--orange);margin-top:12px}
.doc h2{font:600 18px/1.4 var(--mono);color:var(--orange);margin-top:36px;scroll-margin-top:16px}
.doc h2::selection{background:#333}
.doc h2 .hash{color:#5a4330;margin-right:8px}
.doc h3{font:600 15px var(--mono);color:var(--purple);margin-top:22px}
.doc p,.doc li{max-width:72ch}
.doc strong{color:var(--bright)}
.doc em{color:var(--yellow);font-style:normal}
.doc code{background:#1b2028;border:1px solid var(--line);padding:1px 5px;border-radius:4px;color:var(--green);font-size:.92em}
.doc pre{background:#0a0c0f;border:1px solid var(--line);border-radius:6px;padding:14px 16px;overflow:auto;font-size:13px;line-height:1.55}
.doc pre code{background:none;border:0;padding:0;color:var(--fg)}
.doc pre .c{color:#5e6875}.doc pre .k{color:var(--purple)}.doc pre .s{color:var(--green)}.doc pre .n{color:var(--orange)}
.doc pre .copy{position:absolute;top:8px;right:8px;background:var(--panel-2);color:var(--dim);border:1px solid var(--line);border-radius:4px;font:11px var(--mono);padding:2px 8px;cursor:pointer;opacity:0;transition:opacity .15s}
.doc pre:hover .copy{opacity:1}
.doc ul,.doc ol{padding-left:22px}
.doc blockquote{border-left:3px solid var(--blue);background:#121823;padding:10px 16px;color:var(--fg);border-radius:0 6px 6px 0}
.doc blockquote.todo{border-color:var(--yellow);background:#1a1810}
.doc blockquote p{margin:0}
.doc table{border-collapse:collapse;font-size:13px;display:block;overflow-x:auto}
.doc th,.doc td{border:1px solid var(--line);padding:6px 12px;text-align:left;vertical-align:top}
.doc th{background:var(--panel-2);color:var(--bright);font-weight:500}
.doc .meta-line{color:var(--dim);font-size:12.5px;margin-top:-4px}
.doc .meta-line span{color:var(--blue)}
.doc figure{margin-left:72px}
.doc figure .ph{border:1px dashed #3a414c;border-radius:6px;aspect-ratio:16/9;display:grid;place-items:center;color:var(--dim);font-size:12.5px;max-width:720px}
.doc figure img{max-width:100%;border-radius:6px;border:1px solid var(--line)}
.doc figcaption{color:var(--dim);font-size:12px;margin-top:6px}
.doc hr{border:0;border-top:1px dashed var(--line)}
.doc .muted{color:var(--dim)}
#project-list{list-style:none;padding:0}
#project-list li{padding:10px 0;border-bottom:1px dashed var(--line)}
#project-list a{color:var(--bright);text-decoration:none}
#project-list a:hover{color:var(--orange)}
#project-list .meta{display:block;color:var(--dim);font-size:12px}

/* status bar */
.status{grid-area:stat;display:flex;align-items:center;gap:18px;padding:0 12px;background:#c4621a;color:#1a0f06;font-size:12px;white-space:nowrap;overflow:hidden}
.status .grow{flex:1}
.status a{color:inherit;text-decoration:none}

.menu-btn{display:none}

/* mobile */
@media (max-width:820px){
  .ide{grid-template:"title" 40px "main" 1fr "stat" 24px / 1fr}
  .activity{display:none}
  .explorer{position:fixed;top:40px;bottom:24px;left:0;width:82%;max-width:300px;z-index:20;transform:translateX(-100%);transition:transform .2s;box-shadow:8px 0 24px #0008}
  .ide.explorer-open .explorer{transform:none}
  .menu-btn{display:grid;place-items:center;background:none;border:1px solid var(--line);color:var(--fg);width:30px;height:28px;border-radius:4px;font:14px var(--mono);cursor:pointer}
  .titlebar .lights{display:none}
  .doc{padding:18px 16px 80px 0}
  .doc>*{margin-left:44px}
  .doc>*::before{left:-44px;width:32px;font-size:11px}
  .doc figure{margin-left:44px}
  .status .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){.editor{scroll-behavior:auto}}
.mobile-hint{display:none}
@media (max-width:820px){.mobile-hint{display:inline}}
@media (max-width:820px){
  .titlebar .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
  .doc h1{font-size:21px}
  .doc h2{font-size:16px}
}