/* 3-msb-activity-logic-demo meryosab electronics web devolper resume.meryosab.com */
#msb-activity-demo,
#msb-activity-demo * {
  box-sizing: border-box;
}
#msb-activity-demo {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
#msb-activity-demo .hero {
  padding-top: 46px;
}
html[data-msb-theme="light"] #msb-activity-demo {
  background: #f5f5f7 !important;
  color: #1d1d1f !important;
}
#msb-activity-demo *,
#msb-activity-demo *::before,
#msb-activity-demo *::after {
margin: 0; padding: 0; box-sizing: border-box;
}
#msb-activity-demo {
--bg: #050505;
            --surface: rgba(255,255,255,.055);
            --surface-strong: rgba(255,255,255,.09);
            --surface-soft: rgba(255,255,255,.035);
            --text: #fafafa;
            --text-soft: rgba(250,250,250,.76);
            --muted: #a1a1aa;
            --muted-2: #71717a;
            --line: rgba(255,255,255,.12);
            --line-strong: rgba(255,255,255,.22);
            --white: #ffffff;
            --black: #000000;
            --blue: #60a5fa;
            --violet: #a78bfa;
            --cyan: #67e8f9;
            --green: #86efac;
            --red: #f87171;
            --yellow: #fde68a;
            --radius-xs: 10px;
            --radius-sm: 14px;
            --radius-md: 20px;
            --radius-lg: 28px;
            --radius-xl: 36px;
            --container: 1168px;
            --ease: cubic-bezier(.16,1,.3,1);
            --tg-bg: #0E1621;
            --tg-bg-message: #182533;
            --tg-bg-message-out: #2B5278;
            --tg-text: #F5F5F5;
            --tg-text-secondary: #708499;
            --tg-blue: #2AABEE;
            --tg-green: #4FAE4E;
}
#msb-activity-demo {
-webkit-tap-highlight-color: transparent;
}
#msb-activity-demo {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            color: var(--text);
            line-height: 1.55;
            min-height: 100vh;
            overflow-x: hidden;
            background:
                radial-gradient(circle at 50% -10%, rgba(255,255,255,.18), transparent 26rem),
                radial-gradient(circle at 15% 12%, rgba(96,165,250,.18), transparent 28rem),
                radial-gradient(circle at 85% 18%, rgba(167,139,250,.14), transparent 26rem),
                linear-gradient(180deg, #070707 0%, #050505 42%, #020202 100%);
}
#msb-activity-demo button {
font-family: inherit;
}
#msb-activity-demo a {
color: inherit; text-decoration: none;
}
#msb-activity-demo .container {
width: min(var(--container), calc(100% - 40px));
            margin-inline: auto;
}
#msb-activity-demo .hero {
position: relative;
            padding: 46px 0 68px;
}
#msb-activity-demo .hero::before {
content: "";
            position: absolute;
            left: 50%;
            top: -120px;
            width: min(980px, 88vw);
            height: 520px;
            transform: translateX(-50%);
            z-index: -1;
            background:
                radial-gradient(circle at 50% 20%, rgba(255,255,255,.18), transparent 36%),
                conic-gradient(from 180deg at 50% 50%, transparent, rgba(96,165,250,.22), transparent, rgba(167,139,250,.18), transparent);
            filter: blur(24px);
            opacity: .85;
            pointer-events: none;
}
#msb-activity-demo .hero-grid {
display: grid;
            grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr);
            align-items: center;
            gap: 48px;
}
#msb-activity-demo .hero-content {
animation: fadeUp .8s var(--ease) both;
}
@keyframes fadeUp {from { opacity: 0; transform: translateY(22px); }
            to   { opacity: 1; transform: translateY(0); }}
