/* 6-msb-activity-time-reports meryosab electronics web devolper resume.meryosab.com */
#msb-activity-5,
#msb-activity-5 * { box-sizing: border-box; }
#msb-activity-5 {
  --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;
  --cyan: #67e8f9;
  --violet: #a78bfa;
  --green: #86efac;
  --yellow: #fde68a;
  --red: #f87171;
  --container: 1168px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  overflow: hidden;
}
html[data-msb-theme="light"] #msb-activity-5 {
  --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;
  --cyan: #007c89;
  --violet: #5b45a8;
  --green: #227a45;
  --yellow: #8a6200;
  --red: #b42318;
  background: #f5f5f7;
}
#msb-activity-5 a { color: inherit; text-decoration: none; }
#msb-activity-5 svg { display: block; }
#msb-activity-5 .container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
#msb-activity-5 .section { padding: 82px 0; }
#msb-activity-5 .hero { padding: clamp(54px, 7vw, 88px) 0 76px; }
#msb-activity-5 .hero-grid,
#msb-activity-5 .split { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr); align-items: center; gap: clamp(40px, 4vw, 58px); }
#msb-activity-5 .section-header { display: grid; grid-template-columns: minmax(0,.95fr) minmax(280px,.52fr); align-items: end; gap: 32px; margin-bottom: 34px; }
#msb-activity-5 .eyebrow,
#msb-activity-5 .kicker,
#msb-activity-5 .tag,
#msb-activity-5 .metric-label,
#msb-activity-5 .status-chip { display: inline-flex; align-items: center; width: fit-content; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.045); color: var(--text-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); line-height: 1; }
html[data-msb-theme="light"] #msb-activity-5 .eyebrow,
html[data-msb-theme="light"] #msb-activity-5 .kicker,
html[data-msb-theme="light"] #msb-activity-5 .tag,
html[data-msb-theme="light"] #msb-activity-5 .metric-label,
html[data-msb-theme="light"] #msb-activity-5 .status-chip { background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.14); color: #424245; box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 22px rgba(0,0,0,.045); }
#msb-activity-5 .eyebrow,
#msb-activity-5 .kicker { gap: 9px; margin: 0 0 16px; padding: 7px 11px; font-size: .78rem; font-weight: 740; letter-spacing: .08em; text-transform: uppercase; }
#msb-activity-5 .eyebrow-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 0 5px rgba(103,232,249,.12), 0 0 22px rgba(103,232,249,.55); }
#msb-activity-5 h1,
#msb-activity-5 h2,
#msb-activity-5 h3,
#msb-activity-5 h4 { margin: 0; color: var(--text); letter-spacing: -.065em; line-height: .96; }
html[data-msb-theme="light"] #msb-activity-5 h1,
html[data-msb-theme="light"] #msb-activity-5 h2,
html[data-msb-theme="light"] #msb-activity-5 h3,
html[data-msb-theme="light"] #msb-activity-5 h4 { color: #1d1d1f; }
#msb-activity-5 h1 { max-width: 930px; font-size: clamp(3.25rem, 7.8vw, 6.7rem); font-weight: 820; letter-spacing: -.075em; line-height: .93; }
#msb-activity-5 h2 { max-width: 930px; font-size: clamp(2.35rem, 5.7vw, 5rem); font-weight: 780; letter-spacing: -.075em; line-height: .94; }
#msb-activity-5 h3 { font-size: clamp(1.22rem, 2.4vw, 1.65rem); font-weight: 760; letter-spacing: -.045em; line-height: 1.08; }
#msb-activity-5 h4 { font-size: 1rem; font-weight: 760; letter-spacing: -.03em; line-height: 1.12; }
#msb-activity-5 p { color: var(--muted); }
#msb-activity-5 .lead { max-width: 760px; margin: 22px 0 0; color: var(--text-soft); font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.56; }
#msb-activity-5 .section-lead { margin: 0; max-width: 720px; color: var(--muted); font-size: 1.04rem; line-height: 1.55; }
#msb-activity-5 .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
#msb-activity-5 .tag { min-height: 28px; padding: 6px 9px; font-size: .76rem; font-weight: 650; }
#msb-activity-5 .card,
#msb-activity-5 .panel,
#msb-activity-5 .metric-card,
#msb-activity-5 .flow-step,
#msb-activity-5 .table-card,
#msb-activity-5 .visual-card { border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, var(--surface-strong), var(--surface)); box-shadow: 0 24px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08); }
html[data-msb-theme="light"] #msb-activity-5 .card,
html[data-msb-theme="light"] #msb-activity-5 .panel,
html[data-msb-theme="light"] #msb-activity-5 .metric-card,
html[data-msb-theme="light"] #msb-activity-5 .flow-step,
html[data-msb-theme="light"] #msb-activity-5 .table-card,
html[data-msb-theme="light"] #msb-activity-5 .visual-card { background: rgba(255,255,255,.90); border-color: rgba(0,0,0,.14); color: #1d1d1f; 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); }
#msb-activity-5 .card,
#msb-activity-5 .panel,
#msb-activity-5 .table-card { padding: 24px; min-height: 220px; }
#msb-activity-5 .card p,
#msb-activity-5 .panel p { margin: 12px 0 0; }
#msb-activity-5 .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#msb-activity-5 .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#msb-activity-5 .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
#msb-activity-5 .metric-card { min-height: 150px; padding: 20px; }
#msb-activity-5 .metric-value { display: block; color: var(--text); font-size: clamp(2.1rem, 4vw, 3.6rem); font-weight: 840; letter-spacing: -.08em; line-height: .9; }
#msb-activity-5 .metric-label { margin-top: 16px; padding: 6px 9px; font-size: .75rem; font-weight: 700; }
#msb-activity-5 .list { display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
#msb-activity-5 .list li { display: flex; gap: 9px; color: var(--text-soft); line-height: 1.45; }
#msb-activity-5 .list li::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; margin-top: .62em; border-radius: 999px; background: rgba(255,255,255,.72); }
html[data-msb-theme="light"] #msb-activity-5 .list li { color: #5f6368; }
html[data-msb-theme="light"] #msb-activity-5 .list li::before { background: #1d1d1f; opacity: .72; }
#msb-activity-5 .flow { display: grid; gap: 10px; }
#msb-activity-5 .flow-step { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; min-height: 72px; }
#msb-activity-5 .flow-index { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.06); color: var(--text); font-weight: 820; }
html[data-msb-theme="light"] #msb-activity-5 .flow-index { background: rgba(255,255,255,.96); color: #1d1d1f; border-color: rgba(0,0,0,.14); }
#msb-activity-5 .visual-card { min-height: 535px; overflow: hidden; padding: 24px; display: grid; align-content: center; gap: 16px; background: radial-gradient(circle at 18% 14%, rgba(103,232,249,.18), transparent 30%), radial-gradient(circle at 88% 20%, rgba(167,139,250,.16), transparent 30%), linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035)); }
html[data-msb-theme="light"] #msb-activity-5 .visual-card { background: radial-gradient(circle at 18% 14%, rgba(0,124,137,.10), transparent 30%), radial-gradient(circle at 88% 20%, rgba(91,69,168,.10), transparent 30%), rgba(255,255,255,.90); }
#msb-activity-5 .visual-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
#msb-activity-5 .window-dots { display: inline-flex; gap: 6px; }
#msb-activity-5 .window-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); }
#msb-activity-5 .window-dots span:nth-child(1) { background: var(--red); }
#msb-activity-5 .window-dots span:nth-child(2) { background: var(--yellow); }
#msb-activity-5 .window-dots span:nth-child(3) { background: var(--green); }
#msb-activity-5 .visual-title { color: var(--muted); font-size: .82rem; font-weight: 650; }
#msb-activity-5 .architecture-map { display: grid; gap: 12px; }
#msb-activity-5 .arch-row { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; background: rgba(0,0,0,.22); }
html[data-msb-theme="light"] #msb-activity-5 .arch-row { border-color: rgba(0,0,0,.10); background: rgba(245,245,247,.74); }
#msb-activity-5 .arch-key { color: var(--text-soft); font-size: .78rem; font-weight: 740; text-transform: uppercase; letter-spacing: .06em; }
#msb-activity-5 .arch-value { color: var(--text); font-weight: 700; }
#msb-activity-5 .visual-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 6px; }
#msb-activity-5 .mini-widget { min-height: 108px; padding: 14px; border: 1px solid rgba(255,255,255,.10); border-radius: 18px; background: rgba(255,255,255,.045); }
html[data-msb-theme="light"] #msb-activity-5 .mini-widget { border-color: rgba(0,0,0,.10); background: rgba(255,255,255,.82); }
#msb-activity-5 .mini-widget strong { display: block; margin-bottom: 6px; color: var(--text); }
#msb-activity-5 .mini-widget p { margin: 0; font-size: .9rem; line-height: 1.42; }
#msb-activity-5 .data-table { display: grid; gap: 8px; margin-top: 16px; }
#msb-activity-5 .data-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.035); }
html[data-msb-theme="light"] #msb-activity-5 .data-row { border-color: rgba(0,0,0,.10); background: rgba(255,255,255,.78); }
#msb-activity-5 .data-key { color: var(--muted); font-size: .86rem; font-weight: 720; }
#msb-activity-5 .data-value { color: var(--text-soft); overflow-wrap: anywhere; }
@media (max-width: 1080px) {
  #msb-activity-5 .hero-grid,
  #msb-activity-5 .split,
  #msb-activity-5 .section-header { grid-template-columns: 1fr; align-items: start; }
  #msb-activity-5 .visual-card { min-height: 500px; }
  #msb-activity-5 .grid-3,
  #msb-activity-5 .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 740px) {
  #msb-activity-5 .container { width: min(100% - 24px, var(--container)); }
  #msb-activity-5 .hero { padding: 58px 0 44px; }
  #msb-activity-5 .section { padding: 58px 0; }
  #msb-activity-5 h1 { font-size: clamp(3.05rem, 14vw, 5rem); }
  #msb-activity-5 h2 { font-size: clamp(2.05rem, 11vw, 3.5rem); line-height: .98; }
  #msb-activity-5 .visual-card { min-height: 0; padding: 18px; }
  #msb-activity-5 .visual-grid,
  #msb-activity-5 .grid-3,
  #msb-activity-5 .grid-2,
  #msb-activity-5 .metric-grid { grid-template-columns: 1fr; }
  #msb-activity-5 .card,
  #msb-activity-5 .panel,
  #msb-activity-5 .table-card,
  #msb-activity-5 .metric-card { min-height: 0; padding: 18px; border-radius: 22px; }
  #msb-activity-5 .arch-row,
  #msb-activity-5 .data-row { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  #msb-activity-5 .hero { padding: 46px 0 38px; }
  #msb-activity-5 .container { width: min(100% - 20px, var(--container)); }
  #msb-activity-5 h1 { font-size: clamp(2.5rem, 14vw, 4.2rem); }
}