/* amuse-tech: modern dark tech skin on top of Source */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");

:root, :root.has-light-text {
    --background-color: #0a0d14;
    --ghost-accent-color: #22d3ee !important;
    --accent-2: #a78bfa;
    --surface: #111622;
    --surface-2: #161c2b;
    --color-darker-gray: #e6eaf2;
    --color-primary-text: #e6eaf2;
    --color-secondary-text: rgb(230 234 242 / 0.6);
    --color-border: rgb(255 255 255 / 0.08);
    --color-lighter-gray: rgb(255 255 255 / 0.04);
    --font-sans: "Pretendard Variable", Pretendard, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", Menlo, Consolas, monospace;
    --container-width: 1200px;
}

html { background: var(--background-color); }
body {
    background:
        radial-gradient(900px 500px at 85% -10%, rgb(34 211 238 / 0.10), transparent 60%),
        radial-gradient(800px 500px at -10% 10%, rgb(167 139 250 / 0.10), transparent 60%),
        var(--background-color);
    color: var(--color-primary-text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    word-break: keep-all;
}
::selection { background: rgb(34 211 238 / 0.3); }

/* Navigation */
.gh-navigation {
    position: sticky; top: 0; z-index: 50;
    background: rgb(10 13 20 / 0.72) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--color-border);
}
.gh-navigation-logo {
    font-family: var(--font-mono) !important;
    font-weight: 700; letter-spacing: -0.02em;
}
.gh-navigation-logo::before { content: "~/"; color: var(--ghost-accent-color); }
.gh-navigation-logo::after {
    content: "_"; color: var(--ghost-accent-color);
    animation: amuse-blink 1.1s steps(1) infinite; margin-left: 2px;
}
@keyframes amuse-blink { 50% { opacity: 0; } }
.gh-navigation-menu a, .gh-navigation-actions a { font-size: 1.45rem; font-weight: 500; }
.gh-navigation-menu a:hover { color: var(--ghost-accent-color); opacity: 1; }

