:root {
  --paper:#f4f5f9;
  --ink:#060817;
  --muted:#4f5677;
  --amber:#f59e0b}
* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px 'IBM Plex Sans',sans-serif}
button,input {
  font:inherit}
button {
  cursor:pointer}
main {
  min-height:100vh;
  display:grid;
  grid-template-columns:55% 45%}
.story {
  background:var(--ink);
  color:var(--paper);
  padding:46px 9% 32px;
  position:relative;
  overflow:hidden}
.brand {
  font-size:13px;
  letter-spacing:3px;
  font-weight:500}
.brand i {
  display:inline-block;
  width:9px;
  height:9px;
  background:var(--amber);
  margin-right:12px}
h1 {
  font:300 clamp(38px,4.4vw,68px)/1.12 'IBM Plex Serif',Georgia,serif;
  letter-spacing:-2px;
  margin:44px 0 8px}
.scene {
  height:320px;
  position:relative;
  margin:24px -16px 8px;
  perspective:1100px}
.sheet {
  position:absolute;
  width:248px;
  height:278px;
  left:50%;
  top:24px;
  margin-left:-124px;
  background:#fafafc;
  color:var(--ink);
  padding:27px 25px;
  text-align:left;
  border:1px solid #d9dcea;
  box-shadow:0 16px 28px #0002;
  transform-origin:50% 90%;
  transition:transform 900ms cubic-bezier(.22,1,.36,1),opacity 700ms,box-shadow 700ms;
  transform:translateX(0) scale(.88);
  opacity:1;
  overflow:hidden}
.sheet.left {
  transform:translateX(-123px) translateY(20px) rotate(-9deg) scale(.88);
  z-index:1}
.sheet.right {
  transform:translateX(123px) translateY(20px) rotate(9deg) scale(.88);
  z-index:2}
