:root{
  /* Tokyo Night — Omarchy's default theme */
  --bg:      #1a1b26;
  --panel:   #1f2335;
  --line:    #292e42;
  --line-2:  #3b4261;
  --gutter:  #565f89;
  --text:    #c0caf5;
  --accent:  #7aa2f7;

  --c-comment: #565f89;
  --c-keyword: #bb9af7;
  --c-var:     #7dcfff;
  --c-key:     #7dcfff;
  --c-string:  #9ece6a;
  --c-punct:   #a9b1d6;
  --c-fn:      #e0af68;

  --font: 'JetBrains Mono', monospace;
  --bar-h: 34px;
}

*{ box-sizing: border-box; }
::selection{ background: #283457; color: var(--text); }

html, body{
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

a{ color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
a:hover, a:focus-visible{ border-bottom-color: currentColor; }
a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; }
}

.scanlines{
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0px,
    rgba(255,255,255,0) 2px,
    rgba(255,255,255,.01) 3px,
    rgba(255,255,255,0) 4px
  );
}

/* =========================================================
   WAYBAR — persistent top status bar (site-wide nav + clock)
   ========================================================= */
.waybar{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar-h);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  font-size: .74rem;
}

.workspaces{
  display: flex;
  align-items: center;
  gap: 1.4em;
}
.ws{
  display: flex;
  align-items: center;
  gap: .5em;
  color: var(--gutter);
}
.ws-dot{
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--line-2);
}
.ws:hover{ color: var(--text); }
.ws:hover .ws-dot{ background: var(--gutter); }
.ws.is-active{ color: var(--text); }
.ws.is-active .ws-dot{
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.clock{ color: var(--gutter); font-variant-numeric: tabular-nums; }

/* =========================================================
   TILED PANE — the "window" content sits here, borderless
   chrome, square corners, accent focus-border like Hyprland
   ========================================================= */
.editor{
  position: fixed;
  top: calc(var(--bar-h) + .9rem);
  left: .9rem;
  right: .9rem;
  bottom: .9rem;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: 4px;
  overflow: hidden;
}

.pane-path{
  flex: 0 0 auto;
  padding: .7em 1.1em;
  font-size: .72rem;
  color: var(--gutter);
  border-bottom: 1px solid var(--line);
}
.pane-path .seg{ color: var(--c-var); }

.c{ color: var(--c-comment); font-style: italic; }
.kw{ color: var(--c-keyword); }
.var{ color: var(--c-var); }
.k{ color: var(--c-key); }
.s{ color: var(--c-string); }
.p{ color: var(--c-punct); }
.fn{ color: var(--c-fn); }

.win-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* =========================================================
   FETCH LAYOUT (neofetch-style system info) — terminal pane
   ========================================================= */
.fetch{
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1.6em, 4vw, 3.5em);
  padding: clamp(1.4em, 3vh, 2.4em) clamp(1.6em, 4vw, 3em);
}

.ascii{
  margin: 0;
  font-size: clamp(1rem, 2.6vh, 1.5rem);
  line-height: 1.3;
  flex: 0 0 auto;
}
.a1{ color: var(--c-keyword); }
.a2{ color: var(--c-var); }
.a3{ color: var(--c-fn); }
.a4{ color: var(--c-string); }
.a5{ color: var(--c-comment); }

.info{ flex: 1 1 auto; min-width: 0; }

.whoami-line{
  margin: 0;
  font-size: clamp(.9rem, 2.2vh, 1.15rem);
  font-weight: 700;
}
.sep{
  margin: .3em 0 1em;
  color: var(--gutter);
  font-size: clamp(.9rem, 2.2vh, 1.15rem);
}

.fields{ margin: 0 0 clamp(1.2em, 2.8vh, 1.8em); }
.fields div{
  display: flex;
  gap: .7em;
  padding: .3em 0;
  font-size: clamp(.78rem, 1.9vh, .95rem);
  flex-wrap: wrap;
}
.fields dt{
  color: var(--c-keyword);
  flex: 0 0 auto;
  min-width: 6em;
}
.fields dd{
  margin: 0;
  color: var(--text);
}
.fields dd a{
  color: var(--c-string);
  border-bottom: 1px solid transparent;
}
.fields dd a:hover, .fields dd a:focus-visible{ border-bottom-color: currentColor; }

.palette{ display: flex; gap: .35em; }
.sw{
  width: clamp(18px, 2.8vh, 26px);
  height: clamp(18px, 2.8vh, 26px);
  border-radius: 2px;
}
.sw-bg{ background: var(--panel); border: 1px solid var(--line); }
.sw-c{ background: var(--c-comment); }
.sw-kw{ background: var(--c-keyword); }
.sw-var{ background: var(--c-var); }
.sw-s{ background: var(--c-string); }
.sw-fn{ background: var(--c-fn); }
.sw-p{ background: var(--c-punct); }
.sw-text{ background: var(--text); }

@media (max-width: 700px){
  .fetch{ flex-direction: column; align-items: flex-start; justify-content: flex-start; overflow-y: auto; }
  .ascii{ font-size: 1rem; }
}

/* =========================================================
   BLOG — file list + post, inside the same tiled pane
   ========================================================= */
.tree{ padding: 1.4em 1.6em 1.8em; }

.file-list{ list-style: none; margin: 0; padding: 0; }
.file-list li{
  padding: 1.1em 0;
  border-top: 1px solid var(--line);
}
.file-list li:first-child{ border-top: none; }
.file-list a{
  display: flex;
  align-items: baseline;
  gap: .5em;
  font-size: .95rem;
}
.file-icon{ color: var(--c-keyword); font-size: .7em; }
.file-name{ color: var(--c-var); }
.file-list a:hover .file-name,
.file-list a:focus-visible .file-name{ color: var(--c-string); }
.file-date{
  margin-left: auto;
  color: var(--gutter);
  font-size: .78rem;
  white-space: nowrap;
}
.file-excerpt{
  margin: .4em 0 0 1.3em;
  color: var(--gutter);
  font-size: .84rem;
  line-height: 1.6;
  max-width: 60ch;
}

.post-head{ padding: 1.6em 1.6em 0; }
.post-head h1{
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.post-meta{
  font-size: .8rem;
  color: var(--gutter);
  margin: .6em 0 0;
}

.post-content{
  padding: 1.4em 1.6em 2.2em;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--text);
  max-width: 68ch;
}
.post-content p{ margin: 0 0 1.3em; }
.post-content p:last-child{ margin-bottom: 0; }
.post-content h2, .post-content h3{
  color: var(--c-keyword);
  font-size: 1.1em;
  margin: 1.8em 0 .7em;
}
.post-content a{
  color: var(--c-string);
  border-bottom: 1px solid currentColor;
}
.post-content ul, .post-content ol{
  margin: 0 0 1.3em;
  padding-left: 1.4em;
}
.post-content li{ margin: .35em 0; }
.post-content code{
  color: var(--c-fn);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: .1em .4em;
  font-size: .92em;
}
.post-content pre{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1em 1.2em;
  overflow-x: auto;
  margin: 0 0 1.3em;
}
.post-content pre code{
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
}
.post-content blockquote{
  margin: 0 0 1.3em;
  padding-left: 1em;
  border-left: 2px solid var(--c-comment);
  color: var(--gutter);
  font-style: italic;
}

@media (max-width: 700px){
  .editor{ left: .5rem; right: .5rem; bottom: .5rem; top: calc(var(--bar-h) + .5rem); border-radius: 2px; }
  .waybar{ padding: 0 .6em; font-size: .68rem; }
  .workspaces{ gap: .9em; }
}