:root {
  --dl-bg: #000000;
  --dl-text: #ffffff;
  --dl-muted: #8a8a8a;
  --dl-accent: #fff200;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; min-height: 100%; background: var(--dl-bg); }
#desktop-landing {
  position: fixed;
  z-index: 1500;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--dl-bg);
  color: var(--dl-text);
  font-family: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
}
#desktop-landing[hidden] { display: none; }
.dl-bg {
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image: radial-gradient(circle, var(--dl-accent) 1.4px, transparent 1.5px);
  background-size: 26px 26px;
}
.dl-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #000 0 18%, transparent 48% 52%, #000 82% 100%); }
.dl-content {
  position: relative;
  display: grid;
  width: min(900px, calc(100vw - 80px));
  grid-template-columns: minmax(0, 1fr) 260px;
  grid-template-areas: "title qr" "subtitle qr" "instruction qr" "url qr";
  align-items: end;
  gap: 10px 64px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.92);
  padding: 54px;
}
.dl-content::before { content: "#"; position: absolute; top: -43px; left: 36px; color: var(--dl-accent); font-size: 78px; font-weight: 1000; line-height: 1; }
.dl-title { grid-area: title; color: var(--dl-accent); font-size: clamp(54px, 7vw, 92px); font-weight: 1000; letter-spacing: -.08em; line-height: .8; text-transform: uppercase; }
.dl-subtitle { grid-area: subtitle; margin-top: 10px; color: var(--dl-text); font-size: 15px; line-height: 1.4; }
.dl-qr-wrap { grid-area: qr; display: flex; justify-content: center; }
.dl-qr { border: 10px solid #fff; background: #fff; line-height: 0; }
.dl-qr img, .dl-qr canvas { display: block; width: 240px; height: 240px; image-rendering: pixelated; }
.dl-instruction { grid-area: instruction; margin-top: 20px; color: var(--dl-accent); font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.dl-url { grid-area: url; max-width: 100%; overflow-wrap: anywhere; color: var(--dl-muted); font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 11px; user-select: all; }
@media (max-width: 899px), (hover: none) and (pointer: coarse) { #desktop-landing { display: none !important; } }

#landscape-overlay {
  position: fixed;
  z-index: 1600;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--dl-bg);
  color: var(--dl-text);
  font-family: Arial, Helvetica, ui-sans-serif, system-ui, sans-serif;
}
#landscape-overlay[hidden] { display: none; }
.lo-content { max-width: 360px; text-align: center; }
.lo-icon { width: 72px; height: 72px; margin-bottom: 18px; color: var(--dl-accent); animation: lo-rotate 2.4s ease-in-out infinite; }
@keyframes lo-rotate { 0%,100% { transform: rotate(0deg); } 45%,55% { transform: rotate(-90deg); } }
.lo-title { margin: 0 0 6px; font-size: 22px; font-weight: 1000; text-transform: uppercase; }
.lo-subtitle { margin: 0; color: var(--dl-muted); font-size: 13px; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .lo-icon { animation: none; } }