@font-face {
  font-family: Tiny5;
  src: url('/brand/Tiny5-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #ffeed2;
  --ink: #292c2d;
  --muted: #656460;
  --pixel: Tiny5, monospace;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 58px;
  overflow-x: clip;
  background: radial-gradient(ellipse at 50% 40%, #fff6e5 0, var(--paper) 68%);
}
[hidden] { display: none !important; }
.brand { margin: 0; max-width: 100%; text-align: center; font: 34px/1.05 var(--pixel); letter-spacing: 0; }

.lanyard {
  --ribbon-height: 128px;
  position: relative;
  width: min(100%, 360px);
  margin-top: 0;
  padding-top: calc(var(--ribbon-height) + 54px);
}
.lanyard-ribbon { position: absolute; top: 0; left: 50%; width: 190px; height: calc(var(--ribbon-height) + 92px); transform: translateX(-50%); pointer-events: none; z-index: 2; }
.ribbon {
  position: absolute;
  top: -72px;
  width: 46px;
  height: calc(var(--ribbon-height) + 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  color: #ffeed2;
  font: 17px/1 var(--pixel);
  letter-spacing: 2px;
  border: 1px solid #171918;
  border-radius: 2px 2px 9px 9px;
  background: repeating-linear-gradient(0deg, #ffffff05 0 1px, #0000000a 1px 3px), linear-gradient(90deg, #181b1b, #363a39 12%, #242827 85%, #151817);
  box-shadow: inset 2px 0 #ffffff16, inset -2px 0 #00000040, 5px 7px 9px #55462d26;
  transform-origin: 50% calc(100% - 8px);
}
.ribbon-left { left: 69px; transform: rotate(-24deg); z-index: 2; }
.ribbon-right { right: 69px; transform: rotate(24deg); }
.ribbon::after { content: ''; position: absolute; bottom: 10px; left: 5px; right: 5px; height: 24px; border: 1px dashed #ffffff20; }
.lanyard-ring {
  position: absolute;
  top: calc(var(--ribbon-height) - 12px);
  left: 62px;
  width: 66px;
  height: 40px;
  border: 5px solid #a8a9a3;
  border-top-color: #eeeae1;
  border-bottom-color: #6c706e;
  border-radius: 12px 12px 28px 28px;
  box-shadow: inset 0 0 0 1px #474c49, 0 1px 0 1px #fefbf5, 3px 4px 4px #342e2b40;
}
.lanyard-clip {
  position: absolute;
  top: calc(var(--ribbon-height) + 19px);
  left: 86px;
  width: 19px;
  height: 69px;
  border: 1px solid #666b67;
  border-radius: 6px 6px 10px 10px;
  background: linear-gradient(90deg, #777d78, #eff0e9 32%, #b9bdb5 53%, #747c76 88%, #c9ccc4);
  box-shadow: inset 0 0 0 2px #ffffff4d, 4px 5px 5px #342e2b40;
  transform: rotate(4deg);
}
.lanyard-clip::before { content: ''; position: absolute; top: -7px; left: -3px; width: 23px; height: 10px; border: 1px solid #777b76; border-radius: 4px; background: linear-gradient(#f2f1e9, #8b918b); }
.lanyard-clip::after { content: ''; position: absolute; right: 3px; top: 18px; width: 4px; height: 35px; border-right: 2px solid #535b55; border-bottom: 2px solid #535b55; border-radius: 0 0 4px 0; }

.badge {
  position: relative;
  border: 1px solid #fff;
  border-radius: 32px;
  background: linear-gradient(115deg, #fff, #fbfaf8);
  box-shadow: inset 0 2px 1px #fff, 0 4px 0 #d4c7b2, 0 7px 5px #7057351f, 0 25px 35px -10px #7b583844, 12px 38px 62px -30px #8063414d;
}
.badge-slot { position: absolute; top: 23px; left: 50%; width: 80px; height: 17px; transform: translateX(-50%); border-radius: 20px; background: #e7d1ae; box-shadow: inset 0 3px 4px #66533d50, 0 1px 0 3px #e8e7e1, 0 3px 0 3px #fff; }
.badge-content { padding: 67px 32px 35px; text-align: center; }
.badge-logo { display: grid; place-items: center; margin: 0 auto 8px; }
.badge-logo img { display: block; width: 92px; height: 100px; object-fit: contain; }
h1 { margin: 0; font-size: 30px; line-height: 1.12; letter-spacing: -.9px; font-weight: 750; }
p { line-height: 1.5; }
.intro { max-width: 320px; margin: 14px auto 0; color: var(--muted); font-size: 16px; text-wrap: pretty; }
.sign-in { margin-top: 30px; }
#status { margin: 0 0 12px; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
#status:empty { display: none; }
.providers { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.providers:has(#google-button:empty):has(#appleid-signin[hidden]) { display: none; }
#google-button { max-width: 100%; }
#appleid-signin { width: min(100%, 300px); height: 44px; }
.note { margin: 14px auto 0; max-width: 290px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.badge-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 20px 22px; border-top: 1px dashed #b6ad9e; border-radius: 0 0 31px 31px; background: linear-gradient(#f8eddb, #f3e4cd); font: 22px/1 var(--pixel); }
.return-button { display: flex; align-items: center; justify-content: center; margin-top: 26px; min-height: 48px; border: 1px solid var(--ink); border-radius: 7px; background: var(--ink); color: #fff; font: 600 16px/1.3 'Helvetica Neue', Helvetica, Arial, sans-serif; text-decoration: none; }
.return-button:hover { background: #434741; }
a:focus-visible, button:focus-visible, [role='button']:focus-visible { outline: 3px solid #776143; outline-offset: 4px; }

@media (max-height: 850px) {
  body { padding-bottom: 38px; }
  .lanyard { --ribbon-height: 104px; }
  .badge-logo { margin-bottom: 6px; }
  .badge-logo img { width: 74px; height: 80px; }
  .badge-content { padding-top: 62px; padding-bottom: 26px; }
  .sign-in { margin-top: 24px; }
}
@media (max-width: 480px) {
  body { padding: 0 20px 40px; }
  .brand { font-size: 29px; }
  .lanyard { --ribbon-height: 96px; }
  .ribbon { width: 39px; font-size: 14px; letter-spacing: 1px; }
  .ribbon-left { left: 72px; }
  .ribbon-right { right: 72px; }
  .badge { border-radius: 26px; }
  .badge-content { padding-inline: 24px; }
  h1 { font-size: 28px; }
  .intro { font-size: 15px; }
  .badge-footer { border-radius: 0 0 25px 25px; padding-block: 17px; }
}
@media (max-width: 360px) {
  body { padding-inline: 14px; }
  .brand { font-size: 26px; }
  .badge-content { padding-inline: 18px; }
  h1 { font-size: 25px; }
}