@font-face {
  font-family: "Boletoscan MS Sans Serif";
  src: url("/vendor/fonts/ms_sans_serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Boletoscan MS Sans Serif";
  src: url("/vendor/fonts/ms_sans_serif_bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme:light;
  --silver:#c0c0c0;
  --navy:#000080;
  --shadow:#808080;
  --bevel-out:inset 1px 1px #fff,inset -1px -1px #808080,1px 1px #000;
  --bevel-in:inset 1px 1px #808080,inset -1px -1px #fff;
  font-family:"Boletoscan MS Sans Serif","MS Sans Serif",Tahoma,Geneva,sans-serif;
  font-size:12px;
  color:#151515;
  background:#fdfdf9;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

button, input, select, textarea {
  font:inherit;
  border-radius:0;
}

button {
  color:inherit;
  cursor:pointer;
}

button:disabled {
  color:#777;
  cursor:default;
  text-shadow:1px 1px #fff;
}

button, a {
  -webkit-tap-highlight-color:transparent;
}

button:focus-visible, a:focus-visible {
  outline:1px dotted currentColor;
  outline-offset:-5px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2px solid var(--navy);
  outline-offset:1px;
}

a {
  color:var(--navy);
}

svg {
  display:block;
  flex-shrink:0;
}

.pixel-icon {
  width: 16px;
  height: 16px;
}

img {
  max-width:100%;
}

[hidden] {
  display:none!important;
}

::selection {
  background:var(--navy);
  color:#fff;
}

h1, h2, h3, p {
  margin-top:0;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.skip-link {
  position:fixed;
  left:16px;
  top:-60px;
  z-index:100;
  padding:12px;
  background:#fff;
}

.skip-link:focus {
  top:8px;
}

.titlebar {
  min-height:27px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 4px;
  background:var(--navy);
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.titlebar-icon, .titlebar>.pixel-icon {
  width:17px;
  height:17px;
}

.titlebar-text {
  min-width:0;
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.text-button {
  padding: 8px 0 0;
  border: 0;
  background: none;
  color: var(--navy);
  font-size: 10px;
  text-decoration: underline;
  text-align: left;
}

.view-topline {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.breadcrumb {
  margin:0 0 10px;
  color:#6e6e6e;
  font-family:"Courier New",monospace;
  font-size:10px;
  letter-spacing:.3px;
}

.page-heading h1 {
  margin:0 0 8px;
  font-size:29px;
  line-height:1.15;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:800;
  letter-spacing:-1px;
}

.page-heading p:last-child {
  margin-bottom:0;
  color:#626262;
  font-size:11px;
  line-height:1.65;
}

.view-stamp {
  min-width:95px;
  margin-top:1px;
  padding:7px 10px;
  border:1px solid #a7a7a7;
  background:#f1f1eb;
  font-family:"Courier New",monospace;
  font-size:10px;
  line-height:1.5;
  text-align:right;
}

.view-stamp strong, .view-stamp span {
  display:block;
}

.welcome-banner {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:22px;
  padding:13px 15px;
  border:1px solid #b5ae88;
  background:#fffce3;
}

.banner-icon {
  width:28px;
  height:28px;
  flex-shrink:0;
}

.banner-copy {
  flex:1;
  min-width:0;
  font-size:11px;
  line-height:1.6;
}

.banner-copy strong {
  display:block;
  font-size:11px;
  margin-bottom:2px;
}

.banner-copy p {
  margin:0;
}

.banner-action {
  margin-left:auto;
  flex-shrink:0;
}

.catalog-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:13px;
  margin-bottom:17px;
  flex-wrap:wrap;
}

.search-box {
  display:flex;
  align-items:center;
  gap:7px;
  width:243px;
  max-width:100%;
  height:30px;
  padding:3px 8px;
  border:1px solid;
  border-color:#808080 #fff #fff #808080;
  box-shadow:inset 1px 1px #000;
  background:#fff;
}

.search-box .pixel-icon, .search-box svg {
  width:15px;
  height:15px;
  color:#555;
}

.search-box input {
  min-width:0;
  width:100%;
  height:100%;
  padding:2px 0;
  border:0;
  outline:none;
  background:transparent;
  font-size:11px;
}

.search-box:focus-within {
  outline:1px solid var(--navy);
  outline-offset:1px;
}

.search-box input:focus-visible {
  outline:none;
}

.category-filters {
  display:flex;
  gap:4px;
  flex-wrap:wrap;
}

.filter-button {
  min-height:28px;
  padding:4px 10px;
  border:1px solid #bcbcb4;
  background:#f5f5ed;
  font-size:10px;
}

.filter-button:hover {
  background:#e5e5dd;
}

.filter-button.is-active {
  border-color:var(--navy);
  background:var(--navy);
  color:#fff;
}

.section-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 13px;
  font-size:10px;
  color:#686868;
}

.section-caption strong {
  color:#333;
  font-size:11px;
}

.event-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:17px;
}

.event-card {
  min-width:0;
  background:#fff;
  border:1px solid #a3a3a3;
  box-shadow:2px 2px #deded8;
}

.event-art {
  width: 100%;
  min-width: 0;
  position:relative;
  min-height:189px;
  aspect-ratio:1.38;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  padding:17px;
  isolation:isolate;
}

.poster-kicker {
  position:relative;
  z-index:2;
  font-family:"Courier New",monospace;
  font-size:9px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.poster-title {
  position:relative;
  z-index:2;
  max-width:90%;
  font-family:"Arial Black",Arial,sans-serif;
  font-weight:900;
  font-size:clamp(27px,2.7vw,43px);
  line-height:.98;
  letter-spacing:-2px;
  text-transform:uppercase;
}

.poster-bottom {
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  width:100%;
  font-family:"Courier New",monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.7px;
}

.poster-orb {
  position:absolute;
  z-index:0;
  width:155px;
  height:155px;
  right:-35px;
  top:23px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.5;
  box-shadow:0 0 0 12px transparent,0 0 0 13px currentColor,0 0 0 25px transparent,0 0 0 26px currentColor,0 0 0 38px transparent,0 0 0 39px currentColor;
}

.poster-grid {
  position:absolute;
  z-index:0;
  inset:40% -30% -70%;
  border:1px solid currentColor;
  transform:perspective(100px) rotateX(45deg);
  opacity:.2;
  box-shadow:inset 0 20px transparent,inset 0 21px currentColor,inset 0 42px transparent,inset 0 43px currentColor;
}

.poster-star {
  position:absolute;
  z-index:0;
  right:-10px;
  top:33px;
  width:145px;
  height:145px;
  background:currentColor;
  clip-path:polygon(50% 0,59% 27%,79% 10%,76% 37%,100% 37%,80% 55%,100% 71%,74% 72%,79% 100%,57% 80%,48% 100%,42% 77%,19% 96%,23% 69%,0 65%,23% 51%,3% 32%,30% 34%,27% 7%,44% 27%);
  opacity:.75;
}

.poster-midnight {
  background:#2c225e;
  color:#e2d4ff;
}

.poster-midnight .poster-title {
  color:#e5ff65;
}

.poster-midnight .poster-orb {
  color:#b2a1ef;
}

.poster-garden {
  background:#d9f071;
  color:#193d25;
}

.poster-garden .poster-title {
  max-width:75%;
  font-family:Georgia,serif;
  font-size:clamp(29px,2.6vw,44px);
  font-weight:700;
  text-transform:none;
  letter-spacing:-1.8px;
}

.poster-garden .poster-star {
  width:140px;
  height:140px;
  background:#ff78aa;
  color:#ff78aa;
  transform:rotate(16deg);
  opacity:1;
}

.poster-rooftop {
  background:#ef745a;
  color:#3e2323;
}

.poster-rooftop .poster-title {
  max-width:82%;
}

.poster-rooftop .poster-orb {
  width:170px;
  height:170px;
  right:-35px;
  top:46px;
  background:#f7d795;
  border:0;
  box-shadow:none;
  opacity:1;
}

.poster-rooftop .poster-grid {
  border-color:#4f302c;
  opacity:.7;
}

.poster-jazz {
  background:#e7ad4e;
  color:#2b2220;
}

.poster-jazz .poster-title {
  font-family:Georgia,serif;
  font-weight:500;
  font-style:italic;
  text-transform:none;
  font-size:clamp(32px,3vw,47px);
  letter-spacing:-2px;
}

.poster-jazz .poster-orb {
  width:115px;
  height:115px;
  top:50px;
  right:-30px;
  color:#5c342e;
  background:#4b2a26;
  opacity:1;
  box-shadow:0 0 0 13px #e7ad4e,0 0 0 15px #4b2a26,0 0 0 29px #e7ad4e,0 0 0 31px #4b2a26;
}

.poster-studio {
  background:#91c9d5;
  color:#102e50;
}

.poster-studio .poster-star {
  color:#263991;
  top:46px;
  right:-25px;
  opacity:1;
  transform:rotate(12deg);
}

.poster-studio .poster-title {
  max-width:76%;
}

.poster-movie {
  background:#242424;
  color:#f2eee4;
}

.poster-movie .poster-title {
  font-family:"Courier New",monospace;
  font-size:clamp(26px,2.5vw,38px);
  letter-spacing:-2px;
}

.poster-movie .poster-orb {
  top:47px;
  right:-22px;
  width:130px;
  height:130px;
  background:#d6d1bd;
  opacity:.8;
  border:9px solid #242424;
  box-shadow:0 0 0 2px #d6d1bd;
}

.poster-movie .poster-orb::after {
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid #242424;
  box-shadow:inset 12px 0 #242424,inset -12px 0 #242424;
}

.event-card-body {
  padding:14px;
}

.event-tag {
  display:inline-block;
  margin-bottom:9px;
  padding:3px 6px;
  border:1px solid #c1c1b4;
  background:#f3f2ea;
  font-size:9px;
}

.event-card h3 {
  margin:0 0 9px;
  font-size:14px;
  line-height:1.3;
}

.event-meta {
  margin-bottom:7px;
  display:flex;
  align-items:center;
  gap:6px;
  color:#656565;
  font-size:10px;
  line-height:1.45;
}

.event-meta .pixel-icon, .event-meta svg {
  width:12px;
  height:12px;
}

.event-card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dotted #b7b7aa;
}

.event-price {
  font-weight:700;
  font-size:13px;
}

.event-price small {
  color:#666;
  font-size:9px;
  font-weight:400;
}

.featured-event {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:22px;
  padding:12px;
  border:1px solid #aaa;
  background:#fff;
}

.featured-event .event-art {
  min-height:230px;
}

.featured-event h2 {
  font-size:23px;
}

.empty-state {
  padding:50px 24px;
  text-align:center;
  border:1px dashed #aaa;
  background:#f2f2ed;
  color:#555;
}

.empty-state>.pixel-icon {
  width:44px;
  height:44px;
  margin:0 auto 18px;
}

.empty-state h2, .empty-state h3 {
  font-size:17px;
  color:#222;
  margin-bottom:10px;
}

.empty-state p {
  margin:0 auto 20px;
  max-width:340px;
  line-height:1.7;
}

.win-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:31px;
  min-width:80px;
  padding:6px 15px;
  border:1px solid #c0c0c0;
  background:var(--silver);
  box-shadow:var(--bevel-out);
  color:#111;
  font-size:11px;
  line-height:1.3;
  text-decoration:none;
}

.win-button .pixel-icon, .win-button svg {
  width:15px;
  height:15px;
}

.win-button:hover:not(:disabled) {
  background:#d0d0d0;
}

.win-button:active:not(:disabled) {
  padding:7px 14px 5px 16px;
  box-shadow:inset 1px 1px #000,inset -1px -1px #fff;
}

.win-button.primary {
  outline:1px solid #000;
  font-weight:700;
}

.win-button.small {
  min-width:72px;
  min-height:27px;
  padding:4px 10px;
  font-size:10px;
}

.win-button.danger {
  color:#800000;
}

.win-button.full {
  width:100%;
}

.field {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:16px;
  min-width:0;
}

.field>label, .field>span:first-child {
  font-size:11px;
}

.field label small {
  color:#666;
}

.field input, .field select, .field textarea, input.win-input, select.win-input {
  width:100%;
  min-width:0;
  min-height:32px;
  padding:7px 9px;
  border:1px solid;
  border-color:#808080 #fff #fff #808080;
  background:#fff;
  box-shadow:inset 1px 1px #000;
  color:#111;
}

.field textarea {
  resize:vertical;
  min-height:80px;
}

.field input:disabled, .field select:disabled {
  background:#e5e5e5;
}

.field-help {
  font-size:10px;
  line-height:1.6;
  color:#626262;
}

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

.form-grid .full-width {
  grid-column:1/-1;
}

.win-fieldset {
  min-width:0;
  margin:0 0 20px;
  padding:17px 15px 3px;
  border:1px solid #808080;
  box-shadow:1px 1px #fff,inset 1px 1px #fff;
}

.win-fieldset legend {
  padding:0 6px;
  font-size:11px;
}

.inset-panel {
  padding:14px;
  background:#fff;
  border:1px solid;
  border-color:#808080 #fff #fff #808080;
  box-shadow:inset 1px 1px #000;
}

.notice {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:13px 14px;
  border:1px solid #9c9c92;
  background:#f1f1e7;
  font-size:11px;
  line-height:1.7;
  margin:0 0 18px;
}

.notice p {
  margin:0;
}

.notice strong {
  display:block;
}

.notice.success, .notice[data-kind="success"] {
  background:#ecf6e8;
  border-color:#63855b;
  color:#234e22;
}

.notice.error, .notice[data-kind="error"] {
  background:#fff0ee;
  border-color:#bd7f74;
  color:#7c2623;
}

.notice.info, .notice[data-kind="info"] {
  background:#edf1fb;
  border-color:#8295b3;
  color:#25395e;
}

.dialog-window {
  position:fixed;
  width:min(700px,calc(100vw - 30px));
  max-height:calc(100dvh - 60px);
  margin:auto;
  padding:3px;
  border:1px solid;
  border-color:#fff #000 #000 #fff;
  background:var(--silver);
  color:#111;
  box-shadow:inset -1px -1px #808080,2px 2px #000;
  overflow:auto;
}

.dialog-window::backdrop {
  background:rgb(0 0 0 / 32%);
}

.dialog-window .titlebar {
  position:sticky;
  top:-3px;
  z-index:2;
}

.dialog-content {
  padding:22px;
}

.dialog-content>h2 {
  font-size:19px;
  margin:0 0 10px;
}

.dialog-content>p {
  line-height:1.7;
}

.dialog-actions {
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding:13px 19px;
  border-top:1px solid #808080;
  box-shadow:inset 0 1px #fff;
}

.dialog-actions .win-button {
  min-width:92px;
}

.checkout-layout {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:25px;
  align-items:start;
}

.checkout-form {
  min-width:0;
}

.checkout-steps {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"Courier New",monospace;
  font-size:10px;
  color:#656565;
  margin:0 0 21px;
}

.checkout-steps .current {
  color:var(--navy);
  font-weight:700;
}

.order-summary {
  padding:12px;
  border:1px solid #999;
  background:#efefe7;
}

.summary-art {
  margin-bottom:15px;
}

.summary-art .event-art, .order-summary>.event-art {
  min-height:160px;
  margin-bottom:16px;
  aspect-ratio:1.5;
}

.summary-art .poster-title, .order-summary .poster-title {
  font-size:29px;
}

.order-summary h3 {
  font-size:14px;
  margin-bottom:9px;
}

.order-summary p {
  font-size:10px;
  line-height:1.7;
  margin-bottom:7px;
}

.price-row {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:11px;
  font-size:11px;
}

.price-row.total, .price-row .total {
  font-weight:700;
}

.price-row.total {
  border-top:1px dotted #999;
  padding-top:13px;
  margin-top:15px;
  font-size:13px;
}

.demo-banner {
  margin:15px 0;
  padding:10px 12px;
  background:#fffbd7;
  border:1px solid #b9b18d;
  font-size:10px;
  line-height:1.65;
}

.demo-banner strong {
  font-weight:700;
}

.ticket-list {
  display:grid;
  gap:18px;
}

.ticket-card {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:20px;
  padding:20px;
  border:1px solid #999;
  background:#fff;
  box-shadow:2px 2px #deded8;
}

.ticket-qr {
  align-self:start;
  padding:9px;
  background:#fff;
  border:1px solid #d0d0d0;
  text-align:center;
}

.ticket-qr canvas, .ticket-qr img, .ticket-qr svg {
  display:block;
  width:100%;
  height:auto;
  image-rendering:pixelated;
}

.ticket-qr small {
  display:block;
  margin-top:6px;
  color:#666;
  font:8px "Courier New",monospace;
}

.ticket-card h2, .ticket-card h3 {
  font-size:17px;
  margin:6px 0 11px;
}

.ticket-card p {
  margin-bottom:7px;
  font-size:11px;
  line-height:1.6;
}

.ticket-id {
  font-family:"Courier New",monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.7px;
  overflow-wrap:anywhere;
}

.ticket-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin-top:16px;
}

.ticket-status {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 6px;
  font-size:9px;
  border:1px solid #6f8e6f;
  background:#edf7e8;
  color:#285325;
}

.ticket-status.used, .ticket-status.checked-in {
  border-color:#999;
  background:#eee;
  color:#555;
}

.ticket-contact {
  color:#666;
  overflow-wrap:anywhere;
}

.ticket-contact small {
  font-size:10px;
}

.password-panel {
  display:flex;
  align-items:flex-start;
  gap:21px;
  width:min(520px,100%);
  margin:32px auto;
  padding:26px;
  border:1px solid #999;
  background:var(--silver);
  box-shadow:inset 1px 1px #fff,2px 2px #777;
}

.password-icon {
  width:45px;
  height:45px;
  flex-shrink:0;
  margin-top:5px;
}

.password-content {
  flex:1;
  min-width:0;
}

.password-content h2 {
  margin-bottom:12px;
  font-size:17px;
}

.password-content>p {
  font-size:11px;
  line-height:1.7;
  margin-bottom:17px;
}

.password-content .win-button {
  min-width:100px;
}

.password-content .field-help {
  margin-top:13px;
}

.scanner-layout {
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(230px,.8fr);
  gap:20px;
  align-items:start;
}

.scanner-camera-box {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
  margin-bottom:13px;
  border:2px solid;
  border-color:#808080 #fff #fff #808080;
  background:#1b2024;
  overflow:hidden;
}

.scanner-camera-box video {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
}

.scanner-placeholder {
  padding:32px 20px;
  text-align:center;
  color:#b8c0c6;
  font-size:11px;
  line-height:1.7;
}

.scanner-placeholder .pixel-icon {
  width:42px;
  height:42px;
  margin:0 auto 16px;
}

.scanner-placeholder strong {
  color:#fff;
  display:block;
  margin-bottom:5px;
}

.scan-frame {
  position:absolute;
  width:57%;
  aspect-ratio:1;
  max-width:210px;
  border:1px dashed #7cf0a6;
  pointer-events:none;
}

.scan-frame::before, .scan-frame::after {
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  border:3px solid #7cf0a6;
}

.scan-frame::before {
  top:-2px;
  left:-2px;
  border-right:0;
  border-bottom:0;
}

.scan-frame::after {
  bottom:-2px;
  right:-2px;
  border-left:0;
  border-top:0;
}

.camera-actions {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:12px 0 20px;
}

.scanner-manual {
  margin-top:20px;
}

.scanner-manual .field {
  margin-bottom:10px;
}

.scanner-manual form {
  display:flex;
  gap:9px;
  align-items:end;
}

.scanner-manual form .field {
  flex:1;
  margin:0;
}

.scanner-manual input {
  text-transform:uppercase;
  font-family:"Courier New",monospace;
}

.scanner-sidebar {
  display:grid;
  gap:18px;
}

.scanner-sidebar h2, .scanner-sidebar h3 {
  font-size:12px;
}

.stats-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.stat-box {
  padding:17px 10px;
  border:1px solid;
  border-color:#808080 #fff #fff #808080;
  background:#efefe7;
}

.stat-number {
  display:block;
  font-family:"Courier New",monospace;
  font-size:29px;
  line-height:1;
  font-weight:700;
  color:var(--navy);
}

.stat-label {
  display:block;
  margin-top:9px;
  font-size:10px;
  color:#565656;
}

.checkin-result {
  padding:16px;
  margin-top:17px;
  border:1px solid #74936c;
  background:#eaf4e5;
  font-size:11px;
  line-height:1.7;
}

.checkin-result strong {
  display:block;
  font-size:16px;
  margin-bottom:6px;
}

.checkin-result.error {
  border-color:#ad6b61;
  background:#fff0ee;
}

.checkin-result.warning {
  border-color:#a49b56;
  background:#fffadd;
}

.checkin-result p:last-child {
  margin-bottom:0;
}

.recent-list {
  border:1px solid;
  border-color:#808080 #fff #fff #808080;
  padding:0 10px;
  background:#fff;
}

.recent-row {
  display:flex;
  justify-content:space-between;
  gap:7px;
  padding:11px 0;
  border-bottom:1px solid #deded7;
  font-size:10px;
}

.recent-row:last-child {
  border:0;
}

.recent-row strong {
  display:block;
  font-size:11px;
  margin-bottom:4px;
}

.recent-row small {
  font-family:"Courier New",monospace;
  color:#666;
  font-size:9px;
}

.recent-row time {
  color:#666;
  font-size:9px;
  white-space:nowrap;
}

.tab-list {
  display:flex;
  align-items:end;
  margin:0 0 19px;
  padding-top:3px;
  border-bottom:1px solid #808080;
}

.tab-button {
  position:relative;
  padding:7px 15px;
  border:1px solid;
  border-color:#fff #808080 #808080 #fff;
  background:#b5b5b5;
  font-size:11px;
}

.tab-button.is-active, .tab-button[aria-selected="true"] {
  padding-top:9px;
  border-bottom-color:var(--silver);
  background:var(--silver);
  transform:translateY(1px);
  font-weight:700;
}

.help-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.help-grid article {
  padding:20px;
  border:1px solid #aaa;
  background:#f1f1e9;
}

.help-grid h2, .help-grid h3 {
  margin:12px 0;
  font-size:15px;
}

.help-grid p, .help-grid li {
  font-size:11px;
  line-height:1.8;
}

.help-grid ol, .help-grid ul {
  padding-left:18px;
  margin-bottom:0;
}

.help-grid .pixel-icon {
  width:29px;
  height:29px;
}

.app-toast {
  position:fixed;
  right:22px;
  bottom:20px;
  z-index:50;
  max-width:min(390px,calc(100vw - 32px));
  padding:14px 18px;
  border:1px solid #333;
  background:#ffffe1;
  box-shadow:2px 2px #444;
  color:#111;
  font-size:11px;
  line-height:1.7;
}

.loading {
  padding:44px;
  text-align:center;
  font-family:"Courier New",monospace;
  font-size:12px;
}

.loading::after {
  content:" ▌";
}

.muted {
  color:#666;
}

.text-right {
  text-align:right;
}

.inline-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.poster-button {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.poster-button:focus-visible {
  outline: 2px dotted #000;
  outline-offset: -5px;
}

.event-card h2 {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.3;
}

.event-title-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.event-title-link:hover {
  color: var(--navy);
  text-decoration: underline;
}

.event-title-link:focus-visible {
  outline-offset: 2px;
}

.poster-title > span {
  font: 700 15px "Courier New", monospace;
  letter-spacing: -.5px;
  text-transform: none;
}

.poster-studio .poster-title > span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 3px;
}

.poster-star {
  display: none;
  font-size: 0;
}

.poster-garden .poster-star, .poster-studio .poster-star {
  display: block;
}

.poster-garden .poster-orb, .poster-garden .poster-grid, .poster-jazz .poster-grid, .poster-movie .poster-grid, .poster-studio .poster-orb {
  display: none;
}

.workspace > .category-filters {
  margin: 0 0 22px;
}

.catalog-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 10px;
}

.catalog-location .pixel-icon {
  width: 14px;
  height: 14px;
}

.catalog-footnote {
  margin: 23px 0 0;
  color: #777;
  font-size: 9px;
  line-height: 1.7;
}

.view-stamp {
  display: flex;
  align-items: center;
  gap: 9px;
}

.view-stamp .pixel-icon {
  width: 27px;
  height: 27px;
}

.heading-icon {
  width: 40px;
  height: 40px;
  margin: 5px 2px 0 0;
}

.loading-cursor {
  color: var(--navy);
}

.wide-dialog {
  width: min(850px, calc(100vw - 30px));
}

.event-detail-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 25px;
  align-items: start;
}

