:root {
  color-scheme: dark;
  --a: #cdb88c; --ink: #e6e9ee; --dim: #9aa4b3; --lq: #121b2c;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --sheen: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40px);
  --lqg: linear-gradient(170deg, #18233a, #0f1726 55%, #0c1320);
  --metal: linear-gradient(100deg, #7d838c, #c9ced5 18%, #6a7078 38%, #aab0b8 62%, #5d636b 84%, #9ba1a9);
  --brushed: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,0)), repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px), #b9bec5;
  --champagne: linear-gradient(180deg, #f4ead2 0%, #d9c69b 38%, #b49c69 52%, #dccaa0 70%, #a68e5c 100%);
  --sans: "IBM Plex Sans", system-ui, sans-serif; --cond: "IBM Plex Sans Condensed", system-ui, sans-serif; --mono: "IBM Plex Mono", Consolas, monospace;
  --serif: "Cormorant SC", "IBM Plex Serif", serif;
  --em: clamp(150px, min(40vh, 40vw, 75vw - 390px), 480px);
}
html, body { height: 100%; margin: 0; }
body { color: var(--ink); font-family: var(--sans); background: #0b111d; overflow-x: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 3px; }

.plate { position: relative; box-sizing: border-box; min-height: 100%; overflow-x: clip; padding: 0 16px 56px; background: var(--noise), linear-gradient(180deg, #111a2c, #0e1524 900px, #0c1320); }

.stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: safe center; box-sizing: border-box; min-height: 90vh; padding: 2vh 0 28px; }
.stage::before { content: ""; position: absolute; z-index: 0; inset: 0 calc(50% - 50vw); pointer-events: none; background: radial-gradient(ellipse 55% 60% at 50% 34%, rgba(205, 214, 230, .085), transparent 70%); }
.stage > * { position: relative; }

.mark { flex: none; width: calc(var(--em) * .46); height: calc(var(--em) * .46); filter: drop-shadow(0 2px 3px rgba(0,0,0,.65)); }

.title { margin: calc(var(--em) * .03) 0 0; opacity: 0; transition: opacity .6s; display: flex; flex-direction: column; align-items: center; font-weight: 600; text-align: center; }
.title .name { font: 600 calc(var(--em) * .158)/1 var(--serif); letter-spacing: .16em; padding-left: .16em; white-space: nowrap;
  background: var(--champagne); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.85)) drop-shadow(0 -1px 0 rgba(255,255,255,.05)); }
