@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.23/sizes.min.css');
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.23/borders.min.css');
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.23/shadows.min.css');
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.23/fonts.min.css');
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.23/easings.min.css');
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.23/durations.min.css');
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.23/zindex.min.css');
@import url('https://cdn.jsdelivr.net/npm/open-props@1.7.23/aspects.min.css');

/**
 * THX 1138 Design System — aesthetics.css
 *
 * A CLASSLESS CSS FRAMEWORK. Pair with webcomponents.js for zero-class HTML.
 *
 * How this works:
 *   1. Load aesthetics.css  → bare HTML tags (<h1>, <p>, <button>, etc.) are
 *                              styled automatically. No utility classes needed.
 *   2. Load webcomponents.js → drop <thx-*> custom elements anywhere.
 *
 * Together they let you write extremely minimal HTML. No classes. No builds.
 *
 * Inspired by brutalist / classless CSS frameworks like Pico.css and MVP.css.
 */

/* ============================================
   DESIGN TOKENS
   ============================================ */

:root {
  /* 4 Neutral Colors */
  --neutral-100: #fafafa;
  --neutral-200: #e0e0e0;
  --neutral-600: #666;
  --neutral-800: #333;

  /* 3 Atmospheric Colors (CRT Blue Phosphor) */
  --atmos-primary: #a6c8e1;
  --atmos-secondary: #707e91;
  --atmos-tertiary: #deffff;

  /* 2 Accent Colors */
  --accent-warning: #d4aa00;
  --accent-error: #d44000;

  /* CRT Display Colors */
  --crt-bg: #111;
  --crt-bg-dark: #0a0a0a;
  --crt-border: #2a2a2a;
  --crt-grid: #333;

  /* Typography */
  --font-display: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
}

/* ============================================
   BASE RESET
   ============================================ */

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

html {
  font-size: var(--font-size-1);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #999 #e0e0e0;
}

body {
  font-family: var(--font-body);
  background: var(--neutral-200);
  min-height: 100vh;
  color: var(--neutral-800);
  line-height: var(--font-lineheight-4);
  padding: calc(var(--size-7) + var(--size-2)) var(--size-4);
}

/* ============================================
   LAYOUT CONTAINERS
   ============================================ */

.container {
  max-width: 900px;
  margin: 0 auto;
}

/* Support both semantic <section> element and .section class */
section,
.section {
  background: var(--neutral-100);
  margin-bottom: var(--size-1);
  padding: var(--size-7);
  position: relative;
  box-shadow: var(--inner-shadow-0);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-4);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-4);
  color: var(--neutral-800);
}

h1 {
  font-size: var(--font-size-5);
  font-weight: var(--font-weight-3);
  margin-bottom: var(--size-3);
  letter-spacing: var(--font-letterspacing-4);
}

h2 {
  font-size: var(--font-size-3);
  margin: var(--size-5) 0 calc(var(--size-2) + var(--size-1)) 0;
  letter-spacing: var(--font-letterspacing-3);
}

h3 {
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-6);
  letter-spacing: var(--font-letterspacing-3);
  color: var(--neutral-600);
  margin: var(--size-4) 0 10px 0;
}

h4 {
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-6);
  margin: var(--size-3) 0 8px 0;
  letter-spacing: var(--font-letterspacing-2);
}

p {
  font-size: var(--font-size-1);
  color: var(--neutral-600);
  margin-bottom: calc(var(--size-2) + var(--size-1));
}

a {
  color: #555;
  text-decoration: none;
  border-bottom: var(--border-size-1) solid #bbb;
  transition: all var(--duration-quick-2);
}

a:hover {
  color: #222;
  border-color: #666;
}

strong,
b {
  font-weight: var(--font-weight-6);
  color: var(--neutral-800);
}

em,
i {
  font-style: italic;
  color: #777;
}

small {
  font-size: var(--font-size-0);
  color: var(--neutral-600);
}

mark {
  background: var(--atmos-primary);
  color: var(--neutral-800);
  padding: var(--size-1) var(--size-1);
}

/* Code & Preformatted */

code,
kbd,
samp {
  font-family: var(--font-mono);
  background: white;
  font-size: var(--font-size-0);
  color: #555;
}

code {
  padding: var(--size-1) var(--size-1);
  border-bottom: var(--border-size-1) solid #ddd;
}

