*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
        /* Theme palettes. The html element gets the background; the
           transparent, and text color inherits. Vibrant themes also set
           --k-glow to a text-shadow applied on the big glyph. */
        html {
          background: #fff;
          color: #000;
          transition: background 300ms ease, color 300ms ease;
          --k-glow: none;
          --k-accent: #2563eb;
          --k-chrome-bg: rgba(255, 255, 255, 0.7);
          --k-chrome-border: rgba(0, 0, 0, 0.15);
          --k-panel-bg: #fff;
          --k-panel-fg: #000;
        }
        html.dark {
          background: #000;
          color: #fff;
          --k-chrome-bg: rgba(0, 0, 0, 0.7);
          --k-chrome-border: rgba(255, 255, 255, 0.15);
          --k-panel-bg: #171717;
          --k-panel-fg: #fff;
        }
        html.theme-sunset {
          background: linear-gradient(135deg, #ff2e63 0%, #ff7f50 40%, #ffd23f 100%) fixed;
          color: #fff2c8;
          --k-glow: 0 0 32px rgba(255, 220, 150, 0.85), 0 0 4px rgba(0, 0, 0, 0.4);
          --k-accent: #fff2a6;
          --k-chrome-bg: rgba(255, 70, 110, 0.35);
          --k-chrome-border: rgba(255, 240, 180, 0.6);
          --k-panel-bg: rgba(90, 20, 40, 0.85);
          --k-panel-fg: #fff2c8;
        }
        html.theme-neon {
          background: radial-gradient(circle at 25% 20%, #ff00c8 0%, #8b00ff 35%, #0066ff 70%, #00fff0 100%) fixed;
          color: #e6fffb;
          --k-glow: 0 0 18px #00ffea, 0 0 40px #ff00ea;
          --k-accent: #00ffea;
          --k-chrome-bg: rgba(20, 0, 40, 0.55);
          --k-chrome-border: rgba(0, 255, 234, 0.7);
          --k-panel-bg: rgba(10, 0, 30, 0.9);
          --k-panel-fg: #e6fffb;
        }
        html.theme-forest {
          background: linear-gradient(180deg, #052e1a 0%, #0f6b3a 45%, #52b788 85%, #d8f3dc 100%) fixed;
          color: #eaffe0;
          --k-glow: 0 0 24px rgba(180, 255, 180, 0.7);
          --k-accent: #b7e4c7;
          --k-chrome-bg: rgba(10, 50, 30, 0.6);
          --k-chrome-border: rgba(183, 228, 199, 0.6);
          --k-panel-bg: rgba(5, 46, 26, 0.9);
          --k-panel-fg: #eaffe0;
        }
        html.theme-ocean {
          background: linear-gradient(180deg, #001a33 0%, #003f72 35%, #0077b6 70%, #48cae4 100%) fixed;
          color: #e0f4ff;
          --k-glow: 0 0 28px rgba(120, 220, 255, 0.9);
          --k-accent: #90e0ef;
          --k-chrome-bg: rgba(0, 30, 60, 0.55);
          --k-chrome-border: rgba(144, 224, 239, 0.6);
          --k-panel-bg: rgba(0, 26, 51, 0.9);
          --k-panel-fg: #e0f4ff;
        }
        html.theme-candy {
          background: linear-gradient(135deg, #ff3cac 0%, #ff6ec7 30%, #a259ff 65%, #5eead4 100%) fixed;
          color: #fff;
          --k-glow: 0 0 28px rgba(255, 120, 200, 0.85), 0 0 6px rgba(255, 255, 255, 0.6);
          --k-accent: #ffe1f3;
          --k-chrome-bg: rgba(60, 0, 60, 0.45);
          --k-chrome-border: rgba(255, 220, 240, 0.7);
          --k-panel-bg: rgba(50, 10, 60, 0.9);
          --k-panel-fg: #fff;
        }
        .kongli-glyph { text-shadow: var(--k-glow); }
        button, input, .kongli-no-glow { text-shadow: none; }
        /* Palette-aware chrome: only the vibrant themes pull from vars. */
        html[class*="theme-"] .kongli-pill {
          background: var(--k-chrome-bg) !important;
          border-color: var(--k-chrome-border) !important;
          color: inherit !important;
        }
        html[class*="theme-"] .kongli-panel {
          background: var(--k-panel-bg) !important;
          color: var(--k-panel-fg) !important;
          border-color: var(--k-chrome-border) !important;
          backdrop-filter: blur(12px);
        }
        html[class*="theme-"] .kongli-toast {
          background: var(--k-panel-bg) !important;
          color: var(--k-panel-fg) !important;
          border: 1px solid var(--k-chrome-border);
        }
        html[class*="theme-"] .kongli-divider {
          border-color: var(--k-chrome-border) !important;
        }
        /* Accent for active/locked state buttons on palette themes. */
        html[class*="theme-"] .kongli-pill.kongli-active {
          background: var(--k-accent) !important;
          color: #111 !important;
          border-color: var(--k-accent) !important;
          text-shadow: none;
        }



           of the page (toolbar, HUD, neighbor strip, …) must stay live
           so clicks keep landing during rapid auto-scroll. Without this
           opt-out, the root is captured into a ::view-transition-group
           overlay that intercepts pointer events. */
        html { view-transition-name: none; }

        /* Belt-and-braces: the transition overlay and every captured
           pseudo must never swallow pointer events. Some engines still
           rasterize a root snapshot that covers the viewport, which
           gates clicks on the HUD during the animation window. */
        ::view-transition,
        ::view-transition-group(root),
        ::view-transition-image-pair(root),
        ::view-transition-old(root),
        ::view-transition-new(root),
        ::view-transition-group(big-glyph),
        ::view-transition-image-pair(big-glyph),
        ::view-transition-old(big-glyph),
        ::view-transition-new(big-glyph) {
          pointer-events: none;
        }
        ::view-transition-group(root),
        ::view-transition-image-pair(root),
        ::view-transition-old(root),
        ::view-transition-new(root) {
          animation-duration: 0.001s !important;
        }

        /* View transition: short crossfade on the big glyph when the
           index lands. Honors prefers-reduced-motion via media query. */
        @media (prefers-reduced-motion: no-preference) {
          ::view-transition-old(big-glyph),
          ::view-transition-new(big-glyph) {
            animation-duration: 120ms;
            animation-timing-function: ease-out;
          }
          ::view-transition-old(big-glyph) {
            animation-name: kongli-fade-out;
          }
          ::view-transition-new(big-glyph) {
            animation-name: kongli-fade-in;
          }
          @keyframes kongli-fade-out {
            to { opacity: 0; }
          }
          @keyframes kongli-fade-in {
            from { opacity: 0; }
          }
        }
        @media (prefers-reduced-motion: reduce) {
          ::view-transition-old(big-glyph),
          ::view-transition-new(big-glyph) {
            animation: none;
          }
        }
      .pointer-events-none{pointer-events:none;}.absolute{position:absolute;}.fixed{position:fixed;}.static{position:static;}.inset-0{inset:0;}.bottom-2{bottom:0.5rem;}.bottom-4{bottom:1rem;}.left-1\/2{left:50%;}.right-2{right:0.5rem;}.top-2{top:0.5rem;}.z-10{z-index:10;}.z-20{z-index:20;}.z-30{z-index:30;}.z-40{z-index:40;}.z-50{z-index:50;}.grid{display:grid;}.grid-cols-\[repeat\(auto-fill\,minmax\(4rem\,1fr\)\)\]{grid-template-columns:repeat(auto-fill,minmax(4rem,1fr));}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr));}.m-0{margin:0;}.m\[1\]{margin:1;}.m\[2\]{margin:2;}.mx-auto{margin-left:auto;margin-right:auto;}.my-4{margin-top:1rem;margin-bottom:1rem;}.mb-1{margin-bottom:0.25rem;}.mb-2{margin-bottom:0.5rem;}.mb-3{margin-bottom:0.75rem;}.mb-6{margin-bottom:1.5rem;}.ms{margin-inline-start:1rem;}.mt-0{margin-top:0;}.mt-1{margin-top:0.25rem;}.mt-2{margin-top:0.5rem;}.mt-3{margin-top:0.75rem;}.mt-4{margin-top:1rem;}.mt-8{margin-top:2rem;}.box-border{box-sizing:border-box;}.block{display:block;}.h-7{height:1.75rem;}.h-9{height:2.25rem;}.h-full{height:100%;}.h-screen{height:100vh;}.max-h-\[75vh\]{max-height:75vh;}.max-w-\[40rem\]{max-width:40rem;}.max-w-\[calc\(100vw-1rem\)\]{max-width:calc(100vw - 1rem);}.max-w-2xl{max-width:42rem;}.max-w-md{max-width:28rem;}.min-h-\[1\.5em\]{min-height:1.5em;}.min-h-0{min-height:0;}.w-7{width:1.75rem;}.w-9{width:2.25rem;}.w-full{width:100%;}.wa{width:auto;}.flex{display:flex;}.flex-1{flex:1 1 0%;}.flex-shrink-0{flex-shrink:0;}.flex-col{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.-translate-x-1\/2{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.cursor-pointer{cursor:pointer;}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed;}.cursor-ns-resize{cursor:ns-resize;}.touch-manipulation{touch-action:manipulation;}.touch-none{touch-action:none;}.select-none{-webkit-user-select:none;user-select:none;}.items-start{align-items:flex-start;}.items-center{align-items:center;}.items-stretch{align-items:stretch;}.self-center{align-self:center;}.justify-end{justify-content:flex-end;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.justify-items-stretch{justify-items:stretch;}.justify-self-center{justify-self:center;}.gap-0\.5{gap:0.125rem;}.gap-1\.5{gap:0.375rem;}.gap-2{gap:0.5rem;}.gap-3{gap:0.75rem;}.gap-4{gap:1rem;}.gap-x-2{column-gap:0.5rem;}.gap-y-1{row-gap:0.25rem;}.overflow-auto{overflow:auto;}.overflow-hidden{overflow:hidden;}.whitespace-nowrap{white-space:nowrap;}.b,.border{border-width:1px;}.border-0{border-width:0px;}.border-t{border-top-width:1px;}.border-black\/10{border-color:rgb(0 0 0 / 0.1);}.border-black\/15{border-color:rgb(0 0 0 / 0.15);}.border-black\/20{border-color:rgb(0 0 0 / 0.2);}.border-current\/10{border-color:currentColor;}.dark .dark\:border-white\/10{border-color:rgb(255 255 255 / 0.1);}.dark .dark\:border-white\/15{border-color:rgb(255 255 255 / 0.15);}.dark .dark\:border-white\/20{border-color:rgb(255 255 255 / 0.2);}.dark .dark\:focus\:border-white\/60:focus{border-color:rgb(255 255 255 / 0.6);}.focus\:border-black\/60:focus{border-color:rgb(0 0 0 / 0.6);}.rounded{border-radius:0.25rem;}.rounded-lg{border-radius:0.5rem;}.rounded-md{border-radius:0.375rem;}.bg-black,.dark .dark\:bg-black{--un-bg-opacity:1;background-color:rgb(0 0 0 / var(--un-bg-opacity)) /* #000 */;}.bg-black\/60{background-color:rgb(0 0 0 / 0.6) /* #000 */;}.bg-current\/20{background-color:currentColor /* currentColor */;}.bg-transparent{background-color:transparent /* transparent */;}.bg-white,.dark .dark\:bg-white{--un-bg-opacity:1;background-color:rgb(255 255 255 / var(--un-bg-opacity)) /* #fff */;}.bg-white\/70{background-color:rgb(255 255 255 / 0.7) /* #fff */;}.dark .dark\:bg-black\/70{background-color:rgb(0 0 0 / 0.7) /* #000 */;}.dark .dark\:bg-neutral-900{--un-bg-opacity:1;background-color:rgb(23 23 23 / var(--un-bg-opacity)) /* #171717 */;}.dark .dark\:hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / 0.1) /* #fff */;}.dark .dark\:hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / 0.05) /* #fff */;}.hover\:bg-black\/5:hover{background-color:rgb(0 0 0 / 0.05) /* #000 */;}.p-4{padding:1rem;}.p-5{padding:1.25rem;}.px{padding-left:1rem;padding-right:1rem;}.px-1{padding-left:0.25rem;padding-right:0.25rem;}.px-2{padding-left:0.5rem;padding-right:0.5rem;}.px-3{padding-left:0.75rem;padding-right:0.75rem;}.px-5{padding-left:1.25rem;padding-right:1.25rem;}.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}.py-10{padding-top:2.5rem;padding-bottom:2.5rem;}.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}.pb-\[env\(safe-area-inset-bottom\,0\.5rem\)\]{padding-bottom:env(safe-area-inset-bottom,0.5rem);}.pb-6{padding-bottom:1.5rem;}.pr-3{padding-right:0.75rem;}.pt-\[10vh\]{padding-top:10vh;}.pt-\[20vh\]{padding-top:20vh;}.pt-14{padding-top:3.5rem;}.text-center{text-align:center;}.text-\[0\.65rem\]{font-size:0.65rem;}.text-\[0\.85rem\]{font-size:0.85rem;}.text-\[1rem\]{font-size:1rem;}.text-2xl{font-size:1.5rem;line-height:2rem;}.text-base{font-size:1rem;line-height:1.5rem;}.text-lg{font-size:1.125rem;line-height:1.75rem;}.text-sm{font-size:0.875rem;line-height:1.25rem;}.text-xl{font-size:1.25rem;line-height:1.75rem;}.text-xs{font-size:0.75rem;line-height:1rem;}.dark .dark\:text-black,.text-black{--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity)) /* #000 */;}.dark .dark\:text-white,.text-white{--un-text-opacity:1;color:rgb(255 255 255 / var(--un-text-opacity)) /* #fff */;}.text-\[clamp\(0\.55rem\,2\.5vw\,0\.75rem\)\]{font-size:clamp(0.55rem,2.5vw,0.75rem);}.text-\[clamp\(0\.5rem\,2vw\,0\.7rem\)\]{font-size:clamp(0.5rem,2vw,0.7rem);}.text-\[clamp\(0\.6rem\,2\.5vw\,0\.85rem\)\]{font-size:clamp(0.6rem,2.5vw,0.85rem);}.text-\[clamp\(0\.75rem\,2\.8vw\,1rem\)\]{font-size:clamp(0.75rem,2.8vw,1rem);}.text-\[clamp\(0\.9rem\,3\.5vw\,1\.4rem\)\]{font-size:clamp(0.9rem,3.5vw,1.4rem);}.text-\[clamp\(0\.9rem\,3vw\,1\.5rem\)\]{font-size:clamp(0.9rem,3vw,1.5rem);}.text-\[clamp\(1\.8rem\,8vw\,3\.5rem\)\]{font-size:clamp(1.8rem,8vw,3.5rem);}.text-\[min\(35vw\,45vh\,20rem\)\]{font-size:min(35vw,45vh,20rem);}.text-red-500{--un-text-opacity:1;color:rgb(239 68 68 / var(--un-text-opacity)) /* #ef4444 */;}.font-semibold{font-weight:600;}.leading-\[1\.1\]{line-height:1.1;}.leading-none{line-height:1;}.leading-relaxed{line-height:1.625;}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;}.font-sans{font-family:ui-sans-serif, system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", "Segoe UI", Roboto, sans-serif;}.italic{font-style:italic;}.tabular-nums{--un-numeric-spacing:tabular-nums;font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);}.underline{text-decoration-line:underline;}.decoration-2{text-decoration-thickness:2px;}.underline-offset-4{text-underline-offset:4px;}.opacity-0{opacity:0;}.opacity-100{opacity:1;}.opacity-30{opacity:0.3;}.opacity-40{opacity:0.4;}.opacity-45{opacity:0.45;}.opacity-50{opacity:0.5;}.opacity-60{opacity:0.6;}.opacity-70{opacity:0.7;}.opacity-80{opacity:0.8;}.hover\:opacity-100:hover{opacity:1;}.hover\:opacity-80:hover{opacity:0.8;}.hover\:opacity-90:hover{opacity:0.9;}.disabled\:opacity-30:disabled{opacity:0.3;}.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.outline-none{outline:2px solid transparent;outline-offset:2px;}.ring{--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.ring-1{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}.dark .dark\:ring-white\/40{--un-ring-color:rgb(255 255 255 / 0.4) /* #fff */;}.ring-black\/40{--un-ring-color:rgb(0 0 0 / 0.4) /* #000 */;}.ring-current\/40{--un-ring-color:currentColor /* currentColor */;}.backdrop-blur-sm{--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}.will-change-transform{will-change:transform;}.view-transition-name{view-transition-name:name;}.h-dvh{height:100dvh;}