#msb-activity-demo .eyebrow {
display: inline-flex;
            align-items: center;
            gap: 10px;
            width: fit-content;
            margin: 0 0 18px;
            padding: 8px 12px;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 999px;
            background: rgba(255,255,255,.045);
            color: var(--text-soft);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
            font-size: .82rem;
            font-weight: 760;
            letter-spacing: .04em;
            text-transform: uppercase;
}
#msb-activity-demo .eyebrow-dot {
width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--green);
            box-shadow: 0 0 0 5px rgba(134,239,172,.1), 0 0 22px rgba(134,239,172,.5);
}
#msb-activity-demo h1 {
max-width: 850px;
            margin: 0 0 24px;
            font-size: clamp(2.9rem, 5.6vw, 4.6rem);
            font-weight: 820;
            letter-spacing: -.065em;
            line-height: .96;
}
#msb-activity-demo .title-line {
display: block;
}
#msb-activity-demo .title-highlight {
position: relative;
            display: inline-block;
            color: transparent;
            background: linear-gradient(90deg, #fff 0%, #dbeafe 34%, #a78bfa 62%, #fff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: 0 0 80px rgba(255,255,255,.22);
}
#msb-activity-demo .hero-copy {
max-width: 560px;
            margin: 0 0 28px;
            color: var(--muted);
            font-size: 1.05rem;
}
#msb-activity-demo .trust-strip {
display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px;
            margin-top: 28px;
}
#msb-activity-demo .trust-pill {
display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 38px;
            padding: 8px 11px;
            border: 1px solid rgba(255,255,255,.11);
            border-radius: 999px;
            background: rgba(255,255,255,.04);
            color: var(--muted);
            font-size: .88rem;
            font-weight: 620;
}
#msb-activity-demo .trust-icon {
width: 17px; height: 17px; color: var(--green); flex-shrink: 0;
}
#msb-activity-demo .hero-visual {
position: relative;
            min-height: 560px;
            perspective: 1200px;
            animation: fadeUp .8s var(--ease) .12s both;
}
#msb-activity-demo .hero-card {
position: absolute;
            border: 1px solid rgba(255,255,255,.13);
            background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
            box-shadow: 0 30px 120px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
            overflow: hidden;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
}
#msb-activity-demo .hero-card-main {
inset: 24px 0 auto auto;
            width: min(100%, 510px);
            min-height: 470px;
            border-radius: 32px;
            transform: rotateY(-7deg) rotateX(4deg) rotateZ(1deg);
            transform-style: preserve-3d;
}
#msb-activity-demo .hero-card-main::before {
content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 78% 0%, rgba(96,165,250,.25), transparent 28%),
                radial-gradient(circle at 8% 90%, rgba(167,139,250,.18), transparent 32%);
            pointer-events: none;
}
#msb-activity-demo .terminal-top {
position: relative;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 16px 18px;
            border-bottom: 1px solid rgba(255,255,255,.1);
            background: rgba(0,0,0,.34);
}
#msb-activity-demo .terminal-dot {
width: 11px;
            height: 11px;
            border-radius: 999px;
            background: rgba(255,255,255,.28);
}
#msb-activity-demo .terminal-dot:nth-child(1) {
background: var(--red);
}
#msb-activity-demo .terminal-dot:nth-child(2) {
background: var(--yellow);
}
#msb-activity-demo .terminal-dot:nth-child(3) {
background: var(--green);
}
#msb-activity-demo .terminal-title {
margin-inline-start: 8px;
            color: var(--muted);
            font-size: .82rem;
            font-weight: 650;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
}
#msb-activity-demo .terminal-body {
position: relative; padding: 26px;
}
#msb-activity-demo .code-line {
display: flex;
            gap: 13px;
            margin-bottom: 12px;
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
            font-size: clamp(.78rem, 1.5vw, .92rem);
            color: rgba(250,250,250,.8);
            white-space: nowrap;
}
#msb-activity-demo .line-number {
width: 26px;
            color: rgba(255,255,255,.28);
            text-align: right;
            user-select: none;
            flex-shrink: 0;
}
#msb-activity-demo .token-red {
color: #fda4af;
}
#msb-activity-demo .token-yellow {
color: #fde68a;
}
#msb-activity-demo .token-purple {
color: #c4b5fd;
}
#msb-activity-demo .token-blue {
color: #93c5fd;
}
#msb-activity-demo .token-green {
color: #86efac;
}
#msb-activity-demo .build-status {
position: relative;
            margin-top: 30px;
            padding: 16px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 20px;
            background: rgba(0,0,0,.28);
            overflow: hidden;
}
#msb-activity-demo .build-status::before {
content: "";
            position: absolute;
            inset: 0 0 auto;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(134,239,172,.8), transparent);
            animation: scan 3.6s linear infinite;
}
@keyframes scan {0%   { transform: translateX(-100%); }
            100% { transform: translateX(100%); }}