.event-detail-layout > .event-art {
  min-height: 360px;
  aspect-ratio: auto;
  padding: 23px;
}

.event-detail-layout .poster-title {
  font-size: 46px;
}

.event-detail-copy {
  min-width: 0;
}

.event-detail-copy h2 {
  margin: 3px 0 8px;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.6px;
}

.event-detail-copy > p {
  font-size: 11px;
  line-height: 1.75;
}

.event-subtitle {
  color: #555;
}

.event-details {
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr);
  gap: 11px 10px;
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  font-size: 11px;
  line-height: 1.65;
}

.event-details dt {
  color: #555;
}

.event-details dd {
  margin: 0;
}

.event-detail-copy .dialog-actions {
  flex-wrap: wrap;
  padding: 13px 0 0;
  margin-top: 20px;
}

.checkout-layout {
  grid-template-columns: .8fr 1.2fr;
}

.order-summary h2 {
  margin-bottom: 9px;
  font-size: 15px;
  line-height: 1.4;
}

.order-summary hr {
  margin: 14px 0;
  border: 0;
  border-top: 1px solid #999;
  border-bottom: 1px solid #fff;
}

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.demo-banner > .pixel-icon {
  width: 23px;
  height: 23px;
}

.fake-payment {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 1px 0 16px;
  font-size: 10px;
}

