/* Promptr stylesheet — single hand-authored, native CSS file.
   No preprocessor, no build step. Cascade order (which used to come from
   the src/scss/style.scss @import list) is now explicit via @layer. */

@layer reset, root, base, grid, layout, components, marquee, share, confirm, ads, about;

/* ============================= reset ============================= */
/* normalize.css v1.0.1 | MIT License | git.io/normalize */
@layer reset {
  article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
  audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
  audio:not([controls]){display:none;height:0}
  [hidden]{display:none}
  html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
  html,button,input,select,textarea{font-family:sans-serif}
  body{margin:0}
  a:focus{outline:thin dotted}
  a:active,a:hover{outline:0}
  h1{font-size:2em;margin:.67em 0}
  h2{font-size:1.5em;margin:.83em 0}
  h3{font-size:1.17em;margin:1em 0}
  h4{font-size:1em;margin:1.33em 0}
  h5{font-size:.83em;margin:1.67em 0}
  h6{font-size:.75em;margin:2.33em 0}
  abbr[title]{border-bottom:1px dotted}
  b,strong{font-weight:bold}
  blockquote{margin:1em 40px}
  dfn{font-style:italic}
  mark{background:#ff0;color:#000}
  p,pre{margin:1em 0}
  code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
  pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
  q{quotes:none}
  q:before,q:after{content:'';content:none}
  small{font-size:80%}
  sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  sup{top:-0.5em}
  sub{bottom:-0.25em}
  dl,menu,ol,ul{margin:1em 0}
  dd{margin:0 0 0 40px}
  menu,ol,ul{padding:0 0 0 40px}
  nav ul,nav ol{list-style:none;list-style-image:none}
  img{border:0;-ms-interpolation-mode:bicubic}
  svg:not(:root){overflow:hidden}
  figure{margin:0}
  form{margin:0}
  fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
  legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
  button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
  button,input{line-height:normal}
  button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
  button[disabled],input[disabled]{cursor:default}
  input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
  input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
  input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
  button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  textarea{overflow:auto;vertical-align:top}
  table{border-collapse:collapse;border-spacing:0}
}

/* ============================== root ============================== */
/* css custom properties used throughout the project
   -- colors -- type -- layout -- buttons -- borders */
@layer root {
  :root {
    --white: #ffffff;
    --black: #000000;

    /* grays */
    --gray-900: #121212;
    --gray-800: #212121;
    --gray-700: #313131;
    --gray-600: #414141;
    --gray-500: #616161;
    --gray-400: #c1c1c1;
    --gray-300: #e1e1e1;
    --gray-200: #f1f1f1;
    --gray-100: var(--white);

    /* bright colors */
    --green: #2ECC71;
    --green-dark: #27AE60;

    --red: #E74C3C;
    --red-light: #e95a4b;
    --red-dark: #C0392C;

    --yellow: #F1C40E;
    --yellow-dark: #F2A60F;

    /* editor colors */
    --neonGreen: #74ee15;
    --neonPink: #f000ff;
    --neonBlue: #009AF4;

    /* type */
    --font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --font-size-base: 1.4rem;
    --line-height-base: 1.4;

    /* layout */
    --header-height: 6rem;
    --footer-height: 6rem;

    /* breakpoints */
    --breakpoint-sm: 57.6rem;
    --breakpoint-base: 76.8rem;
    --breakpoint-lg: 99.2rem;
    --breakpoint-xl: 120rem;

    /* button vars */
    --btn-border-radius: 9px;
    --btn-play-color: var(--green);
    --btn-play-hover: var(--green-dark);
    --btn-pause-color: var(--yellow);
    --btn-pause-hover: var(--yellow-dark);

    /* borders */
    --border-default: 1px solid var(--gray-600);
  }
}

/* ============================== base ============================== */
@layer base {
  html {
    background-color: var(--black);
    font-size: 62.5%
  }

  body {
    font-size: var(--font-size-base);
    font-size: 14px; /* fallback in px */
    line-height: var(--line-height-base);
    transition: all ease-out .15s;
  }

  ::selection {
    background-color: var(--gray-600);
  }

  [contenteditable=true]:empty:before {
    content: attr(data-placeholder);
    color: var(--gray-600);
    pointer-events: none;
    display: block; /* For Firefox */
  }

  /* Safari + Chrome + Edge */
  *::-webkit-scrollbar {
    width: 8px; /* same idea as 'thin' */
  }

  *::-webkit-scrollbar-track {
    background: var(--black);
  }

  *::-webkit-scrollbar-thumb {
    background-color: var(--gray-800);
    border-radius: 4px;
    border: 2px solid var(--black); /* optional for better contrast */
  }

  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-700); /* slightly lighter on hover */
  }
}

