@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {

--font-sans: "Space Grotesk", system-ui, -apple-system, sans-serif;

--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

--accent: #22c55e;

--accent-soft: rgba(34, 197, 94, 0.12);

--accent-glow: rgba(34, 197, 94, 0.25);

--danger: #ef4444;

--warning: #f59e0b;

--success: #10b981;

--bg: #0c0f1a;

--bg-elevated: rgba(18, 22, 36, 0.85);

--bg-glass: rgba(255, 255, 255, 0.04);

--surface: rgba(18, 22, 36, 0.92);

--surface-hover: rgba(30, 35, 52, 0.95);

--border: rgba(255, 255, 255, 0.06);

--border-accent: rgba(34, 197, 94, 0.2);

--text: #f0f2f5;

--text-secondary: #8892a4;

--text-tertiary: #4a5368;

--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);

--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);

--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);

--shadow-glow: 0 0 30px var(--accent-glow);

--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

--duration-fast: 200ms;

--duration-base: 300ms;

--duration-slow: 500ms;

--nav-height: 72px;

}

[data-theme="light"] {

--bg: #f4f6f9;

--bg-elevated: rgba(255, 255, 255, 0.85);

--bg-glass: rgba(0, 0, 0, 0.02);

--surface: rgba(255, 255, 255, 0.92);

--surface-hover: #ffffff;

--border: rgba(0, 0, 0, 0.06);

--border-accent: rgba(34, 197, 94, 0.25);

--text: #0f172a;

--text-secondary: #64748b;

--text-tertiary: #94a3b8;

--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);

--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);

--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);

--shadow-glow: 0 0 30px rgba(34, 197, 94, 0.15);

}

:root {

--accent-color: #6abf8d;

--primary-color: #6abf8d;

--secondary-color: #f2a65a;

--success-color: #5fbf93;

--danger-color: #de6d5b;

--warning-color: #f2b85f;

--bg-color: #f8f5ee;

--surface-color: rgba(255, 253, 248, 0.82);

--panel-color: #fffaf1;

--control-color: #fffdf8;

--text-color: #2c241f;

--text-secondary: #75675d;

--border-color: rgba(118, 99, 84, 0.14);

--accent-soft: rgba(106, 191, 141, 0.16);

--accent-border: rgba(106, 191, 141, 0.28);

--overlay-color: rgba(255, 248, 240, 0.7);

--on-accent: #fffdf8;

--shadow: 0 22px 60px rgba(155, 123, 90, 0.14);

--shadow-modal: 0 35px 90px rgba(101, 72, 39, 0.18);

}

[data-theme="dark"] {

--accent-color: #9fddb5;

--primary-color: #9fddb5;

--secondary-color: #f6c58d;

--success-color: #9fddb5;

--danger-color: #ff9e8c;

--warning-color: #ffd48f;

--bg-color: #13100f;

--surface-color: rgba(34, 28, 26, 0.92);

--panel-color: #1d1817;

--control-color: #2a2321;

--text-color: #f8eee4;

--text-secondary: #d8c6b6;

--border-color: rgba(255, 239, 223, 0.14);

--accent-soft: rgba(159, 221, 181, 0.14);

--accent-border: rgba(159, 221, 181, 0.28);

--overlay-color: rgba(15, 12, 11, 0.8);

--shadow: 0 28px 70px rgba(0, 0, 0, 0.42);

--shadow-modal: 0 35px 90px rgba(0, 0, 0, 0.5);

}