.fake-payment > span:first-child {
  font-size: 21px;
  color: var(--navy);
}

.fake-payment p {
  margin: 5px 0 0;
  color: #555;
  font-size: 9px;
  line-height: 1.6;
}

.test-badge {
  margin-left: auto;
  padding: 3px 5px;
  border: 1px solid #8d853c;
  background: #fff5b2;
  color: #5b541d;
  font: 9px "Courier New", monospace;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 17px 0;
  font-size: 10px;
  line-height: 1.6;
  cursor: pointer;
}

.consent-row input {
  appearance: none;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin: 2px 0 0;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #fff;
  box-shadow: inset 1px 1px #000;
}

.consent-row input:checked::after {
  content: "";
  display: block;
  width: 7px;
  height: 4px;
  margin: 3px 0 0 3px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
}

.checkout-form > .dialog-actions {
  padding: 13px 0 0;
}

.confirmation-heading {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 20px;
}

.confirmation-heading > .pixel-icon {
  width: 40px;
  height: 40px;
}

.confirmation-heading h2 {
  margin: 0 0 7px;
  font-size: 24px;
  letter-spacing: -.5px;
}

.confirmation-heading p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}

.notice {
  display: block;
}

.notice > strong {
  display: inline;
  margin-right: 4px;
}

.dialog-content > .ticket-card {
  margin: 0 0 16px;
}

