Add 480px mobile breakpoint to commitment_kernel_demo_v7.html

[devin-ai-integration]

Summary

Adds a @media (max-width: 480px) breakpoint to demo/commitment_kernel_demo_v7.html so the KASSA / S1-S2-S3 demo is readable on a phone during the Deel pitch event on May 5, 2026. CSS-only — no JS or layout-logic changes.

Inside the new 480px block:

• body font-size → 14px (up from 13px)
• .app padding tightened to 24px 14px 60px
• .header-title → 18px (down from 24px so it stops wrapping awkwardly)
• .preset-btn → min-width: unset; flex: 1 1 45% (4 presets land as a clean 2×2)
• .run-btn padding → 16px (bigger tap target)
• .agent-out → 12px
• .stage-name, .trace-title, .report-title → 10px (up from 9px — readable at arm's length)
• .t-ms → 11px
• .tc-val → 16px (down from 20px to prevent overflow)
• .three-col → grid-template-columns: 1fr (re-asserted; 700px breakpoint already covers it)
• .trace-body max-height → 200px (less scrolling on narrow screens)

Tested at 375 / 390 / 414 px viewport widths.

Review & Testing Checklist for Human

• Load demo/commitment_kernel_demo_v7.html on an actual iPhone (or DevTools at 375px) and verify the header doesn't wrap, the four preset buttons form a 2×2 grid, and the Run button is tappable
• Run a scenario and confirm the agent-out / trace / report panes render at the larger font sizes without overflow
• Verify nothing regressed at ≥ 700px (existing breakpoints unchanged)

Notes

All edits are confined to a single 480px media block at the bottom of the <style> element. Easy to tweak in-event if any specific font size is still too small.

Link to Devin session: https://app.devin.ai/sessions/e17816bc1cf948539681e001700f5e16
Requested by: @SunrisesIllNeverSee

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Mobile 480px breakpoint — runtime test results

Tested locally via Chrome DevTools device toolbar at 375 / 390 / 414 px (iPhone SE → 14 Plus) and a 1280 px desktop regression check. Triggered the cached scenario replay so post-Run elements (.agent-out, .t-ms, .tc-val, .three-col, .trace-body) actually rendered, then verified each rule via getComputedStyle + visual layout. window.matchMedia('(max-width: 480px)').matches was true for every iPhone-width run and false at 1280.

Result: every requested rule fires at iPhone widths and reverts to desktop defaults at 1280px. No regressions.

Computed-value assertions @ ≤ 480 px (verified at 375 / 390 / 414)

#	Selector	Expected	Observed	Result
K1	body font-size	14 px	14px	passed
K2	.header-title font-size	18 px	18px	passed
K3	.preset-btn min-width / flex-basis	unset / ~45%	auto / 45%	passed
K4	.run-btn padding	16 px	16px	passed
K5	.agent-out font-size	12 px	12px	passed
K6	.stage-name / .trace-title / .report-title	10 px each	10px / 10px / 10px	passed
K7	.t-ms font-size	11 px	11px	passed
K8	.tc-val font-size (no inline override)	16 px	16px *	passed *
K9	.three-col grid-template-columns	single track	307px (1fr)	passed
K10	.trace-body max-height	200 px	200px	passed

* K8 — a few .tc-val cells carry inline style="font-size:12px" / 14px (descriptor cells at lines 1053–1075). Those inline styles intentionally override the media rule for those specific cells. The dominant .tc-val numbers (e.g. wall-clock ${s1.wall}ms cells at lines 1063–1065 with no inline style) correctly resolve to the new 16px.

Regression @ 1280 px — values revert to desktop defaults

Selector	@1280 (desktop default)
body	13px (NOT 14)
.header-title	24px (NOT 18)
.preset-btn min-width	100px (NOT auto)
.preset-btn flex-basis	0% (NOT 45%)
.run-btn padding	13px (NOT 16)
.agent-out	11px (NOT 12)
.stage-name	9px (NOT 10)
.t-ms	10px (NOT 11)
.tc-val (no inline)	20px (NOT 16)
.three-col	4-col (NOT 1fr)
.trace-body max-height	280px (NOT 200)
matchMedia('(max-width: 480px)').matches	false

Visual evidence

375 px — preset 2×2, big tap target on Run	390 px — same layout holds

414 px — same layout holds	1280 px regression — desktop S1/S2/S3 columns intact

Recording of the full viewport walk (Mos2es + KASSA, 375 → 390 → 414 → 1280)

— Tested by Devin. Session: https://app.devin.ai/sessions/e17816bc1cf948539681e001700f5e16