.title .sub { margin-top: calc(var(--em) * .03); padding-left: .6em; font: 600 calc(var(--em) * .05)/1 var(--cond); letter-spacing: .6em; text-transform: uppercase; color: #c6cbd2; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tag { margin: calc(var(--em) * .045) 0 0; max-width: 34em; font: italic 400 clamp(15px, calc(var(--em) * .05), 19px)/1.35 "IBM Plex Serif", serif; color: var(--dim); text-align: center; }

.fonts .title { opacity: 1; }

.well { position: relative; margin-top: calc(var(--em) * .075); width: min(400px, 100%); height: 76px; flex: none; box-sizing: border-box; border-radius: 6px; overflow: hidden;
  background: var(--noise), linear-gradient(180deg, #060a12, #0b1220 40%, #0d1525);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.9), inset 0 0 0 1px #182131, 0 1px 0 rgba(255,255,255,.05), 0 0 0 3px #0b111b, 0 0 0 4px rgba(205,184,140,.3); }
.slot { position: absolute; inset: 12px; display: flex; align-items: center; justify-content: center; gap: 12px;
  translate: 0 120%; opacity: 0; visibility: hidden; transition: translate .38s cubic-bezier(.3,1.25,.5,1), opacity .25s, visibility 0s .38s; }
.well[data-show="key"] [data-slot="key"], .well[data-show="bridge"] [data-slot="bridge"], .well[data-show="ticket"] [data-slot="ticket"] { translate: 0 0; opacity: 1; visibility: visible; transition-delay: .06s, .06s, 0s; }

.act { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 22px; border: 0; border-radius: 3px;
  color: #e5e8ed; font: 600 13px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; user-select: none; text-decoration: none;
  background: var(--noise), linear-gradient(180deg, #1b1f26, #0c0f13); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.09), 0 2px 0 #000, 0 4px 7px rgba(0,0,0,.5); transition: transform .06s; }
.act:hover { color: #fff; background: var(--noise), linear-gradient(180deg, #2d333d, #161a21); }
.act:active { transform: translateY(2px); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.05), 0 1px 3px rgba(0,0,0,.5); }
.act .lg { padding-left: .16em; pointer-events: none; }
.act.pri { color: #1a1f29; background: linear-gradient(180deg, #f2ecde, #ddd2bb); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 0 rgba(120,100,60,.25), 0 2px 0 #000, 0 4px 7px rgba(0,0,0,.5); }
.act.pri:hover { color: #1a1f29; background: linear-gradient(180deg, #faf6ec, #e7ddc8); }
.act.pri:active { box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,100,60,.25), 0 1px 3px rgba(0,0,0,.5); }
.act.sm { height: 32px; padding: 0 14px; font-size: 11px; }
.act:disabled { cursor: progress; transform: translateY(2px); }
.slot > .act, #login, #bridge { width: 100%; height: 52px; padding: 0 30px; font-size: 15px; }
#login.slot, #bridge.slot { inset: 12px 18px; width: auto; }
.dc { width: 22px; height: 22px; fill: currentColor; opacity: .85; }
.tk-plate { flex: 1; align-self: stretch; margin: 0 6px; padding: 0 10px; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 2px; background: var(--brushed);
  font: 600 15px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: #1d2229; text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 2px 3px rgba(0,0,0,.5); animation: up .3s ease-out; }
.slot > .act { animation: up .3s ease-out; }
.well:has(.tk-note, .tk-clock) { height: auto; }
#tk-slot:has(.tk-note, .tk-clock) { position: relative; inset: auto; flex-wrap: wrap; padding: 12px; row-gap: 10px; }
#tk-slot:has(.tk-note) .tk-plate { min-height: 52px; }
.tk-note { flex: 0 0 100%; margin: 0; font: 400 14px/1.45 var(--sans); color: var(--dim); text-align: center; }
.tk-clock { flex: 0 0 100%; margin: 2px 0 0; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.tk-clock small { font: 500 10px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; color: var(--a); }
.tk-clock time { font: 500 30px/1 var(--mono); letter-spacing: .04em; color: #f2ede3; font-variant-numeric: tabular-nums; }
.tk-decline { flex: none; padding: 4px 8px; border: 0; background: none; font: 400 14px/1.2 var(--sans); color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.tk-decline:hover { color: var(--ink); }
.tk-confirm { width: min(460px, calc(100vw - 24px)); text-align: center; }
.tk-confirm h2 { font-size: clamp(26px, 7vw, 34px); }
.tk-confirm p { margin: 0; }
.tk-confirm .rq-keys { justify-content: center; }

.status { margin-top: 16px; min-height: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.status p { margin: 0; max-width: 40em; font: 400 14px/1.45 var(--sans); color: var(--dim); }
.status [hidden] { display: none !important; }
.trouble { color: #e7d3ce !important; animation: up .3s ease-out; }
@keyframes up { from { opacity: 0; transform: translateY(6px); } }
.who { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.who[hidden] { display: none; }
.who .as { font: 500 9px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
.nameplate { max-width: 16em; overflow: hidden; text-overflow: ellipsis; padding: 8px 12px 7px; border-radius: 2px; background: var(--brushed);
  font: 600 12px/1 var(--cond); letter-spacing: .12em; color: #1d2229; text-shadow: 0 1px 0 rgba(255,255,255,.35); white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(0,0,0,.65), 0 2px 3px rgba(0,0,0,.5); }
.who form { margin: 0; }

.brief { max-width: 42rem; margin: 0 auto; font: 400 17px/1.65 var(--sans); color: #c9d0da; }
.brief + .brief { margin-top: 72px; }
.brief h2 { margin: 0 0 18px; font: 600 clamp(30px, 4.4vw, 40px)/1.1 var(--serif); letter-spacing: .05em; color: #e3d4ab; text-wrap: balance; }
.brief p { margin: 0 0 1em; }
.brief p:last-child { margin-bottom: 0; }
.brief blockquote { margin: 0; }
.brief .cite { margin-top: 8px; font-size: 14px; color: var(--dim); }
.brief a, .credit a { color: #e3d4ab; text-underline-offset: 3px; }
.brief a:hover, .credit a:hover { color: #fff; }

.credit { padding: 26px 16px 30px; background: #090e18; border-top: 1px solid #1c2636; font: 400 13.5px/1.6 var(--sans); color: var(--dim); text-align: center; }
.credit p { max-width: 44rem; margin: 0 auto; }

.rq { --line: #263041; box-sizing: border-box; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 20px 16px 24px; border: 0; border-radius: 6px; color: var(--ink); font: 400 16px/1.5 var(--sans);
  background: var(--lqg); box-shadow: 0 0 0 1px var(--line), 0 0 0 4px #0b111b, 0 0 0 5px rgba(205, 184, 140, .3), 0 18px 40px rgba(0, 0, 0, .55); scrollbar-width: thin; scrollbar-color: #3a414c transparent; }
.rq::backdrop { background: rgba(4, 7, 13, .72); }
.rq h2 { margin: 4px 0 14px; text-align: center; font: 600 clamp(28px, 9vw, 40px)/1.1 var(--serif); letter-spacing: .14em; background: var(--champagne); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rq-notice, .rq-intro { font: inherit; }
.rq-notice { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.rq b { font-weight: 500; color: #f2ede3; }
.rq-intro { margin: 20px 0 0; }
.rq-page[hidden], .rq [hidden] { display: none; }
.rq-notice:empty { display: none; }
.rq-notice p { margin: 0 0 .8em; }
.rq-f { margin-top: 20px; }
.rq-f + .rq-f, .rq-f + .rq-intro { padding-top: 20px; border-top: 1px solid var(--line); }
.rq-f label { display: block; font: inherit; color: var(--ink); }
.rq-req { color: #e3d4ab; }
.rq-help { margin: 3px 0 0; font: inherit; }
.rq-f :is(input:not([type="checkbox"]), textarea, select) { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 7px; padding: 8px 10px; font: 400 16px var(--sans); color: var(--ink); background: #0c121d; border: 1px solid #3a475c; border-radius: 3px; }
.rq-f textarea { min-height: 7em; resize: vertical; }
.rq-q { margin: 0; font: inherit; }
.rq-range { display: flex; gap: 5px; margin-top: 8px; }
.rq-range label { position: relative; flex: 1 1 0; min-width: 0; cursor: pointer; }
.rq-f .rq-range input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.rq-range span { display: grid; place-items: center; height: 44px; border-radius: 3px; font: 500 15px/1 var(--mono); color: var(--ink); background: #0c121d; box-shadow: inset 0 0 0 1px #3a475c; }
.rq-range label:hover span { box-shadow: inset 0 0 0 1px #6b7a92; }
.rq-range input:checked + span { color: #1a1f29; background: linear-gradient(180deg, #f2ecde, #ddd2bb); box-shadow: 0 0 0 1px #000; }
.rq-range input:focus-visible + span { outline: 2px solid #d9c69b; outline-offset: 2px; }
.rq-range:has([aria-invalid="true"]) span { box-shadow: inset 0 0 0 1px #f06a63; }
.rq-ends { display: flex; justify-content: space-between; gap: 16px; margin-top: 5px; }
.rq-f [aria-invalid="true"] { box-shadow: inset 0 2px 5px rgba(0,0,0,.8), inset 0 0 0 2px #f06a63; }
.rq-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: start; }
.rq-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #d9c69b; }
.rq-check :is(.rq-help, .rq-err, .rq-link) { grid-column: 2; }
.rq-link { display: flex; width: fit-content; margin: 8px auto 0; text-decoration: none; }
.rq-err, .rq-trouble { margin: 6px 0 0; font: 500 16px/1.4 var(--sans); color: #ffb3ae; }
.rq-err::before, .rq-trouble::before { content: "! "; font-weight: 600; }
.rq-trouble { margin-top: 16px; }
.rq-keys { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.rq-step { margin-right: auto; }
.slot > .tk-plate + .act { flex: none; width: auto; height: 44px; padding: 0 16px; font-size: 12px; animation: none; }

.dev { position: fixed; right: 12px; bottom: 10px; z-index: 4; display: flex; gap: 6px; align-items: center; font: 400 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #6d7785; }
.dev[hidden] { display: none; }
.dev select { font: inherit; letter-spacing: 0; text-transform: none; color: var(--dim); background: #0c121d; border: 1px solid #263041; border-radius: 3px; padding: 2px 4px; }

@media (min-height: 800px) { :root { --em: clamp(150px, min(44vh, 40vw, 75vw - 390px), 480px); } }
@media (max-height: 760px) { body[data-mode="guest"] { --em: clamp(130px, min(31vh, 40vw, 75vw - 390px), 480px); } }
@media (max-height: 600px) { :root { --em: clamp(130px, min(35vh, 40vw, 75vw - 390px), 480px); } }
@media (max-height: 700px) { .status { margin-top: 12px; } .who { margin-top: 12px; }
  .well { height: 68px; } .slot { inset: 10px; } .slot > .act, #login, #bridge { height: 46px; } #login.slot, #bridge.slot { inset: 10px 16px; } }
@media (max-width: 720px) { .brief + .brief { margin-top: 56px; } }
@media (max-width: 560px) { .rq { padding: 20px 18px; } .rq-keys .act { flex: 1; }
  .slot .tk-plate { font-size: 13px; letter-spacing: .12em; } :root { --em: clamp(140px, 52vw, 300px); } .title .name { font-size: clamp(22px, 6.6vw, 40px); letter-spacing: .1em; }
  .title .sub { font-size: 13px; } .who .as { display: none; } .brief { font-size: 16px; }
 }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}