.ticket-info {
  min-width: 0;
}

.ticket-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.ticket-topline .event-tag {
  margin-bottom: 0;
}

.ticket-person {
  display: flex;
  gap: 12px;
  margin: 15px 0 11px;
  font-size: 11px;
}

.ticket-person dt {
  color: #666;
}

.ticket-person dd {
  margin: 0;
  font-weight: 700;
}

.ticket-qr > span {
  display: block;
  margin-top: 5px;
  font: 8px "Courier New", monospace;
  color: #666;
}

.email-headers {
  padding: 13px 15px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #ddd;
  font-size: 11px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.email-headers p {
  margin: 0 0 5px;
}

.email-headers p:last-child {
  margin: 0;
}

.email-headers strong {
  display: inline-block;
  min-width: 55px;
}

.email-body {
  padding: 22px;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  background: #fff;
  font-size: 12px;
  line-height: 1.8;
}

.email-body > .pixel-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 15px;
}

.email-body h2 {
  font-size: 21px;
}

.email-body p:last-child {
  margin-bottom: 0;
}

.about-dialog {
  padding: 12px 15px 20px;
  text-align: center;
  font-size: 11px;
  line-height: 1.7;
}

.about-dialog > .pixel-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
}

.about-dialog h2 {
  margin-bottom: 9px;
  font-size: 25px;
}

