/* ==========================================================================
   SanGuai Inc. HK — Landing Page Styles v4
   Monochrome, striped hero, glass nav, full markdown support.
   ========================================================================== */

/* ---- CSS Custom Properties ---- */
:root {
    --bg: #0a0a0c;
    --bg-elevated: #131316;
    --bg-card: #18181c;
    --text-main: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-light: #52525b;
    --border: rgba(255,255,255,0.08);
    --border-color: rgba(255,255,255,0.08);
    --border-hover: rgba(255,255,255,0.18);
    --glass-bg: rgba(10,10,12,0.80);
    --glass-border: rgba(255,255,255,0.06);
    --glass-blur: blur(20px);
    --hover-bg: rgba(255,255,255,0.05);
    --shadow: 0 4px 32px rgba(0,0,0,0.4);
    --shadow-soft: 0 4px 30px rgba(0,0,0,0.03);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --trans-fast: 0.2s ease;
    --trans-smooth: 0.4s cubic-bezier(0.4,0,0.2,1);
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
}

[data-theme="light"] {
    --bg: #f4f4f5;
    --bg-elevated: #eaeaec;
    --bg-card: #fafafa;
    --text-main: #18181b;
    --text-secondary: #52525b;
    --text-muted: #a1a1aa;
    --text-light: #d4d4d8;
    --border: rgba(0,0,0,0.08);
    --border-color: rgba(0,0,0,0.08);
    --border-hover: rgba(0,0,0,0.18);
    --glass-bg: rgba(244,244,245,0.80);
    --glass-border: rgba(0,0,0,0.06);
    --hover-bg: rgba(0,0,0,0.03);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text-main);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
    transition: background var(--trans-smooth), color var(--trans-smooth);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
body.modal-open { overflow: hidden; }
.hidden { display: none !important; }
.display-font { font-family: var(--font-display); }
.text-centre { text-align: center; }

/* ==========================================================================
   ONBOARDING OVERLAY — matched to style.css original
   ========================================================================== */
.onboarding-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 10000; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    background: var(--bg);
    transition: opacity 1.2s cubic-bezier(0.25,1,0.5,1), visibility 1.2s;
    overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.onboarding-overlay.fade-out, .onboarding-overlay.hide {
    opacity: 0; visibility: hidden; pointer-events: none;
}

.ob-section, .ob-step {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; visibility: hidden;
    transform: translateY(30px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.25,1,0.5,1);
    padding: 0 24px; text-align: center;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
.ob-section.active, .ob-step.active {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}

.ob-title { font-family: var(--font-display); font-size: 3rem; color: var(--text-main); margin-bottom: 0.5rem; }
.ob-subtitle { font-size: 0.9rem; color: var(--text-muted); letter-spacing: 4px; margin-bottom: 2.5rem; text-transform: uppercase; }

.ob-card, .ob-disclaimer-box {
    max-width: 480px; margin: 0 auto 2rem auto;
    padding: 24px 30px; text-align: justify;
    font-size: 0.95rem; line-height: 1.8;
    color: var(--text-main); border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.ob-card .spoiler {
    color: transparent;
    background-color: var(--bg);
    font-style: italic;
}
.ob-card .spoiler:hover,
.ob-card .spoiler:focus {
    color: inherit;
    background-color: transparent;
}

/* Disclaimer reader */
.disclaimer-reader-wrapper, .disclaimer-reader-wrap {
    max-width: 650px; width: 90%; margin: 0 auto 1rem auto;
}
.disclaimer-reader-box {
    max-height: 48vh; overflow-y: auto;
    padding: 24px 30px; text-align: left;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft); scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.disclaimer-reader-box::-webkit-scrollbar { width: 6px; }
.disclaimer-reader-box::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.disclaimer-reader-box.non-selectable { user-select: none !important; -webkit-user-select: none !important; }
.disclaimer-scroll-hint { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-bottom: 0.5rem; font-style: italic; }

/* Form inputs */
.ob-form, .ob-input-group {
    display: flex; flex-direction: column; gap: 1.5rem; align-items: center; margin-bottom: 1.25rem;
}
.ob-input-wrapper, .ob-input-group {
    display: flex; flex-direction: column; text-align: left; width: 300px;
}
.ob-input-wrapper label, .ob-input-group label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-light); margin-bottom: 0.5rem;
}
.ob-input-wrapper select, .ob-input-wrapper input,
.ob-input-group select, .ob-input-group input {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-main); padding: 14px 20px; border-radius: 8px;
    font-family: var(--font-body); font-size: 1rem; outline: none;
    transition: border-color 0.4s ease; width: 100%;
}
.ob-input-wrapper select:focus, .ob-input-wrapper input:focus,
.ob-input-group select:focus, .ob-input-group input:focus { border-color: var(--text-main); }
.ob-input-wrapper select option { background: var(--bg); color: var(--text-main); }

