:root {
  --sys-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --sys-font-mono: "SF Mono", SFMono-Regular, ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --sys-font-serif: -apple-system-ui-serif, ui-serif, "Georgia", serif; 
  --sys-font-weight: 400;

  --sys-size-text-extralarge: 1.6rem;
  --sys-size-text-large: 1.5rem;
  --sys-size-text-medium: 1.06rem;
  --sys-size-text-normal: 15px;
  --sys-size-text-small: 0.875rem;
  --sys-size-line-height: 1.5;

  --sys-size-outline: 1px;
  --sys-size-outline-negative: -1px;

  --sys-size-padding-thin: 2px;
  --sys-size-padding-extralight: 4px;
  --sys-size-padding-light: 8px;
  --sys-size-padding-regular: 10px;
  --sys-size-padding-medium: 12px;
  --sys-size-padding-semibold: 14px;

  --sys-size-radius-extralight: 6px;
  --sys-size-radius-light: 8px;
  --sys-size-radius-regular: 10px;
  --sys-size-radius-medium: 12px;
  --sys-size-radius-semibold: 15px;

  --sys-size-header: calc((var(--sys-size-line-height) * var(--sys-size-text-normal)) + (var(--sys-size-padding-regular) * 2));
  --sys-size-page-column: 760px;
  --sys-size-page-margin: .25rem;

  --sys-color-bg: hsla(0, 0%, 0%, 100%);
  --sys-color-bg-glass: hsla(210, 7%, 6%, 100%);
  --sys-color-outline: hsla(210, 7%, 12%, 100%);
  --sys-color-outline-faded: hsla(210, 7%, 10%, 100%);
  --sys-color-outline-darkened: hsla(210, 7%, 16%, 100%);
  --sys-color-highlight: hsla(210, 80%, 55%, 100%);
  --sys-color-text: hsla(0, 0%, 100%, 90%);
  --sys-color-text-dimm: hsla(0, 0%, 100%, 80%);
  --sys-color-subtext: hsla(0, 0%, 100%, 50%);
}

@media (prefers-color-scheme: light) {
  :root {
    --sys-color-bg: hsla(0, 0%, 100%, 100%);
    --sys-color-bg-glass: hsla(0, 0%, 98%, 100%);
    --sys-color-outline: hsla(0, 0%, 90%, 100%);
    --sys-color-outline-faded: hsla(0, 0%, 92%, 100%);
    --sys-color-outline-darkened: hsla(0, 0%, 86%, 100%);
    --sys-color-highlight: hsla(230, 80%, 55%, 100%);
    --sys-color-text: hsla(0, 0%, 0%, 90%);
    --sys-color-text-dimm: hsla(0, 0%, 0%, 80%);
    --sys-color-subtext: hsla(0, 0%, 0%, 45%);
  }
}

@media (max-width: 768px) {
  :root {
    --sys-size-text-normal: 16px;
  }
}

html {
  color: var(--sys-color-text);
  font-family: var(--sys-font-sans); 
  font-size: var(--sys-size-text-normal);
  line-height: var(--sys-size-line-height);
  font-weight: var(--sys-font-weight);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  position: relative;
  background-color: var(--sys-color-bg);
  touch-action: none;
}

html,body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}


h1, h2, h3, h4, h5, h6 {
  font-size: 1rem;
  margin: 0;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
  outline: none;
}

a:focus-visible {
  outline: 1px solid var(--sys-color-highlight);
  outline-offset: 2px;
}

p {
  margin: 0;
}

a, p, span {
  overflow-wrap: break-word;
  word-break: break-word;
}

pre {
  margin: 0;
}

/* ------------------- */

.ignored {
  display: none;
}