.password-icon > .pixel-icon {
  width: 100%;
  height: 100%;
}

.password-content .dialog-actions {
  padding: 13px 0 0;
  flex-wrap: wrap;
}

.scanner-event-select {
  max-width: 440px;
}

.stats-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
}

.scanner-sidebar {
  display: block;
}

.manual-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.manual-input-row > input {
  flex: 1;
}

.manual-input-row > .win-button {
  flex-shrink: 0;
  white-space: nowrap;
}

.scanner-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dotted #aaa;
}

.scanner-tip p {
  margin: 0;
  color: #666;
  font-size: 10px;
  line-height: 1.7;
}

.scanner-tip .pixel-icon {
  width: 19px;
  height: 19px;
  margin-top: 2px;
}

.recent-list > .field-help {
  margin: 13px 0;
}

.recent-row {
  align-items: flex-start;
}

.recent-row > div {
  flex: 1;
  min-width: 0;
}

.recent-row code {
  display: block;
  font: 8px "Courier New", monospace;
  color: #777;
  overflow-wrap: anywhere;
}

.arrival-check {
  color: #277327;
  font-size: 15px;
}

.checkin-result {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.checkin-result > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.result-symbol {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 2px solid currentColor;
  color: #3e783e;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.checkin-result.error .result-symbol {
  color: #a0382c;
}

.demo-notes {
  margin-top: 25px;
  padding: 18px 20px 8px;
  font-size: 11px;
  line-height: 1.8;
}

@media(max-width:1280px) {
  .event-art {
    aspect-ratio:1.5;
    min-height:195px;
  }

  .poster-title, .poster-garden .poster-title {
    font-size:42px;
  }

  .poster-jazz .poster-title {
    font-size:45px;
  }

  .poster-movie .poster-title {
    font-size:37px;
  }

  .scanner-layout {
    grid-template-columns:minmax(0,1fr);
  }

  .scanner-sidebar {
    grid-template-columns:.7fr 1fr;
    align-items:start;
  }
}

@media(max-width:820px) {
  .event-card h2 {
    font-size: 13px;
  }

  .view-stamp {
    display:none;
  }

  .page-heading h1 {
    font-size:26px;
  }

  .event-art {
    min-height:160px;
    padding:12px;
    aspect-ratio:1.15;
  }

  .poster-title, .poster-garden .poster-title {
    font-size:32px;
  }

  .poster-jazz .poster-title {
    font-size:36px;
  }

  .poster-movie .poster-title {
    font-size:28px;
  }

  .poster-kicker, .poster-bottom {
    font-size:8px;
  }

  .event-card-body {
    padding:11px;
  }

  .event-card h3 {
    font-size:13px;
  }

  .event-card-footer {
    flex-wrap:wrap;
  }

  .welcome-banner {
    padding:11px;
    gap:10px;
  }

  .welcome-banner .banner-action {
    display:none;
  }

  .checkout-layout {
    grid-template-columns:minmax(0,1fr);
  }

  .order-summary {
    order:-1;
  }

  .summary-art, .order-summary>.event-art {
    display:none;
  }

  .help-grid {
    grid-template-columns:1fr;
  }

  .ticket-card {
    grid-template-columns:115px minmax(0,1fr);
    padding:16px;
    gap:15px;
  }

  .ticket-card h2, .ticket-card h3 {
    font-size:15px;
  }

  .ticket-actions {
    grid-column:1/-1;
  }

  .ticket-id {
    font-size:10px;
  }

  .scanner-sidebar {
    grid-template-columns:1fr;
  }

  .password-panel {
    gap:15px;
    padding:20px;
  }

  .password-icon {
    width:32px;
    height:32px;
  }
}

@media(max-width:600px) {
  .event-detail-layout {
    grid-template-columns: 1fr;
    gap: 21px;
  }

  .event-detail-layout > .event-art {
    min-height: 240px;
    aspect-ratio: 1.2;
  }

  .event-detail-copy h2 {
    font-size: 22px;
  }

  .event-detail-copy .dialog-actions {
    justify-content: space-between;
    gap: 10px;
  }

  .event-detail-copy .dialog-actions .win-button {
    min-width: 0;
    padding-inline: 10px;
  }

  .event-card h2 {
    font-size: 12px;
  }

  .catalog-location {
    font-size: 9px;
  }

  .heading-icon {
    width: 32px;
    height: 32px;
  }

  .confirmation-heading {
    gap: 12px;
    align-items: flex-start;
  }

  .confirmation-heading h2 {
    font-size: 21px;
  }

  .confirmation-heading > .pixel-icon {
    width: 32px;
    height: 32px;
    margin-top: 3px;
  }

  .confirmation-heading p {
    font-size: 10px;
  }

  .manual-input-row {
    flex-direction: column;
  }

  .email-body {
    padding: 19px 15px;
  }

  .ticket-topline {
    gap: 8px;
  }

  .ticket-topline .event-tag {
    font-size: 8px;
  }

  .checkout-form > .dialog-actions {
    justify-content: space-between;
    gap: 8px;
  }

  .checkout-form > .dialog-actions .win-button {
    min-width: 70px;
    padding-inline: 10px;
  }

  .scanner-sidebar .section-caption {
    font-size: 10px;
  }

  .checkin-result {
    gap: 10px;
    padding: 13px;
  }

  .checkin-result strong {
    font-size: 14px;
  }

  .titlebar {
    min-height:26px;
    font-size:11px;
  }

  .view-topline {
    margin-bottom:16px;
  }

  .breadcrumb {
    font-size:9px;
    margin-bottom:9px;
  }

  .page-heading h1 {
    font-size:28px;
  }

  .page-heading p:last-child {
    font-size:10px;
  }

  .welcome-banner {
    margin-bottom:17px;
    padding:10px;
    gap:10px;
  }

  .banner-icon {
    width:24px;
    height:24px;
  }

  .banner-copy, .banner-copy strong {
    font-size:10px;
  }

  .search-box {
    width:100%;
    height:33px;
  }

  .catalog-toolbar {
    gap:10px;
    margin-bottom:14px;
  }

  .category-filters {
    gap:4px;
  }

  .filter-button {
    padding:5px 10px;
    font-size:10px;
    min-height:29px;
  }

  .event-art {
    min-height:155px;
    padding:12px;
    aspect-ratio:1.1;
  }

  .poster-title, .poster-garden .poster-title {
    font-size:31px;
    letter-spacing:-1.3px;
  }

  .poster-jazz .poster-title {
    font-size:34px;
  }

  .poster-movie .poster-title {
    font-size:26px;
    letter-spacing:-1.5px;
  }

  .poster-kicker {
    letter-spacing:.5px;
  }

  .poster-bottom {
    font-size:7px;
  }

  .event-meta {
    font-size:9px;
  }

  .event-price {
    font-size:12px;
  }

  .event-card-footer .win-button {
    width:100%;
  }

  .event-card h3 {
    font-size:12px;
  }

  .event-tag {
    font-size:8px;
    margin-bottom:7px;
  }

  .section-caption {
    font-size:9px;
  }

  .dialog-window {
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 40px);
  }

  .dialog-content {
    padding:19px 15px;
  }

  .dialog-actions {
    padding:12px 15px;
  }

  .form-grid {
    grid-template-columns:1fr;
  }

  .checkout-steps {
    font-size:9px;
    gap:5px;
  }

  .ticket-card {
    grid-template-columns:1fr;
    padding:18px;
    gap:12px;
  }

  .ticket-qr {
    width:176px;
    margin-inline:auto;
    padding:10px;
  }

  .ticket-card h2, .ticket-card h3 {
    font-size:17px;
  }

  .ticket-id {
    font-size:12px;
  }

  .ticket-actions .win-button {
    flex:1;
    padding-inline:8px;
  }

  .password-panel {
    display:block;
    margin:18px auto;
    padding:21px;
  }

  .password-icon {
    margin-bottom:17px;
  }

  .scanner-camera-box {
    min-height:235px;
  }

  .scanner-manual form {
    flex-wrap:wrap;
  }

  .scanner-manual form .field {
    flex-basis:100%;
  }

  .scanner-manual form .win-button {
    width:100%;
  }

  .featured-event {
    grid-template-columns:1fr;
  }
}

@media(max-width:420px) {
  .event-card h2 {
    font-size: 15px;
  }

  .event-art {
    aspect-ratio:1.55;
    min-height:178px;
    padding:16px;
  }

  .poster-title, .poster-garden .poster-title {
    font-size:42px;
  }

  .poster-jazz .poster-title {
    font-size:45px;
  }

  .poster-movie .poster-title {
    font-size:35px;
  }

  .poster-kicker, .poster-bottom {
    font-size:9px;
  }

  .event-card-footer {
    flex-wrap:nowrap;
  }

  .event-card-footer .win-button {
    width:auto;
  }

  .event-card h3 {
    font-size:15px;
  }

  .event-meta {
    font-size:10px;
  }
}

@media print {
  :root {
    background:#fff;
  }

  .titlebar, .ticket-actions, .app-toast {
    display:none!important;
  }

  .ticket-card {
    break-inside:avoid;
    box-shadow:none;
  }
}

/* A full-screen ticketing app, using classic Windows controls. */
.app {
  min-width: 320px;
  min-height: 100dvh;
  background: #fdfdf9;
}

.app-window {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: #fdfdf9;
}

.app-header {
  position: sticky;
  z-index: 25;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 64px;
  padding: 11px max(28px, calc((100vw - 1136px) / 2));
  background: var(--navy);
  color: #fff;
  box-shadow: 0 1px #000;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.app-brand > .pixel-icon {
  width: 27px;
  height: 27px;
}