[data-theme="light"] body {

background:

radial-gradient(circle at top left,

rgba(255, 219, 174, 0.44),

transparent 30%),

radial-gradient(circle at top right,

rgba(192, 245, 224, 0.46),

transparent 24%),

linear-gradient(180deg, #fffdf8 0%, #f8f5ee 45%, #f5efe5 100%);

}

*::before,

*::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

scroll-behavior: smooth;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

html[data-theme="dark"] body {

background:

radial-gradient(circle at top left,

rgba(242, 166, 90, 0.12),

transparent 28%),

radial-gradient(circle at top right,

rgba(159, 221, 181, 0.1),

transparent 24%),

linear-gradient(180deg, #161211 0%, #0f0c0b 100%) !important;

}

body {

font-family: var(--font-sans);

background: var(--bg);

color: var(--text);

line-height: 1.6;

transition:

background var(--duration-base) ease,

color var(--duration-base) ease;

overflow-x: hidden;

}

body {

font-family: "DM Sans", "Segoe UI", "sans-serif";

background: var(--bg-color);

color: var(--text-color);

}

::selection {

background: var(--accent);

color: #fff;

}

.container {

max-width: 1280px;

margin: 0 auto;

padding: 0 24px;

}

a {

color: var(--accent);

text-decoration: none;

}

button {

font-family: inherit;

cursor: pointer;

border: none;

background: none;

color: inherit;

}

img {

max-width: 100%;

display: block;

}

::-webkit-scrollbar {

width: 6px;

}

::-webkit-scrollbar-track {

background: transparent;

}

::-webkit-scrollbar-thumb {

background: var(--text-tertiary);

border-radius: 3px;

}

::-webkit-scrollbar-thumb:hover {

background: var(--text-secondary);

}

.visually-hidden {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0, 0, 0, 0);

border: 0;

}

.skip-link {

position: absolute;

top: -100px;

left: 50%;

transform: translateX(-50%);

background: var(--accent);

color: #fff;

padding: 12px 24px;

border-radius: 8px;

font-weight: 600;

z-index: 5000;

transition: top var(--duration-fast) ease;

}

.skip-link:focus {

top: 16px;

}

.cursor-glow {

position: fixed;

width: 240px;

height: 240px;

border-radius: 50%;

pointer-events: none;

z-index: 0;

opacity: 0.5;

background: radial-gradient(circle,

rgba(255, 197, 115, 0.28) 0%,

rgba(121, 221, 183, 0.12) 42%,

transparent 72%);

transform: translate3d(-50%, -50%, 0);

transition: opacity 0.25s ease;

}

[data-theme="light"] .cursor-glow {

opacity: 0 !important;

}

.hero-controls {

display: none !important;

}

.legacy-home-hero {

display: none !important;

}

.sidebar-dock {

position: fixed;

top: 16px;

left: 16px;

bottom: 16px;

width: 280px;

background: var(--bg-glass);

backdrop-filter: blur(24px) saturate(1.4);

-webkit-backdrop-filter: blur(24px) saturate(1.4);

border: 1px solid var(--border);

border-radius: 24px;

padding: 24px;

display: flex;

flex-direction: column;

gap: 28px;

box-shadow: var(--shadow-lg);

z-index: 1000;

transition:

transform var(--duration-slow) var(--ease-out-expo),

opacity var(--duration-slow) var(--ease-out-expo),

left var(--duration-slow) var(--ease-out-expo);

transform: translateX(-120%);

opacity: 0;

pointer-events: none;

}

body.sidebar-active .sidebar-dock {

transform: translateX(0);

opacity: 1;

pointer-events: auto;

}

[data-theme="light"] .sidebar-dock {

background: rgba(255, 255, 255, 0.7);

border-color: rgba(0, 0, 0, 0.06);

}

.sidebar-brand {

display: flex;

flex-direction: column;

gap: 4px;

}

.sidebar-search {

width: 100%;

}

.sidebar-search .search-box {

width: 100%;

max-width: none;

}

.sidebar-search .search-dropdown {

width: 280px;

left: calc(100% + 12px);

top: 0;

}

.sidebar-menu-wrapper {

display: flex;

flex-direction: column;

gap: 12px;

flex: 1;

overflow-y: auto;

scrollbar-width: none;

/* Hide scrollbar for clean vertical list */

}

.sidebar-menu-wrapper::-webkit-scrollbar {

display: none;

}

.sidebar-menu-title {

font-family: var(--font-mono);

font-size: 0.72rem;

font-weight: 600;

letter-spacing: 0.08em;

text-transform: uppercase;

color: var(--text-tertiary);

padding-left: 6px;

}

.sidebar-menu {

display: flex;

flex-direction: column;

gap: 6px;

padding: 2px 6px;

/* Horizontal safe gutter prevents box-shadow clipping and boundary overlap */

}

.sidebar-tab[data-category="all"] {

--tab-color: var(--accent);

--tab-color-glow: rgba(16, 185, 129, 0.25);

--tab-color-soft: rgba(16, 185, 129, 0.08);

--tab-color-soft-hover: rgba(16, 185, 129, 0.03);

}

.sidebar-tab[data-category="games"] {

--tab-color: #ec4899;

/* Neon Pink */

--tab-color-glow: rgba(236, 72, 153, 0.25);

--tab-color-soft: rgba(236, 72, 153, 0.08);

--tab-color-soft-hover: rgba(236, 72, 153, 0.03);

}

.sidebar-tab[data-category="math"] {

--tab-color: #6366f1;

/* Cosmic Indigo/Blue */

--tab-color-glow: rgba(99, 102, 241, 0.25);

--tab-color-soft: rgba(99, 102, 241, 0.08);

--tab-color-soft-hover: rgba(99, 102, 241, 0.03);

}

.sidebar-tab[data-category="utilities"] {

--tab-color: #10b981;

/* Mint Green */

--tab-color-glow: rgba(16, 185, 129, 0.25);

--tab-color-soft: rgba(16, 185, 129, 0.08);

--tab-color-soft-hover: rgba(16, 185, 129, 0.03);

}

.sidebar-tab[data-category="favorites"] {

--tab-color: #f59e0b;

/* Amber Gold */

--tab-color-glow: rgba(245, 158, 11, 0.25);

--tab-color-soft: rgba(245, 158, 11, 0.08);

--tab-color-soft-hover: rgba(245, 158, 11, 0.03);

}

.sidebar-tab[data-category="playground"] {

--tab-color: #a78bfa;

/* Electric Purple */

--tab-color-glow: rgba(167, 139, 250, 0.25);

--tab-color-soft: rgba(167, 139, 250, 0.08);

--tab-color-soft-hover: rgba(167, 139, 250, 0.03);

}

.sidebar-menu .sidebar-tab {

display: flex;

align-items: center;

width: 100%;

text-align: left;

gap: 12px;

padding: 10px 14px;

border-radius: 12px;

font-family: var(--font-sans);

font-size: 0.88rem;

font-weight: 500;

color: var(--text-secondary);

background: transparent;

border: 1px solid transparent;

transition: all var(--duration-fast) ease;

cursor: pointer;

position: relative;

/* Added relative context for active line */

}

.sidebar-menu .sidebar-tab::before {

content: "";

position: absolute;

left: 4px;

top: 20%;

height: 60%;

width: 3px;

background: var(--tab-color);

border-radius: 99px;

opacity: 0;

transform: scaleY(0);

transition:

transform var(--duration-base) var(--ease-out-expo),

opacity var(--duration-base) ease;

}

.sidebar-menu .sidebar-tab.active::before {

opacity: 1;

transform: scaleY(1);

}

.sidebar-menu .sidebar-tab:hover {

color: var(--text);

background: var(--tab-color-soft-hover);

border-color: rgba(255, 255, 255, 0.03);

padding-left: 16px;

/* Stable horizontal content shift */

}

[data-theme="light"] .sidebar-menu .sidebar-tab:hover {

background: rgba(0, 0, 0, 0.015);

border-color: rgba(0, 0, 0, 0.02);

}

.sidebar-menu .sidebar-tab.active {

color: var(--text);

background: var(--tab-color-soft);

border-color: var(--tab-color-glow);

box-shadow: 0 0 16px var(--tab-color-glow);

padding-left: 18px;

/* Stable horizontal active content shift */

}

.sidebar-search .search-box input:focus {

border-color: var(--accent) !important;

box-shadow: 0 0 16px rgba(16, 185, 129, 0.15) !important;

background: rgba(255, 255, 255, 0.04) !important;

}

.sidebar-controls button {

position: relative;

transition: all var(--duration-fast) ease-in;

}

.sidebar-controls button i {

transition: transform var(--duration-fast) cubic-bezier(0.34, 1.56, 0.64, 1);

}

.sidebar-controls button:hover i {

transform: scale(1.18) rotate(8deg);

}

.sidebar-menu .sidebar-tab .sidebar-icon {

display: flex;

align-items: center;

justify-content: center;

width: 20px;

height: 20px;

color: var(--text-tertiary);

transition: all var(--duration-fast) ease-in;

}

.sidebar-menu .sidebar-tab:hover .sidebar-icon,

.sidebar-menu .sidebar-tab.active .sidebar-icon {

color: var(--tab-color);

}

.sidebar-menu .sidebar-tab.active .sidebar-icon {

transform: scale(1.15);

}

.sidebar-footer {

display: flex;

align-items: center;

justify-content: space-between;

padding-top: 16px;

border-top: 1px solid var(--border);

}

.sidebar-main-controls {

display: flex;

justify-content: center;

align-items: center;

gap: 20px;

flex-wrap: wrap;

}

.sidebar-controls {

display: flex;

flex-direction: column;

align-items: center;

gap: 8px;

width: 100%;

justify-content: space-between;

}

.sidebar-controls .sound-toggle,

.sidebar-controls .theme-toggle {

flex: 0 0 auto;

height: 40px;

border-radius: 12px;

background: var(--bg-glass);

border: 1px solid var(--border);

color: var(--text-secondary);

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: all var(--duration-fast) ease;

}

.theme-selector {

position: relative;

display: flex;

flex-direction: column;

gap: 0.35rem;

min-width: 160px;

max-width: 220px;

/* flex: 1 1 160px; */

}

.theme-selector-label {

font-size: 0.78rem;

color: var(--text-secondary);

letter-spacing: 0.03em;

}

.theme-picker {

width: 100%;

padding: 0.8rem 0.95rem;

border-radius: 1rem;

border: 1px solid var(--border);

background: var(--bg-glass);

color: var(--text);

display: flex;

align-items: center;

justify-content: space-between;

gap: 0.5rem;

cursor: pointer;

transition:

border-color var(--duration-fast) ease,

background var(--duration-fast) ease,

color var(--duration-fast) ease,

box-shadow var(--duration-fast) ease;

}

.theme-picker:hover,

.theme-picker:focus-visible {

outline: none;

border-color: var(--accent);

box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22);

}

.theme-picker-value {

text-align: left;

font-size: 0.95rem;

}

.theme-picker-chevron {

transition: transform var(--duration-fast) ease;

}

.theme-picker[aria-expanded="true"] .theme-picker-chevron {

transform: rotate(180deg);

}

.theme-picker-menu {

position: absolute;

left: 0;

right: 0;

bottom: calc(100% + 0.45rem);

top: auto;

z-index: 20;

margin: 0;

padding: 0.35rem 0;

list-style: none;

background: var(--surface);

border: 1px solid var(--border);

border-radius: 1rem;

box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.16);

opacity: 0;

visibility: hidden;

transform: translateY(6px);

transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;

}

.theme-picker-menu.active {

opacity: 1;

visibility: visible;

transform: translateY(0);

}

.theme-picker-option {

padding: 0.75rem 1rem;

cursor: pointer;

color: var(--text);

font-size: 0.95rem;

transition: background var(--duration-fast) ease,

color var(--duration-fast) ease;

}

.theme-picker-option:hover,

.theme-picker-option[aria-selected="true"] {

background: var(--accent-soft);

color: var(--text);

}

body.sidebar-collapsed .theme-picker {

display: none ;

}

[data-theme="dark"] .theme-picker {

background: #26232b;

border-color: #3d3947;

}

