:root {--ink: #15131c;--ink-soft: #4d4a5e;--muted: #7a7690;--sky-top: #eceaf5;--sky-mid: #d9d5ec;--sky-bot: #c3bddf;--paper: #f6f4fa;--brand: #2563eb;--violet: #7c5cf0;--glass: rgba(255, 255, 255, .55);--glass-line: rgba(255, 255, 255, .8);--peach: #f6d8c8;--sky: #cfdcf7;--mint: #d3eedd;--lilac: #e4daf6;--butter: #f8ecc4;--rose: #f6d3de;--radius: 18px;}.brackets { position: relative; }.brackets::before, .brackets::after {content: ""; position: absolute; width: 16px; height: 16px;border: 2px solid rgba(255, 255, 255, .95); pointer-events: none;transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s;}.brackets::before { top: -7px; left: -7px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }.brackets::after { bottom: -7px; right: -7px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }.brackets:hover::before { transform: translate(-3px, -3px); }.brackets:hover::after { transform: translate(3px, 3px); }.btn {display: inline-flex; align-items: center; gap: 10px;padding: 13px 22px; border-radius: 10px; border: 0;font: 500 15px/1 'Outfit', sans-serif; cursor: pointer;transition: background .25s, color .25s, transform .25s;}.btn-dark { background: var(--ink); color: #fff; }.btn-dark:hover { background: #2c2840; }.btn-ghost { background: rgba(255, 255, 255, .5); color: var(--ink); backdrop-filter: blur(8px); }.btn-ghost:hover { background: rgba(255, 255, 255, .8); }.btn i { font-size: 13px; transition: transform .25s; }.btn:hover i { transform: translateX(3px); }.clouds { position: absolute; inset: 0; transform: translateY(var(--py, 0px)); pointer-events: none; }.cloud {position: absolute; width: var(--w); height: calc(var(--w) * .5);filter: drop-shadow(0 14px 18px rgba(70, 60, 110, .18));animation: drift var(--t, 26s) ease-in-out infinite alternate;}.cloud span {position: absolute; border-radius: 50%;background: radial-gradient(circle at 35% 30%, #fff 0%, #f1f0f7 45%, #d6d3e6 100%);}.cloud span:nth-child(1) { width: 42%; height: 70%; left: 8%; bottom: 0; }.cloud span:nth-child(2) { width: 50%; height: 100%; left: 28%; bottom: 8%; }.cloud span:nth-child(3) { width: 36%; height: 64%; left: 56%; bottom: 0; }.cloud span:nth-child(4) { width: 9%; height: 18%; left: 94%; bottom: 14%; }@keyframes drift {from { transform: translate(0, 0); }to { transform: translate(var(--dx, 40px), -10px); }}.floor, .world .face { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }.floor { width: 380px; height: 280px; }.face { transform-origin: 0 0; backface-visibility: visible; }.face.b-top { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }.ground-shadow {position: absolute; left: -60px; top: -60px; width: 500px; height: 400px;background: radial-gradient(closest-side, rgba(60, 45, 110, .28), transparent);transform: translateZ(-2px);}.tile-wood { background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.22) 0 2px, transparent 2px 26px); }.tile-grid {background-image: linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);background-size: 28px 28px;}.b-panel { border-radius: 4px; overflow: hidden; font-size: 9px; color: var(--ink-soft); }.person { display: flex; flex-direction: column; align-items: center; }.person .head { width: 12px; height: 12px; border-radius: 50%; background: var(--skin, #e7b89a); }.person .hair { position: absolute; top: -1px; width: 13px; height: 7px; border-radius: 7px 7px 2px 2px; background: var(--hair, #2d2438); }.person .body {width: 20px; flex: 1; margin-top: 2px; border-radius: 10px 10px 4px 4px;background: var(--shirt, #6b7ce8); box-shadow: inset -4px 0 0 rgba(0, 0, 0, .12);}.person.walk { animation: bob 1.6s ease-in-out infinite; }@keyframes bob { 50% { margin-top: -3px; } }.foliage span {position: absolute; border-radius: 50%;background: radial-gradient(circle at 35% 30%, #9fd9a8, #4f9d68);}.hotspot {display: flex; align-items: flex-end; justify-content: center; pointer-events: auto;}.hotspot button {position: relative; width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;background: #fff; box-shadow: 0 4px 14px rgba(40, 30, 90, .35);}.hotspot button::before {content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--violet);}.hotspot button::after {content: ""; position: absolute; inset: -6px; border-radius: 50%;border: 2px solid rgba(255, 255, 255, .9); animation: ping 2s ease-out infinite;}@keyframes ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }.hotspot .tag {position: absolute; bottom: 34px; white-space: nowrap;padding: 4px 9px; border-radius: 6px; background: rgba(21, 19, 28, .85); color: #fff;font-size: 11px; font-weight: 500; opacity: 0; transform: translateY(4px);transition: opacity .25s, transform .25s; pointer-events: none;}.hotspot:hover .tag, .hotspot button:focus-visible + .tag { opacity: 1; transform: none; }.clock-face {position: relative; width: 100%; height: 100%; border-radius: 50%;background: #fff; box-shadow: inset 0 0 0 3px #2b2f45;}.clock-face i {position: absolute; left: 50%; bottom: 50%; width: 2px; margin-left: -1px;transform-origin: bottom center; background: #2b2f45; border-radius: 2px;}.clock-face .h { height: 28%; animation: spin 60s linear infinite; }.clock-face .m { height: 40%; animation: spin 5s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }.bar-grow { animation: grow 2.4s ease-in-out infinite alternate; transform-origin: bottom; }@keyframes grow { from { transform: scaleY(.35); } }