.app-brand sup {
  margin-left: 4px;
  font-size: 9px;
  line-height: 0;
  vertical-align: super;
}

.toolbar {
  display: flex;
  align-items: stretch;
  gap: 3px;
  padding: 4px;
  border: 1px solid;
  border-color: #fff #000 #000 #fff;
  background: var(--silver);
  color: #111;
  box-shadow: inset -1px -1px #808080;
}

.toolbar-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  min-width: 104px;
  padding: 6px 11px;
  border: 1px solid #c0c0c0;
  background: var(--silver);
  color: #111;
  font-size: 11px;
  line-height: 1.3;
  white-space: nowrap;
}

.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  padding: 1px 3px;
  border: 1px solid #888;
  background: #fff;
  color: #333;
  font-size: 9px;
  font-weight: 400;
}

.toolbar-button > .pixel-icon {
  width: 18px;
  height: 18px;
}

.toolbar-button:hover {
  border-color: #fff #808080 #808080 #fff;
}

.toolbar-button.is-active {
  border-color: #808080 #fff #fff #808080;
  background: #dfdfdf;
  color: var(--navy);
  box-shadow: inset 1px 1px #888;
  font-weight: 700;
}

.window-body {
  flex: 1;
  min-width: 0;
}

.workspace {
  width: 100%;
  max-width: 1200px;
  min-height: 0;
  margin: 0 auto;
  padding: 32px 32px 44px;
  scroll-margin-top: 85px;
}