/* Animated language selector */
.lang-radio-group { display: flex; flex-direction: column; gap: 10px; width: 300px; }
.lang-radio-card {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
    border-radius: 10px; padding: 16px 18px; cursor: pointer;
    transition: all 0.35s cubic-bezier(.175,.885,.32,1.275);
    display: flex; align-items: center; gap: 14px;
}
.lang-radio-card:hover { border-color: var(--text-muted); background: rgba(255,255,255,0.06); }
.lang-radio-card.selected { border-color: var(--accent); background: rgba(59,130,246,0.08); }
.lang-radio-card .lang-flag { font-size: 1.5rem; flex-shrink: 0; }
.lang-radio-card .lang-info { flex: 1; }
.lang-radio-card .lang-name { font-size: 0.95rem; font-weight: 600; color: var(--text-main); }
.lang-radio-card .lang-native { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.lang-radio-card .lang-check {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.35s cubic-bezier(.175,.885,.32,1.275); flex-shrink: 0;
}
.lang-radio-card.selected .lang-check { border-color: var(--accent); background: var(--accent); }
.lang-radio-card.selected .lang-check::after { content: '✓'; color: #fff; font-size: 11px; font-weight: 700; }

/* Animated expand for setup step */
.ob-step .ob-input-group, .ob-step .lang-radio-group {
    animation: obExpandIn 0.5s cubic-bezier(.175,.885,.32,1.275) both;
}
.ob-step .ob-input-group:nth-child(2) { animation-delay: 0.1s; }
.ob-step .ob-input-group:nth-child(3) { animation-delay: 0.2s; }
.lang-radio-card:nth-child(1) { animation-delay: 0.15s; }
.lang-radio-card:nth-child(2) { animation-delay: 0.25s; }
.lang-radio-card:nth-child(3) { animation-delay: 0.35s; }
@keyframes obExpandIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ob-ip-info, .ob-ip-display {
    font-size: 0.85rem; color: var(--text-muted);
    font-family: 'Inter', monospace; text-align: center;
    padding: 8px 16px; border-radius: 6px; width: 300px;
    word-break: break-all; margin-top: 10px;
}

.ob-btn {
    background: var(--text-main); color: var(--bg);
    border: none; padding: 14px 45px; border-radius: 30px;
    font-family: var(--font-body); font-size: 1rem; font-weight: 500;
    cursor: pointer; transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), opacity 0.3s;
    margin-top: 1.5rem; letter-spacing: 1px; text-transform: uppercase;
}
.ob-btn:hover { opacity: 0.9; }
.ob-btn:active { transform: scale(0.92); }
.ob-btn.disabled, .ob-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; transform: none; }
.ob-btn.outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); }

.ob-spinner {
    width: 50px; height: 50px; border: 2px solid var(--border-color);
    border-top-color: var(--text-main); border-radius: 50%;
    animation: ob-spin 1s cubic-bezier(0.55,0.15,0.45,0.85) infinite;
    margin: 0 auto 2rem auto;
}
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   INTRO ANIMATION — matched to style.css original
   ========================================================================== */
.epic-intro {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 5000; display: flex; justify-content: center; align-items: center;
    background: var(--bg); transition: background 1.5s ease, opacity 1.5s ease;
    overflow: hidden; pointer-events: none;
}
.intro-stage {
    position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center;
    background: var(--bg); z-index: 10; overflow: hidden;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.intro-text {
    position: absolute; font-family: var(--font-display); font-size: 2.5rem;
    color: var(--text-main); text-align: center; opacity: 0;
    transition: all 0.8s cubic-bezier(0.25,1,0.5,1);
    display: flex; align-items: center; justify-content: center;
    white-space: nowrap;
}
.intro-text.active { opacity: 1; }
.intro-letter {
    display: inline-block; transition: all 1s cubic-bezier(0.25,1,0.5,1);
}
.intro-blue {
    color: #3b82f6; font-size: 4.5rem; font-weight: bold;
}
.rest, .intro-rest {
    display: inline-block; overflow: hidden; max-width: 250px;
    transition: max-width 0.8s ease, opacity 0.5s ease;
    vertical-align: bottom;
}
.rest { line-height: 4.5rem; }
.intro-hide, .intro-rest.hide { max-width: 0; opacity: 0; margin-right: 0 !important; }
.intro-rest { margin-right: 16px; opacity: 0.92; display: inline-block; vertical-align: baseline; }

/* Whip-out animation for "Curated Thoughts" */
.whip-out {
    display: inline-block; opacity: 0;
    transform: translateX(80px) skewX(-20deg) scale(0.8);
    animation: whipOutAnim 0.7s cubic-bezier(0.175,0.885,0.32,1.275) forwards;
}
@keyframes whipOutAnim { 100% { opacity: 1; transform: translateX(0) skewX(0) scale(1); } }

/* CYGNUS Welcome Card */
.cygnus-card {
    max-width: 420px; margin: 0 auto; padding: 40px 30px;
    background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); text-align: center; transition: all 0.6s ease;
}
.cygnus-header { font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; }
.cygnus-divider { height: 1px; background: var(--border-color); margin: 1rem 0; }
.cygnus-body { display: flex; align-items: center; justify-content: center; gap: 20px; }
.cygnus-logo { height: 60px; width: auto; }
.cygnus-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--text-main); }
.cygnus-reading { font-size: 0.85rem; color: var(--text-muted); font-style: italic; }
.cygnus-footer { font-size: 0.85rem; color: var(--text-secondary); font-style: italic; line-height: 1.7; }