[data-theme="dark"] .theme-picker-menu {

background: #26232b;

border-color: #3d3947;

}

[data-theme="dark"] .theme-picker-option {

background: transparent;

color: #f3f4f6;

}

.sidebar-controls .sound-toggle:hover,

.sidebar-controls .theme-toggle:hover {

background: var(--accent-soft);

color: var(--accent);

border-color: var(--border-accent);

}

.sound-toggle i {

color: #14b8a6;

/* Neon Teal */

filter: drop-shadow(0 0 6px rgba(20, 184, 166, 0.45));

transition: all var(--duration-fast) ease-in;

}

.sound-toggle.muted i,

.sound-toggle i.fa-volume-mute {

color: #ef4444 !important;

/* Muted Red */

filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.5)) !important;

}

.theme-toggle i.fa-moon {

color: #8b5cf6;

/* Cosmic Purple */

filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.55));

}

.theme-toggle i.fa-sun {

color: #f59e0b;

/* Golden Sun */

filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.55));

}

.search-box {

flex: 1;

max-width: 400px;

height: 48px;

display: flex;

align-items: center;

gap: 12px;

padding: 0 16px;

border-radius: 14px;

border: 2px solid var(--border);

background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), rgba(255, 255, 255, 0.02));

backdrop-filter: blur(8px);

