:root{
  color-scheme:dark;
  --forest:#0b1f19;
  --forest-deep:#05130f;
  --forest-soft:#173a2d;
  --gold:#d6b46f;
  --gold-soft:#f0d69b;
  --ink:#f1ecd9;
  --muted:#9eb0a3;
  --line:rgba(214,180,111,.22);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 35%,rgba(64,117,83,.24),transparent 34%),
    radial-gradient(circle at 20% 10%,rgba(100,139,86,.12),transparent 28%),
    linear-gradient(180deg,#0d281f 0%,var(--forest-deep) 68%);
  overflow:hidden;
}
.wake-shell{position:relative;min-height:100svh;display:grid;place-items:center;padding:28px;isolation:isolate}
.wake-shell::before,
.wake-shell::after{
  content:"";position:absolute;z-index:-3;inset:auto;
  width:42vw;height:80vh;max-width:560px;
  background:linear-gradient(90deg,transparent,rgba(61,107,74,.16),transparent);
  filter:blur(34px);transform:rotate(18deg);
}
.wake-shell::before{left:-10vw;bottom:-20vh}
.wake-shell::after{right:-10vw;top:-20vh;transform:rotate(-20deg)}
.mist{position:absolute;z-index:-2;border-radius:50%;filter:blur(55px);opacity:.32;animation:drift 9s ease-in-out infinite alternate}
.mist-one{width:52vw;height:20vh;left:2vw;bottom:10vh;background:#346b50}
.mist-two{width:44vw;height:18vh;right:4vw;top:15vh;background:#7c7f46;animation-delay:-4s}
.wake-card{
  width:min(720px,94vw);
  padding:38px 42px 34px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(10,31,24,.88),rgba(5,20,15,.94));
  box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  text-align:center;
}
.brand{display:inline-flex;align-items:center;gap:12px;margin-bottom:34px;text-decoration:none;color:inherit;font:600 14px/1 Georgia,serif;letter-spacing:.13em}
.brand-mark{display:grid;place-items:center;width:30px;height:38px;border:1px solid rgba(214,180,111,.55);color:var(--gold-soft);font:25px/1 Georgia,serif}
.eyebrow{margin:0 0 12px;color:#ceb477;font-size:10px;font-weight:700;letter-spacing:.19em}
h1{margin:0;font:400 clamp(38px,7vw,66px)/1 Georgia,serif;color:#f3e7c7}
.lead{max-width:560px;margin:18px auto 24px;color:#aab9ae;font-size:14px;line-height:1.8}
.portal{position:relative;width:150px;height:150px;margin:10px auto 25px;display:grid;place-items:center}
.portal-ring,.portal-core{position:absolute;border-radius:50%}
.portal-ring{border:1px solid rgba(233,199,127,.55);box-shadow:0 0 28px rgba(214,180,111,.14)}
.ring-one{inset:8px;animation:spin 8s linear infinite}
.ring-one::before,.ring-one::after,.ring-two::before,.ring-two::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 12px var(--gold)}
.ring-one::before{top:-4px;left:50%}.ring-one::after{bottom:-4px;left:50%}
.ring-two{inset:24px;border-style:dashed;opacity:.7;animation:spin-reverse 6s linear infinite}
.ring-two::before{left:-4px;top:50%}.ring-two::after{right:-4px;top:50%}
.portal-core{inset:45px;background:radial-gradient(circle,#d9c07c 0%,#65886c 18%,#173c2f 48%,rgba(4,20,15,.15) 72%);box-shadow:0 0 34px rgba(158,191,132,.32);animation:pulse 2.3s ease-in-out infinite}
.status-panel{display:flex;align-items:center;gap:14px;text-align:left;max-width:520px;margin:0 auto;padding:15px 17px;border:1px solid rgba(214,180,111,.16);background:rgba(2,14,10,.34)}
.status-panel strong{display:block;font:400 18px Georgia,serif;color:#f2dfae}
.status-panel p{margin:4px 0 0;color:#8fa298;font-size:12px;line-height:1.5}
.status-dot{flex:0 0 auto;width:11px;height:11px;border-radius:50%;background:#d1a95e;box-shadow:0 0 0 0 rgba(209,169,94,.45);animation:ping 1.8s ease-out infinite}
.status-dot.ready{background:#8fc58f;animation:none;box-shadow:0 0 14px rgba(143,197,143,.55)}
.status-dot.error{background:#d87965;animation:none}
.progress{max-width:520px;height:3px;margin:16px auto 0;background:rgba(255,255,255,.08);overflow:hidden}
.progress span{display:block;height:100%;width:18%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:loading 2.2s ease-in-out infinite}
.progress span.ready{width:100%;animation:none;background:#8fc58f;transition:width .35s ease}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:24px}
.actions button,.actions>a{font:600 11px/1 system-ui,sans-serif;letter-spacing:.03em}
.actions button,#directLink{min-height:40px;padding:11px 15px;border:1px solid rgba(214,180,111,.52);background:transparent;color:var(--gold-soft);cursor:pointer;text-decoration:none}
.actions button:hover,#directLink:hover{background:rgba(214,180,111,.1)}
.back-link{align-self:center;color:#83978c;text-decoration:none;padding:11px 4px}
.noscript{margin:18px 0 0;color:#c4b68d;font-size:12px;line-height:1.6}
.noscript a{color:#f0d69b}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-reverse{to{transform:rotate(-360deg)}}
@keyframes pulse{50%{transform:scale(1.08);filter:brightness(1.18)}}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(209,169,94,0)}100%{box-shadow:0 0 0 0 rgba(209,169,94,0)}}
@keyframes loading{0%{transform:translateX(-120%)}100%{transform:translateX(580%)}}
@keyframes drift{to{transform:translate3d(5vw,-2vh,0) scale(1.08)}}
@media(max-width:620px){
  .wake-shell{padding:14px}
  .wake-card{padding:28px 20px 24px}
  .brand{margin-bottom:28px}
  .lead{font-size:13px}
  .portal{width:130px;height:130px}
  .status-panel{padding:13px}
  .actions{display:grid}
}
@media(prefers-reduced-motion:reduce){
  .mist,.portal-ring,.portal-core,.status-dot,.progress span{animation:none}
}