pre {
  font-family: var(--font-mono);
  background: white;
  padding: var(--size-3) var(--size-4);
  border-left: var(--border-size-2) solid #ccc;
  font-size: var(--font-size-0);
  color: #555;
  overflow-x: auto;
  margin: calc(var(--size-2) + var(--size-1)) 0;
  line-height: var(--font-lineheight-4);
}

pre code {
  background: transparent;
  border: none;
  padding: 0;
}

/* Blockquotes */

blockquote {
  border-left: var(--border-size-2) solid #bbb;
  padding-left: var(--size-4);
  margin: var(--size-3) 0;
  color: #777;
  font-style: italic;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Horizontal Rule */

hr {
  border: none;
  border-top: var(--border-size-1) solid rgba(0, 0, 0, 0.1);
  margin: var(--size-5) 0;
}

/* Lists */

ul,
ol {
  margin: calc(var(--size-2) + var(--size-1)) 0 calc(var(--size-2) + var(--size-1)) var(--size-5);
  font-size: var(--font-size-1);
  color: var(--neutral-600);
}

li {
  margin-bottom: var(--size-1);
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin: var(--size-1) 0 var(--size-1) var(--size-4);
}

dl {
  margin: calc(var(--size-2) + var(--size-1)) 0;
  font-size: var(--font-size-1);
}

dt {
  font-weight: var(--font-weight-6);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-2);
  color: #555;
  margin-top: calc(var(--size-2) + var(--size-1));
}

dd {
  color: #777;
  margin-left: 0;
  margin-top: var(--size-1);
}

/* ============================================
   TABLES
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--size-3) 0;
  font-size: var(--font-size-0);
}

caption {
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-4);
  color: var(--neutral-600);
  margin-bottom: var(--size-2);
  text-align: left;
}

th {
  text-align: left;
  padding: calc(var(--size-2) + var(--size-1));
  border-bottom: var(--border-size-2) solid #ccc;
  font-weight: var(--font-weight-6);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-2);
  color: #555;
  font-family: var(--font-mono);
}

td {
  padding: calc(var(--size-2) + var(--size-1));
  border-bottom: var(--border-size-1) solid rgba(0, 0, 0, 0.06);
  color: var(--neutral-600);
}

tr:hover td {
  background: rgba(0, 0, 0, 0.02);
}

thead {
  background: rgba(0, 0, 0, 0.02);
}

tfoot {
  border-top: var(--border-size-2) solid #ccc;
  font-weight: var(--font-weight-6);
}

/* ============================================
   FORMS
   ============================================ */

label {
  display: block;
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-4);
  color: #888;
  margin-bottom: var(--size-1);
  font-weight: var(--font-weight-5);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='search'],
input[type='tel'],
input[type='url'],
input[type='date'],
input[type='datetime-local'],
input[type='month'],
input[type='week'],
input[type='time'],
select,
textarea {
  width: 100%;
  height: calc(var(--size-7) + var(--size-2));
  padding: 0 calc(var(--size-2) + var(--size-1));
  border: none;
  border-bottom: var(--border-size-2) solid #ccc;
  font-size: var(--font-size-1);
  font-family: var(--font-mono);
  background: white;
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-2);
  color: #333;
  transition: border-color var(--duration-moderate-1);
  margin-bottom: var(--size-3);
}

textarea {
  height: var(--size-11);
  padding: calc(var(--size-2) + var(--size-1));
  resize: vertical;
  text-transform: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #666;
}

input::placeholder,
textarea::placeholder {
  color: #aaa;
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--neutral-200);
}

select {
  cursor: pointer;
}

/* Fieldset & Legend */

fieldset {
  border: var(--border-size-1) solid rgba(0, 0, 0, 0.1);
  padding: var(--size-4);
  margin: var(--size-3) 0;
}

legend {
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-4);
  color: #888;
  padding: 0 calc(var(--size-2) + var(--size-1));
}

/* Radio & Checkbox */

input[type='radio'],
input[type='checkbox'] {
  appearance: none;
  width: var(--size-3);
  height: var(--size-3);
  border: var(--border-size-2) solid #999;
  background: white;
  margin-right: var(--size-2);
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  transition: all var(--duration-quick-2);
}

input[type='radio'] {
  border-radius: var(--radius-round);
}

input[type='checkbox'] {
  border-radius: 0;
}

