:root {
  --mac-white: #fff;
  --mac-paper: #f7f7f4;
  --mac-silver: #d7d7d2;
  --mac-gray: #a7a7a3;
  --mac-ink: #111;
  --ink: #111;
  --ink-soft: #4a4a46;
  --text-main: #111;
  --text-soft: #40403d;
  --cream: #fff;
  --orange: #111;
  --orange-strong: #111;
}

* { box-sizing: border-box; border-radius: 0 !important; }
[hidden] { display: none !important; }

html { min-height: 100%; background: var(--mac-gray); }

body {
  min-height: 100vh;
  margin: 0;
  overflow: auto;
  color: var(--mac-ink);
  background: var(--mac-gray);
  font-family: Geneva, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  image-rendering: auto;
}

button, input, textarea { font-family: inherit; }
button { cursor: pointer; }

/* Classic Macintosh menu bar */
.nt-system-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 18px;
  color: #111;
  background: #fff;
  border-bottom: 2px solid #111;
  font-family: Geneva, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
}

.nt-pixel-mark {
  width: 18px;
  height: 18px;
  margin-right: 11px;
  background:
    linear-gradient(90deg, #111 50%, transparent 50%) 0 0 / 8px 8px,
    linear-gradient(#111 50%, transparent 50%) 4px 4px / 8px 8px;
  border: 1px solid #111;
  image-rendering: pixelated;
}

.nt-system-bar strong {
  padding: 2px 7px;
  color: #fff;
  background: #111;
  font-family: "Arial Black", Geneva, sans-serif;
  font-size: 12px;
  letter-spacing: .04em;
}

.nt-system-bar::after {
  content: "";
  width: 58px;
  height: 10px;
  margin-left: 12px;
  background: repeating-linear-gradient(90deg, #111 0 4px, transparent 4px 8px);
  background-size: 64px 100%;
  animation: nt-ready-chase 1.05s steps(8, end) infinite;
}

@keyframes nt-ready-chase {
  0% { background-position-x: 0; opacity: .42; }
  50% { opacity: 1; }
  100% { background-position-x: 64px; opacity: .42; }
}

@media (prefers-reduced-motion: reduce) {
  .nt-system-bar::after { animation: none; opacity: 1; }
}

.nt-status {
  margin-left: auto;
  font-family: Monaco, "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
}

.page-shell {
  position: relative;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 62px 24px 36px;
  overflow: visible;
  background-color: #a8a8a3;
  background-image:
    radial-gradient(#6f6f6b 27%, transparent 29%),
    radial-gradient(#d6d6d1 27%, transparent 29%);
  background-position: 0 0, 2px 2px;
  background-size: 4px 4px;
}

.grain, .cloud, .dog-land { display: none !important; }

.back-to-apps {
  position: absolute;
  top: 48px;
  left: 24px;
  z-index: 3;
  min-height: 30px;
  padding: 4px 13px;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  box-shadow: 2px 2px 0 #111;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  backdrop-filter: none;
}
.back-to-apps::before { content: "← "; }
.back-to-apps span { display: none; }
.back-to-apps:hover { transform: none; filter: none; background: #111; color: #fff; border-color: #111; }
.back-to-apps:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #111; }

.hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, .56fr) minmax(700px, 1.44fr);
  gap: 28px;
  align-items: stretch;
  height: auto;
  width: min(1480px, 100%);
  margin: 48px auto 0;
}

.hero-copy {
  min-height: 0;
  padding: 12px 8px 18px;
  color: #111;
}

.hero-copy::before {
  content: "Instant QR™ — desk accessory";
  display: block;
  width: fit-content;
  margin-bottom: 28px;
  padding: 4px 8px;
  color: #fff;
  background: #111;
  font-size: 11px;
  font-weight: 700;
}

.hero-copy h1 {
  margin: 0;
  color: #111;
  font-family: "Arial Black", Impact, sans-serif;
  font-size: clamp(3.4rem, 5.8vw, 6.7rem);
  line-height: .84;
  letter-spacing: -.075em;
  text-shadow: 3px 3px 0 #fff;
}
.hero-copy h1 span { color: #fff; font-style: normal; text-shadow: 3px 3px 0 #111; }

.lead {
  max-width: 500px;
  margin: 26px 0 22px;
  padding: 12px;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  box-shadow: 3px 3px 0 #111;
  font-size: 13px;
  line-height: 1.5;
}

.hero-points { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0; }
.hero-points article { max-width: 470px; padding: 8px 10px; color: #111; background: #deded9; border: 1px solid #111; }
.hero-points strong { display: block; font-size: 12px; letter-spacing: 0; text-transform: none; }
.hero-points strong::before { content: "◆ "; }
.hero-points span { display: block; margin: 2px 0 0 18px; color: #333; font-size: 11px; }

/* Main Classic Mac window */
.glass-panel, .tool-panel {
  background: var(--mac-paper);
  border: 2px solid #111;
  box-shadow: 5px 5px 0 #111;
  backdrop-filter: none;
}

.tool-panel { position: relative; max-height: none; padding: 42px 12px 14px; overflow: visible; color: #111; }
.tool-panel::before {
  content: "";
  position: absolute;
  inset: 6px 7px auto;
  height: 26px;
  background: repeating-linear-gradient(to bottom, #111 0 1px, #fff 1px 3px);
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}
.panel-topline { position: absolute; z-index: 2; top: 5px; left: 50%; transform: translateX(-50%); height: 29px; margin: 0; padding: 4px 14px; background: #fff; white-space: nowrap; }
.panel-topline p { margin: 0; color: #111; font-family: "Arial Black", Geneva, sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; }
.panel-topline p::after { content: "  •  Untitled QR"; font-family: Geneva, sans-serif; font-weight: 400; }

.tool-grid { display: grid; grid-template-columns: minmax(390px, 1fr) 220px; gap: 12px; }
.controls { display: grid; gap: 9px; }
.field { display: grid; gap: 4px; }
.field-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.field-label::after { content: ":"; }

textarea {
  width: 100%;
  min-height: 92px !important;
  padding: 8px;
  resize: vertical;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  outline: 0;
  box-shadow: inset 1px 1px 0 #777;
  font-family: Monaco, "Courier New", monospace;
  font-size: 12px;
}
textarea:focus { transform: none; background: #fff; outline: 1px dotted #111; outline-offset: -5px; }
.field-meta { display: flex; align-items: center; justify-content: space-between; color: #333; font-size: 10px; }

.mini-action, .upload-button, .chip, .secondary-button, .primary-button {
  min-height: 28px;
  padding: 4px 11px;
  color: #111;
  background: #fff;
  border: 2px solid #111;
  box-shadow: 1px 1px 0 #111;
  font-size: 11px;
  transition: none;
}
.mini-action:hover, .upload-button:hover, .chip:hover, .secondary-button:hover, .primary-button:hover { transform: none; color: #fff; background: #111; border-color: #111; box-shadow: 1px 1px 0 #111; }
.mini-action:active, .upload-button:active, .chip:active, .secondary-button:active, .primary-button:active { transform: translate(1px, 1px); box-shadow: none; }
.chip.is-active { color: #fff; background: #111; box-shadow: inset 0 0 0 1px #fff; }
.compact-chip-group .chip { min-height: 25px; padding: 2px 8px; font-size: 10px; }
.chip-group, .swatch-row { display: flex; flex-wrap: wrap; gap: 7px; }

.control-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.swatch { width: 27px; height: 27px; padding: 0; border: 2px solid #111; background: var(--swatch); box-shadow: 1px 1px 0 #111; }
.swatch.is-active { outline: 2px dotted #111; outline-offset: 2px; box-shadow: 1px 1px 0 #111; }

input[type="range"] { appearance: none; width: 100%; height: 18px; background: repeating-linear-gradient(to right, #111 0 1px, #fff 1px 4px); border: 1px solid #111; outline: none; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 14px; height: 24px; background: #fff; border: 2px solid #111; box-shadow: 1px 1px 0 #111; }

.advanced-panel, .seo-faq, .logo-control { background: #e4e4df; border: 1px solid #111; overflow: hidden; }
.advanced-panel summary, .seo-faq summary { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; color: #111; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: 0; list-style: none; text-transform: none; }
.advanced-panel summary::after, .seo-faq summary::after { content: "▶"; font-size: 9px; }
.advanced-panel[open] summary::after, .seo-faq[open] summary::after { content: "▼"; }
.advanced-content, .seo-faq__content { display: grid; gap: 10px; padding: 4px 10px 10px; }
.seo-faq article { padding: 8px; background: #fff; border: 1px solid #777; }
.seo-faq h2 { font-size: 11px; }
.seo-faq p { font-size: 10px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px; color: #111; background: #fff; border: 1px solid #111; text-align: left; }
.toggle-row strong { font-size: 11px; letter-spacing: 0; text-transform: none; }
.toggle-row small { color: #444; font-size: 10px; }
.toggle-knob { position: relative; flex: none; width: 36px; height: 18px; background: #fff; border: 2px solid #111; }
.toggle-knob::after { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: #111; transition: transform 150ms ease; }
.toggle-row[aria-pressed="true"] .toggle-knob { background: #111; }
.toggle-row[aria-pressed="true"] .toggle-knob::after { transform: translateX(18px); background: #fff; }
.logo-control { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px; }
.logo-note { color: #333; font-size: 10px; }
.logo-actions { display: flex; gap: 6px; }

.primary-button { min-height: 34px; font-weight: 800; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; margin: 4px; }
.primary-button:hover { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111; }
.small-note { display: none; }

/* Modern output island: calmer, spacious, and intentionally not pixelated. */
.preview-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  align-self: stretch;
  padding: 14px;
  background: #fff;
  border: 1px solid #777;
  box-shadow: inset 0 0 0 4px #eee;
}
.preview-card::before { content: "Preview"; justify-self: start; color: #555; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.preview-shell { display: grid; place-items: center; width: min(100%, 184px); aspect-ratio: 1; padding: 12px; overflow: hidden; background: #fff !important; border: 1px solid #ddd !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(0,0,0,.12) !important; transition: transform 180ms ease, box-shadow 180ms ease; }
.preview-shell:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0,0,0,.16) !important; }
.preview-shell.is-animated { padding: 10px; background: #fff !important; }
.preview-shell.is-animated::before {
  inset: -45%;
  background: conic-gradient(from 0deg, #fff, #ff9f54 12%, #2563eb 28%, #fff 44%, #f1f5f9 72%, #fff);
  animation: preview-spin 3.84s linear infinite;
}
.preview-shell.is-animated::after {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 1;
  background: #fff;
  border-radius: 10px !important;
}
#qr-canvas { position: relative; z-index: 2; display: block; width: 100%; height: 100%; border-radius: 10px !important; box-shadow: none; }
.preview-shell.is-animated #qr-canvas { position: relative; z-index: 2; }
.scan-chip { padding: 5px 12px; color: #fff; background: #111; border-radius: 999px !important; box-shadow: none; font-size: 10px; letter-spacing: .12em; }
.download-stack { display: grid; width: 100%; gap: 7px; }
.download-stack .secondary-button { width: 100%; }

.action-modal { background: rgba(0,0,0,.45); }
.action-sheet { background: #fff; border: 2px solid #111; box-shadow: 5px 5px 0 #111; }
.action-sheet::before { content: "Export QR Code"; display: block; margin: -14px -14px 14px; padding: 7px; color: #111; background: repeating-linear-gradient(to bottom, #111 0 1px, #fff 1px 3px); border-bottom: 2px solid #111; font-weight: 800; text-align: center; }
.modal-close { color: #111; background: #fff; border: 2px solid #111; }

@media (max-width: 1000px) {
  .hero-layout { grid-template-columns: 1fr; max-width: 780px; }
  .hero-copy { padding-inline: 0; }
  .hero-copy h1 { font-size: clamp(3.7rem, 13vw, 6.8rem); }
}

@media (max-width: 700px) {
  .nt-system-bar { padding-inline: 10px; font-size: 12px; }
  .nt-system-bar::after { width: 36px; }
  .nt-status { font-size: 9px; }
  .page-shell { padding: 54px 10px 20px; }
  .back-to-apps { left: 10px; top: 45px; }
  .hero-layout { margin-top: 45px; }
  .tool-grid { grid-template-columns: 1fr; }
  .preview-card { grid-template-columns: minmax(130px, 180px) 1fr; align-items: center; }
  .preview-card::before { grid-column: 1 / -1; }
  .preview-shell { grid-row: span 2; }
}

@media (max-width: 480px) {
  .nt-system-bar strong { overflow: hidden; text-overflow: ellipsis; }
  .nt-system-bar::after { display: none; }
  .nt-status { margin-left: auto; }
  .hero-copy h1 { font-size: 3.7rem; }
  .control-split { grid-template-columns: 1fr; }
  .logo-control { align-items: flex-start; flex-direction: column; }
  .preview-card { grid-template-columns: 1fr; }
  .preview-shell { grid-row: auto; }
}