:root {
    --bg: #040404; --panel: #111; --title: #d6d6d6; --body: #5a5a5a; --sub: #989898;
    --stroke: #2f2f2f; --link: #515c7d; --hover: #8a97c4;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: var(--bg); }
  body { background: var(--bg); color: var(--body); font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 13px; line-height: 1.6; letter-spacing: -.025em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: #515c7d; color: #e6e6e6; }

  .page { position: relative; min-height: 100dvh; }
  .grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
    background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px); background-size: 100px 100px; }
  .noise { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: screen;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

  .stage { position: relative; z-index: 1; }
  .frame { --gx: 20px; --gy: 56px; --split: .31; position: relative; }
  .layout { display: grid; padding: var(--gy) var(--gx); min-height: 100dvh; }

  aside { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; }
  .mark { padding: 20px 20px 24px; height: 56px; }
  .mark svg { height: 12px; width: auto; display: block; fill: #2f2f2f; }
  .scroll { flex: 1; min-height: 0; }
  .col { display: flex; flex-direction: column; gap: 24px; padding: 20px 20px 24px; }
  h1 { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 300; color: var(--title); font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
  h2 { font-weight: 500; color: var(--sub); font-size: 13px; }
  .text { display: flex; flex-direction: column; gap: 1.6em; }
  section { display: flex; flex-direction: column; gap: 10px; }
  .rows { display: flex; flex-direction: column; margin: -5px 0; }
  .row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
  .row i { flex: 1; min-width: 1px; height: 0; border-top: .5px solid var(--stroke); }
  .row .l { color: var(--link); transition: color .2s; }
  .row .r { color: var(--body); }
  a.row:hover .l { color: var(--hover); }
  .rows:hover a.row:not(:hover) { opacity: .45; }
  a.row { transition: opacity .2s; }

  .partners-bar { display: flex; align-items: center; gap: clamp(20px, 3.2vw, 48px); padding: 8px 20px 40px; }
  .partners { display: flex; align-items: center; gap: clamp(20px, 3.2vw, 48px); flex-wrap: nowrap; min-width: 0; }
  .partners a { display: flex; align-items: center; height: 52px; opacity: .4; transition: opacity .2s; }
  .partners a:hover { opacity: .95; }
  .partners img { max-height: 24px; width: auto; filter: brightness(0) invert(1); }
  .partners img.fal { height: 28px; width: 70px; }
  .partners img.turing { max-height: 43px; }

  .join-btn { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 12px; border: 1px solid #2f2f2f; border-radius: 8px; background: #111; color: #d6d6d6; font-size: 14px; letter-spacing: -.01em; line-height: 1; transition: border-color .2s, background .2s; }
  .join-btn:hover { border-color: #515c7d; background: #161616; }
  .join-btn .ico { width: 24px; height: 24px; overflow: hidden; display: block; }
  .join-btn .ico svg { width: 24px; height: 24px; display: block; shape-rendering: crispEdges; }
  .join-btn .fb { display: none; }
  .join-btn:hover .fa { display: none; }
  .join-btn:hover .fb { display: inline; }
  .join-btn:hover .ico svg { animation: thud .3s steps(3); }
  .join-btn .spark { opacity: 0; }
  .join-btn:hover .spark { animation: spark .4s steps(4) both; }
  @keyframes spark { 0% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes thud { 0%,100% { transform: translateY(0); } 33% { transform: translateY(1px); } 66% { transform: translateY(0); } }
  .join-btn .chev { width: 8px; height: 14px; fill: #989898; margin-left: 6px; transition: transform .2s steps(2); shape-rendering: crispEdges; }
  .join-btn:hover .chev { transform: translateX(3px); fill: #e6e6e6; }
  .canvas-wrap { display: none; }
  #ascii { width: 100%; height: 100%; display: block; }

  @media (max-width: 1023px) {
    .canvas-wrap { display: block; height: 240px; margin: 0 20px 8px; border-top: .5px solid var(--stroke); border-bottom: .5px solid var(--stroke); }
    aside { background: transparent; }
  }

  @media (min-width: 1024px) {
    .stage { display: flex; height: 100dvh; align-items: center; justify-content: center; }
    .frame { --gx: 120px; --gy: 100px; width: min(100%, 1600px, 100dvh * 16 / 9); aspect-ratio: 16 / 9; }
    .layout { height: 100%; min-height: 0; grid-template-columns: calc(var(--split) * 100%) 1fr; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
    aside { background: var(--panel); border-left: .5px solid var(--stroke); border-right: .5px solid var(--stroke); }
    .mark { padding: 25px 25px 15px; height: auto; }
    .scroll { overflow-y: auto; scrollbar-width: none; overscroll-behavior: none; }
    .scroll::-webkit-scrollbar { display: none; }
    .col { gap: 25px; padding: 30px 25px 25px; }
    .canvas-wrap { display: block; position: relative; margin: 0; height: auto; border: 0; }
    .rule-t, .rule-b { position: absolute; left: 0; right: 0; height: .5px; background: var(--stroke); z-index: 1; }
    .rule-t { top: var(--gy); } .rule-b { bottom: var(--gy); }
    .partners-bar { position: absolute; left: var(--gx); right: var(--gx); bottom: 0; height: var(--gy); padding: 0 25px; z-index: 2; }
  }

  /* entrance stagger */
  @keyframes rise { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
  .in { animation: rise .6s cubic-bezier(0,0,.2,1) both; animation-delay: calc(var(--i) * 70ms); }
  @media (prefers-reduced-motion: reduce) { .in { animation: none; } }

.partners-bar h2 { font-weight: 400; font-size: 17px; }

/* sub pages */
.back { margin-bottom: 4px; }
.desc { color: var(--body); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { color: var(--sub); }
.field .opt { color: var(--body); margin-left: 4px; }
.field input, .field textarea, .field select { width: 100%; font: inherit; font-size: 13px; letter-spacing: -.01em; color: var(--title); background: #0a0a0a; border: 1px solid var(--stroke); border-radius: 8px; padding: 10px 12px; outline: none; transition: border-color .2s; }
.field textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #989898 50%), linear-gradient(135deg, #989898 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #515c7d; }
.field ::placeholder { color: #3d3d3d; }
.submit { align-self: flex-start; font: inherit; font-size: 14px; letter-spacing: -.01em; cursor: pointer; color: #040404; background: #e6e6e6; border: 0; border-radius: 8px; padding: 11px 20px; transition: background .2s; }
.submit:hover { background: #fff; }
.thanks { display: none; }
.sent .thanks { display: flex; flex-direction: column; gap: 10px; }
.sent > :not(.thanks) { display: none !important; }

.subtitle { font-size: 16px; line-height: 1.4; letter-spacing: -.02em; color: #b4b4b4; margin-top: -10px; }
@media (min-width: 1024px) {
  .wide .layout { grid-template-columns: 1fr; }
  .wide .canvas-wrap { display: none; }
  .wide .col { padding: 36px 48px 40px; max-width: 880px; }
}
#apply { display: grid; grid-template-columns: 1fr; gap: 18px 24px; }
#apply .span2 { grid-column: 1 / -1; }
@media (min-width: 1024px) { #apply { grid-template-columns: 1fr 1fr; } }

[hidden] { display: none !important; }

.desc + .desc { margin-top: -.6em; }

/* challenge pages: square visual over the ascii field, wider text column */
#ascii { position: absolute; inset: 0; }
.sq { position: relative; z-index: 2; display: block; width: calc(100% - 40px); margin: 20px auto 84px; aspect-ratio: 1 / 1; object-fit: cover; border: .5px solid var(--stroke); }
@media (max-width: 1023px) { .canvas-wrap:has(.sq) { height: auto; min-height: 240px; } .sq { margin: 20px auto 84px; } }
@media (min-width: 1024px) {
  .split-wide { --split: .44; }
  .sq { position: absolute; right: 20px; top: 20px; width: auto; height: calc(100% - 96px); margin: 0; }
  .split-wide .col .partners { flex-wrap: wrap; gap: 4px 32px; margin-top: 4px; }
  .split-wide .col .partners a { height: 40px; }
}

/* challenge pages: solid grey across the whole rectangle, no ascii field */
.split-wide #ascii { display: none; }
@media (min-width: 1024px) {
  .split-wide .layout { background: var(--panel); border-left: .5px solid var(--stroke); border-right: .5px solid var(--stroke); }
  .split-wide aside { background: transparent; border: 0; }
}

/* apply page: Luma registration embed */
.luma-embed { border: 1px solid var(--stroke); border-radius: 8px; overflow: hidden; background: #0a0a0a; }
.luma-embed iframe { display: block; width: 100%; height: 620px; border: 0; }
a.submit { display: inline-block; }

/* home: conductor photo over the ascii field */
.sq.portrait { aspect-ratio: 3 / 4; }
@media (max-width: 1023px) { .sq.portrait { width: min(calc(100% - 40px), 420px); } }
@media (max-width: 1023px) { .canvas-wrap { position: relative; overflow: hidden; } }