input[type='radio']:hover,
input[type='checkbox']:hover {
  border-color: #666;
}

input[type='radio']:checked {
  border-color: #444;
  background: white;
}

input[type='radio']:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--size-2);
  height: var(--size-2);
  background: #444;
  border-radius: var(--radius-round);
}

input[type='checkbox']:checked {
  border-color: #444;
  background: #444;
}

input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 5px;
  width: var(--size-1);
  height: var(--size-2);
  border: solid white;
  border-width: 0 var(--border-size-2) var(--border-size-2) 0;
  transform: rotate(45deg);
}

input[type='radio']:focus,
input[type='checkbox']:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.3);
}

/* Inline form labels */

label:has(input[type='radio']),
label:has(input[type='checkbox']) {
  display: inline;
  font-size: var(--font-size-0);
  text-transform: none;
  letter-spacing: normal;
  color: var(--neutral-600);
  margin-right: var(--size-3);
  cursor: pointer;
}

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

button,
input[type='submit'],
input[type='reset'],
input[type='button'] {
  height: calc(var(--size-7) + var(--size-2));
  padding: 0 var(--size-5);
  background: #e0e0e0;
  color: #333;
  border: none;
  border-bottom: var(--border-size-2) solid #bbb;
  font-size: var(--font-size-0);
  font-weight: var(--font-weight-6);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-4);
  transition: all var(--duration-quick-2);
  margin-right: var(--size-2);
  margin-bottom: var(--size-2);
  font-family: var(--font-body);
}

button:hover,
input[type='submit']:hover,
input[type='reset']:hover,
input[type='button']:hover {
  background: #d5d5d5;
  border-color: #999;
}

button:active,
input[type='submit']:active,
input[type='reset']:active,
input[type='button']:active {
  background: #c0c0c0;
  border-color: #666;
  transform: translateY(1px);
}

button:disabled,
input[type='submit']:disabled,
input[type='reset']:disabled,
input[type='button']:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   PROGRESS & METER
   ============================================ */

progress {
  width: 100%;
  height: var(--size-2);
  appearance: none;
  margin: calc(var(--size-2) + var(--size-1)) 0;
  background: #ddd;
  border: none;
}

progress::-webkit-progress-bar {
  background: #ddd;
}

progress::-webkit-progress-value {
  background: #666;
}

progress::-moz-progress-bar {
  background: #666;
}

meter {
  width: 100%;
  height: var(--size-4);
  margin: calc(var(--size-2) + var(--size-1)) 0;
  appearance: none;
  background: #ddd;
}

meter::-webkit-meter-bar {
  background: #ddd;
  border: none;
}

meter::-webkit-meter-optimum-value {
  background: #666;
}

meter::-webkit-meter-suboptimum-value {
  background: #888;
}

meter::-webkit-meter-even-less-good-value {
  background: #aaa;
}

meter::-moz-meter-bar {
  background: #666;
}

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

input[type='range'] {
  width: 100%;
  height: var(--size-2);
  margin: var(--size-3) 0;
  appearance: none;
  background: #ddd;
  outline: none;
}

input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: var(--size-3);
  height: var(--size-3);
  background: #555;
  cursor: pointer;
  border: none;
  margin-top: -5px;
}

input[type='range']::-webkit-slider-runnable-track {
  height: var(--size-2);
  background: #ddd;
}

input[type='range']::-moz-range-thumb {
  width: var(--size-3);
  height: var(--size-3);
  background: #555;
  cursor: pointer;
  border: none;
  border-radius: 0;
}

input[type='range']::-moz-range-track {
  height: var(--size-2);
  background: #ddd;
}

input[type='range']:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(100, 100, 100, 0.3);
}

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

::-webkit-scrollbar {
  width: var(--size-3);
  height: var(--size-3);
}

::-webkit-scrollbar-track {
  background: #e0e0e0;
  border-left: var(--border-size-1) solid #ccc;
}

::-webkit-scrollbar-thumb {
  background: #999;
  border: var(--border-size-2) solid #e0e0e0;
}

::-webkit-scrollbar-thumb:hover {
  background: #777;
}

::-webkit-scrollbar-corner {
  background: #e0e0e0;
}

/* ============================================
   DETAILS / SUMMARY
   ============================================ */

details {
  background: rgba(0, 0, 0, 0.02);
  margin: calc(var(--size-2) + var(--size-1)) 0;
}

