/* Fonts */

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/IBMPlexMono-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../assets/fonts/IBMPlexMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'Literata';
  src: url('../assets/fonts/Literata-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Literata';
  src: url('../assets/fonts/Literata-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/SpaceMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../assets/fonts/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../assets/fonts/IBMPlexSans-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Sans';
  src: url('../assets/fonts/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
  font-weight: 100 700;
  font-style: italic;
  font-display: block;
}

:root {
    --bg: #0a0a0a;
    --text: #c9c9c9;
    --text-dim: #828282;
    --text-bright: #f5f5f5;
    --text-v-dim: #333333;
    --accent: #ff6a00;
    --accent-dim: #c75600;
    --green: #00ff66;
    --border: #313131;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: var(--text-v-dim) transparent;
    scrollbar-gutter: stable both-edges;
    overflow-y: scroll;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'IBM Plex Mono', monospace;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Noise texture */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 2;
  }

  .site-header {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
    position: relative;
    z-index: 999;
  }

  .site-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  }

  .header-inner {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .site-name {
    font-family: 'Space Mono', monospace;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--text-bright);
    text-decoration: none;
    text-transform: lowercase;
  }

  .site-name span.zero {
    color: var(--accent);
  }

  .header-freq {
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
  }

  .header-freq .live-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: var(--green);
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    animation: pulse-dot 2.5s ease-in-out infinite;
  }

  @keyframes pulse-dot {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; box-shadow: 0 0 4px var(--green); }
  }

  main {
    max-width: 700px;
    margin: 0 auto;
    padding: 0rem 2rem 0rem;
    position: relative;
    z-index: 999;
  }
  .progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: var(--accent-dim);
    z-index: 1;
    transition: width 0.1s linear;
  }
  .nrx-progress {
    position: fixed;
    top: 0.8rem;
    right: 2rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    color: var(--accent-dim);
    letter-spacing: 0.05em;
    z-index: 1;
    pointer-events: none;
    transition: color 0.5s ease;
  }

  .nrx-label {
    position: fixed;
    top: 2px;
    left: 0.3rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.62rem, 2vw, 0.73rem);
    color: var(--accent-dim);
    z-index: 1;
    pointer-events: none;
    transition: color 0.5s ease;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  .nrx-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.2rem;
    background: var(--bg);
    z-index: 1;
  }

  .nrx-label.complete {
    color: var(--accent);
  }

  @media (max-width: 950px) {

    .nrx-header {
      display: block;
    }
  }
  .post-meta {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    padding-top: 1rem;
    border-bottom: 1px solid var(--border);
    line-height: 1.0rem;
  }

  .post-meta .timestamp {
    font-size: 0.8rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
  }

  .post-meta .source-tag {
    font-size: 0.73rem;
    color: var(--accent-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .post-meta .source-tag span {
    color: var(--accent);
  }

  .post-body {
    font-family: 'Literata', serif;
    line-height: 1.6;
    font-size: 1.02rem;
    font-weight: 400;
    color: var(--text);
  }

  .post-body .story-link {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-bright);
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
    padding-bottom: 0rem;
    line-height: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .post-body .story-link:hover {
    color: var(--accent);
  }

  .post-body .about-heading {
    display: block;
    font-family: 'Space Mono', monospace;
    color: var(--text-bright);
    font-weight: 700;
    font-size: clamp(1.6rem, 2vw, 1.6rem);
    margin: 2rem 0rem 0rem;
  }

  .post-body .about-heading2 {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    color: var(--text-bright);
    font-weight: 400;
    font-size: clamp(1.15rem, 2vw, 1.15rem);
    margin: 1rem 0rem 0rem;
    line-height: 1;
    padding-top: 1rem;
  }

  .post-body .heading-highlight {
    color: var(--accent);
  }

  .post-body .about-comment {
    font-size: clamp(0.62rem, 2vw, 0.8rem);
    font-family: 'IBM Plex Mono', monospace;
    color: var(--accent-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .post-body .story-title {
    font-family: 'Literata', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-bright);
    letter-spacing: 0.0em;
    margin-bottom: 2rem;
  }

  .post-body p {
    margin-bottom: 1.4rem;
    text-align: left;
    text-indent: 0em;
  }

  .post-body .section-break {
    text-align: center;
    margin: 2.5rem 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-dim);
    letter-spacing: 0.5em;
    position: relative;
  }  

  .post-body .salutation {
    color: var(--text-bright);
    font-weight: 700;
    font-size: 1.05rem;
  }

  .post-body .quote {
    display: block;
    color: var(--text-dim);
    font-weight: 700;
    font-size: 1.05rem;
    font-style: italic;
    white-space: pre-wrap;
    margin: 0rem 0rem 1rem;
  }

  .post-body .emphasis {
    color: var(--text-bright);
    font-weight: 600;
    font-style: normal;
  }

  .post-body .caps {
    color: var(--text-bright);
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .post-body .highlight {
    color: var(--accent);
    font-weight: 600;
  }

  .schematic-reveal {
    animation: schematic-diagonal-reveal 1s ease-out forwards;
  }

  @keyframes diagonal-reveal {
    0%   { clip-path: polygon(0 0, 0 0, 0 0); opacity: 0; visibility: visible; }
    99.9% { clip-path: polygon(0 0, 300vw 0, 0 300vw); opacity: 1; visibility: visible; }
    100% { clip-path: none; opacity: 1; visibility: visible; }
  }

  @keyframes schematic-diagonal-reveal {
    0%   { clip-path: polygon(0 0, 0 0, 0 0); opacity: 0; visibility: visible; }
    100% { clip-path: polygon(0 0, 200vw 0, 0 200vw); opacity: 1; visibility: visible; }
  }

  .schematic {
    font-family: 'IBM Plex Mono', monospace;
    margin: 2rem 0;
    padding: 1.5rem 0rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    position: relative;
  }

  .schematic .schematic-tag {
    font-size: 0.73rem;
    color: var(--accent-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .schematic .schematic-label {
    font-size: 0.73rem;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .schematic pre {
    padding: 1.5rem 0rem 1rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.55rem, 3vw, 0.8rem);
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-dim);
    white-space: pre;
    overflow-x: hidden;
    text-align: left;
    display: table;
    margin: 0 auto;
  }

  .schematic pre .snip {
    color: var(--accent);
  }

  .schematic pre .snap {
    color: var(--text-bright);
  }

  .schematic pre .slop {
    color: var(--accent-dim);
  }

  .post-body .tagline {
    display: block;
    margin-top: 1.5rem;
    padding-top: 1.0rem;
    font-family: 'Space Mono', monospace;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text-bright);
    letter-spacing: 0.08em;
    text-align: left;
  }

  .post-body .cut-transition {
    white-space: pre-wrap;
  }

  .post-body .cut-up {
    /*font-family: 'IBM Plex Mono', monospace;*/
    font-size: 1.02;
    line-height: 1.6;
    color: var(--text);
    display: block;
    text-align-last: justify;
    white-space: pre;
    overflow-x: clip;
    width: 100%;
    opacity: 1;
  }

  .post-body .cut-up-mobile {
    /*font-family: 'IBM Plex Mono', monospace;*/
    font-size: clamp(0.55rem, 3vw, 1.02rem);
    line-height: 1.6;
    color: var(--text);
    display: none;
    text-align-last: justify;
    white-space: pre;
    overflow-x: clip;
    width: 100%;
    opacity: 1;
  }

  .post-body .cut-up-line {
    opacity: 0;
  }

  .post-body .cut-up-line.visible {
    animation: signal-in 0.6s ease-out forwards;
  }  

  .post-body .tagline .kill {
    color: var(--accent);
  }

  .post-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
  }

  .post-footer .author-sig {
    font-size: 0.8rem;
    color: var(--text-dim);
    letter-spacing: 0.1em;
  }

  .post-footer .author-sig .alias {
    color: var(--text);
    font-weight: 700;
  }

  .post-footer .hash {
    font-size: 0.68rem;
    color: var(--text-dim);
    letter-spacing: 0.03em;
    opacity: 0.5;
    margin-top: 0.4rem;
    word-break: break-all;
  }

  .warning-bar {
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .warning-bar .warning-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0.6rem;
  }

  .warning-bar .warning-text {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: center;
  }

  .warning-bar .red {
    color: var(--accent-dim);
    font-size: 0.7rem;
    line-height: 1;
    flex-shrink: 0;
    padding-top: 0.15em;
  }

  .save-local {
    margin-top: 1rem;
    text-align: left;
  }

  .save-local a {
    font-size: 0.8rem;
    color: var(--text-dim);
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: color 0.3s ease;
  }

  .save-local a:hover {
    color: var(--text);
  }

  .save-local a .sep {
    color: var(--text-dim);
    margin: 0 0.3em;
  }

  .save-local a .ext {
    color: var(--accent-dim);
    transition: color 0.3s ease;
  }

  .save-local a:hover .ext {
    color: var(--accent);
  }

  .subscribe {
    margin-top: 0rem;
    padding-top: 1.6rem;
    max-width: none;
    background: var(--bg);
    position: relative;
    z-index: 999;
    margin: 0 auto;
    border-top: 1px solid var(--border);
  }

  #subscribe-under {
    margin-top: 0rem;
    padding-top: 0rem;
    max-width: 700px;
    background: var(--bg);
    position: relative;
    z-index: 999;
    margin: 0 auto;
  }

  .subscribe::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-dim), transparent);
  }

  .subscribe-form {
    display: flex;
    justify-content: flex-start;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
    padding: 0rem 2rem;
  }

  .subscribe-form input {
    max-width: 380px;
    flex: 1;
    background: transparent;
    border: 1px solid var(--border);
    padding: 0.6rem 0.8rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--text);
    letter-spacing: 0.05em;
    outline: none;
    transition: border-color 0.3s ease;
  }

  input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px var(--bg) inset; /* Change the color to your own background color */
    -webkit-text-fill-color: var(--text);
  }

  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px var(--bg) inset;/*your box-shadow*/
    -webkit-text-fill-color: var(--text);
  } 

  .subscribe-form input::placeholder {
    color: var(--text-dim);
    font-style: normal;
  }

  .subscribe-form input:focus {
    border-color: var(--accent-dim);
  }

  .subscribe-form button {
    background: transparent;
    border: 1px solid var(--border);
    padding: 0.55rem 0.8rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
    white-space: nowrap;
  }

  .subscribe-form button:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
  }

  .subscribe-sub {
    display: flex;
    justify-content: flex-start;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem 2rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--text);
  }

  .subscribe-drop {
    display: block;
    justify-content: flex-start;
    gap: 0;
    max-width: 700px;
    margin: 0 auto;
    padding: 0rem 2rem 2rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 300;
    color: var(--text);
  } 

  .subscribe-link {
      display: inline-block;
      font-size: 0.8rem;
      color: var(--text-bright);
      font-weight: 700;
      text-decoration: none;
      transition: color 0.3s ease;
      line-height: 1rem;
      padding-bottom: 2.5rem;
      padding-left: 2rem;
      padding-right: 2rem;
  }

  .subscribe-link .highlight {
    color: var(--accent);
  }

  .subscribe-link:hover {
    color: var(--accent);
  }

  .s {
    display: inline-flex;
    overflow: hidden;
    color: transparent;
    line-height: 0;
    font-size: 1.125;
  }

  .s::before {
    content: '.';
  }

  .return-nav {
    max-width: 700px;
    margin: 0 auto;
    padding: 0rem 2rem 2rem;
    text-align: left;
    background: var(--bg);
    z-index: 999;
  }  

  /* Selection color */
  ::selection {
    background: var(--accent);
    color: var(--bg);
  }

  ::-moz-selection {
    background: var(--accent);
    color: var(--bg);
  }

  /* Responsive */
  @media (max-width: 520px) {
    .header-inner {
      padding: 0 1.2rem;
    }
    main {
      padding: 0rem 1rem 0rem;
    }
    .post-body {
      font-size: 1.02rem;
      line-height: 1.6;
      -webkit-text-size-adjust: 100%;
    }
    .site-name {
      font-size: 1.2rem;
    }
    .post-meta .story-title {
      font-size: 1.1rem;
    }    
    .post-body .salutation {
      font-size: 1.05rem;
      line-height: 1.6;
    }
    .subscribe-drop {
      font-size: 0.7rem;
    }  
    .subscribe-link {
      padding: 0rem 1rem 1rem;
    }  
    .subscribe {
      max-width: 100%;
    }
    .subscribe-form {
      padding: 0 1rem;
    }
    .subscribe-sub {
      font-size: 0.7rem;
      padding: 1rem 1rem;
      text-align: left;
    }
    .subscribe-drop {
      font-size: 0.7rem;
      padding: 0rem 1rem 2rem;
      text-align: left;
    }
    .return-nav {
      font-size: 0.7rem;
      padding: 0rem 1rem 2rem;
      text-align: left;
    }  
    .post-body .cut-up {
      display: none;
    }
    .post-body .cut-up-mobile {
      /*font-family: 'IBM Plex Mono', monospace;*/
      font-size: 1.02rem;
      line-height: 1.6;
      color: var(--text);
      display: block;
      text-align-last: left;
      white-space: pre-wrap;
      overflow-x: clip;
      width: 100%;
      opacity: 1;
      -webkit-text-size-adjust: 100%;
    }
  }
  .term {
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.9rem, 2vw, 0.9rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-v-dim);
  }

  .term .cmd {
    color: var(--text-v-dim);
    font-weight: 700;
  }

  .term .cmd-full {
    color: var(--text-v-dim);
    font-weight: 700;
  }

  .term .cmd-mobile {
    color: var(--text-v-dim);
    font-weight: 700;
    display: none;
  }

  .term .dir {
    color: var(--accent-dim);
    font-weight: 400;
  }

  .term .heading {
    color: var(--text-bright);
    font-weight: 400;
  }

  .term .link {
    font-size: clamp(1.05rem, 2vw, 1.05rem);
    color: var(--text-bright);
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
    padding-top: 0.8rem;
    line-height: 1rem;
  }

  .term .link:hover {
    color: var(--accent);
  }

  .term .link-static {
    font-size: clamp(1.05rem, 2vw, 1.05rem);
    color: var(--text-bright);
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
    padding-top: 0.8rem;
    line-height: 1rem;
  }

  .term .link-decode {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-bright);
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
    padding: 0.6rem 0rem 1rem;
    line-height: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .term .link-decode:hover {
    color: var(--accent);
  }

  .term .comment {
    font-size: clamp(0.62rem, 2vw, 0.75rem);
    color: var(--accent-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .term .about {
    color: var(--text);
    font-family: 'Literata', serif;
    font-size: clamp(1rem, 2vw, 1rem);
    display: inline-block;
    padding-bottom: 0rem;
  }

  .term .about-describe {
    color: var(--text-dim);
    font-family: 'Literata', serif;
    font-size: clamp(1rem, 2vw, 1rem);
    display: inline-block;
    padding-bottom: 0rem;
  }

  .term .about-link {
    color: var(--text-bright);
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .term .about-link:hover {
    color: var(--accent);
  }

  .term .meta {
    color: var(--text-dim);
  }

  .term .hero {
    color: var(--accent-dim);
    font-weight: 400;
    text-transform: uppercase;
  }

  .term-block {
    margin-bottom: 0rem;
    white-space: pre-wrap;
    word-break: normal;
  }

  .term-block .heading {
    display: block;
    font-family: 'Space Mono', monospace;
    color: var(--text-bright);
    font-weight: 700;
    font-size: clamp(1.4rem, 2vw, 1.4rem);
  }

  .ls-verbose {
    display: none;
  }

  .ls-total {
    font-size: clamp(0.9rem, 2vw, 0.9rem);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-v-dim);
  }

  /* blinking cursor — shown when input is idle */
  .cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.2em;
    background: var(--text-dim);
    vertical-align: text-bottom;
    animation: blink 1.2s step-end infinite;
  }

  .cursor.hidden {
    display: none;
  }

  /* typewriter cursor */
  .type-cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--text);
    vertical-align: text-bottom;
    animation: blink 1.2s step-end infinite;
  }

  #typewriter-target {
    color: var(--text-dim);
  }

  /* page content — hidden until intro completes */

  #story-reveal {
    opacity: 0;
    visibility: hidden;
  }

  #story-reveal.revealed {
    animation: diagonal-reveal 1s ease-out forwards;
  }

  #story-reveal.no-anim {
    opacity: 1;
    visibility: visible;
    animation: none;
  }

  @media (prefers-reduced-motion: reduce) {
    #story-reveal {
      opacity: 1;
      visibility: visible;
      animation: none;
    }

    #story-reveal.revealed {
      animation: none;
      opacity: 1;
    }
  }

  #page-rest {
    opacity: 0;
    visibility: hidden;
  }

  #page-rest.revealed {
    animation: diagonal-reveal 1s ease-out forwards;
  }

  #page-rest.no-anim {
    opacity: 1;
    visibility: visible;
    animation: none;
  }

  /* motd output — hidden until typewriter triggers it */
  #motd-output {
    display: block;
    opacity: 0;
  }

  #motd-output.visible {
    display: block;
    opacity: 1;
  }

  @keyframes flicker-in {
    0%   { opacity: 0; }
    45%  { opacity: 0.6; }
    47%  { opacity: 0.2; }
    49%  { opacity: 0.4; }  
    55%  { opacity: 0.2; }    
    100% { opacity: 1; }
  }

  .feed-divider {
    display: block;
    color: var(--border);
    letter-spacing: -0.05em;
    margin: 0rem 0rem -1.6rem;
    background: linear-gradient(90deg, var(--border), transparent);
    height: 1px;
  }  


  .feed-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    color: var(--text);
    background: none;
    border: none;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1.6rem 0rem 0rem;
    max-width: 700px;
    display: block;
    text-align: left;
    transition: color 0.3s ease;
    position: relative;
    transition: opacity 1s ease;
  }

  .feed-label .live {
    color: var(--accent-dim);
  }

  /* signal wrapper — fixed height, content flows up */
  #signal-wrapper {
    overflow-y: auto;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
    scrollbar-width: none;      /* Firefox */
    -webkit-overflow-scrolling: touch; /* smoother mobile scrolling */
    white-space: pre-wrap;
    word-break: normal;
    margin-bottom: 1rem;
    scrollbar-gutter: stable both-edges;
    margin-top: 1.6rem;
    max-width: 100%;
    min-width: 0;
  }

  #signal-stream {
    position: relative;
    scrollbar-width: none;      /* Firefox */
    -webkit-overflow-scrolling: touch; /* smoother mobile scrolling */
    scrollbar-gutter: stable both-edges;
    overflow-x: hidden;
  }

  /* signal feed lines */
  .signal-line {
    display: block;
    color: var(--text-dim);
    opacity: 1;
    animation: signal-in 0.6s ease-out forwards;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  .signal-line.fading {
    animation: signal-out 1s ease-out forwards;
  }

  @keyframes signal-in {
    0%   { opacity: 0; }
    30%  { opacity: 0.6; }
    35%  { opacity: 0.1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
  }

  @keyframes signal-out {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }

  /* command echo and response in the stream */
  .stream-cmd {
    display: block;
    color: var(--text);
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  .stream-response {
    display: block;
    color: var(--text);
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
  }

  .stream-response.response-accent {
    color: var(--accent);
  }

  .stream-response.response-bright {
    color: var(--text-bright);
  }

  .stream-response.response-warn {
    color: var(--accent);
  }

  .stream-response.response-scroll {
    display: block;
    overflow-x: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
  }

  /* interactive input line */
  .input-line {
    display: flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }

  .input-prompt {
    color: var(--text);
    font-weight: 700;
    flex: 0 0 auto;
    min-width: 0;
  }

  #term-input {
    background: transparent;
    border: none;
    outline: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.9rem, 2vw, 0.9rem);
    font-weight: 700;
    color: var(--text);
    caret-color: transparent;
    caret-shape: block;
    padding: 0;
    margin: 0 0 0 -0.55em;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    transform: translateZ(0);
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.6;
  }

  #term-input:focus {
    caret-color: var(--text-bright);
    transform: translateZ(0);
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.6;
  }

  #term-input::placeholder {
    color: transparent;
  }

  /* first-session onboarding hint — custom placeholder sibling */
  .input-hint {
    visibility: hidden;
    flex: 0 0 0px;
    min-width: 0;
    overflow: visible;
    white-space: pre;
    color: var(--text-dim);
    pointer-events: none;
    position: relative;
    z-index: 1;
    font-family: 'IBM Plex Mono', monospace;
    font-size: clamp(0.9rem, 2vw, 0.9rem);
    font-weight: 700;
    line-height: 1.6;
  }

  .input-hint.visible {
    visibility: visible;
  }

  /* when cursor is hidden (input focused), shift hint right to maintain its position */
  .input-prompt:has(.cursor.hidden) ~ .input-hint {
    margin-left: 0.55em;
  }

  /* subscribe response area */
  #subscribe-response {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    color: var(--text-dim);
    max-width: 700px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: none;
  }

  #subscribe-response .freq-scan {
    color: var(--accent-dim);
    transition: color 0.2s;
  }

  #subscribe-response .freq-locked {
    color: var(--accent);
    font-weight: 700;
  }

  #subscribe-response .reg-line {
    display: block;
    color: var(--text-dim);
  }

  #subscribe-response .reg-welcome {
    display: block;
    color: var(--text);
  }

  .gui {
    display: block;
  }

  .gui-toggle {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    color: var(--text-dim);
    background: none;
    border: none;
    cursor: pointer;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.5rem 0rem;
    max-width: 700px;
    display: inline;
    text-align: left;
    transition: color 0.3s ease;
    position: relative;
    transition: opacity 1s ease;
  }

  .gui-toggle.intro-hidden {
    opacity: 0;
    pointer-events: none;
  }

  #gui.gui-reveal,
  #motd-block.gui-reveal {
    animation: diagonal-reveal 1s ease-out forwards;
  }

  .gui-toggle:hover {
    color: var(--accent-dim);
  }

  @media (any-pointer: coarse) {
    .gui-toggle:hover {
      color: var(--accent-dim);
    } 
  }

  @media (max-width: 520px) {
    .gui-toggle {
      padding: 0.5rem 0rem 0.5rem;
    }
  }  

  /* respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    #page-rest {
      opacity: 1;
      visibility: visible;
      animation: none;
    }
    #page-rest.revealed {
      animation: none;
      opacity: 1;
    }
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }

  @media (max-width: 520px) {
    .ls-verbose { display: none; }
    .ls-total { display: none; }
    .ls-dot { display: none; }
    .term .cmd-full { display: none; }
    .term .cmd-mobile { display: inline; }
    #signal-stream {
      position: relative;
    }
    #subscribe-response {
      font-size: 0.7rem;
      padding: 1rem 1rem;
      text-align: left;
    }
  }