:root{
  --bg:#008080;
  --paper:#c0c0c0;
  --border-light:#ffffff;
  --border-mid:#808080;
  --border-dark:#000000;
  --title1:#000080;
  --title2:#103f80;
  --text:#000000;
  --highlight:#dfdfdf;
  --accent:#000080;
  --panel:#e6e6e6;
}
body.win98{
  --bg:#008080;
  --paper:#c0c0c0;
  --title1:#000080;
  --title2:#103f80;
  --text:#000000;
  --accent:#000080;
  --panel:#e6e6e6;
}
body.workshop-light{
  --bg: #c9b6e4;
  --paper: #e6d7f9;
  --title1: #b295d6;
  --title2: #5d3e7b;
  --text: #2c1e3d;
  --accent: #7a59a3;
  --panel: #f5f0ff;
}
body.workshop-dark {
  --bg: #1b1223;
  --paper: #2a1c38;
  --title1: #5d3e7b;
  --title2: #0d0813;
  --text: #e7dff4;
  --accent: #b98ddb;
  --panel: #241730;
}
body.grey{
  --bg:#9e9e9e;
  --paper:#f3f3f3;
  --title1:#505050;
  --title2:#707070;
  --text:#111111;
  --accent:#4a4a4a;
  --panel:#f6f6f6;
}
body.dark{
  --bg:#111111;
  --paper:#2b2b2b;
  --title1:#004f9e;
  --title2:#0066cc;
  --text:#e6e6e6;
  --accent:#91b9ff;
  --panel:#2f2f2f;
}
body.soft-sepia{
  --bg:#f4f0e8;
  --paper:#fff8f0;
  --title1:#8b6d5c;
  --title2:#a28873;
  --text:#4b3f36;
  --accent:#7b5c48;
  --panel:#f3e9df;
}
body.calming-blue{
  --bg:#e6f0fa;
  --paper:#ffffff;
  --title1:#5b7fa6;
  --title2:#7aa2c6;
  --text:#2b3d4f;
  --accent:#507fa0;
  --panel:#e0ebf5;
}
body.gentle-green{
  --bg:#f0faf4;
  --paper:#ffffff;
  --title1:#5a7d5a;
  --title2:#7aa07a;
  --text:#2f3d2f;
  --accent:#5f8f5f;
  --panel:#e6f0e6;
}
body.warm-grey{
  --bg:#ececec;
  --paper:#fdfdfd;
  --title1:#6d6d6d;
  --title2:#8c8c8c;
  --text:#333333;
  --accent:#666666;
  --panel:#f5f5f5;
}
body.deep-space{
  --bg:#0f0f14;
  --paper:#1a1a23;
  --title1:#3d5a80;
  --title2:#5073a0;
  --text:#e0e0e0;
  --accent:#7aa1d2;
  --panel:#161621;
}
body.charcoal{
  --bg:#181818;
  --paper:#242424;
  --title1:#444444;
  --title2:#666666;
  --text:#e6e6e6;
  --accent:#8a8a8a;
  --panel:#202020;
}
body.forest-night{
  --bg:#0d1b12;
  --paper:#162918;
  --title1:#4b8263;
  --title2:#66a17d;
  --text:#d9e6d9;
  --accent:#7fbf87;
  --panel:#1a3622;
}
body.dusk-blue{
  --bg:#101827;
  --paper:#1b2238;
  --title1:#3a5f87;
  --title2:#4d7ca5;
  --text:#dfe6f0;
  --accent:#6c9fcf;
  --panel:#1e283f;
}
body.coffee-shop{
  --bg:#1c1815;
  --paper:#2b2622;
  --title1:#6e4e3a;
  --title2:#8b6a51;
  --text:#e5dcd1;
  --accent:#a07b60;
  --panel:#2f2a26;
}
body.deepslate{
  --bg:#121b1f;
  --paper:#1d2a2f;
  --title1:#3e5a63;
  --title2:#4f7a82;
  --text:#cfd8dc;
  --accent:#70a0b0;
  --panel:#20333b;
}

