:root{
  --bg:#000; --fg:#eae7df; --muted:#a9a49a;
  --gold:#d7b76e; --gold-dim:#b89e5c;
  --error:#e06e6e; --ring:rgba(215,183,110,.25);
  --glass:rgba(18,18,18,.55); --edge:rgba(255,255,255,.08);
  --btnText:#1b1508;
}
body.lockout{
  --gold:#cfd2d6; --gold-dim:#b7bcc3; --ring:rgba(207,210,214,.25); --btnText:#111318;
}

html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
  font-family:"Times New Roman", Didot, "Bodoni MT", Georgia, ui-serif, serif; font-weight:300;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
*{box-sizing:border-box}

#stars{position:fixed;inset:0;z-index:-3;display:block}
.vignette{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(1200px 800px at 50% 35%, rgba(255,255,255,.06), transparent 60%),
  radial-gradient(1400px 900px at 50% 75%, rgba(255,255,255,.04), transparent 60%),
  radial-gradient(closest-side, transparent, transparent 70%, rgba(0,0,0,.55))}
.filmgrain{position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%%' height='100%%' filter='url(#n)' opacity='0.035'/></svg>");mix-blend-mode:soft-light}

.wrap{min-height:100dvh;display:grid;place-items:center;padding:6vmin 2rem}
.card{width:min(560px,92vw);background:var(--glass);border:1px solid var(--edge);border-radius:20px;
  padding:2.6rem 2.2rem 2.4rem;backdrop-filter:blur(7px) saturate(115%);
  box-shadow:0 25px 80px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.02) inset;
  animation:hoverFloat 7s ease-in-out infinite,fadeIn 700ms ease both;position:relative}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes hoverFloat{0%,100%{transform:translateY(-8px)}50%{transform:translateY(8px)}}

.ornament{position:absolute;left:18px;right:18px;height:14px;pointer-events:none;opacity:.9;background:
  linear-gradient(90deg,transparent,var(--gold) 12%,transparent 40%),
  linear-gradient(270deg,transparent,var(--gold) 12%,transparent 40%)}
.ornament.top{top:14px;filter:drop-shadow(0 0 .2px var(--gold))}
.ornament.bottom{bottom:14px;filter:drop-shadow(0 0 .2px var(--gold))}

.head{display:grid;place-items:center;gap:.6rem;margin-bottom:1.4rem;text-align:center}
.crest{color:var(--gold);display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  background:radial-gradient(60% 60% at 50% 40%, color-mix(in oklab, var(--gold) 30%, transparent), transparent 70%);
  border:1px solid color-mix(in oklab, var(--gold) 35%, #000 65%);
  box-shadow:0 2px 18px color-mix(in oklab, var(--gold) 28%, #000 72%) inset}
h1{margin:0;font-size:clamp(1.7rem,2.2vw + 1rem,2.6rem);font-weight:300;letter-spacing:.03em}
.subtitle{margin:0;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.9}

.form{display:grid;grid-template-columns:1fr auto;gap:.9rem;align-items:center;margin-top:.6rem}
input[type="password"]{width:100%;font-size:1.05rem;padding:.95rem 1.1rem;color:var(--fg);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.15);border-radius:16px;outline:none;
  transition:box-shadow .2s,border-color .2s,background .2s,transform .12s;font-weight:300}
input[type="password"]::placeholder{color:var(--muted)}
input[type="password"]:focus{border-color:var(--gold);box-shadow:0 0 0 7px var(--ring),
  0 2px 18px color-mix(in oklab, var(--gold) 18%, transparent) inset;background:rgba(255,255,255,.05)}

button{position:relative;padding:.95rem 1.35rem;border-radius:16px;border:1px solid var(--gold-dim);
  background:linear-gradient(180deg,#fff4d9 0%,#e5cd95 35%,var(--gold) 100%);color:var(--btnText);
  font-weight:600;letter-spacing:.02em;cursor:pointer;transition:transform .06s ease,filter .25s ease,box-shadow .25s ease,background .25s ease;
  box-shadow:0 6px 20px color-mix(in oklab, var(--gold) 28%, #000 72%),0 0 0 1px color-mix(in oklab, var(--gold) 45%, transparent) inset;
  overflow:hidden;user-select:none}
button:hover{filter:brightness(.95) saturate(1.02)}
button:active{transform:translateY(1px) scale(.995)}
button:disabled{opacity:.7;cursor:not-allowed}

button .label{display:inline-flex;gap:.02em}
button .label span{display:inline-block;transform-origin:50% 0%;transition:transform .35s ease,opacity .35s ease,filter .35s ease}
button .label span.drop{transform:translateY(28px) rotate(12deg);opacity:0;filter:blur(.6px)}
button.breakoff{animation:fallSpin 600ms ease-in forwards}
@keyframes fallSpin{0%{transform:translateY(0) rotate(0);opacity:1}40%{transform:translateY(18px) rotate(6deg)}100%{transform:translateY(60px) rotate(14deg);opacity:0}}

.message{grid-column:1 / -1;margin:.3rem 0 -.2rem;font-size:.95rem;text-align:center;color:var(--muted)}
body.lockout .message{color:var(--error)}

.shake{animation:shake 380ms cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-3px)}40%,60%{transform:translateX(3px)}}

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