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

:root {

  --bg: #050505;

  --panel: rgba(18,18,18,0.96);

  --panel-soft: rgba(255,255,255,0.04);

  --border: rgba(255,255,255,0.08);

  --border-strong: rgba(255,255,255,0.18);

  --text: #f2f2f2;

  --muted: #8d8d8d;

  --ghost: rgba(255,255,255,0.24);

  --shadow: rgba(0,0,0,0.55);

  --font-size: 16px;

  --line-height: 1.7;

  --writing-width: 720px;

  --marker-size: 10px;

  --transition-fast: 0.18s ease;

  --transition-slow: 0.28s ease;

}

/* =========================
   HTML / BODY
========================= */

html,
body {

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: var(--bg);

  color: var(--text);

  font-family:
    "Courier New",
    Consolas,
    monospace;

  font-size: var(--font-size);

  line-height: var(--line-height);

  -webkit-font-smoothing: antialiased;

}

body {

  position: relative;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,0.03),
      transparent 28%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(255,255,255,0.025),
      transparent 34%
    ),

    linear-gradient(
      135deg,
      rgba(255,255,255,0.015),
      transparent 60%
    ),

    var(--bg);

}

/* =========================
   TYPOGRAPHY
========================= */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-weight: normal;

}

p {

  line-height: 1.8;

}

::selection {

  background:
    rgba(255,255,255,0.14);

  color:
    var(--text);

}

/* =========================
   BUTTONS
========================= */

button {

  border:
    1px solid var(--border);

  background:
    rgba(255,255,255,0.04);

  color:
    var(--text);

  font-family:
    inherit;

  font-size:
    12px;

  padding:
    8px 12px;

  cursor:
    pointer;

  transition:
    background var(--transition-fast),
    border var(--transition-fast),
    opacity var(--transition-fast),
    transform var(--transition-fast);

}

button:hover {

  background:
    rgba(255,255,255,0.08);

  border-color:
    var(--border-strong);

}

button:active {

  opacity: 0.7;

  transform:
    scale(0.98);

}

/* =========================
   INPUTS
========================= */

input,
textarea,
select {

  font-family:
    inherit;

}

input,
textarea,
select,
button {

  outline: none;

}

/* =========================
   RANGE
========================= */

input[type="range"] {

  width: 100%;

  appearance: none;

  background:
    transparent;

}

input[type="range"]::-webkit-slider-runnable-track {

  height: 2px;

  background:
    rgba(255,255,255,0.12);

}

input[type="range"]::-webkit-slider-thumb {

  appearance: none;

  width: 14px;
  height: 14px;

  border-radius: 50%;

  background:
    var(--text);

  margin-top: -6px;

  cursor: pointer;

}

/* =========================
   CHECKBOX
========================= */

input[type="checkbox"] {

  accent-color:
    #888;

}

/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar {

  width: 10px;
  height: 10px;

}

::-webkit-scrollbar-track {

  background:
    transparent;

}

::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,0.10);

}

::-webkit-scrollbar-thumb:hover {

  background:
    rgba(255,255,255,0.18);

}

/* =========================
   HIDDEN
========================= */

.hidden {

  display: none !important;

}

/* =========================
   NOISE
========================= */

.noise-layer {

  position: fixed;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  opacity: 0.035;

  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      transparent 0,
      rgba(255,255,255,0.45) 1px,
      transparent 2px
    );

  animation:
    noiseMove 0.22s infinite;

}

@keyframes noiseMove {

  0% {
    transform: translate(0,0);
  }

  25% {
    transform: translate(-1px,1px);
  }

  50% {
    transform: translate(1px,-1px);
  }

  75% {
    transform: translate(1px,1px);
  }

  100% {
    transform: translate(0,0);
  }

}

/* =========================
   EFFECT MODES
========================= */

body.no-effects .noise-layer {

  display: none;

}

body.no-effects * {

  animation: none !important;

  transition: none !important;

  backdrop-filter: none !important;

}

/* =========================
   WORD COUNT
========================= */

body.hide-word-count .word-count {

  display: none;

}

/* =========================
   FULLSCREEN
========================= */

body.fullscreen .topbar,
body.fullscreen .footer {

  opacity: 0;

  pointer-events: none;

}

/* =========================
   DESKTOP NOTICE
========================= */

.desktop-note {

  margin-top: 18px;

  color:
    var(--ghost);

  font-size:
    11px;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}

/* =========================
   WINDOW DOT
========================= */

.title-dot {

  width:
    var(--marker-size);

  height:
    var(--marker-size);

  border-radius:
    50%;

  flex-shrink: 0;

}

/* =========================
   PANEL INPUTS
========================= */

.side-panel input,
.floating-panel input,
.side-panel select,
.floating-panel select {

  width: 100%;

  background:
    rgba(255,255,255,0.04);

  border:
    1px solid var(--border);

  color:
    var(--text);

  padding:
    10px 12px;

}

/* =========================
   MOBILE WARNING
========================= */

.mobile-warning {

  display: none;

}