#msb-activity-demo .status-row {
display: flex;
            justify-content: space-between;
            gap: 14px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,.08);
            color: var(--text-soft);
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
            font-size: .86rem;
}
#msb-activity-demo .status-row:last-child {
border-bottom: 0;
}
#msb-activity-demo .status-ok {
color: var(--green); font-weight: 800;
}
#msb-activity-demo .hero-badge {
position: absolute;
            z-index: 3;
            width: 174px;
            padding: 16px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: 24px;
            background: rgba(255,255,255,.075);
            box-shadow: 0 22px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
}
#msb-activity-demo .hero-badge strong {
display: block;
            font-size: 2rem;
            font-weight: 820;
            letter-spacing: -.07em;
            line-height: .9;
}
#msb-activity-demo .hero-badge span {
display: block;
            margin-top: 8px;
            color: var(--muted);
            font-size: .84rem;
            line-height: 1.25;
}
#msb-activity-demo .hero-badge-one {
left: 0;   top: 0;
}
#msb-activity-demo .hero-badge-two {
right: 12px; bottom: 24px;
}
#msb-activity-demo .hero-badge-three {
left: 14px; bottom: 104px;
}
#msb-activity-demo .hero-badge::after {
content: "";
            position: absolute;
            width: 42px;
            height: 42px;
            right: 14px;
            top: 14px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,.72), transparent 60%);
            filter: blur(10px);
            opacity: .5;
            pointer-events: none;
}
#msb-activity-demo .demo {
position: relative;
            padding: 60px 0 96px;
}
#msb-activity-demo .section-header {
max-width: 720px;
            margin-bottom: 44px;
}
#msb-activity-demo h2 {
margin: 0 0 14px;
            font-size: clamp(2rem, 4.2vw, 3rem);
            font-weight: 820;
            letter-spacing: -.06em;
            line-height: 1;
}
#msb-activity-demo .section-lead {
color: var(--muted);
            font-size: 1.05rem;
            max-width: 640px;
}
#msb-activity-demo .demo-grid {
display: grid;
            grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
            gap: clamp(20px, 3vw, 36px);
            align-items: start;
}
#msb-activity-demo .control-panel {
position: sticky;
            top: 84px;
            display: grid;
            min-width: 0;
}
#msb-activity-demo .glass-card {
border: 1px solid rgba(255,255,255,.13);
            background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
            box-shadow: 0 30px 120px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
            border-radius: var(--radius-lg);
            overflow: hidden;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
}
#msb-activity-demo .panel-body {
padding: 24px;
            display: grid;
            gap: 16px;
}
#msb-activity-demo .panel-title {
font-size: 16px;
            font-weight: 760;
            letter-spacing: -.01em;
            display: flex;
            align-items: center;
            gap: 8px;
}
#msb-activity-demo .panel-title svg {
width: 20px;
            height: 20px;
            color: var(--blue);
            flex-shrink: 0;
}
#msb-activity-demo .status-indicator {
display: flex;
            align-items: center;
            gap: 8px;
            width: fit-content;
            padding: 8px 12px;
            border: 1px solid rgba(255,255,255,.11);
            border-radius: 999px;
            background: rgba(255,255,255,.04);
            color: var(--text-soft);
            font-size: .84rem;
            font-weight: 620;
}
#msb-activity-demo .status-dot {
width: 8px;
            height: 8px;
            border-radius: 999px;
            background: var(--green);
            box-shadow: 0 0 0 5px rgba(134,239,172,.1), 0 0 22px rgba(134,239,172,.5);
            animation: pulse-dot 2s infinite;
            flex-shrink: 0;
}
@keyframes pulse-dot {0%, 100% { opacity: 1; }
            50% { opacity: .4; }}