body {
  background:var(--bg);
  color:var(--text);
  font-family:"ms sans serif",sans-serif;
  margin:0;
  height:100vh;
  overflow:hidden;
}
header {
  background:var(--panel);
  border-bottom:2px solid var(--border-dark);
  padding:6px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:bold;
  text-transform:lowercase;
}
header button, select {
  background:var(--panel);
  border:1px solid var(--border-dark);
  color:var(--text);
  font-family:inherit;
  font-size:13px;
  cursor:pointer;
  padding:2px 6px;
}
footer {
  background:var(--panel);
  border-top:1px solid var(--border-dark);
  color:var(--text);
  text-align:center;
  font-size:12px;
  padding:4px;
  text-transform:lowercase;
  position:absolute;
  bottom:0;
  width:100%;
}

.window {
  background:var(--panel);
  border:2px solid var(--border-dark);
  border-radius:3px;
  position:absolute;
  width:360px;
  height:220px;
  box-shadow:3px 3px 0 var(--border-dark);
}
.window-header {
  background:var(--accent);
  color:#fff;
  padding:6px;
  cursor:move;
  font-weight:bold;
  text-align:center;
  text-transform:lowercase;
  user-select:none;
}
.window-content {
  padding:12px;
  text-align:center;
  font-size:14px;
}
.window-content button {
  background:var(--panel);
  border:1px solid var(--border-dark);
  padding:6px 10px;
  cursor:pointer;
  margin:4px 0;
  font-size:13px;
}
.window-content button:hover {
  background:var(--accent);
  color:#fff;
}

.focus-mode .toolbar,
.focus-mode .left-column,
.focus-mode header .small,
.focus-mode .btn-row,
.focus-mode .progress,
.focus-mode #streakProgress,
.focus-mode .title-bar div:nth-child(2) {
  display: none !important;
}

.focus-mode .editor-window {
  grid-column: 1 / -1 !important;
  width: 100%;
}

.focus-mode .editor {
  min-height: 90vh;
  font-size: 18px;
  line-height: 1.6;
  outline: none;
}

.focus-mode body,
.focus-mode .container,
.focus-mode .window-content {
  background: var(--paper);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg) url('https://sadhost.neocities.org/images/noise.png');font-family:"MS Sans Serif","Segoe UI","Tahoma",sans-serif;color:var(--text)}
.window{background:var(--paper);border:2px solid var(--border-dark);border-top-color:var(--border-light);border-left-color:var(--border-light);border-radius:3px;box-shadow:2px 2px 0 var(--border-dark)}
.title-bar{background:linear-gradient(to right,var(--title1),var(--title2));color:#fff;padding:6px 8px;font-weight:bold;font-size:13px;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--border-mid)}
.container{max-width:1100px;margin:18px auto;padding-bottom:40px}
.toolbar{background:var(--panel);padding:6px;display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-mid)}
.toolbar button,.toolbar select{font-family:inherit;font-size:13px;padding:4px;border:1px solid var(--border-mid);background:var(--paper);cursor:pointer}
.sidebar-grid{display:grid;grid-template-columns:320px 1fr;gap:12px}
.left-column{display:flex;flex-direction:column;gap:12px}
.panel{padding:8px}
.editor-window{display:flex;flex-direction:column;gap:6px}
.editor{background:var(--paper);border:2px inset var(--border-dark);height:520px;overflow:auto;padding:12px;font-family:"Courier New",monospace;font-size:15px;line-height:1.45;outline:none}
.progress{height:10px;background:linear-gradient(90deg,var(--accent),var(--title2));border:1px solid var(--border-mid);border-radius:3px;overflow:hidden;width:100%}
.progress-inner{height:100%;width:0;transition:width .3s;background:linear-gradient(90deg,var(--accent),var(--title2))}
.small{font-size:12px}
.dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:9999;width:520px;max-width:94%;display:none}
.btn-row{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.chapter-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px;border-bottom:1px dashed var(--border-mid)}
.chapter-left{display:flex;align-items:center;gap:8px}
.chapter-title{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){.sidebar-grid{grid-template-columns:1fr}.left-column{order:2}.editor-window{order:1}}

#streak-bar {
  width:100%;
  height:18px;
  background:var(--bg);
  border:1px solid var(--border-dark);
  position:relative;
  margin:6px 0;
}
#streak-fill {
  background:var(--accent);
  height:100%;
  width:0%;
}