/* ============================== grid ============================== */
@layer grid {
  body {
    height: -moz-fill-available;
    height: -webkit-fill-available;
    overflow-x: hidden;

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) 1fr var(--footer-height);
    grid-template-areas:
      'header'
      'main'
      'footer';

    @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
      /* hack to target chrome and opera browsers */
      height: 100dvh;
    }
  }
}

/* ============================= layout ============================= */
@layer layout {
  header,
  footer {
    background-color: var(--gray-900);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    transition: opacity linear .25s .125s;

    @media only screen and (hover: hover) {
      opacity: .4;

      &:hover {
        opacity: 1;
      }
    }
  }

  header {
    grid-area: header;
    justify-content: space-between;
    font-family: var(--font-mono);

    & a,
    & .trigger-share {
      color: var(--gray-400);
      cursor: pointer;
      padding: 0 2rem;
      text-decoration: none;
      transition: color ease-in-out .1s;

      &:hover {
        color: var(--gray-100);
      }

      &.active {
        color: var(--white);
      }

      @media only screen and (max-width: 992px) {
        font-size: 1.2rem;
        padding: 0 1rem;
      }
    }

    .menu-right {
      display: flex;
      flex-direction: row;
    }
  }

  .logo {
    width: 16rem;
    display: grid;
    max-width: 100%;
  }

  main,
  .wrapper {
    background-color: var(--black);
    color: var(--white);
    grid-area: main;
    overflow-x: auto;
    /* auto, not scroll — main should only be scrollable when content
       (real text, or the engine's lead-in/runway spacers while playing)
       actually exceeds the viewport. Never force a permanent scrollbar. */
    overflow-y: auto;
    position: relative;
    font-size: 6rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-800) var(--black);
    overscroll-behavior: auto;

    @media only screen and (max-width: 992px) {
      overflow-wrap: break-word;
      padding-left: 5%;
      padding-right: 5%;
    }
  }

  footer {
    font-family: var(--font-mono);
    grid-area: footer;

    .stretch {
      flex-grow: 1;
      text-align: right;

      @media only screen and (max-width: 1200px) {
        flex-grow: 0;
      }
    }

    .danger-link {
      background-color: transparent;
      border: 0;
      color: var(--red);
      cursor: pointer;
      font-family: var(--font-mono);
      padding: 0;
      margin: 0;
      text-decoration: none;

      &:hover {
        color: var(--red-dark);
      }
    }

    @media only screen and (max-width: 1200px) {
      justify-content: space-between;
    }
  }

  .container {
    width: 100%;
    height: 100% !important;
    margin: 0 auto;
    max-width: var(--breakpoint-base);
    box-sizing: border-box;

    @media (min-width: 1200px) {
      max-width: var(--breakpoint-xl);
    }

    @media (max-width: 1199px) and (min-width: 993px) {
      max-width: var(--breakpoint-lg);
    }
  }

  .container-sm {
    max-width: var(--breakpoint-base) !important;
  }

  /* utilities for layout */
  .hidden-desktop {
    display: none !important;

    @media only screen and (max-width: 1200px) {
      display: block !important;
    }
  }

  .hidden-mobile {
    display: none !important;

    @media only screen and (min-width: 1200px) {
      display: block !important;
    }
  }
}