/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
.site-nav {
    position: fixed; top: 0; left: 0; width: 100%; height: 64px; z-index: 1000;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    transition: background var(--trans-smooth), border var(--trans-smooth), transform 0.4s ease;
    transform: translateY(-100%);
}
.site-nav.visible { transform: translateY(0); }
.nav-inner {
    max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 100%;
    display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    color: var(--text-main); cursor: pointer; text-decoration: none;
    letter-spacing: 0.02em; white-space: nowrap;
}
.nav-brand .hk-tag { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; color: var(--text-muted); margin-left: 2px; vertical-align: super; font-family: var(--font-body); }
.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.nav-links a {
    font-size: 0.78rem; font-weight: 500; color: var(--text-secondary);
    text-decoration: none; padding: 6px 12px; border-radius: 20px;
    letter-spacing: 0.04em; transition: all var(--trans-fast); white-space: nowrap;
}
.nav-links a:hover, .nav-links a.active-section { color: var(--text-main); background: var(--hover-bg); }
.theme-toggle-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--border); border-radius: 50%;
    color: var(--text-secondary); font-size: 1rem; cursor: pointer;
    transition: all var(--trans-fast); margin-left: 8px; flex-shrink: 0;
}
.theme-toggle-btn:hover { border-color: var(--text-muted); color: var(--text-main); }

/* Hamburger */
.nav-hamburger { display: none; background: none; border: none; color: var(--text-main); font-size: 1.5rem; cursor: pointer; padding: 4px; }
.nav-links-mobile {
    display: flex;
    position: absolute; top: 64px; left: 0; width: 100%;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border);
    flex-direction: column; gap: 4px; z-index: 999;
    /* Animated expand/collapse */
    max-height: 0; overflow: hidden; padding: 0 20px;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), padding 0.35s ease;
}
.nav-links-mobile.open {
    max-height: 340px; padding: 12px 20px;
}
.nav-links-mobile a {
    font-size: 0.9rem; padding: 10px 0; color: var(--text-secondary);
    text-decoration: none; border-bottom: 1px solid var(--border);
    opacity: 0; transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-links-mobile.open a { opacity: 1; transform: translateX(0); }
.nav-links-mobile a:nth-child(1) { transition-delay: 0.05s; }
.nav-links-mobile a:nth-child(2) { transition-delay: 0.10s; }
.nav-links-mobile a:nth-child(3) { transition-delay: 0.15s; }
.nav-links-mobile a:nth-child(4) { transition-delay: 0.20s; }
.nav-links-mobile a:nth-child(5) { transition-delay: 0.25s; }
.nav-links-mobile a:last-child { border-bottom: none; }

/* ==========================================================================
   HERO SECTION — Diagonal stripes, centred content, ~90vh
   ========================================================================== */
.hero-section {
    min-height: 90vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 100px 24px 40px;
    position: relative; overflow: hidden;
    background-color: #08080a;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.022) 10px,
        rgba(255,255,255,0.022) 20px
    );
    max-width: 100%;
}
.hero-section > * { position: relative; z-index: 1; }
.hero-company {
    font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700; letter-spacing: 0.03em; margin-bottom: 1.5rem;
    color: #e4e4e7;
}
.hero-tagline {
    font-size: clamp(1rem, 2vw, 1.25rem); color: #a1a1aa;
    max-width: 640px; line-height: 1.8; font-weight: 300;
    word-break: break-word;
}