summary {
  padding: calc(var(--size-2) + var(--size-1)) var(--size-3);
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-2);
  color: #555;
  cursor: pointer;
  font-weight: var(--font-weight-5);
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--size-2);
  transition: transform var(--duration-moderate-1);
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details[open] summary {
  border-bottom: var(--border-size-1) solid rgba(0, 0, 0, 0.06);
}

details > *:not(summary) {
  padding: var(--size-3);
  font-size: var(--font-size-1);
  color: var(--neutral-600);
}

/* ============================================
   FIGURE & IMG
   ============================================ */

figure {
  margin: var(--size-4) 0;
  border-left: var(--border-size-2) solid #ccc;
  padding-left: var(--size-4);
}

figcaption {
  font-size: var(--font-size-0);
  color: #888;
  margin-top: var(--size-2);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-2);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================
   DASHBOARD LAYOUT (Minimal Classes)
   ============================================ */

header {
  background: var(--neutral-100);
  border-bottom: var(--border-size-1) solid rgba(0, 0, 0, 0.1);
  padding: calc(var(--size-2) + var(--size-1)) var(--size-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1,
header h2,
header h3 {
  font-family: var(--font-mono);
  font-size: var(--font-size-1);
  margin: 0;
  letter-spacing: var(--font-letterspacing-5);
}

/* ============================================
   UTILITY CLASSES (For Complex Patterns)
   ============================================ */

/* Mono inline text */
.mono {
  font-family: var(--font-mono);
  background: white;
  padding: var(--size-1) var(--size-1);
  border-bottom: var(--border-size-1) solid #ddd;
  font-size: var(--font-size-0);
}

/* CRT Display - THX 1138 Monitor Style */
.crt-display {
  background: var(--crt-bg);
  border: calc(var(--size-2) + var(--size-1)) solid var(--crt-border);
  border-radius: var(--size-1);
  position: relative;
  overflow: hidden;
  margin: var(--size-4) 0;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.crt-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(166, 200, 225, 0.04) 2px,
    rgba(166, 200, 225, 0.04) 4px
  );
  pointer-events: none;
  z-index: var(--layer-2);
  animation: scanlines var(--duration-pause) linear infinite;
}

@keyframes scanlines {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .crt-display::before {
    animation: none;
  }
}

.crt-display::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
  z-index: calc(var(--layer-2) + 1);
}

.crt-content {
  position: relative;
  z-index: var(--layer-1);
  padding: var(--size-4);
}

.crt-label {
  position: absolute;
  top: 4px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  color: #666;
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-4);
  z-index: calc(var(--layer-2) + 5);
}

/* Scope Display - Tektronix Oscilloscope */
.scope-display {
  background: var(--crt-bg-dark);
  border: calc(var(--size-2) + var(--size-1)) solid #222;
  border-radius: var(--size-1);
  position: relative;
  margin: var(--size-4) 0;
  overflow: hidden;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.scope-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(166, 200, 225, 0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(166, 200, 225, 0.2) 1px, transparent 1px);
  background-size: var(--size-4) var(--size-4);
  pointer-events: none;
}

/* Button Variants (as classes since they require semantic intent) */
.btn-primary {
  background: var(--atmos-primary);
  color: var(--neutral-800);
  border-color: var(--atmos-primary);
}

.btn-primary:hover:not(:disabled) {
  background: var(--atmos-tertiary);
  box-shadow: 0 0 15px rgba(166, 200, 225, 0.5);
}

.btn-secondary {
  background: var(--atmos-secondary);
  color: var(--neutral-100);
  border-color: var(--atmos-secondary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--atmos-primary);
  color: var(--neutral-800);
}

.btn-warning {
  background: var(--accent-warning);
  color: var(--neutral-800);
  border-color: var(--accent-warning);
}

.btn-error {
  background: var(--accent-error);
  color: var(--neutral-100);
  border-color: var(--accent-error);
}

/* Grid for form sections */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--size-5);
}

@media (max-width: 600px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   SECTION LABELS
   ============================================ */

.section-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-5);
  color: var(--neutral-600);
  margin-bottom: var(--size-5);
  padding-bottom: calc(var(--size-2) + var(--size-1));
  border-bottom: var(--border-size-1) solid rgba(0, 0, 0, 0.08);
}