/* ============================ components ============================ */
@layer components {
  /* btn related */
  .btn {
    box-sizing: border-box;
    border: 0px;
    display: inline-block;
    vertical-align: baseline;
    margin: 0;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--font-size-base);
    zoom: 1;
    transition: all ease-in-out .1s;

    &.btn-play,
    &.btn-resume {
      background-color: var(--gray-800);
      border-radius: var(--btn-border-radius);
      color: var(--green);
      height: 3.6rem;
      padding: 0 2rem;

      &:hover {
        background-color: var(--gray-700);
      }
    }

    &.btn-pause {
      background-color: var(--gray-800);
      border-radius: var(--btn-border-radius);
      color: var(--yellow);
      height: 3.6rem;
      padding: 0 2rem;

      &:hover {
        background-color: var(--gray-700);
      }
    }

    &.btn-mobile-control {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath  fill='%23616161' d='M2 12c0-.865.11-1.703.316-2.504A3 3 0 0 0 4.99 4.867a9.99 9.99 0 0 1 4.335-2.505 3 3 0 0 0 5.348 0 9.99 9.99 0 0 1 4.335 2.505 3 3 0 0 0 2.675 4.63c.206.8.316 1.638.316 2.503 0 .865-.11 1.703-.316 2.504a3 3 0 0 0-2.675 4.629 9.99 9.99 0 0 1-4.335 2.505 3 3 0 0 0-5.348 0 9.99 9.99 0 0 1-4.335-2.505 3 3 0 0 0-2.675-4.63C2.11 13.704 2 12.866 2 12zm4.804 3c.63 1.091.81 2.346.564 3.524.408.29.842.541 1.297.75A4.993 4.993 0 0 1 12 18c1.26 0 2.438.471 3.335 1.274.455-.209.889-.46 1.297-.75A4.993 4.993 0 0 1 17.196 15a4.993 4.993 0 0 1 2.77-2.25 8.126 8.126 0 0 0 0-1.5A4.993 4.993 0 0 1 17.195 9a4.993 4.993 0 0 1-.564-3.524 7.989 7.989 0 0 0-1.297-.75A4.993 4.993 0 0 1 12 6a4.993 4.993 0 0 1-3.335-1.274 7.99 7.99 0 0 0-1.297.75A4.993 4.993 0 0 1 6.804 9a4.993 4.993 0 0 1-2.77 2.25 8.126 8.126 0 0 0 0 1.5A4.993 4.993 0 0 1 6.805 15zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: 50%;
      height: 4rem;
      width: 4rem;
      transform: rotate(0deg);
      transition: all ease-in-out .2s;
      z-index: 1;

      &.open {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath fill='white' d='M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z'/%3E%3C/svg%3E");
        transform: rotate(360deg);
      }
    }

    &.btn-reset {
      background-color: var(--gray-200);
      border-radius: var(--btn-border-radius);
      color: var(--red);
      font-size: 1.2rem;
      margin-right: 1.5rem;
      height: 3rem;
      padding: 0 1rem;

      &:hover {
        background-color: var(--gray-300);
        color: var(--red-dark);
      }
    }

    &.btn-reset-cancel {
      background-color: var(--gray-700);
      border-radius: var(--btn-border-radius);
      color: var(--white);
      font-size: 1.2rem;
      height: 3rem;
      padding: 0 1rem;

      &:hover {
        background-color: var(--gray-900);
      }
    }
  }

  .btn-group {
    background-color: var(--gray-800);
    border-radius: var(--btn-border-radius);
    display: flex;
    justify-content: center;
    align-items: center stretch;
    margin-right: 2rem;
    overflow: hidden;

    & svg {
      background-color: var(--black);
      padding: 1rem;
      height: 16px;
      width: 16px;
    }

    .btn {
      background-color: transparent;
      color: var(--gray-500);
      padding: 0 1.5rem;
      font-size: 1.2rem;

      &:hover, &:active {
        color: var(--gray-400);
      }

      &.btn-active {
        color: var(--white);
      }

      &[name="speed-slow"] {
        &:hover {
          color: #279FF5
        }
      }

      &[name="speed-med"] {
        &:hover {
          color: #DFEB44
        }
      }

      &[name="speed-slowish"] {
        &:hover {
          color: #44EB81
        }
      }

      &[name="speed-fastish"] {
        &:hover {
          color: #FCA93D
        }
      }

      &[name="speed-fast"] {
        &:hover {
          color: #FC3D3D
        }
      }
    }

    @media (max-width: 1440px) and (min-width: 1200px) {
      margin-right: 2rem;

      .btn {
        font-size: 1.2rem;
      }
    }

    @media only screen and (max-width: 1200px) {
      margin-right: 0;
      margin-top: 2rem;
      justify-content: flex-start;

      &:first-child {
        margin-top: 0;
      }
    }
  }

  .btn-group-mini {
    background-color: var(--black);
    border: var(--border-default);
    flex-direction: column;
    width: 4rem;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    overflow: visible;

    & .btn {
      border-top: var(--border-default);
      height: 4rem;
      position: relative;

      &:first-child {
        border-top: 0px;
        border-top-right-radius: var(--btn-border-radius);
      }

      &:last-child {
        border-bottom-right-radius: var(--btn-border-radius);
      }

      &:hover {
        background-color: var(--gray-900);
      }
    }
  }

  .color-ind {
    height: 5px;
    width: 5px;
    border-radius: 5px;
    border: 1px solid var(--black);
    display: inline-block;
    background-color: var(--white);
    position: absolute;
    bottom: 12px;
    right: 13px;
  }

  .menu-mini {
    background-color: var(--gray-900);
    border-radius: 4px;
    padding: .75rem;
    z-index: 1;
    position: absolute;
    display: flex;
    left: 55px;
    bottom: 0px;
    margin: 0;
    border: 1px solid var(--gray-500);

    &:before {
      content: "";
      height: 10px;
      width: 10px;
      background-color: var(--gray-900);
      display: block;
      position: absolute;
      transform: rotate(45deg);
      border-bottom-left-radius: 4px;
      border-top-right-radius: 50%;
      left: -6px;
      top: 13px;
      z-index: 0;
      border-left: 1px solid var(--gray-500);
      border-bottom: 1px solid var(--gray-500);
    }
  }

  .ind {
    height: 20px;
    width: 20px;
    border-radius: 20px;
    border: 1px solid var(--black);
    display: inline-block;
    margin-left: 1rem;

    &:first-child {
      margin-left: 0;
    }
  }

  .ind-white {
    background-color: var(--white);
  }

  .ind-green {
    background-color: var(--neonGreen);
  }

  .ind-pink {
    background-color: var(--neonPink);
  }

  .ind-blue {
    background-color: var(--neonBlue);
  }

  /* wrapper for controls */
  .controls {
    display: flex;

    @media only screen and (max-width: 1200px) {
      background-color: var(--gray-700);
      border-radius: var(--btn-border-radius);
      box-shadow: 0 7px 10px -4px var(--black);
      flex-direction: column;
      width: 100%;
      position: absolute;
      bottom: 7rem;
      left: 0;
      padding: 2rem;
      display: none;
      margin-left: 2rem;
      width: auto;

      &:before {
        content: "";
        background-color: var(--gray-700);
        border-bottom-right-radius: var(--btn-border-radius);
        border-bottom-left-radius: var(--btn-border-radius);
        box-shadow: 0 7px 10px -4px var(--black);
        width: 4rem;
        height: 7rem;
        position: absolute;
        bottom: -6rem;
        left: 0;
      }
    }
  }

  /* type */
  a {
    color: var(--green);
    text-decoration: none;
  }

  /* for execCommand editor */
  b,
  strong {
    font-weight: bold;
  }

  i,
  em {
    font-style: italic;
  }
}

