@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ink + ground */
  --ink:#16161a; --ink-2:#2a2a31; --ink-3:#5b5b66;
  --ground:#fafaf8; --ground-2:#f1f1ee; --white:#ffffff; --bone:#fbfbf9;
  /* the remnant palette */
  --pink:#ff2d78; --pink-deep:#d40f5a; --tangerine:#ff6b1a; --tangerine-deep:#d94e05;
  --cherry:#e5233d; --cherry-deep:#b8112a; --grape:#7c3aed; --grape-deep:#5b21c4;
  --cobalt:#2563ff; --cobalt-deep:#1445d6; --turquoise:#14cbc4; --turquoise-deep:#059c96;
  --lime:#a3e635; --lime-deep:#6fac13; --sunshine:#ffc53d; --sunshine-deep:#d99b00;
  /* washes — pale fills for large areas and sewn-on tags */
  --pink-wash:#ffe0ec; --tangerine-wash:#ffe6d5; --grape-wash:#eae0ff;
  --cobalt-wash:#dbe5ff; --turquoise-wash:#d2f6f4; --lime-wash:#edf9d6; --sunshine-wash:#fff1cf;
  /* semantic */
  --color-success:var(--turquoise-deep); --color-success-fill:var(--turquoise-wash);
  --color-live:var(--lime-deep); --color-live-fill:var(--lime-wash);
  --color-warning:var(--tangerine-deep); --color-warning-fill:var(--tangerine-wash);
  --color-danger:var(--cherry); --color-danger-fill:#ffdde1;
  --color-info:var(--cobalt-deep); --color-info-fill:var(--cobalt-wash);
  --surface-page:var(--ground); --surface-card:var(--white); --surface-sunken:var(--ground-2); --surface-inverse:var(--ink);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --text-meta:var(--ink-3); --text-inverse:var(--bone);
  --border-ink:var(--ink); --border-soft:#dedeD8;
  --accent:var(--pink); --link:var(--cobalt-deep); --link-visited:var(--grape-deep); --link-hover:var(--pink-deep);
  --focus-ring:var(--cobalt);
  /* per-category hood colors (site cards, tags) */
  --hood-tools:var(--turquoise); --hood-docs:var(--sunshine); --hood-fun:var(--pink); --hood-data:var(--grape); --hood-team:var(--lime); --hood-none:var(--ink-3);
  /* type */
  --font-display:'Archivo Black','Archivo','Helvetica Neue',sans-serif;
  --font-body:'Archivo','Helvetica Neue',sans-serif;
  --font-mono:'Space Mono','Courier New',monospace;
  --text-3xs:10px; --text-2xs:11px; --text-xs:13px; --text-sm:14px; --text-base:16px; --text-md:18px;
  --text-lg:22px; --text-xl:28px; --text-2xl:36px; --text-3xl:48px; --text-4xl:64px; --text-5xl:86px;
  --leading-crush:0.88; --leading-tight:1.1; --leading-normal:1.6;
  --tracking-crush:-0.04em; --tracking-tight:-0.02em; --tracking-stamp:0.16em;
  /* trim + radii + panel shadows (flat ink — reads as a cut fabric edge) */
  --trim:2px; --trim-heavy:3px; --trim-strap:5px;
  --radius-xs:5px; --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:999px;
  --panel-xs:2px 2px 0 0 var(--ink); --panel-sm:3px 3px 0 0 var(--ink);
  --panel:5px 5px 0 0 var(--ink); --panel-lg:8px 8px 0 0 var(--ink);
  --lift:0 8px 24px -6px rgba(22,22,26,.22);
  --field-inset:inset 0 2px 0 0 rgba(22,22,26,.10);
  --focus-ring-shadow:0 0 0 3px var(--cobalt-wash),0 0 0 5px var(--cobalt);
  --stitch:2px dashed var(--ink);
  --ripstop:repeating-linear-gradient(0deg,rgba(22,22,26,.06) 0 1px,transparent 1px 11px),repeating-linear-gradient(90deg,rgba(22,22,26,.06) 0 1px,transparent 1px 11px);
  --ripstop-size:11px 11px;
  --webbing:repeating-linear-gradient(45deg,var(--ink) 0 14px,var(--sunshine) 14px 28px);
  --colorway-strip:linear-gradient(90deg,var(--pink) 0 12.5%,var(--tangerine) 0 25%,var(--cherry) 0 37.5%,var(--grape) 0 50%,var(--cobalt) 0 62.5%,var(--turquoise) 0 75%,var(--lime) 0 87.5%,var(--sunshine) 0 100%);
  --ease-snap:cubic-bezier(.2,1.4,.4,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:120ms; --duration:200ms; --duration-slow:340ms;
  --tilt-a:-3deg; --tilt-b:2.5deg;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-body);font-size:16px;line-height:var(--leading-normal);color:var(--text-secondary);
  background-color:var(--ground);background-image:var(--ripstop);background-size:var(--ripstop-size);
  -webkit-font-smoothing:antialiased;padding:0 0 48px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;color:var(--text-primary);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);text-transform:uppercase;margin:0 0 .4em}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:3px}
