/* Cyber arcade: a dark hardware catalogue, illuminated by the screens. */
html[data-theme="cyber"] {
  color-scheme: dark;
  --background: #080f18;
  --surface: #111e2a;
  --ink: #e6f4f5;
  --muted: #99b0bc;
  --accent: #72e5ed;
  --line: #2b424f;
  --paper-ink: #e6f4f5;
  --paper-muted: #acbec7;
  --paper-line: #304653;
  --serif-font: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  --display-font: "Avenir Next Condensed", "Arial Narrow", "PingFang SC", sans-serif;
  --radius: 0px;
}
html[data-theme="cyber"] body {
  background-color: var(--background);
  background-image: linear-gradient(#3a82900a 1px, transparent 1px), linear-gradient(90deg, #3a82900a 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  background-attachment: scroll;
}
html[data-theme="cyber"] body::before { background: repeating-linear-gradient(0deg, transparent, transparent 3px, #92cbdc 4px); opacity: .025; }
html[data-theme="cyber"] ::selection { background: #72e5ed; color: #080f18; }
html[data-theme="cyber"] .site-header { background: #080f18e8; border-bottom-color: #2d4655; }
html[data-theme="cyber"] .brand-mark { box-shadow: 0 0 0 1px #72e5ed66; }
html[data-theme="cyber"] .brand-name { font-weight: 750; letter-spacing: -.02em; }
html[data-theme="cyber"] .status-dot { border-radius: 0; background: #72e5ed; }
html[data-theme="cyber"] .nav-library::after { height: 3px; }
html[data-theme="cyber"] .home-hero { padding-block: 54px; gap: 50px; grid-template-columns: .9fr 1.1fr; }
html[data-theme="cyber"] .hero-heading > .eyebrow { color: #81dbe4; letter-spacing: .13em; }
html[data-theme="cyber"] .home-hero h1 { font-size: clamp(40px, 4.2vw, 59px); font-weight: 800; line-height: 1.2; letter-spacing: -.035em; }
html[data-theme="cyber"] .highlight-word { color: #72e5ed; }
html[data-theme="cyber"] .hero-description { color: #aabdc6; }
html[data-theme="cyber"] .hero-stats { gap: 0; margin-top: 30px; }
html[data-theme="cyber"] .hero-stats dd { font-family: var(--mono-font); font-style: normal; font-size: 29px; color: #edf8fa; }
html[data-theme="cyber"] .hero-stats dt { font-family: var(--mono-font); }
html[data-theme="cyber"] .hero-art { position: relative; margin: 0; padding: 0; border: 1px solid #426474; outline: none; background: #0c1723; box-shadow: 8px 8px 0 #101e2b; }
html[data-theme="cyber"] .hero-art::before { content: ""; position: absolute; z-index: 1; left: -1px; top: -1px; width: 32px; height: 4px; background: #72e5ed; }
html[data-theme="cyber"] .hero-art .picture { aspect-ratio: 16 / 9; background: #0c1723; }
html[data-theme="cyber"] .hero-art img { object-position: center; }
html[data-theme="cyber"] .hero-art figcaption { padding: 12px 15px; border-top: 1px solid #324b59; font: 10px/1.5 var(--mono-font); color: #b5d1d8; letter-spacing: .1em; }
html[data-theme="cyber"] .hero-art figcaption > span:last-child { color: #f2a16d; }
html[data-theme="cyber"] .section-heading { margin-bottom: 19px; }
html[data-theme="cyber"] .section-heading h2 { font-weight: 750; letter-spacing: -.015em; }
html[data-theme="cyber"] .section-index { padding: 3px 6px; color: #72e5ed; border: 1px solid #365963; }
html[data-theme="cyber"] .filter-tabs button { border-radius: 0; color: #b2c5ce; border-color: #2b414e; min-height: 44px; }
html[data-theme="cyber"] .filter-tabs button:hover { background: #17333e; color: #e6f4f5; border-color: #658c97; }
html[data-theme="cyber"] .filter-tabs button[aria-pressed="true"] { background: #72e5ed; border-color: #72e5ed; color: #08171e; }
html[data-theme="cyber"] .search-field { background: #111e2a; border-radius: 0; min-height: 44px; }
html[data-theme="cyber"] .project-grid { gap: 26px; }
html[data-theme="cyber"] .project-card, html[data-theme="cyber"] .work-card { border-color: #344b5a; box-shadow: none; }
html[data-theme="cyber"] .project-card:hover, html[data-theme="cyber"] .work-card[href]:hover { border-color: #72e5ed; box-shadow: 4px 4px 0 #72e5ed21; }
html[data-theme="cyber"] .project-card:focus-visible, html[data-theme="cyber"] .work-card:focus-visible { outline-color: #72e5ed; }
html[data-theme="cyber"] .project-art { margin: 0; outline: none; border-bottom: 1px solid #344b5a; background: #122a39; }
html[data-theme="cyber"] .picture { background: #142938; }
html[data-theme="cyber"] .project-image::after { background: linear-gradient(180deg, #06101a1a 5%, transparent 30%, #06121bde); }
html[data-theme="cyber"] .cover-label { left: 18px; top: 18px; color: #c3f9fc; background: #091c27e8; border: 1px solid #4e7b86; border-radius: 0; padding: 5px 9px; font-family: var(--mono-font); }
html[data-theme="cyber"] .cover-title { color: #f0fafb; font-size: clamp(30px, 3.5vw, 49px); font-weight: 800; letter-spacing: -.015em; text-shadow: 0 2px 5px #080f18; }
html[data-theme="cyber"] .cover-title > span { color: #aee6ec; }
html[data-theme="cyber"] .project-copy { padding: 25px 27px 22px; }
html[data-theme="cyber"] .project-topline .eyebrow { color: #80c7d2; }
html[data-theme="cyber"] .project-topline { margin-bottom: 17px; }
html[data-theme="cyber"] .available-label { color: #e9b28b; }
html[data-theme="cyber"] .available-label::before { background: #ffad75; border-radius: 0; }
html[data-theme="cyber"] .project-copy h3 { font-size: 29px; font-weight: 750; letter-spacing: -.025em; }
html[data-theme="cyber"] .tag { color: #b5cbd3; background: #1e3340; border-radius: 0; }
html[data-theme="cyber"] .project-models { color: #a7bfca; }
html[data-theme="cyber"] .model-mark { border-radius: 2px; }
html[data-theme="cyber"] .model-astra { background: #e3ae7c; color: #332218; }
html[data-theme="cyber"] .model-codex { background: #9ad6df; color: #163640; }
html[data-theme="cyber"] .model-opus { background: #d899ad; color: #482431; }
html[data-theme="cyber"] .model-grok { background: #b7c4d3; color: #25354a; }
html[data-theme="cyber"] .model-other { background: #b3bbd5; color: #262e46; }
html[data-theme="cyber"] .project-cta, html[data-theme="cyber"] .work-cta { color: #8ce6ed; }
html[data-theme="cyber"] .project-updated { color: #95acb8; }
html[data-theme="cyber"] .project-featured .project-art { border-right: 1px solid #344b5a; border-bottom: 0; }
html[data-theme="cyber"] .project-featured .project-copy { padding: 30px; }
html[data-theme="cyber"] .project-featured .project-cta { color: #08171e; background: #72e5ed; border-color: #72e5ed; border-radius: 0; }
html[data-theme="cyber"] .future-note { padding-inline: 20px; background: #101e2b80; border: 1px dashed var(--line); }
html[data-theme="cyber"] .future-mark { color: #ffad75; font-style: normal; font-family: var(--mono-font); }
html[data-theme="cyber"] .future-note h3 { font-weight: 650; }
html[data-theme="cyber"] .future-note > .eyebrow { color: #88aebc; }
html[data-theme="cyber"] .breadcrumb > span[aria-hidden] { color: #688693; }
html[data-theme="cyber"] .detail-intro > .eyebrow { color: #80d8e3; }
html[data-theme="cyber"] .detail-intro h1 { font-weight: 750; letter-spacing: -.025em; }
html[data-theme="cyber"] .detail-description, html[data-theme="cyber"] .detail-meta { color: #b1c5ce; }
html[data-theme="cyber"] .detail-intro .tag { color: #b6d5de; background: #1a3340; }
html[data-theme="cyber"] .detail-cover { border: 1px solid #426474; outline: none; box-shadow: 6px 6px 0 #142432; }
html[data-theme="cyber"] .detail-cover-caption { color: #dbf7fb; background: linear-gradient(transparent, #071723ed); }
html[data-theme="cyber"] .project-brief { background: #111f2b; border: 1px solid #304a58; border-left: 3px solid #72e5ed; }
html[data-theme="cyber"] .prompt-symbol { font-style: normal; font-family: var(--mono-font); }
html[data-theme="cyber"] .brief-action { color: #8bdbe5; }
html[data-theme="cyber"] .project-brief > p { color: #b5c8d1; }
html[data-theme="cyber"] .sort-field select { color: #b5c8d1; }
html[data-theme="cyber"] .work-art { margin: 0; outline: none; border-bottom: 1px solid #344b5a; }
html[data-theme="cyber"] .work-model { color: #e6f4f5; background: #102331f2; border-color: #557384; border-radius: 0; }
html[data-theme="cyber"] .work-version { color: #d0edf2; background: #0d2330ed; border-color: #5b7c8a; border-radius: 0; }
html[data-theme="cyber"] .work-open { border-radius: 0; color: #08171e; background: #72e5ed; border-color: #b4f7fc; }
html[data-theme="cyber"] .work-english { color: #85cbd6; }
html[data-theme="cyber"] .work-copy h3 { font-weight: 700; letter-spacing: -.025em; }
html[data-theme="cyber"] .work-tags .tag { color: #a9c3cd; background: transparent; }
html[data-theme="cyber"] .footer-brand { color: #bde8ee; font-family: var(--mono-font); font-style: normal; }
html[data-theme="cyber"] .empty-state { background: #111f2b; }
html[data-theme="cyber"] .empty-symbol { color: #72e5ed; }
html[data-theme="cyber"] .empty-state button, html[data-theme="cyber"] .button-primary, html[data-theme="cyber"] .skip { background: #72e5ed; color: #08171e; border-radius: 0; }
html[data-theme="cyber"] .image-fallback { background: #172c3a; color: #b6ced8; }
html[data-theme="cyber"] dialog { border-color: #5b8291; border-radius: 0; box-shadow: 8px 8px 0 #72e5ed21, 0 24px 80px #0009; }
html[data-theme="cyber"] dialog::backdrop { background: #020913d9; }
html[data-theme="cyber"] dialog > .eyebrow { color: #86d9e4; }
html[data-theme="cyber"] dialog h2 { font-weight: 750; letter-spacing: -.025em; }
html[data-theme="cyber"] dialog :focus-visible { outline-color: #72e5ed; }
html[data-theme="cyber"] .about-steps li > span { color: #e8b081; font-style: normal; font-family: var(--mono-font); }

@media (max-width: 800px) {
  html[data-theme="cyber"] .home-hero { gap: 28px; padding-block: 40px; }
  html[data-theme="cyber"] .home-hero h1 { font-size: 38px; }
  html[data-theme="cyber"] .hero-art .picture { aspect-ratio: 1.15; }
  html[data-theme="cyber"] .hero-art img { object-fit: cover; }
  html[data-theme="cyber"] .hero-art figcaption { font-size: 9px; padding-inline: 8px; }
  html[data-theme="cyber"] .project-copy { padding: 22px; }
  html[data-theme="cyber"] .project-copy h3 { font-size: 24px; }
  html[data-theme="cyber"] .project-featured .project-copy { padding: 24px; }
  html[data-theme="cyber"] .cover-title { font-size: 34px; }
}
@media (max-width: 600px) {
  html[data-theme="cyber"] .home-hero { grid-template-columns: 1fr; padding-block: 30px 36px; gap: 28px; }
  html[data-theme="cyber"] .home-hero h1 { font-size: clamp(36px, 10.5vw, 50px); line-height: 1.2; }
  html[data-theme="cyber"] .hero-stats { margin-top: 24px; }
  html[data-theme="cyber"] .hero-stats dd { font-size: 26px; }
  html[data-theme="cyber"] .hero-art { margin-right: 5px; box-shadow: 5px 5px 0 #142432; }
  html[data-theme="cyber"] .hero-art .picture { aspect-ratio: 16 / 9; }
  html[data-theme="cyber"] .hero-art figcaption { font-size: 10px; padding-block: 10px; }
  html[data-theme="cyber"] .project-grid { gap: 24px; }
  html[data-theme="cyber"] .project-copy, html[data-theme="cyber"] .project-featured .project-copy { padding: 23px 21px 21px; }
  html[data-theme="cyber"] .project-copy h3 { font-size: 26px; }
  html[data-theme="cyber"] .project-art, html[data-theme="cyber"] .project-featured .project-art { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid #344b5a; }
  html[data-theme="cyber"] .cover-title { font-size: 34px; }
  html[data-theme="cyber"] .future-note { padding-inline: 14px; }
  html[data-theme="cyber"] .detail-cover { margin: 0 5px 0 0; }
}