/* =========================================================
   tokens — VS Code "Light+"-inspired palette
   ========================================================= */
:root{
  --bg-activity:  #f3f3f3;
  --bg-sidebar:   #f3f3f3;
  --bg-tabs:      #f3f3f3;
  --bg-tab-active:#ffffff;
  --bg-editor:    #ffffff;
  --bg-statusbar: #007acc;
  --bg-hover:     #e8e8e8;
  --bg-selected:  #e4e6f1;

  --ink:          #1e1e1e;
  --ink-soft:     #6e6e6e;
  --ink-faint:    #a0a0a0;
  --line:         #e2e2e2;

  --c-keyword:    #0451a5;   /* headings / nav */
  --c-string:     #a31515;   /* dates / tags */
  --c-comment:    #008000;   /* meta / eyebrow */
  --c-func:       #795e26;   /* emphasis */
  --c-accent:     #007acc;   /* links, active state */

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --content-w: 760px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg-editor);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--c-accent); text-decoration:none; }
a:hover, a:focus-visible{ text-decoration:underline; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--c-accent); outline-offset:1px; }

h1,h2,h3{ font-family:var(--mono); font-weight:600; margin:0; }

.tok-key{ color:var(--c-keyword); }
.tok-str{ color:var(--c-string); }
.tok-com{ color:var(--c-comment); }
.tok-fn{ color:var(--c-func); }
.tok-punct{ color:var(--ink-faint); }

/* =========================================================
   window chrome
   ========================================================= */
.ide{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
.ide-body{
  display:flex;
  flex:1;
  min-height:0;
}

/* ---- activity bar ---- */
.activity-bar{
  width:48px;
  flex-shrink:0;
  background:var(--bg-activity);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 0;
  gap:18px;
}
.activity-bar .spacer{ flex:1; }
.activity-icon{
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-faint);
  border-left:2px solid transparent;
  cursor:default;
}
.activity-icon svg{ width:20px; height:20px; }
.activity-icon.active{ color:var(--ink); border-left-color:var(--c-accent); }

/* ---- file explorer ---- */
.explorer{
  width:230px;
  flex-shrink:0;
  background:var(--bg-sidebar);
  border-right:1px solid var(--line);
  padding:14px 0;
  overflow-y:auto;
}
.explorer-title{
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-soft);
  padding:0 16px 10px;
}
.explorer-root{ padding:0 8px; }
.explorer-root > summary{
  list-style:none; cursor:default;
  font-size:13px; color:var(--ink);
  padding:3px 6px; display:flex; align-items:center; gap:5px;
}
.explorer-root > summary::-webkit-details-marker{ display:none; }
.explorer-root > summary::before{ content:"▾ "; color:var(--ink-faint); font-size:10px; }

.file-list{ margin:2px 0 0 6px; }
.file-item{
  display:flex; align-items:center; gap:7px;
  padding:4px 10px 4px 22px;
  font-size:13px; color:var(--ink-soft);
  border-left:2px solid transparent;
  border-radius:0;
}
.file-item .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.file-item:hover{ background:var(--bg-hover); }
.file-item[aria-current="page"]{
  background:var(--bg-selected);
  color:var(--ink);
  font-weight:600;
}

.explorer-foot{
  margin-top:24px; padding:0 16px;
  font-size:11.5px; color:var(--ink-faint); line-height:1.8;
}
.explorer-foot a{ color:var(--ink-faint); }
.explorer-foot a:hover{ color:var(--c-accent); }

/* ---- editor column ---- */
.editor-col{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.tab-bar{
  display:flex;
  background:var(--bg-tabs);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
}
.tab{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  font-size:12.5px; color:var(--ink-soft);
  border-right:1px solid var(--line);
  white-space:nowrap;
}
.tab .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.tab .x{ color:var(--ink-faint); margin-left:4px; }
.tab[aria-current="page"]{
  background:var(--bg-tab-active);
  color:var(--ink);
  border-top:2px solid var(--c-accent);
  padding-top:7px;
}
.tab:not([aria-current="page"]){ border-top:2px solid transparent; }

.breadcrumb{
  padding:6px 20px;
  font-size:11.5px;
  color:var(--ink-faint);
  border-bottom:1px solid var(--line);
}
.breadcrumb .sep{ margin:0 4px; }
.breadcrumb .cur{ color:var(--ink-soft); }

.editor{
  flex:1;
  overflow-y:auto;
  background:var(--bg-editor);
  display:flex;
  justify-content:center;
}
.editor-inner{
  width:100%;
  max-width:960px;
  padding:28px 0 90px;
}

/* code-line gutter system */
.code{ counter-reset:line; }
.line{
  display:flex;
  padding:1px 24px 1px 0;
}
.line::before{
  counter-increment:line;
  content:counter(line);
  width:44px;
  flex-shrink:0;
  text-align:right;
  padding-right:18px;
  color:var(--ink-faint);
  font-size:12px;
  user-select:none;
}
.line.blank::before{ content:""; }
.line-content{ flex:1; min-width:0; padding:2px 0; }
.line:target .line-content, .line.hl .line-content{ background:var(--bg-selected); }

.indent{ padding-left:20px; }
.indent2{ padding-left:40px; }

/* =========================================================
   content components
   ========================================================= */
.hero-title{ font-size:22px; font-weight:700; }
.hero-sub{ color:var(--ink-soft); max-width:64ch; }

.card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:6px; }
.card{
  border:1px solid var(--line); border-radius:4px; padding:14px 16px;
  background:var(--bg-editor);
}
.card:hover{ border-color:var(--c-accent); }
.card h3{ font-size:13.5px; margin:0 0 6px; }
.card p{ font-size:12.5px; color:var(--ink-soft); margin:0; }

.btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:12.5px;
  border:1px solid var(--line); color:var(--ink); padding:7px 12px;
  border-radius:3px; background:var(--bg-editor);
}
.btn:hover{ border-color:var(--c-accent); color:var(--c-accent); text-decoration:none; }

.cv-item{ padding:10px 0; border-top:1px dashed var(--line); }
.cv-item:first-child{ border-top:none; }
.cv-item h4{ font-size:14px; margin:0 0 3px; font-weight:600; }
.cv-item p{ margin:0; color:var(--ink-soft); font-size:13px; }
.tags{ margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.tag{ font-size:11px; color:var(--c-string); }
.tag::before{ content:'"'; } .tag::after{ content:'"'; }

.log-entry{ padding:8px 0; }
.log-entry p{ margin:4px 0 0; color:var(--ink); font-size:13.5px; }

.track-block{ padding:10px 0 16px; }
.track-block h3{ font-size:14px; margin:0 0 4px; }
audio{ width:100%; height:32px; margin-top:8px; }

.piece-block{ padding:10px 0; }
.piece-block h3{ font-size:14px; margin:0 0 3px; }
.piece-block p{ margin:0; color:var(--ink-soft); font-size:13px; }

/* ---- status bar ---- */
.status-bar{
  height:22px;
  background:var(--bg-statusbar);
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
  font-size:11.5px;
  flex-shrink:0;
}
.status-left, .status-right{ display:flex; align-items:center; gap:14px; }
.status-bar .branch::before{ content:"⎇ "; }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 860px){
  .activity-bar{ display:none; }
  .explorer{ width:170px; }
  .card-grid{ grid-template-columns:1fr; }
  .line::before{ width:26px; padding-right:8px; }
  .status-right .lang, .status-right .encoding{ display:none; }
}
@media (max-width: 600px){
  .explorer{ display:none; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }