:root { color-scheme: dark; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: #050a12; color: #f6f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 0%, #173a54 0, transparent 38%), linear-gradient(180deg, #08111f, #050a12 65%); }
button { font: inherit; touch-action: manipulation; }
.app-shell { width: min(100%, 620px); margin: 0 auto; padding: max(18px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom)); }
.app-header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin: 4px 2px 18px; }
.app-header h1 { margin: 2px 0 0; font-size: clamp(28px, 9vw, 40px); letter-spacing: -.04em; }
.eyebrow { margin: 0; color: #73d7ff; font-size: 11px; letter-spacing: .13em; }
.status-badge { padding: 7px 10px; border-radius: 999px; background: #142235; color: #9fb6ca; font-size: 12px; white-space: nowrap; }
.status-badge.ready { color: #66f3bd; background: #10352d; }
.mode-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 5px; border: 1px solid #24364c; border-radius: 15px; background: #0b1523; position: sticky; top: max(8px, env(safe-area-inset-top)); z-index: 5; }
.mode-tabs button, .instrument-strip button { min-height: 46px; border: 0; border-radius: 11px; color: #aebed0; background: transparent; }
.mode-tabs button.active, .instrument-strip button.active { color: #041018; background: linear-gradient(135deg, #75e4ff, #65f2bb); font-weight: 750; }
.panel { margin-top: 12px; padding: 15px; border: 1px solid rgba(124,164,202,.19); border-radius: 17px; background: rgba(10,20,33,.88); box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.current-card { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.current-card div, .metric-grid div, .evidence-chain div, .debug-grid div { min-width: 0; }
.current-card span, .metric-grid span, .debug-grid span, .evidence-chain span { display: block; color: #8194a9; font-size: 11px; margin-bottom: 5px; }
.current-card strong { font-size: 13px; }
.primary-button, .secondary-button { width: 100%; min-height: 50px; border: 0; border-radius: 13px; font-weight: 800; }
.primary-button { color: #031218; background: linear-gradient(135deg, #72dcff, #62efb5); }
.secondary-button { color: #d7e7f3; background: #17283b; border: 1px solid #2d465f; }
.start-panel p { margin: 10px 2px 0; color: #9db0c2; font-size: 13px; line-height: 1.55; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.section-title h2 { margin: 0; font-size: 16px; }
.section-title span { color: #6e8498; font-size: 11px; text-align: right; }
.instrument-strip { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
.instrument-strip button { flex: 0 0 auto; padding: 0 16px; background: #132236; border: 1px solid #263b51; }
.motion-meter { height: 10px; border-radius: 99px; overflow: hidden; background: #111e2d; margin-bottom: 15px; }
.motion-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5bdcb7, #70d9ff, #ffb35b); transition: width .12s linear; }
.metric-grid, .debug-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px 10px; }
.metric-grid strong { font-size: 14px; }
.orchestra-layers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.orchestra-layers span { padding: 5px 8px; border-radius: 8px; color: #bde9ff; background: #18324a; font-size: 11px; }
.track-list { display: grid; gap: 9px; }
.track-categories { margin-bottom: 10px; }
.track-categories button { min-height: 38px; padding: 0 13px; }
.track-card { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 12px; border-radius: 13px; background: #101d2d; border: 1px solid #22374d; }
.track-card strong, .track-card small { display: block; }
.track-card small { margin-top: 4px; color: #7f94aa; }
.track-card button { min-width: 68px; min-height: 44px; border: 0; border-radius: 10px; color: #05131b; background: #6edfc9; font-weight: 750; }
.trajectory-music-clip-panel > p:first-of-type { margin: 0 0 13px; color: #9db0c2; font-size: 13px; line-height: 1.55; }
.trajectory-music-clip-panel .primary-button[data-playing="true"] { background: linear-gradient(135deg, #ffd776, #ffad62); }
.trajectory-music-clip-status { min-height: 20px; margin: 10px 2px 0; color: #c9ddec; font-size: 13px; font-variant-numeric: tabular-nums; }
.trajectory-music-clip-diagnostics { margin: 5px 2px 0 !important; color: #7891a8 !important; font-size: 11px !important; }
.trajectory-music-clip-panel audio { display: none; }
.text-button { min-height: 44px; border: 0; color: #7ddfff; background: transparent; }
.evidence-chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin-bottom: 14px; }
.evidence-chain div { padding: 8px 5px; border-radius: 9px; text-align: center; background: #101f30; }
.evidence-chain strong { font-size: 10px; color: #b9cede; word-break: break-word; }
.debug-grid code { display: block; overflow: hidden; color: #cbe5f4; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.debug-panel .secondary-button { margin-top: 14px; }
.error { color: #ff9d9d !important; }
[hidden] { display: none !important; }
@media (max-width: 390px) { .app-shell { padding-left: 10px; padding-right: 10px; } .panel { padding: 13px; } .mode-tabs button { font-size: 13px; } .current-card { gap: 4px; } .evidence-chain { grid-template-columns: repeat(3,1fr); } }