.app-credits {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 20px;
  color: #777;
  font-size: 9px;
  line-height: 1.7;
}

.app-credits a {
  color: #555;
}

.dialog-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  margin: 0 0 18px;
  padding: 6px 13px;
  border: 1px solid #c0c0c0;
  background: var(--silver);
  color: #111;
  box-shadow: var(--bevel-out);
  font-size: 11px;
}

.dialog-back-button:active {
  box-shadow: var(--bevel-in);
}

@media (max-width: 900px) {
  .event-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workspace {
    padding: 28px 24px 36px;
  }
  .app-header {
    padding-inline: 24px;
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .app-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }
  .app-brand {
    min-height: 46px;
    padding: 10px 16px;
    font-size: 15px;
  }
  .app-brand > .pixel-icon {
    width: 24px;
    height: 24px;
  }
  .toolbar {
    width: 100%;
    gap: 3px;
    padding: 4px;
    border: 0;
    border-top: 1px solid #fff;
    box-shadow: inset 0 -1px #808080;
  }
  .toolbar-button {
    flex: 1;
    flex-direction: column;
    min-width: 0;
    min-height: 48px;
    gap: 4px;
    padding: 6px 4px;
    font-size: 10px;
  }
  .toolbar-button > .pixel-icon {
    width: 17px;
    height: 17px;
  }
  .nav-count {
    position: absolute;
    top: 5px;
    right: 6px;
    min-width: 14px;
    height: 14px;
    font-size: 8px;
  }
  .workspace {
    padding: 24px 16px 32px;
    scroll-margin-top: 118px;
  }
  .app-credits {
    padding-inline: 16px;
    font-size: 8px;
  }
  .app-toast {
    right: 16px;
    bottom: 20px;
  }
}

@media (max-width: 520px) {
  .event-grid {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .event-art {
    aspect-ratio: 1.65;
    min-height: 195px;
    padding: 17px;
  }
  .poster-title, .poster-garden .poster-title {
    font-size: 42px;
  }
  .poster-jazz .poster-title {
    font-size: 45px;
  }
  .poster-movie .poster-title {
    font-size: 35px;
  }
  .poster-kicker, .poster-bottom {
    font-size: 9px;
  }
  .event-card h2 {
    font-size: 15px;
  }
  .event-meta {
    font-size: 10px;
  }
  .event-card-footer {
    flex-wrap: nowrap;
  }
  .event-card-footer .win-button {
    width: auto;
  }
}

@media print {
  .app-header {
    display: none;
  }
  .app, .app-window, .window-body, .workspace {
    display: block;
    width: auto;
    min-height: 0;
    height: auto;
    max-width: none;
    padding: 0;
    overflow: visible;
  }
}