html[data-theme="halloween"] {
--bg: #0b0909;
--surface: #151112;
--surface-2: #1d1718;
--line: #2b2122;
--line-2: #3c2c2c;
--field: #100c0d;
--blue: #ff8a2a;
--blue-2: #e2630d;
--dot: rgba(255, 138, 42, .13);
}
html[data-theme="halloween"] ::selection { color: #140a03; }
html[data-theme="halloween"] .logo .mark { background-image: url(logo-halloween.svg); }
html[data-theme="halloween"] .gate-logo { background-image: url(logo-halloween.svg); }
html[data-theme="halloween"] code { background: rgba(255, 138, 42, .09); }
html[data-theme="halloween"] .todo-n { background: rgba(255, 138, 42, .14); }
html[data-theme="halloween"].spec .btn.primary { background: radial-gradient(120px 80px at var(--x) var(--y), rgba(255, 255, 255, .3), transparent 70%), linear-gradient(180deg, #f5821f, #c2500a); }
html[data-theme="halloween"].spec .btn.primary::before { background: radial-gradient(90px 60px at var(--x) var(--y), #fff, #ffc592 45%, #e2630d 80%); }
html[data-theme="halloween"] .btn.primary { color: #fff; }
.hw-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hw-web { position: fixed; top: 0; z-index: 2; width: 150px; height: 150px; pointer-events: none; opacity: .3; color: #d9cfc8; }
.hw-web svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.hw-web.left { left: 0; view-transition-name: hw-web-left; }
.hw-web.right { view-transition-name: hw-web-right; }
.hw-spider { view-transition-name: hw-spider; }
.hw-web.right { right: 0; transform: scaleX(-1); }
.hw-web.small { width: 104px; height: 104px; opacity: .22; }
.hw-spider { position: fixed; top: 0; right: 58px; z-index: 2; width: 18px; pointer-events: none; color: #d9cfc8; opacity: .55; animation: hw-drop 14s ease-in-out infinite; transform-origin: top center; }
.hw-spider::before { content: ""; display: block; width: 1px; height: 90px; margin: 0 auto; background: currentColor; opacity: .6; }
.hw-spider svg { display: block; width: 18px; height: 18px; fill: currentColor; }
@keyframes hw-drop { 0%, 100% { transform: translateY(-70px); } 45%, 60% { transform: translateY(0); } }
html[data-theme="halloween"] h1 .grad { animation: hw-flicker 7s linear infinite; }
@keyframes hw-flicker { 0%, 100% { opacity: 1; } 41% { opacity: 1; } 42% { opacity: .55; } 43% { opacity: 1; } 47% { opacity: .7; } 48% { opacity: 1; } 78% { opacity: 1; } 79% { opacity: .6; } 80.500% { opacity: 1; } }
@media (max-width: 900px) { .hw-web { width: 96px; height: 96px; } .hw-web.left { display: none; } .hw-spider { display: none; } }
@media (prefers-reduced-motion: reduce) { .hw-spider { animation: none; transform: translateY(-40px); } html[data-theme="halloween"] h1 .grad { animation: none; } }