@import url("/brand/palette.css");

:root {
  color-scheme: dark;
  --ink: var(--text);
  --accent: var(--teal);
  --paper: var(--bg);
  --danger: #ffb3a9;
}
*{box-sizing:border-box}body{margin:0;background:var(--paper);font:16px/1.6 system-ui,sans-serif;color:var(--ink)}header{display:flex;align-items:center;gap:24px;padding:24px max(24px,calc((100vw - 1120px)/2));border-bottom:1px solid var(--line);background:var(--panel-raised)}.brand{font-weight:800;letter-spacing:.12em;text-decoration:none;color:var(--ink);white-space:nowrap}.brand span{font-size:.7em;color:var(--accent)}#identity{margin-left:auto;color:var(--muted)}main{max-width:1120px;margin:48px auto;padding:0 24px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;font-weight:700;color:var(--accent)}h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1.12;letter-spacing:-.04em;max-width:720px;margin:12px 0}h2,h3{line-height:1.3}h2{font-size:1.35rem;margin:0 0 16px}h3{font-size:1.1rem}.intro{font-size:1.15rem;color:var(--muted);margin-bottom:32px}section{background:var(--panel-raised);border:1px solid var(--line);border-radius:14px;padding:28px;margin:20px 0}.columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.columns section{margin:0}form{display:grid;gap:16px}label{display:grid;gap:6px;font-size:.9rem;font-weight:600}input,textarea,select{font:inherit;border:1px solid var(--subtle);border-radius:7px;padding:10px 12px;width:100%;background:var(--panel-raised);color:var(--ink)}textarea{resize:vertical}button,.button{font:inherit;display:inline-block;border:1px solid var(--accent);background:var(--accent);color:var(--bg);padding:10px 18px;border-radius:7px;cursor:pointer;text-decoration:none;min-height:44px;width:fit-content}button:disabled{opacity:.5;cursor:default}.actions{display:flex;flex-wrap:wrap;gap:12px}details{margin-top:24px}summary{cursor:pointer;color:var(--accent)}#message:empty{display:none}#message{padding:16px 20px;background:var(--panel-raised);border-radius:8px;overflow-wrap:anywhere}#message[data-error=true]{background:var(--panel-raised);color:var(--danger)}.program-list{display:grid;gap:12px}.program-list button{background:var(--panel-raised);color:var(--ink);text-align:left;width:100%}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:.9rem}td,th{text-align:left;border-bottom:1px solid var(--line);padding:10px;overflow-wrap:anywhere}hr{border:0;border-top:1px solid var(--line);margin:32px 0}#review,#invite-results{margin-top:28px}#links{font-family:monospace;font-size:.85rem}footer{max-width:1120px;padding:32px 24px;margin:auto;color:var(--muted);font-size:.8rem}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}@media(max-width:720px){header{padding:20px;gap:12px;flex-wrap:wrap}#identity{font-size:.85rem}main{margin:32px auto;padding:0 16px}.columns{grid-template-columns:1fr;gap:20px}section{padding:22px}button{width:100%}.brand{font-size:.85rem}}

#team-participants label { display: flex; align-items: center; gap: 8px; }
#team-participants input { width: auto; }
.team-problems { color: var(--danger); }

.help-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.help-heading > :is(h2, h3, p) { margin: 0; }
.help-button {
  flex: 0 0 32px;
  width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
#program-help {
  width: min(36rem, calc(100% - 32px));
  padding: 24px;
  border: 1px solid var(--line-bright);
  border-radius: 14px;
  background: var(--panel-raised);
  color: var(--text);
}
#program-help::backdrop { background: rgb(0 0 0 / 65%); }
#help-content pre {
  overflow: auto;
  padding: 12px;
  background: var(--bg);
  border-radius: 7px;
}

.studio-header { flex-wrap: wrap; justify-content: space-between; }
.studio-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.studio-header nav a:not(.button), .studio-link { color: var(--accent); }
.studio-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 32px;
  padding: 28px 0;
}
.studio-logo { width: 100%; height: auto; border-radius: 14px; }
.studio-secondary { background: transparent; color: var(--accent); }
@media (max-width: 720px) {
  .studio-hero { grid-template-columns: 1fr; }
}