transition:

border-color var(--duration-base) var(--ease-out-expo),

background var(--duration-base) var(--ease-out-expo),

box-shadow var(--duration-base) var(--ease-out-expo),

transform var(--duration-fast) ease;

position: relative;

overflow: hidden;

}

.search-box::before {

content: '';

position: absolute;

inset: 0;

background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(34, 197, 94, 0.1), transparent);

opacity: 0;

transition: opacity var(--duration-fast) ease;

pointer-events: none;

}

.search-box:hover {

border-color: var(--accent);

background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(34, 197, 94, 0.04));

transform: translateY(-2px);

box-shadow: 0 8px 24px rgba(34, 197, 94, 0.15);

}

.search-box i {

color: var(--text-secondary);

font-size: 0.95rem;

flex-shrink: 0;

transition: all var(--duration-fast) ease;

}

.search-box input {

flex: 1;

background: transparent;

border: none;

outline: none;

color: var(--text);

font-size: 0.95rem;

font-family: var(--font-sans);

font-weight: 500;

min-width: 0;

letter-spacing: 0.3px;

transition: color var(--duration-fast) ease;

}

.search-box input::placeholder {

color: var(--text-tertiary);

font-weight: 400;

}

.search-box:focus-within {

border-color: var(--accent);

background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.08));

box-shadow:

0 12px 32px rgba(34, 197, 94, 0.25),

inset 0 1px 3px rgba(34, 197, 94, 0.1);

transform: translateY(-2px);

}

.search-box:focus-within::before {

opacity: 1;

}

.search-box:focus-within i {

color: var(--accent);

transform: scale(1.1);

}

.search-box:focus-within input {

color: var(--text);

}

.search-box i,

.search-box input,

[data-theme="light"] .search-box i,

[data-theme="light"] .search-box input {

color: var(--text-color);

}

.search-box input::placeholder {

color: var(--text-secondary);

}

[data-theme="dark"] .search-box {

background: rgba(255, 255, 255, 0.06);

border-color: rgba(255, 239, 223, 0.12);

}

[data-theme="dark"] .search-box i,

[data-theme="dark"] .search-box input {

color: var(--text-color);

}