/* ============================= marquee ============================= */
/* teleprompter scroll surface (name kept for continuity with the old
   jquery.marquee-based engine; scrolling itself is now plain native
   scroll driven by src/js/_engine.js, not a marquee plugin) */
@layer marquee {
  .marquee,
  .marquee-with-options,
  .marquee-vert-before,
  .marquee-vert {
    width: 100%;
    height: 100% !important;
    padding-top: 6rem;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    outline: 0;

    @media (min-width: 768px) {
      padding-left: 4.2rem;
      padding-right: 4.2rem;
    }
  }

  /* Wraps .marquee + its lead-in/runway spacers (not .editor-palette, which
     stays position: fixed relative to main — applying a transform to an
     ancestor makes it a new containing block for fixed descendants, so
     .editor-palette must stay outside this wrapper). Needs an explicit
     height so .marquee's own height:100% still resolves against a definite
     ancestor. The scroll engine (src/js/_engine.js) animates this wrapper's
     transform during playback — see the engine's own comment for why
     transform, not scrollTop, drives the actual motion. */
  .scroll-content {
    display: block;
    height: 100%;
  }

  /* Blank spacers before/after the script text. Both default to 0 height —
     while idle/editing, main should only be scrollable if the actual typed
     content overflows the viewport, never because of these. The scroll
     engine sizes both to one viewport on Play and collapses them back to 0
     on Reset:
       - .scroll-leadin (before .marquee): at the start of playback, the
         viewport shows blank lead-in, not the first line already in place —
         the same continuous motion that drives normal playback carries the
         first line up into view from the bottom.
       - .scroll-runway (after .marquee): without it, short scripts have
         nowhere to scroll once playing (main.scrollHeight == clientHeight)
         and Start would silently do nothing. Also lets the last line
         scroll fully past the reading line instead of stopping abruptly.
     Real sibling elements (not ::after) because generated content inside a
     contenteditable is unreliable across browsers. */
  .scroll-leadin,
  .scroll-runway {
    display: block;
    height: 0;
  }

  /* for execCommand editor styles */
  main {
    &:hover {
      .editor-palette {
        visibility: visible;
        opacity: 1;
      }
    }

    .editor-palette {
      box-shadow: 0 7px 10px -4px var(--black);
      visibility: hidden;
      opacity: 0;
      position: fixed;
      top: 12rem;
      left: 0;
      transition: all ease-in-out .15s;

      @media only screen and (max-width: 992px) {
        display: none;
      }
    }
  }
}