.hidden {
  position: absolute;
  width: 0 !important;
  height: 0 !important;
  opacity: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.selectable {
  user-select: text;
  -webkit-user-select: text;
}

/* ------------------- */

a.sys-button-home {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-inline-end: var(--sys-size-outline) solid var(--sys-color-outline);
}

a.sys-button-home::after {
  content: "";
  position: absolute;
  width: 75%;
  height: 75%;
  background-color: var(--sys-color-outline-faded);
  background-image: url("/avatar.webp");
  background-size: cover;
  border-radius: 50%;
}

/* ------------------- */

a.sys-button-open {
  color: var(--sys-color-highlight);
  padding: 2px 4px 2px 4px;
  line-height: 1;
  display: flex;
  flex-direction: row;
  gap: .25rem;
}

a.sys-button-open:focus-visible {
  outline-offset: 0;
  border-radius: 2px;
}

a.sys-button-open:hover {
  color: var(--sys-color-highlight);
}

a.sys-button-open > .icon {
  display: inline-flex;
  height: calc(var(--sys-size-line-height) * var(--sys-size-text-small));
}

a.sys-button-open > .icon > svg {
  height: 100%;
}

/* ------------------- */

a.sys-button-cover {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* ------------------- */

sys-window {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
}

sys-head-wrap {
  display: flex;
  flex-direction: row;
  position: relative;
  height: var(--sys-size-header); 
  background-color: var(--sys-color-bg);
  border-block-end: var(--sys-size-outline) solid var(--sys-color-outline);
  align-items: stretch;
  z-index: 2;
  overflow-x: auto;
  scrollbar-width: none;
}

sys-head-wrap > sys-item {
  justify-content: center;
  padding-inline: var(--sys-size-padding-regular);
  flex: 1;
  overflow: hidden;
}

sys-head-wrap > sys-item .text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

sys-head-wrap::-webkit-scrollbar {
  display: none;
}

sys-page-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  flex: 1;
  z-index: 1;
}

/* ------------------- */

sys-page {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  flex-grow: 1;
  background-color: var(--sys-color-bg);
  justify-content: center;
  overflow-y: auto;
  visibility: hidden;
  pointer-events: none;
}

sys-page.visible {
  visibility: visible;
  pointer-events: all;
}

sys-page::after {
  right: 0;
  border-inline-start: var(--sys-size-outline) solid var(--sys-color-outline);
}

sys-page-column {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding-inline: var(--sys-size-padding-extralight);
  gap: var(--sys-size-padding-light); 
  flex-shrink: 0;
  width: 100%;
  height: min-content;
  max-width: var(--sys-size-page-column);
  box-sizing: border-box;
  -border-inline: var(--sys-size-outline) solid var(--sys-color-outline);
}

sys-page-head,
sys-page-tail {
  display: flex;
}

sys-page-head {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

sys-page-head.cover {
  height: auto;
  aspect-ratio: 10 / 3;
  border: var(--sys-size-outline) solid var(--sys-color-outline);
  border-radius: var(--sys-size-radius-medium);
  margin-block-start: var(--sys-size-padding-medium);
}

sys-page-tail {
  height: 3rem;
}

/* ------------------- */

sys-row {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: var(--sys-size-padding-light); 
}

sys-row {
  border-radius: var(--sys-size-radius-medium);
  border: var(--sys-size-outline) solid transparent;
}

sys-row > sys-item:first-of-type > item {
  padding: 2px 4px;
}

sys-row > .sys-row-number {
  font-weight: 600;
  white-space: pre;
  line-height: 1;
  width: min-content;
  padding: 2px 4px;
  margin-block-end: 4px;
}

sys-row > .sys-row-number::before {
  content: "#";
  display: inline-block;
  margin-inline-end: 2px;
}

sys-row > sys-item:first-of-type:not(:last-child) {
  margin-block-end: var(--sys-size-padding-light);
}

sys-row > sys-item:not(:first-child,:last-of-type) {
  margin-block-end: var(--sys-size-padding-light);
}

sys-row > sys-item:last-of-type:not(:last-child) {
  margin-block-end: var(--sys-size-padding-light);
}

/* ITEM */ 

sys-item {
  display: flex;
  flex-direction: column;
}

sys-item[ctx="leaf"].media {
  border: var(--sys-size-outline) solid var(--sys-color-outline-faded);
  border-radius: var(--sys-size-radius-extralight);
  background-color: var(--sys-color-bg-glass);
}

sys-item[ctx="leaf"]:not(.media,.code) {
  padding: var(--sys-size-padding-regular);
  border: var(--sys-size-outline) solid var(--sys-color-outline-faded);
  border-radius: var(--sys-size-radius-extralight);
  background-color: var(--sys-color-bg-glass);
}

/* ITEM WRAPER */ 

sys-item > item {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 6px; 
}

sys-item.media > item {
  padding: var(--sys-size-padding-regular) !important;
  border-radius: var(--sys-size-radius-extralight);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border: var(--sys-size-outline) solid var(--sys-color-outline-faded);
  background-color: var(--sys-color-bg-glass);
}

sys-item[ctx="root"] > item {
  flex-direction: column;
  gap: var(--sys-size-padding-thin); 
}

sys-item[ctx="root"].media > item {
  background-color: transparent; 
  border: none;
  padding: 2px 4px !important;
  margin-block-end: var(--sys-size-padding-regular);
}

sys-item[ctx="leaf"].media > item {
  margin-block-end: 0;
  padding: var(--sys-size-padding-regular);
  border: none;
  border-block-end: var(--sys-size-outline) solid var(--sys-color-outline-faded);
}

/* ITEM TYPE */ 

sys-item > item > .type {
  display: flex;
  font-size: var(--sys-size-text-normal);
  color: var(--sys-color-highlight); 
  height: calc(var(--sys-size-line-height) * var(--sys-size-text-normal));
}

sys-item > item > .type > svg {
  height: 100%;
}

sys-item > item > .type.literal {
  font-size: var(--sys-size-text-medium);
}

sys-item > item > .type.literal::after {
  content: attr(title);
}

sys-item > item > .type.literal > svg {
  display: none;
}

/* ITEM TEXT */ 

sys-item > item > .text {
  display: block;
}

sys-item[ctx="root"] > item > .text {
  line-height: 1.30;
  font-size: var(--sys-size-text-extralarge);
}

/* ITEM MEDIA */

sys-item > media {
  display: none;
  position: relative;
  border-radius: var(--sys-size-radius-extralight);
  border-start-end-radius: 0;
  border-start-start-radius: 0;
  border: var(--sys-size-outline) solid var(--sys-color-outline-faded);
  border-top: none;
  background-color: var(--sys-color-bg-glass);
  overflow: hidden;
}

sys-item.media > media {
  display: block;
}

sys-item[ctx="root"].media > media {
  border-radius: var(--sys-size-radius-extralight);
  border: var(--sys-size-outline) solid var(--sys-color-outline-faded);
}

sys-item[ctx="leaf"].media > media {
  border-start-end-radius: 0;
  border-start-start-radius: 0;
  border: none;
  background-color: transparent; 
}

/* ANCHOR ITEM */ 

sys-item.anchor > item > span {
  font-size: var(--sys-size-text-large); 
  font-weight: 500;
  display: block;
  width: 100%;
}

/* TEXT ITEM */ 

sys-item.text > item > span {
  color: var(--sys-color-text-dimm); 
  line-height: 1.4;
}

/* CODE ITEM */ 

sys-item.code > item {
  padding: 0 !important;
}

sys-item.code > item > .text {
  display: flex;
  position: relative;
  overscroll-behavior: none;
  font-family: var(--sys-font-mono); 
  font-size: var(--sys-size-text-small);
  white-space: pre;
  overflow: auto;
  max-height: min(50vh, 240px);
  height: auto;
  width: 100%;
  box-sizing: border-box;
  padding: var(--sys-size-padding-regular);
  border: var(--sys-size-outline) solid var(--sys-color-outline-faded);
  border-radius: var(--sys-size-radius-extralight);
  background-color: var(--sys-color-bg-glass);
}

/* DIR ITEM */ 

sys-item.dir > item > .text {
  font-weight: 600;
}

/* FILE MEDIA */ 

.sys-media-file {
  display: flex;
  flex-direction: row;
  gap: var(--sys-size-padding-regular);
  padding: var(--sys-size-padding-medium);
}

.sys-media-file .icon {
  display: flex;
  height: 40px;
  height: calc(1.25 * var(--sys-size-text-normal) * 2 + var(--sys-size-padding-extralight));
  color: var(--sys-color-text);
}

.sys-media-file svg {
  height: 100%;
  stroke: var(--sys-color-outline-darkened);
  fill: white;
}

.sys-media-file .text {
  display: flex;
  line-height: 1.25;
  gap: var(--sys-size-padding-extralight);
  flex-direction: column;
  flex-basis: 100%;
}

.sys-media-file .attr {
  color: var(--sys-color-subtext);
}

@media (prefers-color-scheme: light) {
  .sys-media-file .icon {
    color: #dadada;
  }
}

/* ------------------- */

.sys-media-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 240px; 
  overflow: hidden;
}

.sys-media-image > img {
  max-height: 100%;
  max-width: 100%;
  height: auto; 
  width: auto;
}

/* LINK MEDIA */ 

.sys-media-link {
  display: flex;
  padding: var(--sys-size-padding-medium);
  color: var(--sys-color-highlight);
}

/* ------------------- */

.sys-media-snippet {
  display: flex;
  flex-direction: row;
  gap: var(--sys-size-padding-regular);
  overscroll-behavior: none;
  font-family: var(--sys-font-mono); 
  font-size: var(--sys-size-text-small);
  overflow: auto;
  max-height: min(50vh, 240px);
  height: auto;
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--sys-size-padding-regular);
  padding-inline: var(--sys-size-padding-semibold);
}

.sys-media-snippet > .code {
  display: flex; 
  width: min-content;
  height: min-content;
}

.sys-media-snippet > .numbers {
  display: inline-block;
  color: var(--sys-color-subtext);
  text-align: right;
  width: var(--number-digits);
  height: min-content;
}

/* QUOTE MEDIA */ 

.sys-media-quote {
  display: flex;
  flex-direction: column;
  gap: var(--sys-size-padding-semibold);
  padding: var(--sys-size-padding-semibold);
  margin: 0;
}

.sys-media-quote .text {
  white-space: pre-wrap;
  font-family: var(--sys-font-serif); 
  font-size: var(--sys-size-text-medium); 
  line-height: 1.3;
}

.sys-media-quote .name {
  color: var(--sys-color-subtext);
  font-size: var(--sys-size-text-normal);
}