* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: "Courier New", Consolas, Monaco, monospace; }
html { background-color: #fff; transition: background-color .4s ease; }
body { background-color: #fff; color: #0a0a0a; cursor: none; transition: background-color .4s ease, color .3s ease; }
.holder { width: 100%; height: 100%; }
.domain { position: absolute; font-weight: 700; color: #0a0a0a; user-select: none; pointer-events: none; white-space: nowrap; letter-spacing: 2px; text-shadow: 0 0 20px rgba(0,0,0,.05); will-change: left, top, filter; font-size: clamp(2rem, 6vw, 4.5rem); opacity: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: color .3s ease, opacity .5s ease, filter .18s ease; }
.domain.ready { opacity: 1; transform: none; }
.domain .dot { color: #e53025 !important; animation: blink-dot 1s infinite; }
.domain.is-near { filter: drop-shadow(0 0 5px rgba(229,48,37,.65)) drop-shadow(0 0 22px rgba(229,48,37,.35)); }
.domain.is-hit { animation: hostname-hit .26s cubic-bezier(.2,.9,.3,1.4); }
@keyframes blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hostname-hit { 0% { transform: translate(0,0) rotate(0); } 20% { transform: translate(-9px, 4px) rotate(-3deg); } 45% { transform: translate(8px, -3px) rotate(2deg); } 70% { transform: translate(-4px, 2px) rotate(-1deg); } 100% { transform: translate(0,0) rotate(0); } }
.footer { position: fixed; bottom: clamp(15px, 3vh, 40px); left: 0; width: 100%; padding: 10px 0; text-align: center; color: #888; font-weight: 500; letter-spacing: 1px; user-select: none; z-index: 10; pointer-events: auto; cursor: none; transition: color .3s ease; }
.footer a { color: inherit; text-decoration: none; }
.footer > a, .footer > span:first-child { display: inline-block; }
.footer .char { display: inline-block; position: relative; pointer-events: none; font-size: clamp(.8rem, 2.5vw, 1.6rem); transition: transform .08s ease-out, color .3s ease; will-change: transform; }
.footer:hover { color: #111; }
.no-custom-cursor body, .no-custom-cursor .footer { cursor: auto; }
.no-custom-cursor #cursor { display: none; }
.contact-bubbles { position: absolute; left: 50%; bottom: calc(100% + 14px); display: flex; align-items: flex-end; justify-content: center; gap: 16px; width: max-content; max-width: calc(100vw - 24px); transform: translateX(-50%); pointer-events: none; }
.info-bubble { --bubble-delay: 0ms; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: max-content; min-width: 250px; max-width: calc(100vw - 32px); padding: 16px 21px; border: 1px solid rgba(120,120,120,.4); border-radius: 52% 48% 45% 55% / 48% 44% 56% 52%; background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.92), transparent 32%), rgba(255,255,255,.82); box-shadow: 0 12px 40px rgba(0,0,0,.12), inset 0 0 24px rgba(255,255,255,.65); color: #555; text-align: center; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(16px) scale(.72); filter: blur(10px); transition: opacity .4s ease var(--bubble-delay), transform .5s cubic-bezier(.2,.9,.3,1.3) var(--bubble-delay), filter .5s ease var(--bubble-delay), visibility 0s linear .9s; animation: bubble-morph 4.8s ease-in-out infinite; }
.info-bubble::before, .info-bubble::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.3); filter: blur(10px); opacity: 0; }
.info-bubble::before { width: 28px; height: 28px; top: -15px; left: 22px; }
.info-bubble::after { width: 18px; height: 18px; top: -28px; right: 25px; }
.footer.is-open .info-bubble { opacity: 1; visibility: visible; transform: translateY(0) scale(1); filter: blur(0); transition-delay: var(--bubble-delay); }
.footer.is-open .info-bubble::before, .footer.is-open .info-bubble::after { opacity: 1; animation: smoke-puff 1.7s ease-out infinite; }
.info-bubble--1 { --bubble-delay: 40ms; }
.info-bubble--2 { --bubble-delay: 150ms; }
.info-bubble--3 { --bubble-delay: 260ms; }
.info-bubble--4 { --bubble-delay: 370ms; }
.info-bubble strong { font-size: .62rem; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #999; text-align: center; }
.info-bubble > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; line-height: 1.25; word-break: normal; }
@keyframes smoke-puff { 0% { transform: scale(.6) translateY(8px); } 65% { transform: scale(1.4) translateY(-12px); } 100% { transform: scale(1.8) translateY(-20px); opacity: 0; } }
@keyframes bubble-morph { 0%, 100% { border-radius: 52% 48% 45% 55% / 48% 44% 56% 52%; } 25% { border-radius: 43% 57% 54% 46% / 55% 47% 53% 45%; } 50% { border-radius: 57% 43% 48% 52% / 43% 56% 44% 57%; } 75% { border-radius: 47% 53% 57% 43% / 52% 45% 55% 48%; } }
#cursor { position: fixed; left: 0; top: 0; z-index: 100; width: 1px; height: 1px; pointer-events: none; mix-blend-mode: difference; will-change: transform; }
.cursor-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%, -50%); }
.cursor-ring { position: absolute; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; transform: translate(-50%, -50%); transition: width .3s ease, height .3s ease, border-color .3s ease, background .3s ease; }
#cursor.is-hovering .cursor-ring { width: 52px; height: 52px; border-color: #e53025; background: rgba(229,48,37,.08); }
html.dark-mode { background-color: #121212; }
html.dark-mode body { background-color: #121212; }
html.dark-mode body { color: #e0e0e0; }
html.dark-mode .domain { color: #e0e0e0; text-shadow: 0 0 20px rgba(255,255,255,.05); }
html.dark-mode .footer { color: #999; }
html.dark-mode .footer:hover { color: #fff; }
html.dark-mode .info-bubble { background: radial-gradient(circle at 28% 18%, rgba(255,255,255,.14), transparent 32%), rgba(25,25,25,.88); border-color: rgba(220,220,220,.2); box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 0 20px rgba(255,255,255,.04); color: #bbb; }
html.dark-mode .info-bubble::before, html.dark-mode .info-bubble::after { background: rgba(255,255,255,.12); }
@media (pointer: coarse) { body, .footer { cursor: auto; } #cursor { display: none; } }
@media (max-width: 700px) { .contact-bubbles { flex-direction: column; align-items: center; gap: 8px; width: min(340px, calc(100vw - 24px)); max-width: calc(100vw - 24px); } .info-bubble { width: min(320px, calc(100vw - 32px)); min-width: 0; max-width: 100%; } }
@media (max-width: 480px) { .footer { bottom: 10px; padding: 8px 0; } .footer .char { font-size: .9rem; } .info-bubble { padding: 12px 15px; } }
@media (max-width: 360px) { .footer .char { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }