*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"IBM Plex Sans","Segoe UI",sans-serif;background:#1e1e1e;color:#d4d4d4;line-height:1.7;font-size:17px}
a{color:#9cdcfe}
.ide{max-width:980px;margin:0 auto;min-height:100vh;display:grid;grid-template-columns:52px 1fr}
.gutter{background:#252526;color:#6e7681;font-family:ui-monospace,Consolas,monospace;font-size:.72rem;padding:88px 0 40px;text-align:right}
.gutter span{display:block;padding:0 8px;line-height:1.7}
.main{border-left:1px solid #333}
.tabs{display:flex;background:#2d2d2d;position:sticky;top:0;z-index:2}
.tabs a{text-decoration:none;color:#bbb;font-family:ui-monospace,Consolas,monospace;font-size:.78rem;padding:12px 16px;border-right:1px solid #1e1e1e}
.tabs a.open{background:#1e1e1e;color:#fff;border-top:2px solid #c586c0}
.file{padding:22px 28px 56px}
.file h1{font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;margin:0 0 12px;font-weight:600}
.file h2{color:#4ec9b0;font-size:1.12rem;margin:26px 0 8px;font-weight:600}
.file p,.file li{margin:0 0 12px}
.file ul{margin:0 0 12px 1.2em}
.cmt{color:#6a9955;font-family:ui-monospace,Consolas,monospace;font-size:.9rem;margin-bottom:14px}
.shot{width:100%;height:auto;display:block;margin:12px 0 6px;border:1px solid #333}
.cap{color:#6e7681;font-size:.84rem;margin:0 0 16px}
.kw{color:#c586c0}
.note{margin-top:20px;color:#6e7681;font-size:.88rem;border-top:1px solid #333;padding-top:12px}
@media(max-width:700px){
  .ide{grid-template-columns:1fr}
  .gutter{display:none}
  .tabs{overflow:auto}
  .file{padding:16px 14px 40px}
}