.sheet.active {
  transform:translateY(-4px) rotate(0) scale(1);
  opacity:1;
  z-index:3;
  box-shadow:0 24px 44px #0004}
.sheet:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:5px}
.eyebrow {
  font-size:9px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#69708a}
.sheet h2 {
  font:400 24px 'IBM Plex Serif',serif;
  margin:15px 0}
.rule {
  height:1px;
  background:#d9dcea;
  margin:15px 0}
.row {
  font-size:11px;
  line-height:1.6;
  margin:12px 0}
.row small {
  display:block;
  color:#69708a;
  font-size:9px}
.flag {
  position:absolute;
  top:-1px;
  right:28px;
  width:10px;
  height:42px;
  filter:drop-shadow(2px 2px 1px #70430055)}
.flag:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#bf7608 0%,#ffcc64 22%,#f5ab24 48%,#e9950a 82%,#b76c06 100%);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%)}
.timeline {
  border-left:1px solid #bac0d0;
  padding-left:15px}
.timeline .row {
  position:relative}
.timeline .row:before {
  content:'';
  position:absolute;
  width:5px;
  height:5px;
  border:1px solid #69708a;
  background:#fafafc;
  border-radius:50%;
  left:-19px;
  top:5px}
.highlight {
  padding:10px;
  border-left:2px solid var(--amber);
  background:#f0f1f6;
  font-size:11px;
  line-height:1.6}
.date {
  display:flex;
  gap:15px;
  align-items:center;
  margin-top:22px}
.date b {
  font:300 39px 'IBM Plex Serif',serif}
.date span {
  font-size:11px}
.caption {
  min-height:49px;
  font-size:13px;
  color:#b7bdd0;
  line-height:1.6;
  margin:0}
.selectors {
  display:flex;
  gap:22px;
  border-top:1px solid #ffffff25;
  margin-top:18px}
.selectors button {
  border:0;
  background:none;
  color:#9299af;
  padding:15px 0 10px;
  font-size:12px;
  border-top:2px solid transparent;
  margin-top:-1px}
.selectors button[aria-pressed=true] {
  color:#fff;
  border-color:var(--amber)}
.controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  color:#737b94;
  font-size:10px}
.controls button {
  background:none;
  border:0;
  color:#b7bdd0;
  font-size:11px;
  padding:8px 0}
.access {
  display:flex;
  flex-direction:column;
  padding:44px 12% 24px}
.toplink {
  color:#4f5677;
  text-decoration:none;
  font-size:12px;
  align-self:flex-start}
.form {
  width:100%;
  max-width:350px;
  margin:auto;
   padding:50px 0}
.kicker {
  font-size:10px;
  letter-spacing:2px;
  color:#4f5677}
.form h2 {
  font:300 40px/1.15 'IBM Plex Serif',serif;
  letter-spacing:-1px;
  margin:17px 0}
.intro {
  color:#4f5677;
  font-size:13px;
  line-height:1.7;
  margin:0 0 35px}
label {
  display:block;
  font-size:12px;
  margin:21px 0 9px}
input {
  width:100%;
  height:47px;
  padding:12px;
  border:1px solid #cfd3e0;
  background:#fff8;
  border-radius:3px;
  outline:none}
input:focus {
  border-color:#b87508;
  box-shadow:0 0 0 3px #f59e0b15}
.password {
  position:relative}
.password input {
  padding-right:65px}
.password button {
  position:absolute;
  right:8px;
  top:8px;
  height:31px;
  border:0;
  background:none;
  font-size:11px;
  color:#4f5677}
.forgot {
  display:block;
  text-align:right;
  color:#5c637d;
  font-size:11px;
  margin:12px 0 25px}
.enter {
  height:47px;
  width:100%;
  background:var(--ink);
  color:white;
  border:0;
  border-radius:3px;
  text-align:left;
  padding:0 17px}
.enter span {
  float:right}
.notice {
  font-size:11px;
  line-height:1.6;
  color:#4f5677;
  margin-top:23px;
  min-height:35px}
.footer {
  display:flex;
  justify-content:space-between;
  color:#4f5677;
  font-size:10px}
.footer a {
  color:inherit;
  text-decoration:none;
  margin-left:15px}
.demo {
  position:fixed;
  right:15px;
  bottom:10px;
  background:#e8eaf1;
  color:#5a617b;
  font-size:9px;
  padding:5px 8px;
  border-radius:3px;
  pointer-events:none}
@media(min-width:1500px) {
  .story {
  padding-left:15%;
  padding-right:15%}
.scene {
  margin-top:35px;
  height:350px}
}
@media(max-width:900px) {
  main {
  grid-template-columns:50% 50%}
.story {
  padding:35px 8%}
h1 {
  font-size:44px}
.scene {
  transform:scale(.8);
  margin-left:-45px;
  margin-right:-45px;
  height:285px}
.access {
  padding:35px 10%}
.selectors {
  gap:15px}
.form h2 {
  font-size:34px}
}
@media(max-width:650px) {
  main {
  display:flex;
  flex-direction:column}
.story {
  padding:26px 25px 20px}
.brand {
  font-size:10px}
h1 {
  font-size:34px;
  letter-spacing:-1px;
  margin:24px 0}
h1 br {
  display:none}
.scene {
  display:none}
.caption {
  min-height:0}
.selectors,.controls {
  display:none}
.access {
  padding:25px;
  min-height:570px}
.toplink {
  display:none}
.form {
  padding:20px 0 30px}
.footer {
  padding-bottom:20px}
}
@media(prefers-reduced-motion:reduce) {
  * {
  transition:none!important;
  animation:none!important}
}


.story .nj-public-brand {
  color:var(--paper)}
.nj-public-brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none}
.nj-public-brand svg {
  width:38px;
  height:38px}
.nj-public-brand-name {
  font:400 25px/1 'IBM Plex Serif',Georgia,serif;
  letter-spacing:-.5px}
.nj-public-brand-label {
  display:block;
  font:500 9px/1.3 'IBM Plex Sans',sans-serif;
  letter-spacing:2.8px;
  text-transform:uppercase;
  margin-top:6px}
.form .alert {
  padding:12px 15px;
  border-left:2px solid #b45309;
  background:#ebeef5;
  margin:18px 0;
  font-size:13px}
.login-help {
  color:#4f5677;
  font-size:12px;
  line-height:1.7;
  margin:16px 0 24px}
.login-help summary {
  cursor:pointer}
.login-help p {
  margin:10px 0}
.skip-link {
  position:absolute;
  left:12px;
  top:-100px;
  background:var(--paper);
  padding:10px;
  z-index:10}
.skip-link:focus {
  top:10px}
a:focus-visible,button:focus-visible {
  outline:2px solid #b87508;
  outline-offset:4px}
.story h1 {
  margin-top:34px}
.enter:disabled {
  opacity:.65;
  cursor:wait}
@media(max-width:650px) {
  .story .nj-public-brand svg {
  width:30px;
  height:30px}
.story .nj-public-brand-name {
  font-size:22px}
}