.sc { position: absolute; inset: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; }
.sc::-webkit-scrollbar { display: none; }
.mock-h { display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 clamp(20px, 4cqw, 48px); font-size: 13px; font-weight: 500; }
.mock-h b { font-size: 17px; font-weight: 550; letter-spacing: -0.022em; margin-right: auto; }
.mock-hero { padding: 60px clamp(20px, 4cqw, 48px) 40px; }
.mock-hero h3 { margin: 0; font-size: clamp(40px, 7cqw, 86px); line-height: .94; letter-spacing: -0.022em; font-weight: 550; max-width: 11ch; }
.mock-hero p { margin: 18px 0 0; max-width: 42ch; font-size: 17px; opacity: .7; }
.mock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 0 clamp(20px, 4cqw, 48px) 60px; }
.mock-grid i { display: block; height: 220px; border-radius: 12px; }
@container (max-width: 700px) { .mock-grid { grid-template-columns: 1fr 1fr; } .mock-grid i:nth-child(3) { display: none; } .mock-h span { display: none; } }

/* ── F5. Theme and status ────────────────────────────── */
.f5 { height: 560px; --b: var(--gray-0); --t: var(--gray-840); --m: var(--gray-500); --e: var(--gray-70); --c: var(--gray-20); background: var(--b); color: var(--t); transition: background .35s ease, color .35s ease; }
.f5.dark { --b: var(--gray-900); --t: var(--gray-60); --m: var(--gray-300); --e: var(--gray-800); --c: var(--gray-870); }
.f5-page { height: 120px; border-bottom: 1px solid var(--e); transition: border-color .35s; display: flex; align-items: center; padding: 0 clamp(20px, 4cqw, 48px); font-size: 13px; color: var(--m); }
.f5-foot { padding: 40px clamp(20px, 4cqw, 48px) 0; }
.f5-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; font-size: 13px; }
.f5-cols p { margin: 0 0 12px; font-weight: 550; color: var(--t); }
.f5-cols span { display: block; padding: 4px 0; color: var(--m); transition: color .2s; cursor: default; }
.f5-cols span:is(:hover, [data-hover]) { color: var(--t); }
.f5-bot { position: absolute; left: clamp(20px, 4cqw, 48px); right: clamp(20px, 4cqw, 48px); bottom: 26px; display: flex; align-items: center; gap: 16px; }
.f5-lg { width: 22px; height: 22px; border-radius: 6px; background: var(--t); transition: background .35s; }
.f5-st { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--blue-450); cursor: default; position: relative; }
.f5-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-450); box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-450) 50%, transparent); animation: f5p 2s infinite; }
@keyframes f5p { 70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--blue-450) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-450) 0%, transparent); } }
.f5-pop { position: absolute; left: 0; bottom: 34px; width: 300px; padding: 14px; border-radius: 12px; background: var(--c); border: 1px solid var(--e); box-shadow: var(--e3); font-size: 13px; color: var(--m); opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .3s cubic-bezier(.2,.9,.25,1); pointer-events: none; z-index: 5; }
.f5-st.on .f5-pop { opacity: 1; transform: none; }
.f5-pop b { display: block; color: var(--t); font-weight: 550; margin-bottom: 8px; }
.f5-up { display: flex; gap: 1.5px; height: 26px; margin-bottom: 8px; }
.f5-up i { flex: 1; border-radius: 2px; background: var(--green-250); }
.f5-up i.w { background: var(--yellow-250); }
.f5-seg { position: relative; margin-left: auto; display: flex; padding: 3px; border-radius: 9999px; border: 1px solid var(--e); transition: border-color .35s; }
.f5-seg button { position: relative; z-index: 1; width: 32px; height: 28px; border: 0; background: none; border-radius: 9999px; display: grid; place-items: center; color: var(--m); cursor: default; transition: color .2s; }
.f5-seg button[aria-pressed="true"] { color: var(--t); }
.f5-seg svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.f5-seg i { position: absolute; top: 3px; left: 3px; width: 32px; height: 28px; border-radius: 9999px; background: var(--e); transition: background .35s; }
@container (max-width: 700px) { .f5-cols { grid-template-columns: 1fr 1fr; } .f5-cols > div:nth-child(n+3) { display: none; } }