#msb-activity-demo .btn-grid {
display: grid;
            gap: 10px;
}
#msb-activity-demo .action-btn {
position: relative;
            isolation: isolate;
            width: 100%;
            min-height: 58px;
            padding: 10px 14px;
            border: 1px solid rgba(255,255,255,.14);
            border-radius: var(--radius-md);
            background: rgba(255,255,255,.04);
            color: var(--text);
            font-size: 13px;
            font-weight: 560;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            text-align: start;
            overflow: hidden;
            transition:
                transform .24s var(--ease),
                border-color .24s var(--ease),
                background .24s var(--ease),
                box-shadow .24s var(--ease);
}
#msb-activity-demo .action-btn::before {
content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
            transform: translateX(-115%);
            transition: transform .7s var(--ease);
}
#msb-activity-demo .action-btn:hover,
#msb-activity-demo .action-btn:focus-visible {
transform: translateY(-2px);
            border-color: rgba(255,255,255,.3);
            box-shadow: 0 14px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
}
#msb-activity-demo .action-btn:hover::before {
transform: translateX(115%);
}
#msb-activity-demo .action-btn .icon {
width: 38px;
            height: 38px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 18px;
}
#msb-activity-demo .action-btn .icon.blue {
background: rgba(96,165,250,.14);
}
#msb-activity-demo .action-btn .icon.green {
background: rgba(134,239,172,.13);
}
#msb-activity-demo .action-btn .icon.orange {
background: rgba(253,230,138,.13);
}
#msb-activity-demo .action-btn .icon.red {
background: rgba(248,113,113,.13);
}
#msb-activity-demo .action-btn .icon.purple {
background: rgba(167,139,250,.14);
}
#msb-activity-demo .action-btn .label {
flex: 1;
            min-width: 0;
}
#msb-activity-demo .action-btn .label strong {
display: block;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 2px;
}
#msb-activity-demo .action-btn .label span {
font-size: 11px;
            color: var(--muted);
}
#msb-activity-demo .action-btn .arrow {
color: var(--muted-2);
            flex-shrink: 0;
            display: inline-flex;
}
#msb-activity-demo .reset-btn {
position: relative;
            isolation: isolate;
            width: 100%;
            min-height: 44px;
            padding: 11px 16px;
            border: 1px solid rgba(248,113,113,.25);
            border-radius: 999px;
            background: rgba(248,113,113,.06);
            color: #fca5a5;
            font-size: .9rem;
            font-weight: 720;
            cursor: pointer;
            overflow: hidden;
            transition:
                transform .24s var(--ease),
                border-color .24s var(--ease),
                box-shadow .24s var(--ease);
}
#msb-activity-demo .reset-btn:hover,
#msb-activity-demo .reset-btn:focus-visible {
transform: translateY(-2px);
            border-color: rgba(248,113,113,.45);
            box-shadow: 0 14px 40px rgba(0,0,0,.35);
}
#msb-activity-demo .phones-container {
display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
            gap: clamp(18px, 2.5vw, 28px);
            min-width: 0;
}
#msb-activity-demo .phone-wrapper {
display: grid;
            justify-items: center;
            gap: 12px;
            min-width: 0;
            align-content: start;
}
#msb-activity-demo .phone-label {
display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 34px;
            padding: 7px 12px;
            border: 1px solid rgba(255,255,255,.11);
            border-radius: 999px;
            background: rgba(255,255,255,.04);
            color: var(--muted);
            font-size: .84rem;
            font-weight: 660;
}
#msb-activity-demo .phone-label .dot {
width: 8px;
            height: 8px;
            border-radius: 999px;
            flex-shrink: 0;
}
#msb-activity-demo .phone-label .dot.blue {
background: var(--blue);  box-shadow: 0 0 14px rgba(96,165,250,.6);
}
#msb-activity-demo .phone-label .dot.green {
background: var(--green); box-shadow: 0 0 14px rgba(134,239,172,.6);
}
#msb-activity-demo .phone {
width: 100%;
            max-width: 380px;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: var(--radius-xl);
            background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
            box-shadow: 0 30px 120px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.09);
            padding: 12px;
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
}
#msb-activity-demo .phone-screen {
border-radius: 26px;
            overflow: hidden;
            height: clamp(480px, 72vh, 640px);
            display: flex;
            flex-direction: column;
            background: var(--tg-bg);
}
#msb-activity-demo .tg-app {
flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
}
#msb-activity-demo .tg-header {
padding: 12px 16px;
            background: var(--tg-bg-message);
            border-bottom: 1px solid rgba(255,255,255,.06);
            display: flex;
            align-items: center;
            gap: 12px;
            flex-shrink: 0;
}
#msb-activity-demo .tg-back {
color: var(--tg-blue);
            font-size: 20px;
            cursor: default;
            line-height: 1;
}
#msb-activity-demo .tg-avatar {
width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
}
#msb-activity-demo .tg-avatar.group {
background: linear-gradient(135deg, #2AABEE, #229ED9);
}
#msb-activity-demo .tg-avatar.bot {
background: linear-gradient(135deg, #4FAE4E, #3d8b3d);
}
#msb-activity-demo .tg-chat-info {
flex: 1;
            min-width: 0;
}
#msb-activity-demo .tg-chat-name {
font-size: 15px;
            font-weight: 600;
            color: var(--tg-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
}
#msb-activity-demo .tg-chat-status {
font-size: 12px;
            color: var(--tg-text-secondary);
}
#msb-activity-demo .tg-messages {
flex: 1;
            overflow-y: auto;
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            scroll-behavior: smooth;
            min-height: 0;
}
#msb-activity-demo .tg-messages::-webkit-scrollbar {
width: 4px;
}
#msb-activity-demo .tg-messages::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.1);
            border-radius: 2px;
}
#msb-activity-demo .tg-msg {
max-width: 85%;
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 13px;
            line-height: 1.5;
            animation: msgIn .3s ease-out;
            position: relative;
            overflow-wrap: break-word;
            word-break: break-word;
}
@keyframes msgIn {from { opacity: 0; transform: translateY(10px) scale(.95); }
            to   { opacity: 1; transform: translateY(0) scale(1); }}
