:root { --bg: #07070a; --fg: #f1efe9; --dim: #8c8a85; --acid: #e8ff59;
  --sans: "Inter Tight", "PingFang SC", "Hiragino Sans GB", sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; --serif: "Instrument Serif", serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }
.dim { color: var(--dim); }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: none; }
@media (hover: none) { #gl { cursor: auto; } }

/* HUD */
.hud-top, .hud-bot { position: fixed; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; pointer-events: none; }
.hud-top { top: 0; background: linear-gradient(rgba(7, 7, 10, .75), transparent); }
.hud-bot { bottom: 0; background: linear-gradient(transparent, rgba(7, 7, 10, .8)); align-items: flex-end; }
.hud-top > *, .hud-bot > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 18px; }
.back { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 99px; color: var(--dim); transition: color .3s, border-color .3s; }
.back:hover { color: var(--fg); border-color: rgba(255, 255, 255, .4); }
.logo { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.logo sup { font-size: 9px; color: var(--dim); }
.title { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.title .serif { font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1; }
.count b { font-size: 15px; color: var(--acid); font-weight: 500; }
.hint { display: flex; align-items: center; gap: 10px; color: var(--dim); }
.hint-ic { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); position: relative; flex: none; }
.hint-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--acid); animation: wig 2.4s ease-in-out infinite; }
@keyframes wig { 0%, 100% { translate: -6px -2px; } 50% { translate: 6px 2px; } }
.coords { color: var(--dim); min-width: 170px; text-align: right; }
.chips { display: flex; gap: 4px; padding: 5px; border-radius: 99px; background: rgba(20, 20, 24, .7); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .1); }
.chips button { position: relative; padding: 9px 16px; border-radius: 99px; font-size: 13.5px; color: #b9b6ae; transition: color .3s, background .3s; white-space: nowrap; }
.chips button:hover { color: var(--fg); }
.chips button.on { background: var(--acid); color: #111; font-weight: 600; }

/* cursor + hover label */
.cursor { position: fixed; left: 0; top: 0; z-index: 8; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; display: grid; place-items: center; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .5); backdrop-filter: invert(1) grayscale(1); -webkit-backdrop-filter: invert(1) grayscale(1); mix-blend-mode: normal; transition: width .35s, height .35s, margin .35s, background .35s, border-color .35s, opacity .3s; }
.cursor span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: #fff; mix-blend-mode: difference; }
.cursor.view { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--acid); border-color: var(--acid); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cursor.view span { color: #111; mix-blend-mode: normal; font-weight: 600; }
.cursor.hide { opacity: 0; }
@media (hover: none) { .cursor, .hover-label { display: none; } }
.hover-label { position: fixed; left: 0; top: 0; z-index: 7; pointer-events: none; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 10px; background: rgba(10, 10, 12, .82); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .1); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.hover-label.on { opacity: 1; }
.hover-label b { font-size: 14px; }
.hover-label span { font-family: var(--mono); font-size: 10.5px; color: var(--dim); letter-spacing: .06em; }

/* detail */
.detail { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.detail.open { pointer-events: auto; }
.d-info { position: absolute; left: calc(8vw + var(--img) + 5vw); top: 50%; translate: 0 -50%; max-width: 460px; }
.d-info > * { opacity: 0; translate: 0 24px; transition: opacity .6s, translate .8s cubic-bezier(.2, .8, .2, 1); }
.detail.open .d-info > * { opacity: 1; translate: 0 0; }
.detail.open .d-info > :nth-child(2) { transition-delay: .06s; } .detail.open .d-info > :nth-child(3) { transition-delay: .12s; }
.detail.open .d-info > :nth-child(4) { transition-delay: .18s; } .detail.open .d-info > :nth-child(5) { transition-delay: .24s; } .detail.open .d-info > :nth-child(6) { transition-delay: .3s; }
.d-meta { display: flex; gap: 14px; align-items: center; color: var(--dim); }
.d-type { padding: 4px 10px; border-radius: 99px; background: var(--acid); color: #111; }
.d-title { margin: 18px 0 10px; font-size: clamp(38px, 4.4vw, 72px); line-height: .98; letter-spacing: -.035em; font-weight: 800; }
.d-title .wd { display: inline-block; white-space: nowrap; }
.d-title .ch { display: inline-block; opacity: 0; translate: 0 .5em; filter: blur(8px); transition: opacity .5s, translate .7s cubic-bezier(.2, .8, .2, 1), filter .6s; }
.detail.open .d-title .ch { opacity: 1; translate: 0 0; filter: blur(0); }
.d-by { font-family: var(--serif); font-style: italic; font-size: 22px; color: #cfccc4; }
.d-desc { margin-top: 18px; font-size: 15.5px; line-height: 1.7; color: #b4b1a9; }
.d-stats { display: flex; gap: 22px; margin-top: 22px; color: var(--dim); }
.d-stats b { color: var(--fg); font-weight: 500; }
.d-cta { display: inline-block; margin-top: 28px; padding: 14px 22px; border-radius: 99px; background: var(--fg); color: #111; font-weight: 600; font-size: 14.5px; transition: background .3s; }
.d-cta:hover { background: var(--acid); }
.d-nav { position: absolute; right: 28px; bottom: 28px; display: flex; gap: 8px; opacity: 0; transition: opacity .4s .2s; }
.detail.open .d-nav { opacity: 1; }
.d-nav button, .d-close { padding: 12px 18px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(10, 10, 12, .6); backdrop-filter: blur(10px); font-size: 13.5px; transition: background .3s, color .3s; }
.d-nav button:hover, .d-close:hover { background: var(--fg); color: #111; }
.d-close { position: absolute; right: 28px; top: 22px; opacity: 0; transition: opacity .4s .2s, background .3s, color .3s; }
.detail.open .d-close { opacity: 1; }
body.is-open .hud-bot, body.is-open .hud-top .title, body.is-open .hud-top .count { opacity: 0; pointer-events: none; }
.hud-bot, .title, .count { transition: opacity .4s; }

.loader { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--bg); transition: opacity .6s, visibility .6s; }
.loader span { font-size: 13px; color: var(--dim); }
.loader.done { opacity: 0; visibility: hidden; }

@media (max-width: 760px) {
  .hud-top { padding: 14px 14px; }
  .hud-bot { padding: 14px 10px 18px; flex-direction: column; align-items: center; gap: 10px; }
  .title, .coords { display: none; }
  .brand { gap: 10px; } .logo { font-size: 17px; }
  .chips { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .chips button { padding: 8px 12px; font-size: 13px; }
  .d-info { left: 18px; right: 18px; top: calc(70px + var(--img) + 18px); translate: none; max-width: none; }
  .d-title { margin: 12px 0 6px; font-size: 32px; }
  .d-by { font-size: 18px; }
  .d-desc { margin-top: 10px; font-size: 14px; line-height: 1.6; }
  .d-stats { margin-top: 12px; }
  .d-cta { display: none; }
  .d-nav { left: 14px; right: 14px; bottom: 16px; justify-content: space-between; }
  .d-close { right: 14px; top: 14px; padding: 9px 14px; }
  .d-close .esc { display: none; }
}