@font-face { font-family: "Archivo Black"; src: url("vendor/fonts/archivo-black.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("vendor/fonts/roboto-mono-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("vendor/fonts/lora-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("vendor/fonts/atkinson-bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #11141a;
  --paper: #f5eedf;
  --cream: #fff7e4;
  --pink: #ff3d76;
  --cyan: #4be7ed;
  --yellow: #ffd95b;
  --panel: #252934;
  --panel-dark: #151820;
  --line: #5e6472;
  --shadow: 0 18px 50px rgba(0,0,0,.42);
  font-family: "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: #0b0d12; }
body { margin: 0; min-width: 320px; color: #f6f2e8; background: radial-gradient(circle at 15% 0, #33243f 0, transparent 35%), linear-gradient(135deg,#111723,#080a0f 70%); }
a { color: var(--cyan); }
button, input, select, textarea { font: inherit; }
button, .file-button, .load-project { touch-action: manipulation; }
.site-shell { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid #343945; background: rgba(10,12,17,.9); backdrop-filter: blur(12px); }
.header-inner { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 900; letter-spacing: .09em; }
.brand span { display: grid; place-items: center; width: 34px; height: 34px; color: #111; background: var(--cyan); border: 2px solid #fff; box-shadow: 4px 4px 0 var(--pink); }
.site-header nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-header nav a { color: #dce2ea; text-decoration: none; font-weight: 700; }
.site-header nav a:hover { color: var(--cyan); }

.hero { min-height: 370px; display: grid; grid-template-columns: minmax(0,1fr) 210px; align-items: center; gap: 64px; padding-block: 66px 52px; }
.hero h1 { max-width: 850px; margin: 8px 0 18px; font: 900 clamp(2.25rem,6vw,5rem)/.97 "Arial Black",Impact,sans-serif; letter-spacing: -.04em; text-transform: uppercase; }
.hero-copy { max-width: 780px; margin: 0; color: #bec5d0; font-size: clamp(1rem,2vw,1.25rem); line-height: 1.65; }
.hero img { width: 100%; height: auto; filter: drop-shadow(16px 22px 0 rgba(255,61,118,.2)); transform: rotate(4deg); }
.eyebrow { color: var(--cyan); font: 800 .77rem/1.3 "Courier New",monospace; letter-spacing: .16em; }
.hero-points { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 24px 0 0; list-style: none; }
.hero-points li { padding: 8px 11px; color: #111; background: var(--yellow); border: 2px solid #fff; font: 800 .75rem/1 "Courier New",monospace; transform: rotate(-1deg); }

.app-stage { width: min(1560px,calc(100% - 24px)); margin: 0 auto 76px; }
.app-window { overflow: hidden; min-height: 760px; border: 2px solid #8e96a8; background: var(--panel); box-shadow: var(--shadow), 8px 8px 0 #000; }
.app-titlebar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 14px; color: #fff; background: linear-gradient(90deg,#181b23,#351d3a 62%,#122f32); border-bottom: 2px solid #8e96a8; }
.app-brand { display: flex; align-items: center; gap: 10px; }
.app-brand img { flex: 0 0 auto; }
.app-brand span { display: grid; }
.app-brand strong { font: 900 1.05rem/1 "Arial Black",sans-serif; text-transform: uppercase; }
.app-brand small { margin-top: 4px; color: #c3c8d2; font: 700 .62rem/1 "Courier New",monospace; letter-spacing: .12em; }
.privacy-indicator { display: flex; align-items: center; gap: 8px; color: #b7f8e9; font: 700 .68rem/1 "Courier New",monospace; letter-spacing: .08em; }
.privacy-indicator span { width: 9px; height: 9px; border-radius: 50%; background: #54f3b6; box-shadow: 0 0 13px #54f3b6; }
.app-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; background: #d4d7dc; border-bottom: 2px solid #767d88; }
.view-tabs, .toolbar-actions, .project-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.app-toolbar button, .project-actions button, .load-project, .file-button, .subtle-button { min-height: 36px; padding: 8px 12px; border: 2px solid #fafafa; border-right-color: #545963; border-bottom-color: #545963; color: #12151b; background: #d6d8dd; font: 800 .69rem/1 "Courier New",monospace; cursor: pointer; }
.app-toolbar button:active, .project-actions button:active, .load-project:active, .file-button:active { border-color: #545963 #fafafa #fafafa #545963; }
.view-tabs button.active { color: #fff; background: #171a22; border-color: #08090c #69707d #69707d #08090c; }
.toolbar-actions { justify-content: flex-end; }
#runPreflight { color: #fff; background: #252a35; }
#downloadPng { color: #111; background: var(--cyan); }
#downloadPdf { color: #fff; background: #b51e56; }
#printProject { color: #111; background: var(--yellow); }
.app-grid { display: grid; grid-template-columns: minmax(260px,340px) minmax(0,1fr); min-height: 680px; }
.controls { overflow: auto; max-height: min(780px,calc(100vh - 170px)); padding: 12px; color: #eef1f5; background: var(--panel-dark); border-right: 2px solid #59606d; }
fieldset { margin: 0 0 12px; padding: 12px; border: 1px solid #545b69; background: #20242e; }
legend { padding: 0 7px; color: var(--cyan); font: 800 .7rem/1 "Courier New",monospace; letter-spacing: .1em; }
label { display: grid; gap: 5px; margin-bottom: 10px; color: #bdc4cf; font: 700 .68rem/1.2 "Courier New",monospace; text-transform: uppercase; }
input[type="text"], select, textarea { width: 100%; border: 1px solid #777f8d; border-radius: 0; padding: 8px; color: #11141a; background: #f4f1e9; outline: 0; text-transform: none; }
input[type="text"]:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(75,231,237,.25); }
textarea { resize: vertical; line-height: 1.35; }
input[type="range"] { width: 100%; accent-color: var(--pink); }
output { float: right; color: #fff; }
.two-up, .color-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.color-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.color-grid input { width: 100%; min-height: 38px; padding: 1px; border: 1px solid #78808e; background: none; }
.file-button, .load-project { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; text-align: center; }
.file-button input, .load-project input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-status { display: block; margin: -3px 0 10px; padding: 7px 9px; overflow-wrap: anywhere; color: #b9c3cf; background: #151821; border-left: 3px solid var(--yellow); font: .62rem/1.4 "Roboto Mono","Courier New",monospace; }
.control-note { margin: -3px 0 10px; color: #b7c0cc; font: .64rem/1.5 "Roboto Mono","Courier New",monospace; }
.check-row { display: flex; align-items: center; gap: 8px; text-transform: none; }
.check-row input { accent-color: var(--cyan); }
.subtle-button { width: 100%; }
.preset-details { display: grid; gap: 6px; margin: -2px 0 12px; padding: 9px; color: #cbd2dc; background: #151821; border-left: 4px solid var(--cyan); font: .66rem/1.45 "Courier New",monospace; }
.preset-details strong { color: #fff; }
.preset-details a { color: var(--cyan); font-weight: 800; }

.preview-column { min-width: 0; display: flex; flex-direction: column; padding: 12px; background: repeating-linear-gradient(0deg,#353a46 0,#353a46 1px,#2d313c 1px,#2d313c 4px); }
.preview-meta { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 9px; color: #d8dde6; font: 700 .69rem/1 "Courier New",monospace; }
.canvas-scroller { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 500px; overflow: auto; padding: 34px; background-color: #171920; background-image: linear-gradient(45deg,#20232b 25%,transparent 25%),linear-gradient(-45deg,#20232b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#20232b 75%),linear-gradient(-45deg,transparent 75%,#20232b 75%); background-size: 24px 24px; background-position: 0 0,0 12px,12px -12px,-12px 0; border: 2px inset #777e8b; }
#jcardCanvas { display: block; max-width: none; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.55); cursor: grab; image-rendering: auto; }
#jcardCanvas.dragging { cursor: grabbing; }
.canvas-help { margin: 8px 0; color: #aeb6c2; font: .72rem/1.45 "Courier New",monospace; }
.preflight-panel { margin: 2px 0 11px; padding: 10px 12px; color: #dce2ea; background: rgba(17,20,27,.94); border: 1px solid #626a78; font: .69rem/1.42 "Courier New",monospace; }
.preflight-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #fff; }
#preflightBadge { padding: 5px 8px; color: #111; background: #aeb5c0; font-weight: 900; }
#preflightBadge.passed { background: #65efae; }
#preflightBadge.warning { background: var(--yellow); }
#preflightBadge.failed { color: #fff; background: #d92f57; }
#preflightBadge.stale { color: #fff; background: #6a536f; }
#preflightResults { display: grid; gap: 4px; max-height: 126px; overflow: auto; margin: 0; padding: 0; list-style: none; }
#preflightResults li { position: relative; padding-left: 17px; }
#preflightResults li::before { position: absolute; left: 0; font-weight: 900; }
#preflightResults li.pass::before { content: "✓"; color: #65efae; }
#preflightResults li.warning::before { content: "!"; color: var(--yellow); }
#preflightResults li.error::before { content: "×"; color: #ff6588; }
#preflightResults li.info::before { content: "i"; color: var(--cyan); }
#preflightProfile { margin: 8px 0 0; color: #939eac; font-size: .62rem; }
.project-actions { margin-top: auto; }
.project-actions button, .load-project { color: #edf1f5; background: #242833; border-color: #6d7481 #101216 #101216 #6d7481; }
.status { min-height: 20px; margin: 10px 0 0; color: var(--cyan); font: 700 .7rem/1.35 "Courier New",monospace; }

.guide { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; padding-bottom: 68px; }
.guide section { padding: clamp(22px,4vw,38px); color: #c9cfda; background: rgba(30,34,44,.82); border: 1px solid #3d4350; }
.guide h2 { margin: 0 0 14px; color: #fff; font: 900 clamp(1.35rem,3vw,2rem)/1.05 "Arial Black",sans-serif; text-transform: uppercase; }
.guide p, .guide li { line-height: 1.65; }
.guide li + li { margin-top: 8px; }
.faq { grid-column: 1/-1; }
.faq details { padding: 13px 0; border-top: 1px solid #535a67; }
.faq summary { color: #fff; font-weight: 800; cursor: pointer; }
.site-footer { padding: 24px 0 36px; border-top: 1px solid #343945; color: #aab2bf; background: #090b0f; }
#printSheet { display: none; }

html.embed, html.embed body { height: 100%; overflow: hidden; }
html.embed .standalone-only { display: none !important; }
html.embed main, html.embed .app-stage, html.embed .app-window { width: 100%; height: 100%; margin: 0; }
html.embed .app-window { min-height: 0; border: 0; box-shadow: none; }
html.embed .app-grid { height: calc(100% - 105px); min-height: 0; }
html.embed .controls { max-height: none; }
html.embed .canvas-scroller { min-height: 300px; }

@media (max-width: 820px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; gap: 28px; padding-block: 44px; }
  .hero img { width: 120px; grid-row: 1; }
  .app-stage { width: 100%; }
  .app-window { border-inline: 0; }
  .app-titlebar, .app-toolbar { align-items: stretch; flex-direction: column; }
  .privacy-indicator { display: none; }
  .app-grid { grid-template-columns: 1fr; }
  .controls { max-height: none; border-right: 0; border-bottom: 2px solid #59606d; }
  .canvas-scroller { min-height: 390px; padding: 20px; }
  .preview-meta { flex-direction: column; gap: 4px; }
  .guide { grid-template-columns: 1fr; }
  .faq { grid-column: auto; }
  html.embed, html.embed body { height: auto; overflow: auto; }
  html.embed .app-stage, html.embed .app-window { height: auto; }
  html.embed .app-grid { height: auto; }
}

@media print {
  @page { margin: .35in; }
  body.printing > *:not(#printSheet) { display: none !important; }
  body.printing #printSheet { display: grid !important; place-items: center; width: 100%; height: 100%; }
  body.printing #printImage { display: block; width: var(--print-width); height: var(--print-height); object-fit: contain; }
}