a:hover{color:var(--link-hover)} a:visited{color:var(--link-visited)}
code,pre{font-family:var(--font-mono);font-size:.92em}
::selection{background:var(--pink);color:var(--bone)}

.ac-page{max-width:1100px;margin:0 auto;padding:20px 16px}
.ac-page-narrow{max-width:760px}
/* stamps — wide-tracked uppercase Space Mono, like hardware tags */
.ac-label{font-family:var(--font-mono);font-weight:700;letter-spacing:var(--tracking-stamp);text-transform:uppercase;font-size:var(--text-2xs);color:var(--text-meta)}
.ac-pixel{font-family:var(--font-mono);font-weight:700;letter-spacing:var(--tracking-stamp);text-transform:uppercase}

/* top bar */
.ac-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.ac-logo{font-family:var(--font-display);font-size:24px;text-transform:uppercase;letter-spacing:var(--tracking-crush);color:var(--ink);text-decoration:none;background:var(--sunshine);border:var(--trim-heavy) solid var(--ink);border-radius:var(--radius-xs);box-shadow:var(--panel-xs);padding:2px 10px}
.ac-logo:hover{color:var(--ink);background:var(--pink);color:var(--bone)}
.ac-topbar .spacer{margin-left:auto}
.ac-who{font-family:var(--font-mono);font-size:13px;color:var(--ink)}

/* panel — heavy black trim, flat ink shadow (a cut fabric edge) */
.ac-win{background:var(--surface-card);border:var(--trim-heavy) solid var(--ink);border-radius:var(--radius-md);box-shadow:var(--panel);color:var(--ink);overflow:hidden}
.ac-win>.bar{display:flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 12px;border-bottom:var(--trim-heavy) solid var(--ink);background:var(--ground-2)}
.ac-win>.bar.tools{background:var(--turquoise-wash)} .ac-win>.bar.docs{background:var(--sunshine-wash)} .ac-win>.bar.fun{background:var(--pink-wash)} .ac-win>.bar.data{background:var(--grape-wash)} .ac-win>.bar.team{background:var(--lime-wash)}
.ac-win>.bar .t{flex:1;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:var(--tracking-stamp);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-win>.bar .ctl{width:18px;height:18px;background:var(--surface-card);border:2px solid var(--ink);border-radius:999px;font:700 9px var(--font-mono);display:grid;place-items:center;color:var(--ink)}
.ac-win>.body{padding:16px 18px}

/* banner — the shout. Uppercase Archivo Black, crushed leading, ends in a period. */
.ac-banner{position:relative;text-align:center;padding:28px 18px 22px;background:var(--surface-card);border:var(--trim-heavy) solid var(--ink);border-radius:var(--radius-md);box-shadow:var(--panel);overflow:hidden;margin-bottom:18px}
.ac-banner::before{content:"";position:absolute;inset:0 0 auto 0;height:10px;background:var(--colorway-strip);border-bottom:var(--trim) solid var(--ink)}
.ac-wordart{position:relative;font-family:var(--font-display);font-size:clamp(30px,6vw,56px);line-height:var(--leading-crush);margin:0;letter-spacing:var(--tracking-crush);text-transform:uppercase;color:var(--ink)}
.ac-banner .sub{position:relative;font-family:var(--font-mono);font-weight:700;font-size:11px;color:var(--ink-3);margin-top:12px;letter-spacing:var(--tracking-stamp);text-transform:uppercase}

/* colorway rule (was the rainbow) */
.ac-rainbow{height:8px;border:var(--trim) solid var(--ink);border-radius:var(--radius-pill);margin:20px 0;background:var(--colorway-strip);box-shadow:var(--panel-xs)}

/* buttons — press into the flat shadow */
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:15px;line-height:1;
  padding:0 16px;height:40px;border:var(--trim-heavy) solid var(--ink);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--ink);
  box-shadow:var(--panel-sm);transition:transform var(--duration-fast) var(--ease-snap),box-shadow var(--duration-fast) var(--ease-snap);text-decoration:none}