/* ==========================================================================
   FULL-PAGE SECTIONS
   ========================================================================== */
.page-section {
    min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: 80px 24px;
    border-top: 1px solid var(--border);
    position: relative;
}
.section-inner { max-width: 960px; margin: 0 auto; width: 100%; }
.section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; }
.section-heading { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; margin-bottom: 1rem; line-height: 1.3; }
.section-subtitle { font-size: 1.05rem; color: var(--text-secondary); font-style: italic; margin-bottom: 2.5rem; line-height: 1.7; }

.preview-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 24px;
    margin-bottom: 12px; cursor: pointer;
    transition: all var(--trans-smooth);
}
.research-guide-card { display: block; color: inherit; text-decoration: none; }
.preview-card:hover {
    border-color: var(--border-hover); box-shadow: var(--shadow);
    transform: translateY(-3px);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.preview-card .preview-date { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.35rem; }
.preview-card h3 { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--text-main); }
.preview-card p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.7; }

.section-cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 1.5rem; font-size: 0.85rem; font-weight: 500;
    color: var(--text-secondary); text-decoration: none;
    transition: gap var(--trans-fast), color var(--trans-fast);
}
.section-cta:hover { gap: 14px; color: var(--text-main); }

/* ---- General hyperlink styles ---- */
a {
    color: var(--text-main); text-decoration: none;
    transition: color var(--trans-fast);
}
a:hover { color: var(--text-secondary); }
a:visited { color: var(--text-main); }
a.external::after {
    content: ' ↗'; font-size: 0.75em; opacity: 0.5;
}
a[href^="http"]:not([href*="localhost"]):not([href*="sankuai"])::after {
    content: ' ↗'; font-size: 0.75em; opacity: 0.5;
}

/* ==========================================================================
   MODAL
   ========================================================================== */
.modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-box {
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 40px 32px;
    max-width: 680px; width: calc(100% - 48px); max-height: 85vh;
    overflow-y: auto; position: relative;
    box-shadow: 0 16px 64px rgba(0,0,0,0.5);
    transform: translateY(20px); transition: transform 0.3s;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-close {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none; color: var(--text-secondary);
    font-size: 1.5rem; cursor: pointer; transition: color var(--trans-fast);
}
.modal-close:hover { color: var(--text-main); }
.modal-title { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 1.5rem; line-height: 1.4; }
.modal-body { font-size: 0.95rem; line-height: 1.9; color: var(--text-secondary); }
.modal-body p { margin-bottom: 1rem; }
.modal-body h2, .modal-body h3 { color: var(--text-main); margin: 1.5rem 0 0.75rem; font-family: var(--font-display); }
.modal-body ul, .modal-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.modal-body li { margin-bottom: 0.35rem; }
.modal-body code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 3px; font-size: 0.9em; }
.modal-body strong { color: var(--text-main); }
.modal-actions { margin-top: 2rem; display: flex; gap: 12px; flex-wrap: wrap; }

/* ==========================================================================
   ARTICLE VIEWER / MARKDOWN BODY — full port from style.css
   ========================================================================== */
.article-viewer { max-width: 760px; margin: 100px auto 80px; padding: 0 24px; }
.article-viewer .back-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.85rem; color: var(--text-secondary);
    text-decoration: none; margin-bottom: 2rem; transition: color var(--trans-fast);
}
.article-viewer .back-link:hover { color: var(--text-main); }
.article-viewer h1 { font-family: var(--font-display); font-size: 2rem; margin-bottom: 1rem; }

/* ---- Core markdown styles (ported from style.css) ---- */
.markdown-body { font-size: 1rem; line-height: 1.9; color: var(--text-secondary); }
.markdown-body a {
    color: var(--text-main); text-decoration: none; font-weight: 500;
    background-image: linear-gradient(var(--text-main), var(--text-main));
    background-position: 0% 100%; background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.4s cubic-bezier(0.25,0.8,0.25,1);
}
.markdown-body a:hover { background-size: 100% 1px; }
.markdown-body a:visited { color: var(--text-secondary); }

