<style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: Arial, sans-serif; background: #ffffff; padding: 5px; display: flex; flex-direction: column; gap: 20px; }
    .demo-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #888; margin-bottom: 8px; }

    .viable-header { border-bottom: 6px solid #27aae1; padding: 0 20px; }
    .viable-header .inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }

    .logo-lockup { display: flex; align-items: center; gap: 13px; text-decoration: none; }
    .logo-mark { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .logo-text { display: flex; flex-direction: column; gap: 2px; }
    .logo-wordmark { font-family: Arial, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
    .logo-wordmark .dot { color: #27aae1; }
    .logo-sub { font-family: Arial, sans-serif; font-size: 8px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; }

    .header-nav { display: flex; align-items: center; }
    .header-nav a {
        font-family: Arial, sans-serif; font-size: 12px; font-weight: 400;
        text-decoration: none; padding: 0 13px; height: 68px;
        display: flex; align-items: center;
        border-bottom: 3px solid transparent; margin-bottom: -3px;
        letter-spacing: 0.025em; white-space: nowrap;
    }
    .header-nav a.active { font-weight: 700; border-bottom-color: #27aae1 !important; }

    /* LIGHT */
    .hdr-light { background: #ffffff; }
    .hdr-light .logo-wordmark { color: #0d1221; }
    .hdr-light .logo-sub { color: #0d1221; opacity: 0.45; }
    .hdr-light .header-nav a { color: rgba(13,18,33,0.58); }
    .hdr-light .header-nav a:hover { color: #0d1221; }
    .hdr-light .header-nav a.active { color: #27aae1; }

    /* DARK */
    .hdr-dark { background: #0d1221; }
    .hdr-dark .logo-wordmark { color: #ffffff; }
    .hdr-dark .logo-sub { color: rgba(255,255,255,0.4); }
    .hdr-dark .header-nav a { color: rgba(255,255,255,0.48); }
    .hdr-dark .header-nav a:hover { color: rgba(255,255,255,0.9); }
    .hdr-dark .header-nav a.active { color: #27aae1; }

    .page-title-bar { background: #ffffff; padding: 0px 0px; align-items: center; gap: 4px; border-top: 4px solid rgba(39,170,225,0.12); }
    .page-title-bar span { font-family: Arial; font-size: 10.5px; letter-spacing: 0.06em; }
    .bc { color: rgba(255,255,255,0.3); }
    .sep { color: #27aae1; font-size: 10px; }
    .cur { color: #27aae1; font-weight: 700; }

    .demo-body { background: #f5f6f8; height: 56px; display: flex; align-items: center; justify-content: center; border: 1px dashed #ccc; }
    .demo-body p { font-size: 11px; color: #bbb; font-family: Arial; }
</style>