/* ============================== share ============================== */
@layer share {
  .trigger-share {
    position: relative;
  }

  .menu-share {
    background-color: var(--gray-700);
    border-radius: var(--btn-border-radius);
    box-shadow: 0 7px 10px -4px var(--black);
    flex-direction: column;
    font-family: var(--font-mono);
    display: flex;
    width: 100%;
    position: absolute;
    top: 5rem;
    right: 0;
    padding: 2rem;
    width: auto;
    z-index: 100;
  }

  [class^="share-"] {
    background-repeat: no-repeat;
    padding-left: 2rem;
    background-position: 50%;
    background-size: contain;

    &:first-child {
      margin-top: 0;
    }
  }

  .share-reddit {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm6.67-10a1.46 1.46 0 0 0-2.47-1 7.12 7.12 0 0 0-3.85-1.23L13 6.65l2.14.45a1 1 0 1 0 .13-.61L12.82 6a.31.31 0 0 0-.37.24l-.74 3.47a7.14 7.14 0 0 0-3.9 1.23 1.46 1.46 0 1 0-1.61 2.39 2.87 2.87 0 0 0 0 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 0 0 0-.44 1.46 1.46 0 0 0 .81-1.33zm-10 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5.81 2.75a3.84 3.84 0 0 1-2.47.77 3.84 3.84 0 0 1-2.47-.77.27.27 0 0 1 .38-.38A3.27 3.27 0 0 0 12 16a3.28 3.28 0 0 0 2.09-.61.28.28 0 1 1 .39.4v-.04zm-.18-1.71a1 1 0 1 1 1-1 1 1 0 0 1-1.01 1.04l.01-.04z' fill='%23c1c1c1'/%3E%3C/svg%3E");

    &:hover {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm6.67-10a1.46 1.46 0 0 0-2.47-1 7.12 7.12 0 0 0-3.85-1.23L13 6.65l2.14.45a1 1 0 1 0 .13-.61L12.82 6a.31.31 0 0 0-.37.24l-.74 3.47a7.14 7.14 0 0 0-3.9 1.23 1.46 1.46 0 1 0-1.61 2.39 2.87 2.87 0 0 0 0 .44c0 2.24 2.61 4.06 5.83 4.06s5.83-1.82 5.83-4.06a2.87 2.87 0 0 0 0-.44 1.46 1.46 0 0 0 .81-1.33zm-10 1a1 1 0 1 1 2 0 1 1 0 0 1-2 0zm5.81 2.75a3.84 3.84 0 0 1-2.47.77 3.84 3.84 0 0 1-2.47-.77.27.27 0 0 1 .38-.38A3.27 3.27 0 0 0 12 16a3.28 3.28 0 0 0 2.09-.61.28.28 0 1 1 .39.4v-.04zm-.18-1.71a1 1 0 1 1 1-1 1 1 0 0 1-1.01 1.04l.01-.04z' fill='%23ff4500'/%3E%3C/svg%3E");

      color: #ff4500;
    }
  }

  .share-twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z' fill='%23c1c1c1'/%3E%3C/svg%3E");

    &:hover {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z' fill='%231da1f2'/%3E%3C/svg%3E");

      color: #1da1f2;
    }
  }

  .share-linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715zM7.003 8.575a1.546 1.546 0 0 1-1.548-1.549 1.548 1.548 0 1 1 1.547 1.549zm1.336 9.764H5.666V9.75H8.34v8.589zM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.003z' fill='%23c1c1c1'/%3E%3C/svg%3E");

    &:hover {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715zM7.003 8.575a1.546 1.546 0 0 1-1.548-1.549 1.548 1.548 0 1 1 1.547 1.549zm1.336 9.764H5.666V9.75H8.34v8.589zM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.003z' fill='%230a66c2'/%3E%3C/svg%3E");

      color: #0a66c2;
    }
  }

  .share-hackernews {
  }
}

