/* Page-local to "How 10MB works": the part divider + the feature-tour visuals
   (dashboard donut, Wrapped stat strip, streak, Reflect chat). Ported from
   How to Use 10MB.html. */
.part-rule { margin: 64px 0 0; max-width: 66ch; display: flex; align-items: center; gap: 18px; }
.part-rule::before, .part-rule::after { content: ""; height: 1px; background: var(--tmb-divider); flex: 1; }
.part-rule span { font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tmb-fg-3); white-space: nowrap; }

.donut-row { display: flex; align-items: center; gap: 22px; margin: 24px 0 0; padding: 22px; background: var(--tmb-surface); border: 1px solid var(--tmb-border); border-radius: var(--tmb-radius-2xl); box-shadow: var(--tmb-shadow-sm); max-width: 66ch; }
.donut-mini { width: 116px; height: 116px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--tmb-block-focus) 0 45%, var(--tmb-block-work) 45% 72%, var(--tmb-block-break) 72% 88%, var(--tmb-block-move) 88% 100%); display: flex; align-items: center; justify-content: center; }
.donut-mini::after { content: ""; width: 62px; height: 62px; background: var(--tmb-surface); border-radius: 50%; }
.donut-leg { display: flex; flex-direction: column; gap: 9px; }
.donut-leg span { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--tmb-fg-2); }
.donut-leg i { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }

.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 0; max-width: 66ch; }
.strip .s { padding: 18px 16px; background: var(--tmb-surface); border: 1px solid var(--tmb-border); border-radius: var(--tmb-radius-xl); box-shadow: var(--tmb-shadow-xs); }
.strip .s .v { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--tmb-brand-dark-from); font-variant-numeric: tabular-nums; line-height: 1; }
.strip .s .k { margin-top: 7px; font-size: 12px; font-weight: 600; color: var(--tmb-fg-3); line-height: 1.35; }

.streak { display: flex; align-items: center; gap: 22px; margin: 24px 0 0; padding: 22px; background: var(--tmb-surface); border: 1px solid var(--tmb-border); border-radius: var(--tmb-radius-2xl); box-shadow: var(--tmb-shadow-sm); max-width: 66ch; flex-wrap: wrap; }
.streak .big { display: flex; align-items: baseline; gap: 10px; }
.streak .big b { font-family: var(--tmb-font-display); font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--tmb-brand-light-to); font-variant-numeric: tabular-nums; }
.streak .big span { font-size: 13px; color: var(--tmb-fg-3); font-weight: 600; line-height: 1.3; }
.streak .days { display: flex; gap: 7px; flex: 1; min-width: 180px; }
.streak .days i { flex: 1; height: 34px; border-radius: 9px; background: var(--tmb-surface-soft); border: 1px solid var(--tmb-border); }
.streak .days i.on { background: var(--tmb-grad-light); border-color: transparent; }

.chatmini { margin: 24px 0 0; padding: 22px; background: var(--tmb-brand-dark-from); border-radius: var(--tmb-radius-2xl); box-shadow: var(--tmb-shadow-md); max-width: 66ch; display: flex; flex-direction: column; gap: 11px; position: relative; overflow: hidden; }
.chatmini .glow { position: absolute; top: -30%; right: -10%; width: 220px; height: 220px; background: var(--tmb-brand-light-from); opacity: .22; filter: blur(70px); border-radius: 50%; }
.chatmini .cm-msg { position: relative; z-index: 1; padding: 13px 16px; border-radius: 17px; font-size: 14px; line-height: 1.5; max-width: 88%; }
.chatmini .them { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-bottom-left-radius: 5px; align-self: flex-start; color: rgba(255,255,255,.92); }
.chatmini .me { background: var(--tmb-brand-light-from); border-bottom-right-radius: 5px; align-self: flex-end; color: #fff; font-weight: 600; }
@media (max-width: 720px) { .strip { grid-template-columns: 1fr; } .donut-row { flex-direction: column; align-items: flex-start; } }