/* Web fonts are loaded from index.html, not with @import.
   A CSS @import is render-blocking and serialised: the browser refuses to
   apply ANY rule in this file until fonts.googleapis.com answers. On mobile
   networks that block or stall Google Fonts, that left the whole site
   rendering as unstyled HTML with the login gate wide open. */

:root{
  --bg:#070b08;
  --panel:#0c1210;
  --panel2:#101713;
  --green:#f08a12;
  --green2:#ffb347;
  --text:#f3f4ef;
  --muted:#a7afa7;
  --line:rgba(255,255,255,.11);
  --pink:#ef91db;
  --purple:#b07cff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#070b08;
  color:var(--text);
  font-family:"Space Grotesk",system-ui,sans-serif;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}
button{font:inherit}
img{display:block;max-width:100%}

.topbar{
  position:sticky;top:0;z-index:50;
  height:80px;
  display:grid;
  grid-template-columns:260px 1fr auto;
  align-items:center;
  gap:30px;
  padding:0 5vw;
  background:#070b08;
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;align-items:center;gap:0;
  font-family:"Press Start 2P",monospace;
  white-space:nowrap;
  line-height:1;
}
.brand-rabbit{font-size:28px;margin-right:10px;filter:saturate(.85)}
.brand-vizzy{font-size:27px;color:#f2f2ee;text-shadow:0 3px 0 #333}
.brand-smp{font-size:27px;color:var(--green);text-shadow:0 3px 0 #8a4200}
.topbar nav{display:flex;justify-content:center;gap:34px}
.topbar nav a{
  font-family:"Press Start 2P",monospace;
  font-size:8px;
  padding:31px 0 27px;
  position:relative;
}
.topbar nav a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:10px;height:2px;
  background:var(--green);
  transform:scaleX(0);transition:.2s;
}
.topbar nav a:hover::after,.topbar nav a.active::after{transform:scaleX(1)}
.menu{display:none}

.discord,.discord-btn,.discord-card,.apply-btn{
  font-family:"Press Start 2P",monospace;
  text-transform:uppercase;
  letter-spacing:0;
}
.top-discord,.discord-btn,.discord-card{
  border:1px solid rgba(240,138,18,.55);
  color:#ffd29a;
  background:rgba(8,14,9,.85);
  border-radius:7px;
}
.top-discord{font-size:8px;padding:13px 18px}
.discord-btn{padding:17px 22px;font-size:9px}
.discord-card{display:block;text-align:center;padding:17px;font-size:8px;margin-top:20px}
.apply-btn{
  border:0;border-radius:7px;
  background:linear-gradient(180deg,#ffad2e,#d86c00);
  color:#111;
  padding:18px 24px;
  font-size:9px;
  cursor:pointer;
  box-shadow:0 8px 28px rgba(230,112,0,.18);
}
.apply-btn span{margin-left:12px}

.hero{
  min-height:500px;
  position:relative;
  background:
    linear-gradient(90deg,rgba(2,5,3,.78),rgba(2,5,3,.25) 55%,rgba(2,5,3,.10)),
    url("assets/world-clean.jpg") center/cover no-repeat;
  overflow:hidden;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(7,11,8,.78),transparent 28%);
}
.hero-inner{
  position:relative;z-index:2;
  width:min(1400px,92vw);
  margin:0 auto;
  min-height:500px;
  display:grid;
  grid-template-columns:1fr 310px;
  align-items:center;
  gap:70px;
  padding:45px 0 28px;
}
.hero-copy{max-width:640px}
.hero h1{
  margin:0;
  font-family:"Press Start 2P",monospace;
  font-size:clamp(52px,7vw,90px);
  line-height:.95;
  letter-spacing:-5px;
  text-shadow:0 8px 0 rgba(0,0,0,.4);
}
.hero h1 span{color:#f0f0ec}
.hero h1 strong{color:var(--green);font-weight:400}
.tagline{
  font-family:"Press Start 2P",monospace;
  text-transform:uppercase;
  font-size:14px;
  line-height:1.6;
  margin:16px 0 20px;
}
.intro{
  font-size:17px;line-height:1.65;margin:0;
  color:#ecefe8;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}
.intro b:first-of-type{color:var(--green2)}
.intro b:last-of-type{color:var(--pink)}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.whitelist-note{margin-top:16px;font-size:15px;color:#d6ddd3}

.server-card{
  background:linear-gradient(180deg,rgba(9,14,12,.96),rgba(7,11,9,.97));
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:25px;
  box-shadow:0 18px 55px rgba(0,0,0,.5);
}
.server-card h2{
  margin:0 0 20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
  font-family:"Press Start 2P",monospace;
  color:var(--green2);
  text-transform:uppercase;
  font-size:13px;
}
.server-line{display:grid;grid-template-columns:25px 1fr;gap:12px;align-items:center;margin:16px 0}
.server-line>span{font-size:20px;color:#d4dad4}
.server-line small{display:block;color:#8d968e;text-transform:uppercase;font-size:9px;margin-bottom:2px}
.server-line strong{display:block;font-weight:500;font-size:14px}
.server-line .online{color:var(--green)}

.feature-strip{
  width:min(1400px,92vw);
  margin:0 auto;
  transform:translateY(-14px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  position:relative;z-index:4;
}
.feature{
  background:linear-gradient(180deg,#0e1512,#0b100e);
  border:1px solid var(--line);
  border-radius:9px;
  padding:24px;
  display:grid;
  grid-template-columns:60px 1fr;
  gap:18px;
  min-height:150px;
}
.icon{font-size:34px;display:grid;place-items:start center;color:var(--green)}
.feature h3,.section-label,.block-heading h2{
  font-family:"Press Start 2P",monospace;
  text-transform:uppercase;
}
.feature h3{color:var(--green);font-size:12px;margin:0 0 10px}
.feature p{margin:0;color:#bec5be;font-size:14px;line-height:1.5}

.content-wrap{width:min(1400px,92vw);margin:0 auto}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;padding:65px 0}
.panel{
  border:1px solid var(--line);
  background:linear-gradient(180deg,#0e1512,#0a100d);
  border-radius:10px;
  padding:30px;
}
.section-label{color:var(--green);font-size:9px}
.panel h2,.apply-section h2{
  font-family:"Press Start 2P",monospace;
  font-size:24px;line-height:1.45;margin:13px 0 18px;
}
.panel p{color:#b6beb6;line-height:1.7}
.panel ul{padding-left:22px;color:#c7cdc7;line-height:1.75}

.creators-and-gallery{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:30px;
  padding:15px 0 70px;
}
.block-heading{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.block-heading h2{font-size:12px;color:var(--green);white-space:nowrap;margin:0}
.block-heading::after{content:"";height:1px;background:var(--line);flex:1}

.creator-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.creator{
  min-height:190px;
  display:grid;
  grid-template-columns:132px 1fr;
  gap:14px;
  align-items:stretch;
}
.creator img{
  width:132px;height:190px;object-fit:cover;
  border:1px solid var(--line);border-radius:8px;
}
.creator h3{font-family:"Press Start 2P",monospace;font-size:11px;margin:10px 0 8px}
.creator span{color:var(--green);font-size:12px}
.creator:nth-child(2) span{color:var(--pink)}
/* Sliderguitars — purple, not pink */
.staff-cards .creator:nth-child(2) span{color:var(--purple)}
.creator p{font-size:13px;line-height:1.5;color:#b3bbb3}

.gallery-row{
  display:grid;
  grid-template-columns:1.15fr repeat(4,1fr);
  gap:9px;
}
.gallery-row button{
  border:1px solid var(--line);
  background:#0b110e;
  padding:0;
  border-radius:7px;
  overflow:hidden;
  cursor:zoom-in;
}
.gallery-row img{width:100%;height:145px;object-fit:cover;transition:.25s}
.gallery-row button:hover img{transform:scale(1.04);filter:brightness(1.08)}

.apply-section{
  margin-bottom:70px;
  padding:32px;
  border:1px solid rgba(240,138,18,.35);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  background:linear-gradient(90deg,rgba(240,138,18,.06),#0a100d);
}
.apply-section p{color:#b3bbb3;margin:0}
.large{min-width:240px}

footer{
  min-height:90px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:30px;
  padding:22px 5vw;
  color:#909990;
  font-size:12px;
}
.footer-logo{
  font-family:"Press Start 2P",monospace;
  font-size:18px;
}
.footer-logo span{color:#eee}
.footer-logo strong{color:var(--green);font-weight:400}
footer a{justify-self:end;color:#ffd29a}

dialog{
  border:1px solid var(--line);
  border-radius:8px;
  background:#0b100e;
  color:#fff;
  padding:0;
  max-width:min(900px,92vw);
}
dialog::backdrop{background:rgba(0,0,0,.86);backdrop-filter:blur(6px)}
#lightbox img{max-width:92vw;max-height:82vh}
.close{
  position:absolute;right:10px;top:10px;z-index:2;
  width:38px;height:38px;border:1px solid var(--line);
  border-radius:50%;background:rgba(0,0,0,.7);color:white;font-size:24px;cursor:pointer;
}
.dialog-copy{padding:45px;max-width:580px}
.dialog-copy h2{font-family:"Press Start 2P",monospace;line-height:1.5}

.reveal{opacity:0;transform:translateY(18px);transition:.6s}
.reveal.show{opacity:1;transform:none}

@media(max-width:1000px){
  .topbar{grid-template-columns:220px 1fr auto;padding-inline:20px}
  .brand-vizzy,.brand-smp{font-size:23px}.brand-rabbit{font-size:24px}
  .topbar nav{
    position:absolute;top:80px;left:0;right:0;
    display:none;flex-direction:column;gap:0;background:#070b08;
    border-bottom:1px solid var(--line);padding:10px 20px 18px;
  }
  .topbar nav.open{display:flex}
  .topbar nav a{padding:14px 0}
  .top-discord{display:none}
  .menu{display:block;justify-self:end;background:transparent;color:white;border:1px solid var(--line);border-radius:5px;padding:9px 11px}
  /* minmax(0,1fr), not 1fr: a plain 1fr track cannot shrink below its
     min-content, and "VizzySMP" in the pixel font has no wrap opportunity,
     so the column grew wider than the phone and pushed the hero off-screen. */
  .hero-inner{grid-template-columns:minmax(0,1fr);gap:25px}
  .server-card{max-width:420px}
  .feature-strip{grid-template-columns:repeat(2,1fr);transform:none;margin-top:18px}
  .creators-and-gallery{grid-template-columns:1fr}
}

@media(max-width:680px){
  .topbar{height:68px;grid-template-columns:1fr auto}
  .brand-vizzy,.brand-smp{font-size:20px}.brand-rabbit{font-size:22px}
  .topbar nav{top:68px}
  .hero{min-height:auto}
  .hero-inner{padding:70px 0 35px}
  /* Scale the title to the viewport so all eight characters fit on a phone. */
  .hero h1{font-size:clamp(28px,12.2vw,52px)}
  .tagline{font-size:10px}
  .intro{font-size:15px}
  .hero-buttons{display:grid}
  .hero-buttons>*{width:100%}
  .feature-strip{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;padding:45px 0}
  .creator-cards{grid-template-columns:1fr}
  .gallery-row{grid-template-columns:1fr 1fr}
  .gallery-main{grid-column:1/-1}
  .gallery-row img{height:135px}
  .apply-section{display:grid}
  .large{width:100%}
  footer{grid-template-columns:1fr;text-align:center}
  .footer-logo{margin:auto}
  footer a{justify-self:center}
}

/* Image artifact fix */
.hero {
  background-position: center center;
}
.hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,7,4,.86) 0%, rgba(3,7,4,.57) 37%, rgba(3,7,4,.12) 70%),
    linear-gradient(0deg, rgba(7,11,8,.82) 0%, transparent 35%);
}
.hero-inner { position:relative; z-index:3; }
.creator img { background:#0b100d; }
@media(max-width:680px){
  .hero::before{
    background:
      linear-gradient(90deg,rgba(3,7,4,.84),rgba(3,7,4,.35)),
      linear-gradient(0deg,rgba(7,11,8,.88),transparent 45%);
  }
}


/* ---------- Embedded whitelist application ---------- */
.application-wrap {
  padding: 65px 0 90px;
}
.application-heading {
  max-width: 780px;
  margin-bottom: 30px;
}
.application-heading h2 {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1.35;
  margin: 12px 0 14px;
}
.application-heading p {
  color: #b5bdb5;
  line-height: 1.75;
  font-size: 16px;
}

.whitelist-form {
  display: grid;
  gap: 18px;
}
.form-section {
  padding: 30px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(15,22,18,.98), rgba(8,13,10,.98));
}
.character-section {
  border-color: rgba(240,138,18,.24);
  box-shadow: inset 0 0 50px rgba(240,138,18,.025);
}
.form-section-title {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
  align-items: start;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.form-section-title > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240,138,18,.4);
  border-radius: 8px;
  color: var(--green);
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  background: rgba(240,138,18,.05);
}
.form-section-title h3,
.submit-zone h3 {
  margin: 2px 0 7px;
  font-family: "Press Start 2P", monospace;
  font-size: 13px;
  line-height: 1.45;
}
.form-section-title p,
.submit-zone p {
  margin: 0;
  color: #9ea79f;
  line-height: 1.55;
}

.form-grid {
  display: grid;
  gap: 16px;
}
.form-grid.two {
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.whitelist-form label:not(.choice):not(.rules-confirm) {
  display: grid;
  gap: 9px;
  margin-top: 17px;
}
.whitelist-form label > span,
.whitelist-form legend {
  color: #e8ece5;
  font-weight: 600;
  font-size: 14px;
}
.whitelist-form input,
.whitelist-form textarea,
.whitelist-form select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 7px;
  background: #080d0a;
  color: #f1f4ef;
  padding: 14px 15px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.whitelist-form textarea {
  min-height: 115px;
  resize: vertical;
  line-height: 1.55;
}
.whitelist-form input:focus,
.whitelist-form textarea:focus,
.whitelist-form select:focus {
  border-color: rgba(240,138,18,.75);
  box-shadow: 0 0 0 3px rgba(240,138,18,.08);
  background: #0a110c;
}
.whitelist-form input::placeholder,
.whitelist-form textarea::placeholder {
  color: #687069;
}
.whitelist-form fieldset {
  margin: 18px 0 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
}
.whitelist-form legend {
  padding: 0 8px;
}
.choice-row {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 7px;
  padding: 11px 15px;
  background: #080d0a;
}
.choice input,
.rules-confirm input {
  width: auto;
  accent-color: var(--green);
}
.rules-confirm {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 22px;
  padding: 17px;
  border: 1px solid rgba(240,138,18,.25);
  border-radius: 8px;
  background: rgba(240,138,18,.04);
}
.submit-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  padding: 27px 30px;
  border: 1px solid rgba(240,138,18,.34);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(240,138,18,.075), rgba(10,16,13,.98));
}
.form-status {
  display: none;
  padding: 16px 18px;
  border-radius: 8px;
  line-height: 1.55;
}
.form-status.success {
  display: block;
  border: 1px solid rgba(240,138,18,.4);
  background: rgba(240,138,18,.07);
  color: #ffe0b8;
}
.form-status.error {
  display: block;
  border: 1px solid rgba(255,96,96,.38);
  background: rgba(255,96,96,.07);
  color: #ffc5c5;
}
.apply-btn:disabled {
  opacity: .55;
  cursor: wait;
}

@media(max-width:680px) {
  .application-wrap { padding: 48px 0 70px; }
  .form-section { padding: 22px 17px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .form-section-title { grid-template-columns: 42px 1fr; }
  .form-section-title > span { width: 42px; height: 42px; font-size: 8px; }
  .choice-row { display: grid; grid-template-columns: 1fr 1fr; }
  .submit-zone { display: grid; padding: 23px 18px; }
}


/* v9 — Save answers on this device */
.save-answers-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(240,138,18,.23);
  border-radius: 9px;
  background: rgba(240,138,18,.035);
}
.save-answers-toggle {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 !important;
  cursor: pointer;
}
.save-answers-toggle input {
  width: auto !important;
  margin-top: 4px;
  accent-color: var(--green);
}
.save-answers-toggle > span {
  display: grid;
  gap: 5px;
}
.save-answers-toggle strong {
  color: #fff1df;
  font-size: 14px;
}
.save-answers-toggle small {
  color: #9ca69d;
  line-height: 1.45;
  font-size: 12px;
  max-width: 720px;
}
.clear-saved-btn {
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 7px;
  background: #090e0b;
  color: #cbd2ca;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 12px;
}
.clear-saved-btn:hover {
  border-color: rgba(240,138,18,.45);
  color: #fff0dc;
}
@media(max-width:680px) {
  .save-answers-box {
    display: grid;
    padding: 16px;
  }
  .clear-saved-btn {
    width: 100%;
  }
}


/* v10 — orange theme + expanded staff */
.staff-heading {
  margin: 26px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.staff-heading h3 {
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--green);
}
.staff-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.staff-card img {
  object-position: center;
}
.staff-card:nth-child(2) img {
  object-position: center 25%;
}
.save-answers-box {
  margin: 0 0 18px;
}
.apply-btn {
  text-decoration: none;
}
.apply-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}
@media(max-width:680px) {
  .staff-cards { grid-template-columns: 1fr; }
}

.submission-note {
  margin: -5px 2px 0;
  color: #8f978f;
  font-size: 12px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ */
/* Discord login gate                                                  */
/* ------------------------------------------------------------------ */

body.auth-loading > header,
body.auth-loading > main,
body.auth-loading > footer,
body.auth-locked > header,
body.auth-locked > main,
body.auth-locked > footer{
  display:none !important;
}
body.auth-locked{overflow:hidden}

.auth-gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(240,138,18,.16), transparent 65%),
    #070b08;
  overflow-y:auto;
}
.auth-gate[hidden]{display:none}

.auth-card{
  width:100%;max-width:520px;
  padding:42px 40px 34px;
  border:1px solid rgba(240,138,18,.3);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(16,23,19,.98), rgba(10,16,13,.98));
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  text-align:center;
}
.auth-brand{
  display:flex;align-items:center;justify-content:center;
  font-family:"Press Start 2P",monospace;line-height:1;margin-bottom:26px;
}
.auth-brand .brand-rabbit{font-size:24px;margin-right:10px}
.auth-brand .brand-vizzy,.auth-brand .brand-smp{font-size:22px}
.auth-card h1{
  font-family:"Press Start 2P",monospace;
  font-size:15px;line-height:1.7;margin:0 0 14px;
}
.auth-lead{color:var(--muted);line-height:1.65;margin:0 0 26px}

.auth-login{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  padding:16px 22px;
  border-radius:9px;
  font-family:"Press Start 2P",monospace;font-size:10px;line-height:1.6;
  color:#120a02;
  background:linear-gradient(90deg,var(--green),var(--green2));
  box-shadow:0 10px 26px rgba(240,138,18,.28);
  transition:transform .15s, box-shadow .15s;
}
.auth-login:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(240,138,18,.38)}
.auth-login-mark{font-size:13px}

.auth-error{
  margin:18px 0 0;padding:13px 15px;
  border:1px solid rgba(255,96,96,.38);
  border-radius:8px;
  background:rgba(255,96,96,.08);
  color:#ffc5c5;font-size:14px;line-height:1.55;
}
.auth-error[hidden]{display:none}

.auth-perks{
  list-style:none;margin:28px 0 0;padding:22px 0 0;
  border-top:1px solid var(--line);
  text-align:left;
}
.auth-perks li{
  position:relative;
  padding-left:26px;margin-bottom:12px;
  color:var(--muted);font-size:14px;line-height:1.55;
}
.auth-perks li::before{
  content:"◈";position:absolute;left:0;top:0;color:var(--green);
}
.auth-fineprint{
  margin:22px 0 0;color:#7f877f;font-size:12.5px;line-height:1.6;
}
.auth-fineprint a{color:var(--green2);text-decoration:underline}

/* Logged-in pill in the top bar */
.top-right{display:flex;align-items:center;gap:14px;justify-self:end}
.user-pill{
  display:flex;align-items:center;gap:9px;
  padding:6px 8px 6px 6px;
  border:1px solid var(--line);border-radius:100px;
  background:rgba(255,255,255,.03);
  font-size:13px;white-space:nowrap;
}
.user-pill[hidden]{display:none}
.user-pill img{width:26px;height:26px;border-radius:50%}
.user-logout{
  padding:4px 10px;border-radius:100px;
  border:1px solid rgba(240,138,18,.4);
  color:var(--green2);font-size:11px;
}
.user-logout:hover{background:rgba(240,138,18,.12)}

.form-status.pending{
  display:block;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}
.locked-field{opacity:.85;cursor:not-allowed}
.field-note{display:block;margin-top:6px;color:#7f877f;font-size:12px}
.field-note[hidden]{display:none}

@media(max-width:1000px){
  /* grid-row:1 is required, not decorative. .menu comes before .top-right in
     the markup but sits in column 3, and grid's sparse auto-placement will not
     backtrack to column 2 of row 1 — so .top-right was pushed onto a second
     row and hung below the fixed-height bar, over the hero. */
  .top-right{grid-column:2;grid-row:1}
  .menu{grid-column:3;grid-row:1}
  .topbar{grid-template-columns:220px auto auto}
}
@media(max-width:680px){
  /* Three columns (brand / account / menu) have to fit a phone. minmax(0,1fr)
     lets the brand column shrink instead of shoving the menu button off the
     right edge, which pushed .top-right onto a second row over the hero. */
  .topbar{grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding-inline:14px}
  .brand{overflow:hidden}
  .top-right{gap:8px}
  .user-pill span{display:none}
  .user-pill{padding:5px}
  .auth-card{padding:32px 22px 26px}
  .auth-card h1{font-size:13px}
}
@media(max-width:400px){
  .brand-vizzy,.brand-smp{font-size:17px}
  .brand-rabbit{font-size:19px;margin-right:7px}
  .user-logout{padding:6px 9px}
}

.auth-checking{
  display:none;
  color:var(--muted);font-size:14px;margin:10px 0 4px;
}
body.auth-loading .auth-checking{display:block}
body.auth-loading .auth-body{display:none}

/* Account-synced answers */
.autosave{display:block}
.autosave strong{display:block;font-size:15px;margin-bottom:5px}
.autosave small{display:block;color:var(--muted);font-size:13px;line-height:1.55}
.autosave-status{
  display:block;margin-top:8px;
  color:var(--green2);font-size:12.5px;
}