/* ============================= confirm ============================= */
@layer confirm {
  .menu-confirm {
    background-color: var(--gray-800);
    border-radius: var(--btn-border-radius);
    box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .15);
    color: var(--white);
    display: none;
    font-family: var(--font-mono);
    overflow: hidden;
    position: absolute;
    bottom: 8rem;
    right: 2rem;
    max-width: 224px;
    width: 100%;
    z-index: 1;

    & h3 {
      margin-bottom: 12px;
      margin-top: 0;
    }

    .confirm-header {
      margin: 12px;
      border-radius: 3px;
      background-image: linear-gradient(45deg, var(--red-light) 25%, var(--red) 25%, var(--red) 50%, var(--red-light) 50%, var(--red-light) 75%, var(--red) 75%, var(--red) 100%);
      background-size: 56.57px 56.57px;
      padding: 12px;

      > p {
        margin: 0;
      }
    }

    .confirm-body {
      padding: 12px;
      display: flex;
      justify-content: space-between;
      text-align: right;
    }
  }
}

/* ================================ ads ================================ */
@layer ads {
  .ad--sticky {
    position: fixed;
    z-index: 0;
    bottom: 8rem;
    max-width: 400px;
    right: 20px;
    transition: right ease-in-out .2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
      Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;

    @media only screen and (max-width: 992px) {
      display: none;
    }
  }

  .ad__banner {
    padding: 12px;
    border-radius: var(--btn-border-radius);
    background-color: white;
    box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .15);
    transition: background-color .15s ease;
  }

  .ad__banner--column {
    flex-direction: column;
    width: 200px;

    & .ad__image {
      width: 100% !important;
    }
  }

  /* the ad template they warned you about
  <a href="##statlink##" target="_blank" id="ad-click">
      <div class="ad__banner ad__banner--dark">
          <div class="ad__image" style="background-color: ##backgroundColor##">
              <img src="##logo##" alt="sponsored by ##company##"></div><div class="ad__desc">
                  <div class="ad__tagline">##description##</div>
                  <div class="ad__sponsored">Sponsored by <strong style="color: ##backgroundColor##">##company##</strong></div>
              </div>
          </div>
      </a> */

  .ad__banner--dark {
    background-color: var(--gray-800);
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;

    .ad__image {
      border-radius: 3px;
      box-sizing: border-box;
      flex-shrink: 0;
      display: flex;
      width: 150px;
      min-height: 100px;
      align-items: center;
      justify-content: center;
      padding: 12px;

      > img {
        max-width: 150px;
      }
    }

    .ad__button {
      border-radius: 6px;
      text-align: center;
      padding: 8px 16px;
    }

    .ad__desc {
      color: white;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .ad__tagline {
        margin-bottom: 16px;
        font-size: 12px;
      }

      .ad__sponsored {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--gray-500);
      }
    }
  }

  /* carbon ads code */
  #carbonads * {
    margin: initial;
    padding: initial;
    line-height: initial;
  }

  #carbonads {
    @media only screen and (max-width: 992px) {
      display: none;
    }
  }

  #carbonads {
    --carbon-font-family: -apple-system, BlinkMacSystemFont,
      'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
      'Helvetica Neue', Helvetica, Arial, sans-serif;
    --carbon-font-size: 14px;
    --carbon-padding: 12px;
    --carbon-max-char: 20ch;
    --carbon-bg-primary: hsl(0, 0%, 98%);
    --carbon-bg-secondary: hsl(0, 0%, 92%);
    --carbon-text-color: hsl(0, 0%, 20%);
    z-index: 10;
    font-size: var(--carbon-font-size);
    font-family: var(--carbon-font-family);
  }

  #carbonads > span {
    position: fixed;
    right: 20px;
    bottom: 325px;
    border-radius: 4px;
    width: 130px;
    display: flex;
    flex-direction: column;
    padding: var(--carbon-padding);
    gap: var(--carbon-padding);
    background-color: var(--carbon-bg-primary);
    box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085),
      0 0 2px hsl(0deg 0% 0% / 0.085),
      0 0 4px hsl(0deg 0% 0% / 0.085),
      0 0 8px hsl(0deg 0% 0% / 0.085);
  }

  #carbonads a {
    color: var(--carbon-text-color);
    text-decoration: none;
  }

  #carbonads a:hover {
    color: var(--carbon-text-color);
  }

  #carbonads .carbon-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5ex;
  }

  #carbonads .carbon-img {
    flex: 0 0 130px;
  }

  #carbonads .carbon-img img {
    display: block;
    border-radius: 3px;
  }

  #carbonads .carbon-text {
    flex-grow: 1;
    flex-basis: var(--carbon-max-char);
    line-height: 1.4;
    text-align: left;
  }

  #carbonads .carbon-poweredby {
    padding: 6px 8px;
    background: var(--carbon-bg-secondary);
    color: var(--carbon-text-color);
    font-weight: 600;
    font-size: 0.6em;
    line-height: 1.4;
    letter-spacing: 0.2ch;
    text-align: center;
    text-transform: uppercase;
  }

  @media (prefers-color-scheme: dark) {
    #carbonads {
      --carbon-bg-primary: hsl(0, 0%, 12%);
      --carbon-bg-secondary: hsl(0, 0%, 15%);
      --carbon-text-color: hsl(0, 0%, 90%);
    }
  }

  /* <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYDP27L&placement=promptrco"
  id="_carbonads_js"></script><script type="text/javascript">jQuery(function ($) {
      $('.btn').on('click', function () {
          if (!$("#carbonads")[0]) return;
          if (typeof _carbonads !== 'undefined') _carbonads.refresh();
      });
  }); </script> */
}