#msb-activity-demo .tg-msg.incoming {
background: var(--tg-bg-message);
            color: var(--tg-text);
            align-self: flex-start;
            border-end-start-radius: 4px;
}
#msb-activity-demo .tg-msg.outgoing {
background: var(--tg-bg-message-out);
            color: var(--tg-text);
            align-self: flex-end;
            border-end-end-radius: 4px;
}
#msb-activity-demo .tg-msg.system {
background: rgba(42,171,238,.1);
            color: var(--tg-blue);
            align-self: center;
            font-size: 12px;
            text-align: center;
            max-width: 90%;
            padding: 6px 14px;
            border-radius: 10px;
}
#msb-activity-demo .tg-msg .sender {
font-size: 12px;
            font-weight: 600;
            color: var(--tg-blue);
            margin-bottom: 4px;
}
#msb-activity-demo .tg-msg .time {
font-size: 10px;
            color: var(--tg-text-secondary);
            text-align: end;
            margin-top: 4px;
}
#msb-activity-demo .tg-msg .topic-tag {
display: inline-block;
            padding: 2px 8px;
            background: rgba(42,171,238,.15);
            border-radius: 4px;
            font-size: 11px;
            color: var(--tg-blue);
            margin-bottom: 6px;
            font-weight: 500;
}
#msb-activity-demo .tg-bot-btn {
display: inline-block;
            padding: 6px 14px;
            background: rgba(42,171,238,.12);
            border: 1px solid rgba(42,171,238,.2);
            border-radius: 8px;
            color: var(--tg-blue);
            font-size: 13px;
            font-weight: 500;
            margin: 2px 4px 2px 0;
            cursor: default;
}
#msb-activity-demo .tg-input-bar {
padding: 10px 16px;
            background: var(--tg-bg-message);
            border-top: 1px solid rgba(255,255,255,.06);
            display: flex;
            align-items: center;
            gap: 10px;
            flex-shrink: 0;
}
#msb-activity-demo .tg-input {
flex: 1;
            min-width: 0;
            padding: 8px 14px;
            background: rgba(255,255,255,.06);
            border: none;
            border-radius: 20px;
            color: var(--tg-text);
            font-size: 14px;
}
#msb-activity-demo .tg-input::placeholder {
color: var(--tg-text-secondary);
}
#msb-activity-demo .tg-send-btn {
width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--tg-blue);
            border: none;
            color: white;
            font-size: 18px;
            cursor: default;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
}
#msb-activity-demo .tg-topic-header {
text-align: center;
            padding: 6px 12px;
            margin: 8px 0;
            font-size: 12px;
            color: var(--tg-text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
}
#msb-activity-demo .tg-topic-header::before,
#msb-activity-demo .tg-topic-header::after {
content: "";
            flex: 1;
            height: 1px;
            background: rgba(255,255,255,.08);
}
@media (max-width: 1080px) {
#msb-activity-demo .hero-grid {
grid-template-columns: 1fr;
}
#msb-activity-demo .hero-visual {
min-height: 560px;
}
#msb-activity-demo .hero-card-main {
left: 3%;
                right: 3%;
                width: auto;
                transform: none;
}
#msb-activity-demo .demo-grid {
grid-template-columns: 1fr;
}
#msb-activity-demo .control-panel {
position: static;
}
}
@media (max-width: 740px) {
#msb-activity-demo .hero {
padding-top: 36px;
}
#msb-activity-demo h1 {
font-size: clamp(2.6rem, 12vw, 4rem);
}
#msb-activity-demo .hero-visual {
min-height: 520px;
}
#msb-activity-demo .hero-card-main {
min-height: 440px; top: 24px;
}
#msb-activity-demo .terminal-body {
padding: 18px; overflow: hidden;
}
#msb-activity-demo .code-line {
font-size: .76rem;
}
#msb-activity-demo .hero-badge {
width: 148px; padding: 13px;
}
#msb-activity-demo .hero-badge strong {
font-size: 1.55rem;
}
#msb-activity-demo .hero-badge-two {
right: 0; bottom: 8px;
}
#msb-activity-demo .hero-badge-three {
left: 0; bottom: 92px;
}
#msb-activity-demo .phone-screen {
height: clamp(440px, 70vh, 580px);
}
}
@media (max-width: 520px) {
#msb-activity-demo .container {
width: min(100% - 24px, var(--container));
}
#msb-activity-demo .hero {
padding: 30px 0 44px;
}
#msb-activity-demo .demo {
padding: 44px 0 64px;
}
#msb-activity-demo .hero-visual {
min-height: 420px;
}
#msb-activity-demo .hero-card-main {
min-height: 400px; top: 16px;
}
#msb-activity-demo .phone {
border-radius: 30px; padding: 10px;
}
#msb-activity-demo .phone-screen {
border-radius: 22px;
}
#msb-activity-demo .panel-body {
padding: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
#msb-activity-demo *,
#msb-activity-demo *::before,
#msb-activity-demo *::after {
animation-duration: .01ms !important;
                transition-duration: .01ms !important;
}
}
#msb-activity-demo {
background: var(--bg) !important;
}
#msb-activity-demo .hero::before {
display: none !important;
            content: none !important;
            background: none !important;
            filter: none !important;
}
html[data-msb-theme="light"] #msb-activity-demo {
--bg: #f5f5f7;
            --surface: rgba(255,255,255,.78);
            --surface-strong: rgba(255,255,255,.94);
            --surface-soft: rgba(0,0,0,.035);
            --text: #1d1d1f;
            --text-soft: rgba(29,29,31,.76);
            --muted: #6e6e73;
            --muted-2: #86868b;
            --line: rgba(0,0,0,.10);
            --line-strong: rgba(0,0,0,.18);
            --white: #1d1d1f;
            --black: #ffffff;
            --blue: #005bbd;
            --violet: #5b45a8;
            --cyan: #007c89;
            --green: #227a45;
            --red: #b42318;
            --yellow: #8a6200;
}
html[data-msb-theme="light"] #msb-activity-demo {
background: #f5f5f7 !important;
            color: #1d1d1f !important;
}
html[data-msb-theme="light"] #msb-activity-demo .title-highlight {
background: linear-gradient(90deg, #1d1d1f 0%, #374151 48%, #1d1d1f 100%);
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: none;
}
html[data-msb-theme="light"] #msb-activity-demo .eyebrow,
html[data-msb-theme="light"] #msb-activity-demo .trust-pill,
html[data-msb-theme="light"] #msb-activity-demo .hero-badge,
html[data-msb-theme="light"] #msb-activity-demo .status-indicator,
html[data-msb-theme="light"] #msb-activity-demo .phone-label {
border-color: rgba(0,0,0,.12) !important;
            background: rgba(255,255,255,.86) !important;
            color: #424245 !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 22px rgba(0,0,0,.045) !important;
}
html[data-msb-theme="light"] #msb-activity-demo .hero-card,
html[data-msb-theme="light"] #msb-activity-demo .glass-card {
border-color: rgba(0,0,0,.12) !important;
            background: rgba(255,255,255,.86) !important;
            color: #1d1d1f !important;
            box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 48px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.72) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
}
html[data-msb-theme="light"] #msb-activity-demo .hero-card-main::before,
html[data-msb-theme="light"] #msb-activity-demo .hero-badge::after,
html[data-msb-theme="light"] #msb-activity-demo .terminal-top {
border-bottom-color: rgba(0,0,0,.10) !important;
            background: rgba(0,0,0,.055) !important;
}
html[data-msb-theme="light"] #msb-activity-demo .terminal-title,
html[data-msb-theme="light"] #msb-activity-demo .hero-badge span,
html[data-msb-theme="light"] #msb-activity-demo .action-btn .label span {
color: #6e6e73 !important;
}
html[data-msb-theme="light"] #msb-activity-demo .code-line {
color: rgba(29,29,31,.78) !important;
}
html[data-msb-theme="light"] #msb-activity-demo .line-number {
color: rgba(29,29,31,.32) !important;
}
html[data-msb-theme="light"] #msb-activity-demo .build-status,
html[data-msb-theme="light"] #msb-activity-demo .action-btn,
html[data-msb-theme="light"] #msb-activity-demo .demo-hint {
border-color: rgba(0,0,0,.12) !important;
            background: rgba(255,255,255,.82) !important;
            color: #1d1d1f !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.72) !important;
}
html[data-msb-theme="light"] #msb-activity-demo .action-btn:hover,
html[data-msb-theme="light"] #msb-activity-demo .action-btn:focus-visible {
border-color: rgba(0,0,0,.20) !important;
            background: #ffffff !important;
            box-shadow: 0 12px 28px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.82) !important;
}
html[data-msb-theme="light"] #msb-activity-demo .reset-btn {
border-color: rgba(180,35,24,.24) !important;
            background: rgba(180,35,24,.055) !important;
            color: #b42318 !important;
}
html[data-msb-theme="light"] #msb-activity-demo .tg-window,
html[data-msb-theme="light"] #msb-activity-demo .phone {
box-shadow: 0 18px 46px rgba(0,0,0,.16) !important;
}
html[data-msb-theme="light"] #msb-activity-demo .tg-topic-header::before,
html[data-msb-theme="light"] #msb-activity-demo .tg-topic-header::after {
background: rgba(0,0,0,.10) !important;
}
        /* Main page visual alignment: explicit heading colors + dark hero terminal on light theme. */
        #msb-activity-demo h1,
        #msb-activity-demo h2,
        #msb-activity-demo h3,
        #msb-activity-demo .title-line {
            color: var(--text) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo h1,
        html[data-msb-theme="light"] #msb-activity-demo h2,
        html[data-msb-theme="light"] #msb-activity-demo h3,
        html[data-msb-theme="light"] #msb-activity-demo .title-line {
            color: #1d1d1f !important;
            -webkit-text-fill-color: currentColor;
        }
        html[data-msb-theme="light"] #msb-activity-demo .title-highlight {
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
            background: linear-gradient(90deg, #1d1d1f 0%, #374151 48%, #1d1d1f 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            text-shadow: none !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card.hero-card-main,
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main {
            background: #0f172a !important;
            color: #f8fafc !important;
            border-color: rgba(0,0,0,.16) !important;
            box-shadow: 0 30px 100px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.09) !important;
            backdrop-filter: blur(18px) !important;
            -webkit-backdrop-filter: blur(18px) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .terminal-top {
            background: rgba(0,0,0,.36) !important;
            border-bottom-color: rgba(255,255,255,.10) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .terminal-title {
            color: rgba(248,250,252,.72) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .terminal-body {
            color: #f8fafc !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .code-line {
            color: rgba(248,250,252,.82) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .line-number {
            color: rgba(248,250,252,.34) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .build-status {
            background: rgba(255,255,255,.055) !important;
            border-color: rgba(255,255,255,.14) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
            color: #f8fafc !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .status-row {
            color: rgba(248,250,252,.78) !important;
            border-bottom-color: rgba(255,255,255,.08) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .status-ok {
            color: #86efac !important;
        }
        /* Final composition pass: align spacing, typography and hero visual with the main page. */
        #msb-activity-demo .hero {
            padding: clamp(16px, 2.4vw, 28px) 0 68px !important;
        }
        #msb-activity-demo .hero-grid {
            grid-template-columns: minmax(0, 1.04fr) minmax(380px, .96fr) !important;
            align-items: center !important;
            gap: clamp(40px, 4vw, 58px) !important;
        }
        #msb-activity-demo h1 {
            max-width: 930px !important;
            margin: 0 0 24px !important;
            color: var(--text) !important;
            font-size: clamp(3.4rem, 8vw, 6.8rem) !important;
            font-weight: 820 !important;
            letter-spacing: -.075em !important;
            line-height: .93 !important;
        }
        #msb-activity-demo .title-line {
            color: var(--text) !important;
        }
        #msb-activity-demo .hero-content .trust-strip {
            margin-top: 0 !important;
        }
        #msb-activity-demo .hero-visual {
            min-height: 610px !important;
        }
        #msb-activity-demo .hero-card-main {
            width: min(100%, 510px) !important;
            min-height: 535px !important;
            border-radius: 32px !important;
        }
        #msb-activity-demo .terminal-body {
            padding: 26px !important;
        }
        #msb-activity-demo .demo {
            padding: 82px 0 96px !important;
        }
        #msb-activity-demo .section-header {
            max-width: 930px !important;
            margin-bottom: 34px !important;
        }
        #msb-activity-demo h2 {
            margin: 0 0 14px !important;
            color: var(--text) !important;
            font-size: clamp(2.35rem, 5.7vw, 5rem) !important;
            font-weight: 780 !important;
            letter-spacing: -.075em !important;
            line-height: .93 !important;
        }
        #msb-activity-demo .section-lead {
            max-width: 760px !important;
            color: var(--muted) !important;
            font-size: 1.04rem !important;
            line-height: 1.55 !important;
        }
        #msb-activity-demo .glass-card,
        #msb-activity-demo .phone,
        #msb-activity-demo .hero-card,
        #msb-activity-demo .hero-badge {
            box-shadow: 0 24px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo h1,
        html[data-msb-theme="light"] #msb-activity-demo h2,
        html[data-msb-theme="light"] #msb-activity-demo h3,
        html[data-msb-theme="light"] #msb-activity-demo .title-line {
            color: #1d1d1f !important;
            -webkit-text-fill-color: currentColor !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .title-highlight {
            color: transparent !important;
            -webkit-text-fill-color: transparent !important;
            background: linear-gradient(90deg, #1d1d1f 0%, #374151 48%, #1d1d1f 100%) !important;
            -webkit-background-clip: text !important;
            background-clip: text !important;
            text-shadow: none !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .section-lead,
        html[data-msb-theme="light"] #msb-activity-demo .demo-hint,
        html[data-msb-theme="light"] #msb-activity-demo .trust-pill,
        html[data-msb-theme="light"] #msb-activity-demo .hero-badge span,
        html[data-msb-theme="light"] #msb-activity-demo .phone-label,
        html[data-msb-theme="light"] #msb-activity-demo .action-btn .label span {
            color: #5f6368 !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main {
            background: #0f172a !important;
            color: #f8fafc !important;
            border-color: rgba(0,0,0,.16) !important;
            box-shadow: 0 30px 100px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.09) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .terminal-top {
            background: rgba(0,0,0,.36) !important;
            border-bottom-color: rgba(255,255,255,.10) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .terminal-title,
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .code-line,
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .status-row {
            color: rgba(248,250,252,.78) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .line-number {
            color: rgba(248,250,252,.34) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .build-status {
            background: rgba(255,255,255,.055) !important;
            border-color: rgba(255,255,255,.14) !important;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .hero-card-main .status-ok {
            color: #86efac !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .glass-card,
        html[data-msb-theme="light"] #msb-activity-demo .hero-badge {
            background: rgba(255,255,255,.90) !important;
            border-color: rgba(0,0,0,.14) !important;
            color: #1d1d1f !important;
            box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 55px rgba(0,0,0,.075), inset 0 1px 0 rgba(255,255,255,.75) !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .phone {
            background: rgba(255,255,255,.88) !important;
            border-color: rgba(0,0,0,.14) !important;
            box-shadow: 0 18px 46px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.72) !important;
        }
        @media (max-width: 1080px) {
            #msb-activity-demo .hero-grid {
                grid-template-columns: 1fr !important;
            }
            #msb-activity-demo .hero-visual {
                min-height: 590px !important;
            }
            #msb-activity-demo .hero-card-main {
                left: 3% !important;
                right: 3% !important;
                width: auto !important;
                transform: none !important;
            }
        }
        @media (max-width: 740px) {
            #msb-activity-demo .hero {
                padding-top: 18px !important;
                padding-bottom: 44px !important;
            }
            #msb-activity-demo h1 {
                font-size: clamp(3.15rem, 15.8vw, 5.2rem) !important;
            }
            #msb-activity-demo .hero-visual {
                min-height: 522px !important;
            }
            #msb-activity-demo .hero-card-main {
                min-height: 455px !important;
                top: 30px !important;
            }
            #msb-activity-demo .terminal-body {
                padding: 18px !important;
                overflow: hidden !important;
            }
            #msb-activity-demo .hero-badge {
                width: 144px !important;
                padding: 13px !important;
            }
            #msb-activity-demo .hero-badge strong {
                font-size: 1.55rem !important;
            }
            #msb-activity-demo .hero-badge-two {
                right: 0 !important;
                bottom: 6px !important;
            }
            #msb-activity-demo .hero-badge-three {
                left: 0 !important;
                bottom: 92px !important;
            }
            #msb-activity-demo .demo {
                padding: 58px 0 74px !important;
            }
            #msb-activity-demo h2 {
                font-size: clamp(2.05rem, 11vw, 3.5rem) !important;
                line-height: .98 !important;
            }
        }
        @media (max-width: 520px) {
            #msb-activity-demo .hero {
                padding: 16px 0 40px !important;
            }
            #msb-activity-demo h1 {
                font-size: clamp(2.65rem, 14vw, 4.4rem) !important;
            }
            #msb-activity-demo .hero-visual {
                min-height: 430px !important;
            }
            #msb-activity-demo .hero-card-main {
                min-height: 400px !important;
                top: 16px !important;
            }
        }
        /* Final stability patch: stable typography and geometry on theme switch. */
        #msb-activity-demo,
        #msb-activity-demo :where(button, input, textarea, select, p, span, strong, div, section, article, h1, h2, h3) {
            font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        }
        #msb-activity-demo .code-line,
        #msb-activity-demo .status-row {
            font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
        }
        #msb-activity-demo .hero,
        #msb-activity-demo .demo,
        #msb-activity-demo .demo-grid,
        #msb-activity-demo .control-panel,
        #msb-activity-demo .phones-container,
        #msb-activity-demo .phone-wrapper,
        #msb-activity-demo .phone,
        #msb-activity-demo .phone-screen,
        #msb-activity-demo .glass-card,
        #msb-activity-demo .action-btn {
            box-sizing: border-box !important;
        }
        #msb-activity-demo .glass-card,
        #msb-activity-demo .phone,
        #msb-activity-demo .hero-card,
        #msb-activity-demo .hero-badge,
        #msb-activity-demo .action-btn,
        #msb-activity-demo .trust-pill,
        #msb-activity-demo .eyebrow,
        #msb-activity-demo .status-indicator,
        #msb-activity-demo .phone-label {
            border-width: 1px !important;
        }
        html[data-msb-theme="light"] #msb-activity-demo .demo,
        html[data-msb-theme="light"] #msb-activity-demo .hero {
            background: transparent !important;
        }