.ac-btn:hover{transform:translate(-1px,-1px);box-shadow:var(--panel)}
.ac-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 0 var(--ink)}
.ac-btn.primary{background:var(--pink);color:var(--bone)} .ac-btn.secondary{background:var(--cobalt-wash);color:var(--ink)} .ac-btn.accent{background:var(--sunshine);color:var(--ink)}
.ac-btn.sm{height:32px;font-size:13px;padding:0 12px;box-shadow:var(--panel-xs)}
.ac-btn.ghost{border-color:transparent;box-shadow:none;background:transparent}
.ac-btn.ghost:hover{transform:none;background:var(--ground-2)}
.ac-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:var(--panel-xs)}

/* cards / grid */
.ac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ac-card{background:var(--surface-card);border:var(--trim-heavy) solid var(--ink);border-radius:var(--radius-md);box-shadow:var(--panel);padding:14px 16px;transition:transform var(--duration) var(--ease-snap),box-shadow var(--duration) var(--ease-snap)}
.ac-card.hoverable:hover{transform:translate(-2px,-2px) rotate(-0.4deg);box-shadow:var(--panel-lg)}

/* tags — sewn-on patches */
.ac-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:var(--tracking-stamp);
  padding:3px 10px;border:var(--trim) solid var(--ink);border-radius:var(--radius-pill);background:var(--ground-2);color:var(--ink);box-shadow:var(--panel-xs)}
.ac-tag.tools{background:var(--turquoise-wash)} .ac-tag.docs{background:var(--sunshine-wash)} .ac-tag.fun{background:var(--pink-wash)} .ac-tag.data{background:var(--grape-wash)} .ac-tag.team{background:var(--lime-wash)}

/* form controls */
.ac-field{display:block;margin:0 0 14px}
.ac-field>.ac-label{display:block;margin-bottom:5px}
.ac-input,.ac-select{width:100%;height:40px;padding:0 12px;font-family:var(--font-mono);font-size:14px;color:var(--ink);
  background:var(--white);border:var(--trim) solid var(--ink);border-radius:var(--radius-sm);box-shadow:var(--field-inset)}
.ac-input:focus,.ac-select:focus{outline:none;box-shadow:var(--focus-ring-shadow)}
.ac-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* dropzone — stitched seam */
.ac-drop{border:var(--stitch);border-radius:var(--radius-md);background:var(--ground);padding:26px 18px;text-align:center;cursor:pointer;transition:background var(--duration)}
.ac-drop:hover,.ac-drop.over{background:var(--cobalt-wash)}
.ac-drop .big{font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:var(--tracking-stamp);text-transform:uppercase;color:var(--ink);margin-bottom:6px}

.ac-muted{color:var(--text-meta);font-family:var(--font-mono);font-size:12px}
/* webbing strap (was caution stripes) */
.ac-construction{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0;padding:8px 14px;background-image:var(--webbing);border:var(--trim-heavy) solid var(--ink);border-radius:var(--radius-xs);box-shadow:var(--panel-sm)}
.ac-construction span{background:var(--ink);color:var(--sunshine);padding:4px 14px;border-radius:3px;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:var(--tracking-stamp);text-transform:uppercase}
.ac-empty{text-align:center;padding:30px;color:var(--text-meta);font-family:var(--font-mono)}
.ac-footer{text-align:center;margin-top:24px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);line-height:1.9}
table.ac-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:13px}
table.ac-table th,table.ac-table td{border:var(--trim) solid var(--ink);padding:7px 10px;text-align:left}
table.ac-table th{background:var(--ground-2);font-weight:700;font-size:10px;letter-spacing:var(--tracking-stamp);text-transform:uppercase}