/* ============================== about ============================== */
/* Typographic treatment for about.html's content column, scoped to
   .about-content so it never touches index.html (which reuses h3/p for its
   own confirm dialog — see components layer). Hierarchy comes from type
   weight, size, spacing and a numbering system, not boxes, cards, or
   columns. --font-sans-serif was defined in the root layer but unused
   until now; body copy reads better in it than the generic `sans-serif`
   keyword it was falling back to, and pairing it against --font-mono for
   labels/headings gives the page a second, deliberate typographic voice
   instead of running everything through the site's UI chrome font. */
@layer about {
  .about-content {
    /* main has font-size: 6rem for index.html's own teleprompter text
       (read from a distance) — without an explicit override here, plain
       elements below inherit that same 60px and render enormous. */
    font-size: 1.7rem;
    font-family: var(--font-sans-serif);
    max-width: 640px;
    margin: 0 auto;
    padding: 8rem 5% 6rem;
    height: auto !important;
    counter-reset: section;

    & p {
      line-height: 1.65;
      color: var(--gray-300);
    }

    & a {
      color: var(--white);
      text-decoration: underline;
      text-decoration-color: var(--gray-600);
      text-underline-offset: 3px;

      &:hover {
        text-decoration-color: var(--green);
      }
    }

    & ul {
      color: var(--gray-300);
      line-height: 1.8;
    }
  }

  /* the lead statement — the one line on the page that isn't part of the
     numbered system, playing the role of a masthead/standfirst */
  .about-hero {
    font-family: var(--font-mono);
    font-size: 2.4rem;
    line-height: 1.35;
    color: var(--white);
    font-weight: 600;
    margin-bottom: 3rem !important;
  }

  .about-content hr {
    border: none;
    border-top: 1px solid var(--gray-800);
    margin: 4rem 0;
  }

  /* numbered section labels — counter-based, not hardcoded, so reordering
     or adding a section never requires renumbering anything by hand */
  .about-content h3 {
    counter-increment: section;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 2rem;

    &::before {
      content: counter(section, decimal-leading-zero) '  ';
      color: var(--green);
    }
  }

  .faq-item {
    margin-bottom: 2.8rem;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  .faq-item h4 {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: .6rem;
  }

  .faq-item p {
    margin: 0;
  }
}