/* Imported from halloween-modals-responsive(1).zip. */
.halloween-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:66px 16px 24px;overflow:auto;background:transparent;box-shadow:none;border-radius:0;font-family:Arial,Helvetica,sans-serif}
.halloween-dialog[open]{display:grid;place-items:center}
.halloween-dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(8px)}
.halloween-dialog .modal__title{text-align:center;letter-spacing:normal;text-transform:uppercase}
.halloween-dialog .modal label{margin-bottom:14px}
.halloween-dialog .modal .path-option{margin-bottom:0}
.halloween-dialog .account-input{display:block;margin-bottom:0}
.halloween-dialog .path-option input{width:100%;height:100%;padding:0;margin:0;border:0;z-index:1}
.halloween-dialog .register a{text-decoration:underline}
.calendar-progress{display:flex;margin:0 auto 28px}
.path-card:disabled{cursor:default}
.path-card:disabled:not([aria-pressed=true]){opacity:.45}
.path-card:disabled:not([aria-pressed=true]):hover{border-color:transparent;background:var(--surface)}
.modal { width: min(560px, 100%); position: relative; flex: none; margin: auto; border-radius: 40px; background: #1d1b1b; box-shadow: 0 24px 70px rgba(0,0,0,.25); text-align: center; }
.modal--join { padding: 150px 40px 34px; }
.modal--progress { padding: 158px 40px 40px; }
.modal__close { position: absolute; top: 24px; right: 25px; display: grid; place-items: center; border: 0; background: none; color: #fff; width: 28px; height: 28px; font-size: 28px; font-weight: 200; line-height: 1; }
.modal__close:hover, .modal__close:focus-visible { color: #ffd22e; }
.modal__art { position: absolute; left: 50%; object-fit: contain; transform: translateX(-50%); pointer-events: none; }
.modal__art--join { top: -42px; width: 180px; height: 139px; }
.modal__art--progress { top: -42px; width: 190px; height: 149px; }
.modal__title { margin: 0; font-size: 24px; font-weight: 800; line-height: 1.2; }
.info { display: inline-grid; vertical-align: 3px; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: #85868a; color: #1d1b1b; font-weight: 700; font-size: 12px; }
.modal__lead { margin: 26px 0 0; font-size: 20px; line-height: 1.4; }
.modal--join form { margin-top: 42px; text-align: left; }
.field-label, .path-fieldset legend { display: block; margin-bottom: 14px; font-size: 20px; line-height: 1.2; }
.account-input { width: 100%; height: 66px; padding: 0 22px; border: 1px solid #3b3b3d; border-radius: 16px; outline: 0; background: #252525; color: #fff; font-size: 18px; }
.account-input::placeholder { color: #565656; }
.account-input:focus { border-color: #ffd22e; }
.account-input[aria-invalid="true"] { border-color: #ff7777; }
.form-error { margin: 8px 0 0; color: #ff8f8f; font-size: 13px; }
.path-fieldset { min-width: 0; padding: 0; margin: 42px 0 0; border: 0; }
.path-fieldset legend { padding: 0; }
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.path-option { position: relative; display: block; }
.path-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.path-option__content { height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 26px; background: #262626; border: 2px solid transparent; border-radius: 16px; font-size: 18px; font-weight: 700; }
.path-option svg { width: 24px; height: 24px; flex: none; }
.path-option input:checked + .path-option__content { border-color: #ffce28; background: #302d22; }
.path-option input:focus-visible + .path-option__content { outline: 2px solid #fff; outline-offset: 2px; }
.path-note { margin: 15px 0 38px; text-align: center; color: #a6a4a4; font-size: 16px; line-height: 1.4; }
.primary-button, .secondary-button { min-height: 68px; border-radius: 16px; font-size: 18px; font-weight: 800; }
.primary-button { width: 100%; border: 0; background: #ffcf29; color: #0a0a0a; }
.primary-button:hover, .primary-button:focus-visible { background: #ffe064; }
.register { margin: 39px 0 0; font-size: 16px; }
.register a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.register a:hover { color: #ffcf29; }
.modal--progress .modal__lead { margin-top: 25px; }
.modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 65px; }
.secondary-button { border: 1px solid #f5f5f5; background: transparent; color: #fff; }
.secondary-button:hover, .secondary-button:focus-visible { background: #333; }
@media (max-width: 600px) {
  .halloween-dialog[open] { padding: 62px 16px 20px; }
  .modal { border-radius: 28px; }
  .modal--join { padding: 112px 22px 25px; }
  .modal--progress { padding: 115px 22px 28px; }
  .modal__art--join, .modal__art--progress { width: 150px; height: 120px; top: -35px; }
  .modal__close { top: 18px; right: 17px; }
  .modal__title { font-size: 19px; }
  .modal__lead { font-size: 15px; margin-top: 18px; }
  .modal--join form { margin-top: 28px; }
  .field-label, .path-fieldset legend { font-size: 15px; margin-bottom: 10px; }
  .account-input { height: 52px; padding: 0 15px; border-radius: 12px; font-size: 14px; }
  .path-fieldset { margin-top: 25px; }
  .path-grid { gap: 10px; }
  .path-option__content { height: 56px; padding: 0 12px; gap: 7px; border-radius: 12px; font-size: 13px; }
  .path-option svg { width: 19px; height: 19px; }
  .path-note { font-size: 12px; margin: 12px 0 25px; }
  .primary-button, .secondary-button { min-height: 53px; border-radius: 12px; font-size: 13px; }
  .register { margin-top: 22px; font-size: 12px; }
  .modal__actions { margin-top: 38px; gap: 10px; }
}
@media (max-width: 360px) { .modal--join, .modal--progress { padding-left: 16px; padding-right: 16px; } .path-option__content { padding: 0 8px; font-size: 12px; } }

.halloween-dialog .modal{max-width:560px;color:#fff}
.halloween-dialog .modal__lead{font-weight:400;text-transform:none}
.halloween-dialog .path-note{margin:15px 0 38px}
.halloween-dialog .register{margin:39px 0 0}
.halloween-dialog .form-error{margin:8px 0 0}
.halloween-dialog .account-input::placeholder{color:#a5a5a5}
.halloween-dialog .modal button{font-family:inherit}
@media(max-width:600px){.halloween-dialog .modal label{margin-bottom:10px}.halloween-dialog .path-note{margin:12px 0 25px}.halloween-dialog .register{margin:22px 0 0}.halloween-dialog .modal__title{font-size:19px;line-height:1.2}}