/* Hero */
.gh-header.is-classic { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border); }
.gh-header.is-classic::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.gh-header.is-classic .gh-header-inner { position: relative; padding-top: clamp(64px, 10vw, 128px); padding-bottom: clamp(56px, 8vw, 104px); }
.gh-header-title {
    font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.15 !important;
    background: linear-gradient(120deg, #ffffff 10%, #67e8f9 55%, #a78bfa 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* Buttons & forms */
.gh-button, .gh-form button:not(.gh-form-input) {
    background: var(--ghost-accent-color) !important; color: #06212a !important;
    border-radius: 10px !important; font-weight: 700;
}
.gh-form { background: var(--surface) !important; border: 1px solid var(--color-border) !important; border-radius: 12px !important; }

/* Post cards */
.gh-feed .gh-card, .gh-container .gh-card {
    background: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 20px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gh-feed .gh-card:hover, .gh-container .gh-card:hover {
    transform: translateY(-3px);
    border-color: rgb(34 211 238 / 0.45);
    box-shadow: 0 10px 40px -12px rgb(34 211 238 / 0.25);
}
.gh-card-image { border-radius: 10px; overflow: hidden; }
.gh-card-title { font-weight: 700 !important; letter-spacing: -0.02em; }
.gh-card:hover .gh-card-title { color: var(--ghost-accent-color); opacity: 1; }
.gh-card-meta, .gh-card-date, .gh-card-author { font-family: var(--font-mono); font-size: 1.2rem !important; letter-spacing: 0; }
.gh-card-tag, .gh-article-tag {
    font-family: var(--font-mono); font-size: 1.15rem !important; font-weight: 500;
    color: var(--ghost-accent-color) !important; text-transform: none !important; letter-spacing: 0 !important;
}
.gh-card-tag::before, .gh-article-tag::before { content: "#"; opacity: .7; }
.gh-container-title {
    font-family: var(--font-mono); font-size: 1.3rem !important; color: var(--color-secondary-text) !important;
    text-transform: none !important; letter-spacing: 0 !important; border-bottom: none !important;
}
.gh-container-title::before { content: "// "; color: var(--ghost-accent-color); }

/* Article */
.gh-article-title { font-weight: 800 !important; letter-spacing: -0.035em !important; line-height: 1.2 !important; }
.gh-article-excerpt { color: var(--color-secondary-text) !important; }
.gh-content { font-size: 1.85rem; line-height: 1.85; }
.gh-content > * + * { margin-top: 1.4em; }
.gh-content h2 {
    font-weight: 800; letter-spacing: -0.025em; margin-top: 2.2em !important;
    padding-left: 14px; border-left: 3px solid var(--ghost-accent-color);
}
.gh-content h3 { font-weight: 700; letter-spacing: -0.02em; }
.gh-content a { color: var(--ghost-accent-color); text-decoration: none; border-bottom: 1px solid rgb(34 211 238 / 0.35); }
.gh-content a:hover { border-bottom-color: var(--ghost-accent-color); }
.gh-content strong { color: #fff; }
.gh-content blockquote { border-left: 3px solid var(--accent-2); background: var(--surface); padding: 16px 20px; border-radius: 0 12px 12px 0; font-style: normal; }
.gh-content ul li::marker, .gh-content ol li::marker { color: var(--ghost-accent-color); }

/* Code */
.gh-content :not(pre) > code {
    font-family: var(--font-mono); font-size: 0.85em;
    background: rgb(34 211 238 / 0.10); color: #67e8f9;
    padding: 0.15em 0.45em; border-radius: 6px; border: 1px solid rgb(34 211 238 / 0.2);
}
.gh-content pre {
    position: relative;
    font-family: var(--font-mono); font-size: 1.45rem; line-height: 1.7;
    background: #0d1117 !important; color: #e6edf3;
    border: 1px solid var(--color-border); border-radius: 12px;
    padding: 46px 22px 20px !important; overflow-x: auto;
    box-shadow: 0 12px 40px -18px rgb(0 0 0 / 0.8);
}
.gh-content pre::before {
    content: ""; position: absolute; top: 16px; left: 18px;
    width: 11px; height: 11px; border-radius: 50%;
    background: #ff5f57; box-shadow: 18px 0 0 #febc2e, 36px 0 0 #28c840;
}
.gh-content pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.gh-content hr { border-color: var(--color-border); }
.gh-content figcaption { color: var(--color-secondary-text); font-family: var(--font-mono); font-size: 1.25rem; }

/* Footer */
.gh-footer { background: transparent !important; }
.gh-footer-signup { background: var(--surface); border: 1px solid var(--color-border); border-radius: 20px; }
.gh-footer-copyright, .gh-footer-menu a { font-family: var(--font-mono); font-size: 1.25rem; }

@media (max-width: 767px) {
    .gh-content { font-size: 1.7rem; }
    .gh-content pre { font-size: 1.3rem; }
}

/* Grid feed cleanup */
.gh-container.is-grid .gh-card::before { display: none !important; }
.gh-container.is-grid .gh-feed { column-gap: 24px; row-gap: 24px; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gh-container.is-grid .gh-card-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gh-footer { border-top: 0 !important; padding-top: 48px; }
.gh-footer-bar { margin-bottom: 48px !important; }
.gh-header.is-classic .gh-form { max-width: 560px; margin-inline: auto; }
.gh-header.is-classic .gh-form-input { color: var(--color-secondary-text) !important; font-family: var(--font-mono); font-size: 1.5rem; }

.gh-container.is-grid .gh-card::after { display: none !important; }
.gh-header.is-classic .gh-header-inner { padding-top: clamp(56px, 7vw, 96px) !important; padding-bottom: clamp(48px, 6vw, 80px) !important; }
.gh-header.is-classic .gh-header-title { font-size: clamp(3.2rem, 1.6rem + 2.6vw, 5.4rem) !important; max-width: 820px; margin-inline: auto; }
.gh-header.is-classic .gh-form { background: rgb(17 22 34 / 0.85) !important; backdrop-filter: blur(8px); }
.gh-header.is-classic .gh-form:hover { border-color: rgb(34 211 238 / 0.5) !important; }
.gh-header.is-classic .gh-form svg { color: var(--ghost-accent-color); }
.gh-header.is-classic { padding-block: clamp(24px, 4vw, 56px) !important; }
.gh-header.is-classic .gh-header-inner { gap: 36px !important; }