:root {
  --ink: #101313;
  --paper: #e9eadf;
  --muted: #8c9188;
  --line: #303635;
  --acid: #c9ff47;
  --cyan: #5ee6dc;
  --orange: #ff8454;
  --panel: #171b1b;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--paper);
  background: var(--ink);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  min-height: 100vh;
}
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .045; z-index: 9; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; color: var(--paper); text-decoration: none; font-weight: 900; font-size: 19px; letter-spacing: .16em; }
.brand-mark { width: 26px; height: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; transform: rotate(45deg); }
.brand-mark i { display: block; background: var(--acid); }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: var(--cyan); }
.live { font-size: 10px; letter-spacing: .16em; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.live span { width: 7px; height: 7px; background: var(--acid); box-shadow: 0 0 12px var(--acid); animation: blink 2s steps(2) infinite; }
main { width: min(1180px, 92vw); margin: 0 auto; }
.hero { min-height: 540px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 80px 7vw; position: relative; overflow: hidden; }
.hero::after { content: "PK"; position: absolute; right: -2vw; bottom: -7vw; color: transparent; -webkit-text-stroke: 1px #242a29; font: 900 25vw/1 Arial, sans-serif; pointer-events: none; }
.eyebrow { color: var(--acid); letter-spacing: .18em; font-size: 11px; margin-bottom: 28px; }
h1 { margin: 0; max-width: 920px; text-transform: uppercase; font: 900 clamp(42px, 7.2vw, 92px)/.92 Arial Black, Arial, sans-serif; letter-spacing: -.065em; position: relative; z-index: 1; }
h1 em { color: var(--cyan); font-style: normal; }
.hero-copy { width: min(640px, 100%); color: #b2b7ae; font: 15px/1.75 Arial, sans-serif; margin: 35px 0 28px; position: relative; z-index: 1; }
.principle { display: flex; align-items: center; gap: 12px; font-size: 10px; color: var(--muted); position: relative; z-index: 1; flex-wrap: wrap; }
.principle b { color: var(--paper); border: 1px solid var(--line); padding: 8px 11px; }.principle i { color: var(--orange); }
.workbench { background: var(--paper); color: var(--ink); padding: 55px; border: 1px solid var(--paper); }
.panel-heading, .section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 40px; gap: 20px; }
.panel-heading > div, .section-heading > div { display: flex; align-items: center; gap: 16px; }
.index { color: var(--orange); font-size: 11px; letter-spacing: .1em; }
h2 { text-transform: uppercase; margin: 0; font: 900 clamp(22px, 3vw, 38px)/1 Arial Black, Arial, sans-serif; letter-spacing: -.04em; }
.panel-heading p { color: #626862; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
form { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; }
.dropzone { min-height: 430px; border: 2px dashed #8f958d; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; position: relative; background-color: #dfe1d5; background-image: linear-gradient(45deg,#d5d7cb 25%,transparent 25%),linear-gradient(-45deg,#d5d7cb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d5d7cb 75%),linear-gradient(-45deg,transparent 75%,#d5d7cb 75%); background-size: 18px 18px; background-position: 0 0,0 9px,9px -9px,-9px 0; transition: .2s; overflow: hidden; }
.dropzone.drag { border-color: #111; box-shadow: inset 0 0 0 6px var(--acid); }
.dropzone input { position: absolute; opacity: 0; pointer-events: none; }
.drop-icon { font: 300 45px Arial; }.dropzone strong { margin-top: 15px; font-size: 12px; letter-spacing: .08em; }.dropzone small { margin-top: 8px; color: #646a64; }
#upload-preview { display: none; width: min(80%, 280px); height: auto; image-rendering: pixelated; background: #bfc2b7; border: 1px solid #71766f; }
.dropzone.has-image #upload-preview { display: block; }.dropzone.has-image .drop-icon { display: none; }
.quality-note { margin-top: 16px; padding-left: 13px; border-left: 3px solid var(--cyan); color: #5e645e; font-size: 10px; line-height: 1.5; }.quality-note span { color: #111; font-weight: bold; }
.fields { display: flex; flex-direction: column; gap: 18px; }
.fields label { display: flex; flex-direction: column; gap: 8px; }.fields label > span { font-size: 9px; font-weight: bold; letter-spacing: .13em; }
input, textarea, select { width: 100%; border: 1px solid #aeb2a9; background: #f5f5eb; color: #111; border-radius: 0; padding: 14px 15px; font: 13px/1.4 ui-monospace, monospace; outline: none; }
input:focus, textarea:focus, select:focus { border-color: #111; box-shadow: 3px 3px 0 var(--cyan); } textarea { resize: vertical; }
.create-button { margin-top: 5px; height: 58px; border: 0; background: var(--ink); color: var(--acid); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font: 900 12px ui-monospace, monospace; letter-spacing: .1em; cursor: pointer; box-shadow: 6px 6px 0 var(--cyan); transition: transform .15s, box-shadow .15s; }
.create-button:hover { transform: translate(3px,3px); box-shadow: 3px 3px 0 var(--cyan); }.create-button:disabled { opacity: .5; cursor: wait; }
.create-button i { font: 24px Arial; }.form-status { min-height: 18px; color: #9a3316; font-size: 11px; line-height: 1.5; }
.queue { border: 1px solid var(--line); border-top: 0; padding: 28px 35px; background: #121616; }.queue-top { display: grid; grid-template-columns: 1fr 2fr auto; gap: 20px; align-items: center; font-size: 11px; }.queue-top span { color: var(--cyan); }.queue-top strong { font-weight: normal; }.queue-top time { color: var(--acid); }.progress-track { height: 5px; background: #292e2d; margin: 18px 0 12px; overflow: hidden; }.progress-track i { display: block; height: 100%; width: 8%; background: var(--acid); transition: width .5s; }.queue p { color: var(--muted); font-size: 10px; margin: 0; }
.gallery-section { padding: 90px 0 70px; }.section-heading { border-bottom: 1px solid var(--line); padding-bottom: 22px; }.ghost-button { border: 1px solid var(--line); background: none; color: var(--paper); padding: 10px 14px; cursor: pointer; font: 10px ui-monospace, monospace; }
.gallery { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }.empty { grid-column: 1/-1; color: var(--muted); border: 1px dashed var(--line); padding: 60px; text-align: center; font-size: 12px; }
.card { border: 1px solid var(--line); background: var(--panel); overflow: hidden; }.card-visual { min-height: 320px; display: grid; place-items: center; background-color: #252a29; background-image: linear-gradient(45deg,#202423 25%,transparent 25%),linear-gradient(-45deg,#202423 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#202423 75%),linear-gradient(-45deg,transparent 75%,#202423 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0; position: relative; }
.card canvas, .card-visual img { width: min(70%, 260px); height: auto; image-rendering: pixelated; filter: drop-shadow(12px 16px 0 rgba(0,0,0,.22)); }.card-status { position: absolute; top: 14px; left: 14px; background: var(--acid); color: #111; padding: 7px 9px; font-size: 9px; font-weight: bold; }.card-status.failed { background: var(--orange); }.card-status.working { background: var(--cyan); }
.card-body { padding: 22px; }.card-body h3 { margin: 0 0 9px; text-transform: uppercase; font: 900 20px Arial Black, Arial; }.card-body p { color: #9da39b; min-height: 40px; font: 12px/1.55 Arial, sans-serif; }.meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }.meta span { border: 1px solid var(--line); padding: 6px 8px; color: var(--muted); font-size: 9px; }.downloads { display: flex; gap: 10px; margin-top: 17px; }.downloads a { color: var(--paper); text-decoration: none; font-size: 10px; border-bottom: 1px solid var(--cyan); padding-bottom: 3px; }
.mcp-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: center; border-top: 1px solid var(--line); padding: 85px 0 100px; }.mcp-copy .index { display: block; margin-bottom: 16px; }.mcp-copy p { color: var(--muted); font: 13px/1.7 Arial, sans-serif; }.terminal { background: #080a0a; border: 1px solid #39403e; box-shadow: 10px 10px 0 #1f2524; }.terminal-bar { height: 38px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #262b2a; padding: 0 12px; }.terminal-bar span { width: 8px; height: 8px; background: var(--orange); }.terminal-bar span:nth-child(2) { background: #ffd45a; }.terminal-bar span:nth-child(3) { background: var(--acid); }.terminal-bar b { margin-left: 8px; color: #6e756f; font-size: 9px; font-weight: normal; }.terminal pre { margin: 0; padding: 24px; color: var(--cyan); font: 11px/1.8 ui-monospace,monospace; white-space: pre-wrap; }.terminal button { width: 100%; border: 0; border-top: 1px solid #262b2a; background: #101414; color: var(--acid); padding: 13px; cursor: pointer; font: 9px ui-monospace,monospace; letter-spacing: .1em; }
footer { height: 80px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding: 0 4vw; color: #656b66; font-size: 9px; letter-spacing: .1em; }
@keyframes blink { 50% { opacity: .25; } }
@media (max-width: 800px) { .hero { min-height: 480px; padding: 65px 7vw; }.workbench { padding: 30px 22px; } form,.mcp-section { grid-template-columns: 1fr; }.panel-heading { align-items: start; flex-direction: column; }.gallery { grid-template-columns: 1fr; }.dropzone { min-height: 330px; }.queue-top { grid-template-columns: 1fr auto; }.queue-top strong { grid-column: 1/-1; grid-row: 2; }.mcp-section { gap: 30px; } footer span:last-child { display: none; } }