/* Long links in blockquote/details — tooltip on hover */
.markdown-body details a, .markdown-body blockquote a {
    display: inline-block; max-width: 250px; white-space: nowrap;
    overflow: hidden; overflow: clip; overflow-clip-margin: 500px;
    text-overflow: ellipsis; vertical-align: bottom;
    position: relative; transition: color 0.3s ease;
}
.markdown-body details a::after, .markdown-body blockquote a::after {
    content: attr(href); position: absolute;
    bottom: calc(100% + 8px); left: 0;
    transform: translateY(8px) scale(0.95);
    transform-origin: left bottom;
    background: var(--glass-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border); color: var(--text-main);
    padding: 8px 14px; border-radius: 8px;
    font-size: 0.8rem; line-height: 1.5;
    white-space: normal; word-break: break-all;
    width: max-content; max-width: 320px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0; visibility: hidden; z-index: 100;
    transition: all 0.4s cubic-bezier(0.25,1,0.5,1);
    pointer-events: none;
}
.markdown-body details a:hover::after, .markdown-body blockquote a:hover::after {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.markdown-body details a:hover, .markdown-body blockquote a:hover { color: #3b82f6; }

.markdown-body h2 { font-family: var(--font-display); font-size: 1.8rem; margin: 2em 0 1em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5em; }
.markdown-body h3 { font-family: var(--font-display); font-size: 1.4rem; margin: 1.5em 0 0.8em; }
.markdown-body p { margin-bottom: 1.5em; color: var(--text-secondary); white-space: pre-wrap; display: block; }
.markdown-body blockquote { border-left: 2px solid var(--text-main); padding-left: 20px; font-style: italic; color: var(--text-light); margin: 2em 0; }
.markdown-body pre { background: #111 !important; border-radius: 6px; padding: 20px; font-size: 0.85rem; overflow-x: auto; margin: 2em 0; border: 1px solid #333; }
.markdown-body code { font-family: monospace; }
.markdown-body img { max-width: 100%; border-radius: 4px; margin: 2em 0; filter: grayscale(20%); transition: filter 0.5s; }
.markdown-body img:hover { filter: grayscale(0%); }
.markdown-body strong { color: var(--text-main); }
.markdown-body em { font-style: italic; }
.markdown-body hr { border: none; border-top: 1px solid var(--border-color); margin: 2rem 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.markdown-body li { margin-bottom: 0.35rem; }

/* Tip box */
.markdown-body .tip-box {
    background: var(--hover-bg); border-left: 3px solid var(--text-main);
    padding: 16px 20px; margin: 2em 0; border-radius: 0 8px 8px 0;
    position: relative; font-size: 0.95rem;
}
.markdown-body .tip-box::before {
    content: '!'; position: absolute; left: -12px; top: 10px;
    width: 20px; height: 20px; background: var(--text-main);
    color: var(--bg); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Reset pre-wrap inside tip boxes & details */
.markdown-body .tip-box p, .markdown-body details p, .markdown-body details blockquote p { white-space: normal !important; }
.markdown-body details summary { white-space: nowrap; }

/* ==========================================================================
   COLLAPSIBLE DETAILS — ported from style.css
   ========================================================================== */
.markdown-body details {
    border: 1px solid var(--border-color); border-radius: 12px;
    margin: 1.5em 0; background: var(--glass-bg);
    overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
}
.markdown-body details:hover { border-color: var(--text-light); box-shadow: 0 6px 24px rgba(0,0,0,0.12); }
.markdown-body details summary {
    padding: 16px 20px; cursor: pointer; font-weight: 600;
    font-size: 1rem; color: var(--text-main); outline: none;
    list-style: none; display: flex; justify-content: space-between; align-items: center;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    user-select: none; position: relative; padding-right: 60px;
}
.markdown-body details summary::-webkit-details-marker { display: none; }
.markdown-body details summary:hover { background: var(--hover-bg); padding-left: 24px; padding-right: 64px; }
.markdown-body details summary:active { transform: scale(0.98); }
.markdown-body details summary::before {
    content: ''; position: absolute; right: 18px; top: 50%;
    transform: translateY(-50%); width: 24px; height: 24px;
    background: linear-gradient(90deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
                linear-gradient(0deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
    background-size: 100% 100%; background-position: center; background-repeat: no-repeat;
    color: var(--text-muted); transition: all 0.4s cubic-bezier(0.4,0,0.2,1); z-index: 2;
}
.markdown-body details summary:hover::before { color: var(--text-main); transform: translateY(-50%) scale(1.15); }
.markdown-body details[open] summary { border-bottom: 1px solid var(--border-color); background: var(--hover-bg); padding-bottom: 14px; }
.markdown-body details[open] summary::before { transform: translateY(-50%) rotate(45deg); color: var(--text-main); }
.markdown-body details[open] summary:hover::before { transform: translateY(-50%) rotate(45deg) scale(1.15); }
.markdown-body details[open] > *:not(summary) { animation: slideDown 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.markdown-body details:not([open]) > *:not(summary) { animation: slideUp 0.4s cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes slideDown { from { opacity:0; transform:translateY(-20px); margin-top:-20px; visibility:hidden; } to { opacity:1; transform:translateY(0); margin-top:0; visibility:visible; } }
@keyframes slideUp { from { opacity:1; transform:translateY(0); margin-top:0; visibility:visible; } to { opacity:0; transform:translateY(-20px); margin-top:-20px; visibility:hidden; } }
.markdown-body details > *:not(summary) { padding: 20px; transition: all 0.3s ease; width: 100%; box-sizing: border-box; max-height: none !important; height: auto !important; }
.markdown-body details > p:not(summary) { margin: 0 0 15px 0; color: var(--text-muted); line-height: 1.8; font-size: 0.95rem; }
.markdown-body details > p:not(summary):last-child { margin-bottom: 0; }
.markdown-body details blockquote { margin: 0; padding: 16px 20px; border-left: 3px solid var(--text-light); background: var(--hover-bg); border-radius: 4px; font-style: italic; color: var(--text-muted); }

/* ==========================================================================
   CONTACT BLOCK
   ========================================================================== */
.contact-block {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 28px; margin-top: 2rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.contact-item .contact-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; }
.contact-item .contact-value { font-size: 0.95rem; color: var(--text-main); font-family: 'SF Mono', monospace; word-break: break-all; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--border); padding: 40px 24px; text-align: center; }
.site-footer .footer-copy { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; }
.site-footer .footer-copy a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-copy a:hover { color: var(--text-main); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .hero-section { min-height: 85vh; padding: 90px 24px 35px; }
    .page-section { padding: 70px 24px; }
    .nav-inner { padding: 0 20px; }
    .cygnus-body { gap: 30px; }
}

/* ==========================================================================
   RESPONSIVE — Large Mobile
   ========================================================================== */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-hamburger { display: block; }

    .hero-section { min-height: 75vh; padding: 80px 20px 30px; }
    .hero-company { letter-spacing: 0.01em; }
    .page-section { padding: 60px 20px; min-height: auto; }
    .section-heading { font-size: 1.8rem; }
    .section-subtitle { font-size: 0.95rem; margin-bottom: 2rem; }
    .modal-box { padding: 28px 20px; }
    .contact-block { grid-template-columns: 1fr; }

    /* Onboarding — restructure for mobile */
    .ob-title { font-size: 2rem; margin-bottom: 0.4rem; }
    .ob-subtitle { font-size: 0.8rem; margin-bottom: 1.8rem; letter-spacing: 3px; }
    .ob-card, .ob-disclaimer-box { 
        max-width: 100%; padding: 20px 22px; 
        font-size: 0.9rem; line-height: 1.75;
        margin-bottom: 1.5rem;
    }
    .ob-card .spoiler { padding: 0 6px; }

    /* Disclaimer reader — better mobile sizing */
    .disclaimer-reader-wrapper, .disclaimer-reader-wrap { width: 100%; max-width: 100%; padding: 0 4px; }
    .disclaimer-reader-box { 
        max-height: 50vh; 
        padding: 20px 22px; 
        font-size: 0.88rem;
        border-radius: 10px;
    }
    .disclaimer-scroll-hint { font-size: 0.75rem; margin-bottom: 0.4rem; }

    /* Language selector — responsive */
    .ob-input-wrapper, .ob-input-group { width: 100%; max-width: 320px; }
    .lang-radio-group { width: 100%; max-width: 320px; }
    .lang-radio-card { padding: 14px 16px; }
    .lang-radio-card .lang-flag { font-size: 1.3rem; }
    .lang-radio-card .lang-name { font-size: 0.88rem; }
    .lang-radio-card .lang-native { font-size: 0.72rem; }
    .lang-radio-card .lang-check { width: 18px; height: 18px; }

    /* Input fields */
    .ob-input-wrapper input, .ob-input-group input { 
        padding: 12px 16px; font-size: 0.95rem;
    }
    .ob-ip-display { width: 100%; max-width: 320px; font-size: 0.78rem; padding: 8px 12px; }

    /* Button — touch-friendly */
    .ob-btn { 
        padding: 14px 40px; font-size: 0.95rem;
        min-height: 48px; min-width: 48px;
        margin-top: 1.2rem;
    }
    .ob-btn:active { transform: scale(0.96); }

    /* Intro animation — responsive text */
    .intro-text { font-size: 1.6rem; white-space: normal; text-align: center; padding: 0 16px; }
    .intro-blue { font-size: 2rem; }
    .rest { line-height: 2rem; max-width: 200px; }
    .intro-rest { margin-right: 10px; }

    /* Cygnus card — responsive */
    .cygnus-card { 
        max-width: 90%; padding: 30px 24px;
        margin: 0 auto;
    }
    .cygnus-header { font-size: 0.65rem; letter-spacing: 2px; }
    .cygnus-body { gap: 16px; }
    .cygnus-logo { height: 50px; }
    .cygnus-title { font-size: 1.1rem; }
    .cygnus-reading { font-size: 0.8rem; }
    .cygnus-footer { font-size: 0.8rem; }

    /* Markdown body responsive */
    .markdown-body details summary { padding: 14px 16px; padding-right: 50px; font-size: 0.95rem; }
    .markdown-body details summary:hover { padding-right: 54px; }
    .markdown-body details summary::before { right: 14px; width: 20px; height: 20px; }
    .markdown-body details[open] > *:not(summary) { padding: 16px; }
    .markdown-body details > *:not(summary) { padding: 16px; }
    .markdown-body details blockquote { padding: 12px 16px; }
}

/* ==========================================================================
   RESPONSIVE — Small Mobile
   ========================================================================== */
@media (max-width: 480px) {
    .hero-section { min-height: 70vh; padding: 70px 16px 24px; }
    .hero-company { font-size: clamp(1.8rem, 8vw, 2.5rem); }
    .hero-tagline { font-size: clamp(0.85rem, 3vw, 1rem); max-width: 100%; padding: 0 8px; }
    .section-heading { font-size: 1.5rem; }
    .section-label { font-size: 0.65rem; }
    .section-subtitle { font-size: 0.88rem; }

    .page-section { padding: 48px 16px; }

    /* Onboarding — small mobile */
    .ob-title { font-size: 1.6rem; margin-bottom: 0.3rem; }
    .ob-subtitle { font-size: 0.72rem; margin-bottom: 1.4rem; letter-spacing: 2px; }
    .ob-card, .ob-disclaimer-box { padding: 16px 18px; font-size: 0.85rem; }
    .ob-card br { display: none; }
    
    .disclaimer-reader-box { 
        max-height: 45vh; 
        padding: 16px 18px; 
        font-size: 0.82rem;
    }
    .disclaimer-scroll-hint { font-size: 0.7rem; }

    .ob-input-wrapper, .ob-input-group { max-width: 280px; }
    .lang-radio-group { max-width: 280px; }
    .lang-radio-card { padding: 12px 14px; gap: 12px; }
    .lang-radio-card .lang-flag { font-size: 1.2rem; }
    .lang-radio-card .lang-name { font-size: 0.82rem; }

    .ob-ip-display { max-width: 280px; font-size: 0.72rem; }

    .ob-btn { padding: 12px 32px; font-size: 0.88rem; }

    .intro-text { font-size: 1.3rem; padding: 0 12px; }
    .intro-blue { font-size: 1.6rem; }
    .rest { line-height: 1.6rem; max-width: 160px; }
    .intro-rest { margin-right: 8px; }

    .cygnus-card { max-width: 95%; padding: 24px 18px; }
    .cygnus-header { font-size: 0.6rem; }
    .cygnus-title { font-size: 1rem; }
    .cygnus-reading { font-size: 0.75rem; }
    .cygnus-footer { font-size: 0.75rem; line-height: 1.6; }

    .preview-card { padding: 16px; }
    .site-footer { padding: 32px 16px; }
    .footer-copy { font-size: 0.7rem; }

    .markdown-body details { border-radius: 8px; margin: 1em 0; }
    .markdown-body details summary { padding: 12px 14px; padding-right: 45px; font-size: 0.88rem; }
    .markdown-body details summary::before { right: 12px; width: 18px; height: 18px; }
    .markdown-body details > *:not(summary) { padding: 14px; }
    .markdown-body details > p:not(summary) { font-size: 0.85rem; }
}

/* ==========================================================================
   RESPONSIVE — Touch-friendly interactive elements
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    .ob-btn { min-height: 48px; min-width: 48px; }
    .lang-radio-card { min-height: 52px; }
    .preview-card { min-height: 44px; }
    .nav-hamburger { min-width: 44px; min-height: 44px; }
    .theme-toggle-btn { min-width: 44px; min-height: 44px; }
    .nav-links-mobile a { min-height: 44px; }
    .section-cta { min-height: 44px; padding: 8px 0; }
}


.spoiler {
    display: inline-block;
    background-color: var(--bg);
    color: transparent;
    border-radius: 4px;
    padding: 0 4px;
    cursor: help;
    user-select: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.spoiler:hover,
.spoiler:focus {
    background-color: transparent;
    color: inherit;
}

/* DICK edition chooser — native top-layer centring, solid unless Frozen is on. */
.dick-version-dialog { position:fixed; inset:0; width:min(760px,calc(100% - 24px)); max-width:none; max-height:min(720px,calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); margin:auto; padding:0; overflow:auto; border:1px solid var(--border-color); border-radius:24px; color:var(--text-main); background:#fbfbf9; box-shadow:0 28px 100px rgba(0,0,0,.3); overscroll-behavior:contain; }
[data-theme="dark"] .dick-version-dialog { background:#11151c; }
.dick-version-dialog::backdrop { background:rgba(7,10,16,.68); backdrop-filter:blur(8px); }
.dick-version-dialog[open] { display:grid; animation:dick-dialog-in .36s cubic-bezier(.16,1,.3,1); }
.dick-version-surface { position:relative; display:grid; align-content:center; min-width:0; min-height:min(560px,calc(100dvh - 26px)); padding:clamp(28px,5vw,48px); background:#fbfbf9; }
[data-theme="dark"] .dick-version-surface { background:#11151c; }
[data-frozen="true"] .dick-version-dialog,[data-frozen="true"] .dick-version-surface { background:color-mix(in srgb,var(--bg-color) 88%,transparent); backdrop-filter:blur(30px) saturate(145%); -webkit-backdrop-filter:blur(30px) saturate(145%); }
.dick-version-close { position:absolute; top:15px; right:15px; width:42px; height:42px; border:1px solid var(--border-color); border-radius:50%; background:transparent; color:var(--text-main); font-size:1.35rem; cursor:pointer; }
.dick-version-close:hover,.dick-version-close:focus-visible { background:var(--hover-bg); outline:2px solid var(--text-main); outline-offset:2px; }
.dick-version-kicker { margin:0 0 10px; color:var(--text-muted); font-size:.68rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; }
.dick-version-surface h2 { margin:0; font:600 clamp(2rem,6vw,3.5rem)/1 'Playfair Display',serif; }
.dick-version-intro { max-width:560px; margin:16px 0 28px; color:var(--text-muted); line-height:1.7; }
.dick-version-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dick-version-option { min-width:0; display:grid; gap:12px; padding:22px; border:1px solid var(--border-color); border-radius:18px; background:rgba(127,127,127,.045); color:var(--text-main); text-align:left; cursor:pointer; transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .25s,background .25s; }
.dick-version-option:hover,.dick-version-option:focus-visible { transform:translateY(-5px); border-color:var(--text-main); background:rgba(127,127,127,.09); outline:none; }
.dick-version-option.is-last-choice { box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text-main) 28%,transparent); }
.dick-version-option strong { font:600 1.3rem/1.2 'Playfair Display',serif; }
.dick-version-option > span:not(.dick-version-index) { color:var(--text-muted); font-size:.84rem; line-height:1.55; }
.dick-version-option em { color:var(--text-main); font-size:.74rem; font-style:normal; font-weight:700; letter-spacing:.04em; }
.dick-version-index { color:var(--text-muted); font:600 .66rem/1 'Inter',sans-serif; letter-spacing:.16em; }
.dick-version-memory { margin:18px 0 0; color:var(--text-muted); font-size:.7rem; text-align:center; }
@keyframes dick-dialog-in { from { opacity:0; transform:translateY(16px) scale(.975); } }
@media(max-width:680px){.dick-version-dialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:19px}.dick-version-grid{grid-template-columns:1fr}.dick-version-surface{align-content:start;min-height:0;padding:clamp(52px,12vw,66px) clamp(16px,5vw,26px) clamp(18px,5vw,28px)}.dick-version-option{min-height:132px;padding:17px;gap:8px}.dick-version-surface h2{font-size:clamp(1.75rem,9vw,2.6rem)}.dick-version-intro{margin:12px 0 20px;font-size:.86rem}.dick-version-memory{margin-top:13px}.dick-version-close{top:10px;right:10px;min-width:44px;min-height:44px}}
@media(max-width:360px){.dick-version-dialog{width:calc(100% - 10px);max-height:calc(100dvh - 10px)}.dick-version-surface{padding-inline:13px}.dick-version-option{padding:14px}.dick-version-option>span:not(.dick-version-index){font-size:.78rem}}
@media(max-height:560px) and (orientation:landscape){.dick-version-dialog{max-height:calc(100dvh - 10px)}.dick-version-surface{align-content:start;min-height:0;padding-top:54px}.dick-version-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dick-version-option{min-height:118px}.dick-version-intro{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.dick-version-dialog[open],.dick-version-option{animation:none;transition:none}}