[data-theme="dark"] .search-box input::placeholder {

color: var(--text-secondary);

}

.sound-toggle,

.theme-toggle {

width: 38px;

height: 38px;

border-radius: 10px;

border: 1px solid var(--border);

background: var(--bg-glass);

color: var(--text-secondary);

font-size: 0.9rem;

display: flex;

align-items: center;

justify-content: center;

transition: all var(--duration-fast) ease-in;

}

.sound-toggle:hover,

.theme-toggle:hover {

background: var(--accent-soft);

color: var(--accent);

border-color: var(--border-accent);

transform: translateY(-1px);

}

.sound-toggle:focus-visible,

.theme-toggle:focus-visible {

outline: 2px solid var(--accent, #6366f1);

outline-offset: 2px;

}

.hidden {

display: none !important;

}

.sidebar-backdrop {

display: none;

position: fixed;

inset: 0;

background: rgba(0, 0, 0, 0.5);

z-index: 999;

opacity: 0;

transition: opacity 0.3s ease;

pointer-events: none;

}

body.sidebar-collapsed .sidebar-dock {

width: 80px !important;

padding: 24px 12px !important;

}

body.sidebar-collapsed .sidebar-dock .sidebar-brand span,

body.sidebar-collapsed .sidebar-dock .sidebar-menu-title,

body.sidebar-collapsed .sidebar-dock .sidebar-label,

body.sidebar-collapsed .sidebar-dock .sidebar-tab .sidebar-label {

display: none !important;

}

body.sidebar-collapsed .sidebar-dock .sidebar-tab {

justify-content: center !important;

padding: 10px !important;

}

body.sidebar-collapsed .sidebar-dock .sidebar-icon {

margin: 0 !important;

width: 24px !important;

height: 24px !important;

}

body.sidebar-collapsed .sidebar-dock .sidebar-tab::before {

display: none !important;

}

body.sidebar-collapsed .sidebar-dock .sidebar-search {

display: none !important;

}

body.sidebar-collapsed .sidebar-dock .sidebar-footer span {

display: none !important;

}

body.sidebar-collapsed .recent-searches-heading {

display: none !important;

}

body.sidebar-collapsed .recent-clear-all-btn {

display: none !important;

}

body.sidebar-collapsed .sidebar-dock .sidebar-footer button {

justify-content: center !important;

padding-top: 8px;

padding-bottom: 8px;

}

body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.mobile-sidebar-toggle:focus-visible {

outline: 2px solid var(--accent, #6366f1);

outline-offset: 2px;

}

.sidebar-tab:focus-visible {

outline: 2px solid var(--accent, #6366f1);

outline-offset: 2px;

border-radius: 8px;

}

main>.hero-section:has(.hero-code-snippets) {

display: none;

}

.hero-section {

position: relative;

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

padding: calc(var(--nav-height) + 12px) 24px 60px;

overflow: hidden;

}

#boardCanvas {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

z-index: 0;

pointer-events: none;

opacity: 0.17;

mix-blend-mode: multiply;

}

[data-theme="dark"] #boardCanvas {

opacity: 0.11;

mix-blend-mode: screen;

}

.hero-background {

position: absolute;

inset: 0;

z-index: 0;

overflow: hidden;

pointer-events: none;

}

.hero-background::before {

content: "";

position: absolute;

inset: 0;

background-image:

linear-gradient(to right, var(--border) 1px, transparent 1px),

linear-gradient(to bottom, var(--border) 1px, transparent 1px);

background-size: 48px 48px;

opacity: 0.3;

mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);

-webkit-mask-image: radial-gradient(ellipse at center,

black 30%,

transparent 70%);

}

.hero-background::after {

content: "";

position: absolute;

top: 0;

left: 50%;

transform: translateX(-50%);

width: 800px;

height: 600px;

background: radial-gradient(circle, var(--accent-soft) 0%, transparent 60%);

opacity: 0.6;