@viberaven/cli 1.6.6 → 1.6.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -8
- package/dist/cli.js +2031 -301
- package/dist/stack/app.js +22 -16
- package/dist/stack/stack.css +919 -0
- package/package.json +1 -1
package/dist/stack/stack.css
CHANGED
|
@@ -1006,3 +1006,922 @@ select.sel:focus, input.sel:focus { outline: none; box-shadow: inset 0 0 0 1px #
|
|
|
1006
1006
|
.pr-checks { top: 10px; right: 10px; }
|
|
1007
1007
|
.pr-checks-button { height: 32px; padding: 0 12px; font-size: 12.5px; }
|
|
1008
1008
|
}
|
|
1009
|
+
.fc-checked { margin-top: 6px; font-size: 13px; color: var(--ink-3, var(--ink-2)); }
|
|
1010
|
+
#show-last-full-check { margin-top: 10px; }
|
|
1011
|
+
|
|
1012
|
+
/* ---------- simpler chrome: the site's brand, a plain close, two-line findings with one action each ---------- */
|
|
1013
|
+
.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; color: #f5f5f5; font-family: Inter, var(--font); font-size: 16px; font-weight: 650; letter-spacing: -0.01em; line-height: 1; }
|
|
1014
|
+
.brand-mark, .brand-raven { display: block; width: 24px; height: 20px; }
|
|
1015
|
+
.panel-close { position: absolute; top: 16px; right: 16px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; margin: 0; padding: 0; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; transition: background 0.15s, color 0.15s; }
|
|
1016
|
+
.panel-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
|
|
1017
|
+
.stage-body.panel > h1 { padding-right: 44px; }
|
|
1018
|
+
.finding, .finding.is-static { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 18px; }
|
|
1019
|
+
.finding.is-static { grid-template-columns: minmax(0, 1fr); }
|
|
1020
|
+
.finding:hover:not(.is-static) { background: rgba(255, 255, 255, 0.035); }
|
|
1021
|
+
.finding-main { display: grid; gap: 6px; min-width: 0; }
|
|
1022
|
+
.finding-title { white-space: normal; overflow: visible; font-size: 14.5px; line-height: 1.35; color: var(--ink); }
|
|
1023
|
+
.finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
|
|
1024
|
+
.finding-meta .where code { max-width: 26ch; }
|
|
1025
|
+
.finding-go { justify-self: end; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; font-weight: 500; color: var(--ink); white-space: nowrap; }
|
|
1026
|
+
.finding.is-first .finding-go { border-color: transparent; background: #f5f5f5; color: #0a0a0b; }
|
|
1027
|
+
.agent-ok { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; }
|
|
1028
|
+
.agent-ok p { margin: 0; font-size: 14px; color: var(--ink-2); }
|
|
1029
|
+
|
|
1030
|
+
/* ---------- the work view: one box to ask, the real app at the centre of the board, the agent beside it,
|
|
1031
|
+
and a panel that shows the plan, the run's real steps and its result. Motion only follows real events:
|
|
1032
|
+
a step starting, a file changing on disk, a check finishing. ---------- */
|
|
1033
|
+
:root {
|
|
1034
|
+
--t-hover: 140ms;
|
|
1035
|
+
--t-panel: 220ms;
|
|
1036
|
+
--t-node: 300ms;
|
|
1037
|
+
--t-connect: 480ms;
|
|
1038
|
+
--t-settle: 380ms;
|
|
1039
|
+
--work: #f2c15f;
|
|
1040
|
+
--work-soft: rgba(242, 193, 95, 0.12);
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
/* The canvas leaves room for the shelf above the dock. */
|
|
1044
|
+
.canvas { padding-bottom: 236px; }
|
|
1045
|
+
|
|
1046
|
+
/* The shelf: what should change, plus at most four things this project can do now. */
|
|
1047
|
+
.shelf { position: absolute; left: 50%; bottom: 80px; z-index: 4; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); display: grid; gap: 9px; cursor: default; }
|
|
1048
|
+
.shelf-box { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 7px 0 16px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(15, 15, 18, 0.97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color var(--t-hover), box-shadow var(--t-hover); }
|
|
1049
|
+
.shelf-box:focus-within { border-color: rgba(242, 193, 95, 0.55); box-shadow: 0 0 0 4px rgba(242, 193, 95, 0.07), 0 24px 50px -20px rgba(0, 0, 0, 0.95); }
|
|
1050
|
+
.shelf.is-running .shelf-box { border-color: rgba(242, 193, 95, 0.35); }
|
|
1051
|
+
.shelf-spark { display: inline-grid; color: var(--work); }
|
|
1052
|
+
.shelf-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--ink); font: 450 15px/1 var(--font); }
|
|
1053
|
+
.shelf-input::placeholder { color: var(--ink-3); }
|
|
1054
|
+
.shelf-input:disabled { cursor: default; }
|
|
1055
|
+
.shelf-go { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 11px; background: #f5f5f7; color: #0a0a0b; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background var(--t-hover), transform var(--t-hover); }
|
|
1056
|
+
.shelf-go:hover:not(:disabled) { background: #fff; }
|
|
1057
|
+
.shelf-go:active:not(:disabled) { transform: translateY(1px); }
|
|
1058
|
+
.shelf-go:disabled { background: var(--panel-3); color: var(--ink-3); }
|
|
1059
|
+
.shelf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 2px; }
|
|
1060
|
+
.shelf-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(16, 16, 19, 0.95); color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background var(--t-hover), color var(--t-hover), border-color var(--t-hover); }
|
|
1061
|
+
.shelf-chip:hover:not(:disabled) { color: var(--ink); border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.05); }
|
|
1062
|
+
.shelf-chip:disabled { opacity: 0.45; }
|
|
1063
|
+
.shelf-chip.is-main { color: var(--ink); border-color: rgba(242, 193, 95, 0.5); }
|
|
1064
|
+
.shelf-chip.is-main .ico { color: var(--work); }
|
|
1065
|
+
.shelf-chip.is-quiet { color: var(--ink-3); }
|
|
1066
|
+
.shelf-count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
|
|
1067
|
+
.shelf-note { margin-left: auto; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
|
|
1068
|
+
|
|
1069
|
+
/* The app card holds the real app. */
|
|
1070
|
+
.app .board.has-screen { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) minmax(0, 1fr); }
|
|
1071
|
+
.app .board.has-screen.is-side { grid-template-columns: minmax(300px, 380px) minmax(0, 300px); }
|
|
1072
|
+
.app .board.has-screen.is-solo { grid-template-columns: minmax(300px, 400px); }
|
|
1073
|
+
.board-col[hidden], .app-files[hidden], .board-checks[hidden] { display: none; }
|
|
1074
|
+
.app .board-app.is-working { border-color: rgba(242, 193, 95, 0.6); animation: work-glow 2.8s ease-in-out infinite; }
|
|
1075
|
+
@keyframes work-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 95, 0), 0 16px 30px -18px rgba(0, 0, 0, 0.9); } 50% { box-shadow: 0 0 0 5px rgba(242, 193, 95, 0.07), 0 16px 30px -18px rgba(0, 0, 0, 0.9); } }
|
|
1076
|
+
.screen { margin-top: 12px; border-radius: 9px; border: 1px solid var(--line-2); background: #0b0b0d; overflow: hidden; }
|
|
1077
|
+
.screen-bar { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 9px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
|
|
1078
|
+
.screen-dots { display: inline-flex; gap: 4px; }
|
|
1079
|
+
.screen-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
|
|
1080
|
+
.screen-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1081
|
+
.screen-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 11px; font-weight: 500; color: var(--ink-3); }
|
|
1082
|
+
.screen-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
|
|
1083
|
+
.screen-live.is-ready { color: var(--green); }
|
|
1084
|
+
.screen-live.is-ready i { background: var(--green); animation: live-ring 2.4s ease-out infinite; }
|
|
1085
|
+
.screen-live.is-starting { color: var(--work); }
|
|
1086
|
+
.screen-live.is-starting i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
|
|
1087
|
+
.screen-live.is-failed { color: var(--red-ink); }
|
|
1088
|
+
.screen-live.is-failed i { background: var(--red); }
|
|
1089
|
+
@keyframes live-ring { 0% { box-shadow: 0 0 0 0 rgba(111, 208, 140, 0.55); } 70%, 100% { box-shadow: 0 0 0 6px rgba(111, 208, 140, 0); } }
|
|
1090
|
+
.screen-body { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
|
|
1091
|
+
.screen-body iframe { position: absolute; left: 0; top: 0; width: 250%; height: 250%; border: 0; background: #fff; transform: scale(0.4); transform-origin: 0 0; pointer-events: none; }
|
|
1092
|
+
.screen-open { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 6, 7, 0); color: transparent; cursor: pointer; transition: background var(--t-hover), color var(--t-hover); }
|
|
1093
|
+
.screen-open span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 13px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity var(--t-hover), transform var(--t-hover); }
|
|
1094
|
+
.screen-open:hover, .screen-open:focus-visible { background: rgba(6, 6, 7, 0.45); }
|
|
1095
|
+
.screen-open:hover span, .screen-open:focus-visible span { opacity: 1; transform: none; }
|
|
1096
|
+
.screen-body.is-placeholder, .screen-body.is-skeleton { display: grid; place-items: center; align-content: center; gap: 10px; padding: 16px; text-align: center; background: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.2px) 0 0 / 12px 12px, #0b0b0d; }
|
|
1097
|
+
.screen-body p { max-width: 30ch; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
|
|
1098
|
+
.screen-body.is-failed p { color: var(--red-ink); }
|
|
1099
|
+
.sk { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.07); }
|
|
1100
|
+
.sk-1 { width: 62%; } .sk-2 { width: 44%; } .sk-3 { width: 52%; }
|
|
1101
|
+
.screen-body.is-skeleton .sk { background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05)) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
|
|
1102
|
+
@keyframes shimmer { to { background-position: -200% 0; } }
|
|
1103
|
+
.screen-cta { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 13px; font-weight: 600; text-decoration: none; transition: background var(--t-hover); }
|
|
1104
|
+
.screen-cta:hover { background: #fff; }
|
|
1105
|
+
.screen-cta .ico { color: #0a0a0b; }
|
|
1106
|
+
|
|
1107
|
+
/* Files the run changed, appearing as they change on disk. */
|
|
1108
|
+
.app-files { list-style: none; display: grid; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
|
|
1109
|
+
.app-files li { display: flex; align-items: center; gap: 8px; font-size: 12px; animation: file-in var(--t-settle) var(--ease) both; }
|
|
1110
|
+
.app-files code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
|
|
1111
|
+
.app-files .add, .work-files .add { font-family: var(--mono); font-size: 11px; color: var(--green); }
|
|
1112
|
+
.app-files .del, .work-files .del { font-family: var(--mono); font-size: 11px; color: var(--red-ink); }
|
|
1113
|
+
.app-files li.is-added code::before, .work-files li.is-added code::before { content: "new "; color: var(--work); }
|
|
1114
|
+
.app-files .more { color: var(--ink-3); }
|
|
1115
|
+
@keyframes file-in { from { opacity: 0; transform: translateX(-6px); } }
|
|
1116
|
+
|
|
1117
|
+
/* The coding agent on the board. */
|
|
1118
|
+
.app .node.is-agent { border-color: rgba(255, 255, 255, 0.2); }
|
|
1119
|
+
.app .node.is-agent.is-work { border-color: rgba(242, 193, 95, 0.6); animation: node-in var(--t-node) var(--ease) both; }
|
|
1120
|
+
.node.is-agent .node-state i { background: var(--ink-3); box-shadow: none; }
|
|
1121
|
+
.node.is-agent.is-work .node-state i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
|
|
1122
|
+
.node.is-agent.is-work .node-verdict { color: var(--work); }
|
|
1123
|
+
.node.is-agent.is-pass .node-state i { background: var(--green); }
|
|
1124
|
+
.node.is-agent.is-warn .node-state i { background: var(--warn); }
|
|
1125
|
+
.node.is-agent.is-fail .node-state i { background: var(--red); }
|
|
1126
|
+
@keyframes node-in { from { opacity: 0; transform: translateX(-10px); } }
|
|
1127
|
+
.board-lines .line.is-work { stroke: rgba(242, 193, 95, 0.85); stroke-width: 1.5; stroke-dasharray: 5 6; animation: line-flow 0.9s linear infinite; }
|
|
1128
|
+
@keyframes line-flow { to { stroke-dashoffset: -11; } }
|
|
1129
|
+
.board.is-working .pulse.is-work { animation: board-pulse 2.2s linear infinite; }
|
|
1130
|
+
|
|
1131
|
+
/* The panel: plan, run, result. */
|
|
1132
|
+
.work-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
|
|
1133
|
+
.work-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
|
|
1134
|
+
.work-eyebrow.is-plan i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-2); }
|
|
1135
|
+
.work-eyebrow.is-work { color: var(--work); }
|
|
1136
|
+
.work-eyebrow.is-work i { background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
|
|
1137
|
+
.work-eyebrow.is-pass { color: var(--green); }
|
|
1138
|
+
.work-eyebrow.is-pass i { background: var(--green); }
|
|
1139
|
+
.work-eyebrow.is-warn { color: var(--warn-ink); }
|
|
1140
|
+
.work-eyebrow.is-warn i { background: var(--warn); }
|
|
1141
|
+
.work-eyebrow.is-fail { color: var(--red-ink); }
|
|
1142
|
+
.work-eyebrow.is-fail i { background: var(--red); }
|
|
1143
|
+
.panel h1 { overflow-wrap: anywhere; }
|
|
1144
|
+
.plan-list { display: grid; grid-template-columns: 104px minmax(0, 1fr); margin-top: 22px; border-top: 1px solid var(--line); }
|
|
1145
|
+
.plan-list dt, .plan-list dd { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; }
|
|
1146
|
+
.plan-list dt { color: var(--ink-3); }
|
|
1147
|
+
.plan-list dd { color: var(--ink); }
|
|
1148
|
+
.mode-row { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
|
|
1149
|
+
.mode-label { width: 90px; font-size: 13.5px; color: var(--ink-3); }
|
|
1150
|
+
.mode-seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); }
|
|
1151
|
+
.mode-option { height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-2); transition: background var(--t-hover), color var(--t-hover); }
|
|
1152
|
+
.mode-option:hover:not(.on):not(:disabled) { color: var(--ink); }
|
|
1153
|
+
.mode-option.on { background: #f5f5f7; color: #0a0a0b; }
|
|
1154
|
+
.work-error { margin-top: 16px; padding: 10px 12px; border-radius: 10px; background: rgba(244, 113, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(244, 113, 95, 0.35); font-size: 13.5px; color: var(--red-ink); }
|
|
1155
|
+
.work-hint { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
|
|
1156
|
+
.work-live { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 11px 14px; border-radius: 12px; background: var(--work-soft); font-size: 13.5px; line-height: 1.4; color: var(--ink); }
|
|
1157
|
+
.work-pulse { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
|
|
1158
|
+
.work-elapsed { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
|
|
1159
|
+
.work-steps { list-style: none; display: grid; margin-top: 20px; }
|
|
1160
|
+
.work-step { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
|
|
1161
|
+
.work-step:not(:last-child)::after { content: ""; position: absolute; left: 10.5px; top: 24px; bottom: 2px; width: 1px; background: var(--line-2); }
|
|
1162
|
+
.work-step.is-done:not(:last-child)::after { background: rgba(111, 208, 140, 0.45); }
|
|
1163
|
+
.work-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); font-family: var(--mono); font-size: 11px; color: var(--ink-3); transition: background var(--t-node), box-shadow var(--t-node); }
|
|
1164
|
+
.work-step.is-active .work-mark { box-shadow: inset 0 0 0 1.5px var(--work); }
|
|
1165
|
+
.work-step.is-active .work-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--work); animation: pulse-dot 1.1s ease-in-out infinite; }
|
|
1166
|
+
.work-step.is-done .work-mark, .work-checks .is-passed .work-mark { background: var(--green); box-shadow: none; color: #04140a; animation: settle var(--t-settle) var(--ease) both; }
|
|
1167
|
+
.work-step.is-failed .work-mark, .work-checks .is-failed .work-mark { background: var(--red); box-shadow: none; color: #1a0603; }
|
|
1168
|
+
.work-step.is-skipped .work-mark, .work-step.is-unknown .work-mark { box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink-3); }
|
|
1169
|
+
.work-step-copy { display: grid; gap: 3px; min-width: 0; padding-top: 1px; }
|
|
1170
|
+
.work-step-label { font-size: 14px; font-weight: 500; color: var(--ink-2); }
|
|
1171
|
+
.work-step.is-active .work-step-label, .work-step.is-done .work-step-label, .work-step.is-failed .work-step-label { color: var(--ink); }
|
|
1172
|
+
.work-step-detail { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
|
|
1173
|
+
.work-step.is-failed .work-step-detail { color: var(--red-ink); }
|
|
1174
|
+
.work-files { list-style: none; display: grid; gap: 3px; margin-top: 6px; }
|
|
1175
|
+
.work-files li { display: flex; align-items: center; gap: 8px; animation: file-in var(--t-settle) var(--ease) both; }
|
|
1176
|
+
.work-files code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); }
|
|
1177
|
+
.work-checks, .work-unknowns, .work-history { margin-top: 18px; }
|
|
1178
|
+
.work-checks h2, .work-unknowns h2, .work-history h2 { margin-bottom: 8px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
|
|
1179
|
+
.work-checks ul, .work-unknowns ul, .work-history ul { list-style: none; display: grid; gap: 8px; }
|
|
1180
|
+
.work-checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
|
|
1181
|
+
.work-checks li > div { display: grid; gap: 2px; min-width: 0; }
|
|
1182
|
+
.work-checks strong { font-size: 14px; font-weight: 500; }
|
|
1183
|
+
.work-checks span { display: inline-flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--ink-3); }
|
|
1184
|
+
.work-checks .is-passed span { color: var(--green); }
|
|
1185
|
+
.work-checks .is-failed span { color: var(--red-ink); }
|
|
1186
|
+
.work-checks code { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
|
|
1187
|
+
.work-check-detail { font-size: 12px; color: var(--ink-3); }
|
|
1188
|
+
.work-detail { margin-top: 6px; max-height: 160px; overflow: auto; padding: 10px 12px; border-radius: 9px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
|
|
1189
|
+
.work-unknowns li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
|
|
1190
|
+
.work-unknowns li::before { content: "?"; position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
|
|
1191
|
+
.work-answer { margin-top: 18px; border-radius: 12px; border: 1px solid var(--line); }
|
|
1192
|
+
.work-answer summary { padding: 11px 14px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
|
|
1193
|
+
.work-answer[open] summary { border-bottom: 1px solid var(--line); }
|
|
1194
|
+
.work-answer .agent-reply-body { margin: 0; padding: 12px 14px; font-size: 13.5px; }
|
|
1195
|
+
.work-diff { display: grid; gap: 12px; margin-top: 18px; }
|
|
1196
|
+
.work-diff h3 { margin-bottom: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-2); }
|
|
1197
|
+
.work-diff pre { max-height: 300px; padding: 12px 14px; border-radius: 10px; background: #060607; box-shadow: inset 0 0 0 1px var(--line); font-size: 11.5px; }
|
|
1198
|
+
.work-actions { gap: 8px 4px; }
|
|
1199
|
+
.quiet.is-danger { color: var(--red-ink); }
|
|
1200
|
+
.quiet.stop { color: var(--red-ink); }
|
|
1201
|
+
.work-history li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
|
|
1202
|
+
.work-history strong { font-size: 13.5px; font-weight: 500; }
|
|
1203
|
+
.work-history span { font-size: 12px; color: var(--ink-3); }
|
|
1204
|
+
|
|
1205
|
+
/* The large preview: the real app, with the result panel still beside it. */
|
|
1206
|
+
.appwin { position: fixed; top: calc(var(--top) + 14px); left: 14px; right: 14px; bottom: 14px; z-index: 35; display: grid; grid-template-rows: 44px minmax(0, 1fr); border-radius: 16px; border: 1px solid var(--line-2); background: #0b0b0d; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95); animation: appwin-in var(--t-panel) var(--ease) both; }
|
|
1207
|
+
.app:has(.stage.has-panel) .appwin { right: min(560px, 46vw); }
|
|
1208
|
+
@keyframes appwin-in { from { opacity: 0; transform: scale(0.985); } }
|
|
1209
|
+
.appwin-bar { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-bottom: 1px solid var(--line); }
|
|
1210
|
+
.appwin-url { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-family: var(--mono); font-size: 12px; color: var(--ink); }
|
|
1211
|
+
.appwin-url i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
|
|
1212
|
+
.appwin-note { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1213
|
+
.appwin-tool { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--ink-2); transition: background var(--t-hover), color var(--t-hover); }
|
|
1214
|
+
.appwin-tool:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
|
|
1215
|
+
.appwin-tool.is-close { margin-left: 4px; border: 1px solid var(--line-2); }
|
|
1216
|
+
.appwin-body { min-height: 0; border-radius: 0 0 15px 15px; overflow: hidden; background: #fff; }
|
|
1217
|
+
.appwin-body iframe { display: block; width: 100%; height: 100%; border: 0; }
|
|
1218
|
+
|
|
1219
|
+
/* All actions. */
|
|
1220
|
+
.catalog-intro { margin-bottom: 16px; font-size: 13.5px; color: var(--ink-3); }
|
|
1221
|
+
.catalog-list { list-style: none; display: grid; gap: 2px; }
|
|
1222
|
+
.catalog-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
|
|
1223
|
+
.catalog-item:last-child { border-bottom: 0; }
|
|
1224
|
+
.catalog-copy { display: grid; gap: 2px; min-width: 0; }
|
|
1225
|
+
.catalog-copy strong { font-size: 14px; font-weight: 500; }
|
|
1226
|
+
.catalog-copy span { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
|
|
1227
|
+
.catalog-item.is-planned .catalog-copy strong { color: var(--ink-2); }
|
|
1228
|
+
.catalog-copy .catalog-reason { font-size: 12px; }
|
|
1229
|
+
.catalog-state { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
|
|
1230
|
+
.catalog-state.is-ready, .catalog-state.is-already_configured { color: var(--green); border-color: rgba(111, 208, 140, 0.4); }
|
|
1231
|
+
.catalog-state.is-needs_connection, .catalog-state.is-needs_information { color: var(--warn-ink); border-color: rgba(242, 193, 95, 0.4); }
|
|
1232
|
+
.catalog-state.is-planned { border-style: dashed; }
|
|
1233
|
+
|
|
1234
|
+
@media (max-width: 900px) {
|
|
1235
|
+
.app:has(.stage.has-panel) .appwin { right: 14px; }
|
|
1236
|
+
.shelf-note { display: none; }
|
|
1237
|
+
}
|
|
1238
|
+
@media (max-width: 640px) {
|
|
1239
|
+
.shelf { bottom: 74px; width: calc(100% - 20px); }
|
|
1240
|
+
.shelf-box { height: 50px; }
|
|
1241
|
+
.shelf-go { padding: 0 12px; }
|
|
1242
|
+
.canvas { padding-bottom: 220px; }
|
|
1243
|
+
.app .board.has-screen, .app .board.has-screen.is-side, .app .board.has-screen.is-solo { grid-template-columns: minmax(0, 1fr); }
|
|
1244
|
+
.appwin { left: 8px; right: 8px; bottom: 8px; top: calc(var(--top) + 8px); }
|
|
1245
|
+
.plan-list { grid-template-columns: 88px minmax(0, 1fr); }
|
|
1246
|
+
.catalog-item { grid-template-columns: minmax(0, 1fr) auto; }
|
|
1247
|
+
.catalog-item .catalog-state { grid-column: 1; justify-self: start; }
|
|
1248
|
+
}
|
|
1249
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1250
|
+
.app .board-app.is-working, .board-lines .line.is-work, .board.is-working .pulse.is-work, .screen-live i, .node.is-agent.is-work .node-state i,
|
|
1251
|
+
.work-eyebrow.is-work i, .work-pulse, .work-step.is-active .work-mark::after, .screen-body.is-skeleton .sk, .app-files li, .work-files li,
|
|
1252
|
+
.app .node.is-agent.is-work, .appwin, .work-step.is-done .work-mark { animation: none; }
|
|
1253
|
+
.screen-open span { transition: none; }
|
|
1254
|
+
}
|
|
1255
|
+
@container (max-width: 820px) {
|
|
1256
|
+
.app .board.has-screen:not(.is-side):not(.is-solo) { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px) minmax(0, 1fr); column-gap: 28px; }
|
|
1257
|
+
}
|
|
1258
|
+
/* With the app on the card, its summary lines repeat the shelf note and Findings; the screen gets the room. */
|
|
1259
|
+
.app .board.has-screen .board-checks { display: none; }
|
|
1260
|
+
.canvas { padding-bottom: 196px; }
|
|
1261
|
+
@container (max-width: 820px) {
|
|
1262
|
+
.app .board.has-screen.is-side { grid-template-columns: minmax(250px, 320px) minmax(0, 250px); column-gap: clamp(32px, 7cqi, 56px); }
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1265
|
+
/* ---------- the construction scene: a small isometric world for the action in progress ----------
|
|
1266
|
+
Planned parts are traced outlines; a part works while its step is active; it settles solid only when its
|
|
1267
|
+
evidence arrives. Activity is calm (slow flows, a gentle hover); milestones get one short spring. */
|
|
1268
|
+
:root {
|
|
1269
|
+
--spring: cubic-bezier(0.34, 1.45, 0.64, 1);
|
|
1270
|
+
--sc-amber: #f2c15f;
|
|
1271
|
+
--sc-green: #6fd08c;
|
|
1272
|
+
--sc-red: #f4715f;
|
|
1273
|
+
}
|
|
1274
|
+
|
|
1275
|
+
/* Layout: the scene takes the canvas, the panel narrows, the real app gets its own window. */
|
|
1276
|
+
.stage.is-work.has-panel .canvas { right: min(440px, 36%); }
|
|
1277
|
+
.stage.is-work .stage-body.panel { width: calc(min(440px, 36%) - 28px); }
|
|
1278
|
+
.app:has(.stage.is-work) .rail { left: calc((100% - min(440px, 36%)) / 2); }
|
|
1279
|
+
.app:has(.stage.is-work) .appwin { right: min(440px, 36vw); }
|
|
1280
|
+
.canvas.is-scene { display: grid; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: minmax(0, 1fr); align-items: stretch; place-items: stretch; gap: 16px; padding: 18px 18px 84px; cursor: default; overflow: hidden; background: radial-gradient(1200px 600px at 40% 30%, rgba(242, 193, 95, 0.035), transparent 60%), radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.2px) 0 0 / 22px 22px, #060607; }
|
|
1281
|
+
.scene-stage { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
|
|
1282
|
+
.scene-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
|
1283
|
+
.scene-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(242, 193, 95, 0.45); color: var(--sc-amber); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
|
|
1284
|
+
.scene-tag.is-demo { border-style: dashed; border-color: rgba(255, 255, 255, 0.35); color: var(--ink-2); }
|
|
1285
|
+
.scene-note { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1286
|
+
.scene { display: block; width: 100%; height: 100%; min-height: 0; overflow: visible; }
|
|
1287
|
+
.scene-caption { justify-self: center; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 36px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(14, 14, 17, 0.94); font-size: 13.5px; color: var(--ink); animation: settle 0.4s var(--ease) both; }
|
|
1288
|
+
.scene-caption > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
1289
|
+
.scene-caption i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
|
|
1290
|
+
.scene-caption.is-work i { background: var(--sc-amber); animation: pulse-dot 1.4s ease-in-out infinite; }
|
|
1291
|
+
.scene-caption.is-wait { border-color: rgba(242, 193, 95, 0.5); }
|
|
1292
|
+
.scene-caption.is-wait i { background: var(--sc-amber); }
|
|
1293
|
+
.scene-caption.is-pass i { background: var(--sc-green); }
|
|
1294
|
+
.scene-caption.is-fail { border-color: rgba(244, 113, 95, 0.45); }
|
|
1295
|
+
.scene-caption.is-fail i { background: var(--sc-red); }
|
|
1296
|
+
.scene-when { font-size: 12px; color: var(--ink-3); }
|
|
1297
|
+
.scene-inspect { position: absolute; left: 0; bottom: 52px; z-index: 2; width: min(320px, 70%); display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.97); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.9); animation: settle 0.3s var(--ease) both; }
|
|
1298
|
+
.scene-inspect header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
|
|
1299
|
+
.scene-inspect strong { font-size: 14px; font-weight: 600; }
|
|
1300
|
+
.scene-inspect p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
|
|
1301
|
+
.insp-state { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
|
|
1302
|
+
.insp-state.is-done { color: var(--sc-green); } .insp-state.is-active, .insp-state.is-waiting { color: var(--sc-amber); } .insp-state.is-failed { color: var(--red-ink); }
|
|
1303
|
+
.insp-files { list-style: none; display: grid; gap: 3px; }
|
|
1304
|
+
.insp-files li { display: flex; gap: 8px; align-items: baseline; font-size: 12px; }
|
|
1305
|
+
.insp-files code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
|
|
1306
|
+
.insp-files .add { font-family: var(--mono); font-size: 11px; color: var(--green); }
|
|
1307
|
+
.insp-files .del { font-family: var(--mono); font-size: 11px; color: var(--red-ink); }
|
|
1308
|
+
.insp-pre { max-height: 140px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: #060607; font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
|
|
1309
|
+
.insp-answer { max-height: 160px; overflow: auto; font-size: 12.5px; color: var(--ink-2); }
|
|
1310
|
+
.insp-wait { color: var(--warn-ink) !important; }
|
|
1311
|
+
|
|
1312
|
+
/* The real app, in its own window. */
|
|
1313
|
+
.live-window { align-self: start; display: grid; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(12, 12, 15, 0.96); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.9); }
|
|
1314
|
+
.live-window header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
|
|
1315
|
+
.live-window header strong { font-size: 13.5px; font-weight: 600; }
|
|
1316
|
+
.live-window header span { font-size: 11.5px; color: var(--ink-3); }
|
|
1317
|
+
.live-window .screen { margin-top: 0; }
|
|
1318
|
+
|
|
1319
|
+
/* Faces. */
|
|
1320
|
+
.scene polygon, .scene path, .scene ellipse, .scene rect { stroke-linejoin: round; }
|
|
1321
|
+
.scene .f-top, .scene .f-left, .scene .f-right { stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.8; transition: fill 0.45s var(--ease), stroke 0.45s var(--ease), fill-opacity 0.45s var(--ease); }
|
|
1322
|
+
.scene .box .f-top { fill: #2a2a31; } .scene .box .f-left { fill: #1d1d23; } .scene .box .f-right { fill: #141418; }
|
|
1323
|
+
.scene .ground .f-top { fill: url(#sc-floor); } .scene .ground .f-left { fill: #131316; } .scene .ground .f-right { fill: #0d0d10; }
|
|
1324
|
+
.scene .pad .ground .f-top { fill: #1d1d24; }
|
|
1325
|
+
.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
|
|
1326
|
+
.scene .rim { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; transition: stroke 0.8s var(--ease); }
|
|
1327
|
+
.scene .raven { fill: rgba(245, 245, 247, 0.9); }
|
|
1328
|
+
/* Labels painted on a slanted face: world-unit sizes, a sans face and no hinting, so they stay smooth at an angle. */
|
|
1329
|
+
.scene text { text-rendering: geometricPrecision; }
|
|
1330
|
+
.scene .ground-label { fill: rgba(245, 245, 247, 0.5); font-family: var(--font); font-size: 0.36px; font-weight: 700; letter-spacing: 0.16em; }
|
|
1331
|
+
.scene .shadow { fill: rgba(0, 0, 0, 0.5); filter: url(#sc-soft); }
|
|
1332
|
+
.scene .shadow.soft { fill: rgba(0, 0, 0, 0.42); }
|
|
1333
|
+
|
|
1334
|
+
/* The app window. */
|
|
1335
|
+
.scene .frame .f-top { fill: #34343d; } .scene .frame .f-left { fill: #26262d; } .scene .frame .f-right { fill: #1b1b21; }
|
|
1336
|
+
.scene .win * { vector-effect: non-scaling-stroke; }
|
|
1337
|
+
.scene .win-face { fill: #0e0e12; }
|
|
1338
|
+
.scene .win-bar { fill: #1b1b21; }
|
|
1339
|
+
.scene .dot { fill: rgba(255, 255, 255, 0.22); }
|
|
1340
|
+
.scene .win-url { fill: rgba(255, 255, 255, 0.07); }
|
|
1341
|
+
.scene .win-outline { fill: none; stroke: none; }
|
|
1342
|
+
.scene .panel { fill: #202027; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
|
|
1343
|
+
.scene .panel.added { stroke: rgba(242, 193, 95, 0.75); fill: #26221a; }
|
|
1344
|
+
.scene .panel.modified { stroke: rgba(255, 255, 255, 0.32); }
|
|
1345
|
+
.scene .panel-line { fill: rgba(255, 255, 255, 0.2); }
|
|
1346
|
+
.scene .panel-name { fill: rgba(245, 245, 247, 0.78); font-family: var(--font); font-size: 0.34px; font-weight: 600; }
|
|
1347
|
+
.scene .panel-in { animation: panel-in 0.7s var(--spring) both; }
|
|
1348
|
+
@keyframes panel-in { from { opacity: 0; transform: translate(0, -0.9px); } }
|
|
1349
|
+
.scene .ghost-panel { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; stroke-dasharray: 0.02 0.015; }
|
|
1350
|
+
.scene .ghost-panel.sketch { stroke: rgba(242, 193, 95, 0.7); stroke-width: 1.4; stroke-dasharray: 0.22 0.78; animation: sketch 2.6s linear infinite; }
|
|
1351
|
+
.scene .ghost-panel.sketch:nth-child(2) { animation-delay: -0.9s; }
|
|
1352
|
+
.scene .ghost-panel.sketch:nth-child(3) { animation-delay: -1.7s; }
|
|
1353
|
+
@keyframes sketch { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
|
|
1354
|
+
.scene .key-sign circle { fill: rgba(242, 193, 95, 0.12); stroke: var(--sc-amber); stroke-width: 1.4; }
|
|
1355
|
+
.scene .key-sign path { fill: none; stroke: var(--sc-amber); stroke-width: 1.6; stroke-linecap: round; }
|
|
1356
|
+
|
|
1357
|
+
/* The agent unit. */
|
|
1358
|
+
.scene .unit .f-top { fill: #2c2c34; } .scene .unit .f-left { fill: #202027; } .scene .unit .f-right { fill: #16161b; }
|
|
1359
|
+
.scene .unit-plate { fill: #121216; stroke: rgba(255, 255, 255, 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
|
|
1360
|
+
.scene .unit-led { fill: rgba(255, 255, 255, 0.18); }
|
|
1361
|
+
.scene .p-active .unit-led { fill: var(--sc-amber); animation: led 1.6s ease-in-out infinite; }
|
|
1362
|
+
.scene .p-done .unit-led { fill: var(--sc-green); }
|
|
1363
|
+
.scene .p-active .hover { animation: hover 3.6s ease-in-out infinite; }
|
|
1364
|
+
@keyframes hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
|
|
1365
|
+
@keyframes led { 50% { opacity: 0.35; } }
|
|
1366
|
+
|
|
1367
|
+
/* Posts, lamps, ports, towers, crates. */
|
|
1368
|
+
.scene .post .f-top { fill: #2e2e36; } .scene .post .f-left { fill: #222229; } .scene .post .f-right { fill: #18181d; }
|
|
1369
|
+
.scene .lamp .f-top { fill: #3a3a42; } .scene .lamp .f-left { fill: #2b2b32; } .scene .lamp .f-right { fill: #222228; }
|
|
1370
|
+
.scene .p-active .lamp .f-top { fill: #f6d58a; } .scene .p-active .lamp .f-left { fill: #c99a3f; } .scene .p-active .lamp .f-right { fill: #a87e30; }
|
|
1371
|
+
.scene .p-active .lamp { animation: led 1.8s ease-in-out infinite; }
|
|
1372
|
+
.scene .p-done .lamp .f-top { fill: #9be3b1; } .scene .p-done .lamp .f-left { fill: #57b673; } .scene .p-done .lamp .f-right { fill: #3f8f57; }
|
|
1373
|
+
.scene .p-failed .lamp .f-top { fill: #f8a597; } .scene .p-failed .lamp .f-left { fill: #d35a49; } .scene .p-failed .lamp .f-right { fill: #a9463a; }
|
|
1374
|
+
.scene .port .f-top { fill: #2e2e36; }
|
|
1375
|
+
.scene .port-led { fill: rgba(255, 255, 255, 0.18); }
|
|
1376
|
+
.scene .p-done .port-led { fill: var(--sc-green); }
|
|
1377
|
+
.scene .p-failed .port-led { fill: var(--sc-red); }
|
|
1378
|
+
.scene .tower .f-top { fill: #303039; } .scene .tower .f-left { fill: #23232a; } .scene .tower .f-right { fill: #18181e; }
|
|
1379
|
+
.scene .vent { fill: rgba(255, 255, 255, 0.07); }
|
|
1380
|
+
.scene .tower-led { fill: rgba(255, 255, 255, 0.18); }
|
|
1381
|
+
.scene .p-active .tower-led { fill: var(--sc-amber); animation: led 1.2s ease-in-out infinite; }
|
|
1382
|
+
.scene .p-done .tower-led { fill: var(--sc-green); }
|
|
1383
|
+
.scene .p-failed .tower-led { fill: var(--sc-red); }
|
|
1384
|
+
.scene .crate .f-top { fill: #3a342a; } .scene .crate .f-left { fill: #2b261f; } .scene .crate .f-right { fill: #221e18; }
|
|
1385
|
+
.scene .crate-x { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; }
|
|
1386
|
+
|
|
1387
|
+
/* Database layers, gateway, barrier. */
|
|
1388
|
+
.scene .cyl .f-left { fill: #1c1f1e; stroke: rgba(62, 207, 142, 0.18); }
|
|
1389
|
+
.scene .cyl .f-top { fill: #262b29; stroke: rgba(62, 207, 142, 0.38); }
|
|
1390
|
+
.scene .cyl { animation: layer-in 0.7s var(--spring) both; }
|
|
1391
|
+
.scene .cyl.ghost { animation: none; }
|
|
1392
|
+
.scene .cyl.ghost .f-left, .scene .cyl.ghost .f-top { fill: transparent; stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 5; }
|
|
1393
|
+
@keyframes layer-in { from { opacity: 0; transform: translateY(-16px); } }
|
|
1394
|
+
.scene .table { fill: rgba(62, 207, 142, 0.16); stroke: rgba(62, 207, 142, 0.7); stroke-width: 1; vector-effect: non-scaling-stroke; animation: panel-in 0.6s var(--spring) both; }
|
|
1395
|
+
.scene .pillar .f-top, .scene .lintel .f-top { fill: #33333b; } .scene .pillar .f-left, .scene .lintel .f-left { fill: #26262d; } .scene .pillar .f-right, .scene .lintel .f-right { fill: #1b1b20; }
|
|
1396
|
+
.scene .lintel-plate { fill: #f5f5f7; }
|
|
1397
|
+
.scene .bar .f-top { fill: #3b3222; } .scene .bar .f-left { fill: #2c261a; } .scene .bar .f-right { fill: #231e15; }
|
|
1398
|
+
.scene .bar-stripes { stroke: rgba(242, 193, 95, 0.8); stroke-width: 2; vector-effect: non-scaling-stroke; fill: none; }
|
|
1399
|
+
|
|
1400
|
+
/* Connections. */
|
|
1401
|
+
.scene .pipe-base { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 4; stroke-linecap: round; }
|
|
1402
|
+
.scene .pipe { fill: none; stroke: rgba(245, 245, 247, 0.75); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
|
|
1403
|
+
.scene .pipe-flow { fill: none; stroke: transparent; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 10; }
|
|
1404
|
+
.scene .p-planned .pipe-base { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.4; stroke-dasharray: 3 5; }
|
|
1405
|
+
.scene .p-active .pipe-base { stroke: rgba(242, 193, 95, 0.14); }
|
|
1406
|
+
.scene .p-active .pipe-flow { stroke: var(--sc-amber); animation: flow 1.4s linear infinite; }
|
|
1407
|
+
.scene .p-done .pipe { animation: trace 0.9s var(--ease) forwards; }
|
|
1408
|
+
.scene .p-failed .pipe-base { stroke: rgba(244, 113, 95, 0.55); stroke-width: 2; stroke-dasharray: 4 4; }
|
|
1409
|
+
.scene .p-idle .pipe-base { stroke: rgba(255, 255, 255, 0.07); }
|
|
1410
|
+
@keyframes flow { to { stroke-dashoffset: -13; } }
|
|
1411
|
+
@keyframes trace { to { stroke-dashoffset: 0; } }
|
|
1412
|
+
|
|
1413
|
+
/* Travellers. */
|
|
1414
|
+
.scene .token { fill: #f5f5f7; }
|
|
1415
|
+
.scene .token-halo { fill: rgba(245, 245, 247, 0.16); }
|
|
1416
|
+
.scene .spark .token { fill: #fbe2a6; } .scene .spark .token-halo { fill: rgba(242, 193, 95, 0.22); }
|
|
1417
|
+
.scene .record .token { fill: #7fe0b0; } .scene .record .token-halo { fill: rgba(62, 207, 142, 0.22); }
|
|
1418
|
+
.scene .blocked .token, .scene .leak .token { fill: #f8a597; } .scene .blocked .token-halo, .scene .leak .token-halo { fill: rgba(244, 113, 95, 0.22); }
|
|
1419
|
+
.scene .package .token { fill: #f5f5f7; }
|
|
1420
|
+
|
|
1421
|
+
/* Labels pinned to the world. */
|
|
1422
|
+
.scene .tag rect { fill: rgba(12, 12, 15, 0.94); stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
|
|
1423
|
+
.scene .tag text { fill: #d9d9df; font-family: var(--font); font-size: 9.5px; font-weight: 600; }
|
|
1424
|
+
.scene .p-done .tag-check rect, .scene .p-done .tag-port rect { stroke: rgba(111, 208, 140, 0.55); }
|
|
1425
|
+
.scene .p-done .tag-check text, .scene .p-done .tag-port text { fill: var(--sc-green); }
|
|
1426
|
+
.scene .p-failed .tag-check rect { stroke: rgba(244, 113, 95, 0.6); }
|
|
1427
|
+
.scene .p-failed .tag-check text { fill: var(--red-ink); }
|
|
1428
|
+
.scene .p-active .tag-check rect { stroke: rgba(242, 193, 95, 0.6); }
|
|
1429
|
+
|
|
1430
|
+
/* Part states. */
|
|
1431
|
+
.scene .part { outline: none; cursor: pointer; }
|
|
1432
|
+
.scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 600; stroke-dashoffset: 600; animation: trace 1.2s var(--ease) forwards; }
|
|
1433
|
+
.scene .part.p-planned .win-face, .scene .part.p-planned .win-bar, .scene .part.p-planned image, .scene .part.p-planned .raven { opacity: 0.25; }
|
|
1434
|
+
.scene .part.p-planned .shadow { opacity: 0.3; }
|
|
1435
|
+
.scene .part.p-idle { opacity: 0.55; }
|
|
1436
|
+
.scene .part.p-done { animation: settle-part 0.6s var(--spring) both; }
|
|
1437
|
+
@keyframes settle-part { from { transform: translateY(-6px); } }
|
|
1438
|
+
.scene .part.p-failed .f-top { fill: #3c1f1c; stroke: rgba(244, 113, 95, 0.75); }
|
|
1439
|
+
.scene .part.p-failed .f-left { fill: #2c1715; stroke: rgba(244, 113, 95, 0.5); }
|
|
1440
|
+
.scene .part.p-failed .f-right { fill: #211211; stroke: rgba(244, 113, 95, 0.4); }
|
|
1441
|
+
.scene .part.p-failed .win-face { fill: #1a0f0e; }
|
|
1442
|
+
.scene .part.p-waiting .f-top, .scene .part.p-waiting .f-left, .scene .part.p-waiting .f-right { stroke: rgba(242, 193, 95, 0.8); stroke-dasharray: 5 4; }
|
|
1443
|
+
.scene .part.p-waiting .win-face { fill: #17140c; }
|
|
1444
|
+
.scene .part.is-focus { filter: drop-shadow(0 0 10px rgba(242, 193, 95, 0.22)); }
|
|
1445
|
+
.scene .part.is-focus.p-active .frame .f-top { fill: #3b3a33; }
|
|
1446
|
+
.scene .part.is-selected .f-top, .scene .part.is-selected .f-left, .scene .part.is-selected .f-right { stroke: rgba(245, 245, 247, 0.85); stroke-width: 1.4; }
|
|
1447
|
+
.scene .part:focus-visible .f-top, .scene .part:focus-visible .f-left, .scene .part:focus-visible .f-right { stroke: var(--sc-amber); stroke-width: 2; }
|
|
1448
|
+
.scene .part:hover .f-top { stroke: rgba(255, 255, 255, 0.35); }
|
|
1449
|
+
|
|
1450
|
+
/* Phases: a waiting scene holds still around the part that needs you; a failed one marks it. */
|
|
1451
|
+
.scene.is-wait .part:not(.p-waiting):not([data-part="platform"]) { opacity: 0.5; transition: opacity 0.5s var(--ease); }
|
|
1452
|
+
.scene.is-wait .pipe-flow, .scene.is-wait .hover, .scene.is-wait .sketch, .scene.is-wait .token-g { animation-play-state: paused; }
|
|
1453
|
+
.scene.is-fail .part:not(.p-failed):not([data-part="platform"]) { opacity: 0.7; }
|
|
1454
|
+
.scene.is-done [data-part="platform"] .rim { stroke: rgba(111, 208, 140, 0.5); }
|
|
1455
|
+
.scene.is-stopped .part { opacity: 0.6; }
|
|
1456
|
+
.scene .fx-payoff .ring { fill: none; stroke: rgba(111, 208, 140, 0.55); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: payoff 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
|
|
1457
|
+
.scene .fx-payoff .ring.two { stroke: rgba(245, 245, 247, 0.35); animation-delay: 0.22s; }
|
|
1458
|
+
@keyframes payoff { from { opacity: 0.9; transform: scale(0.35); } to { opacity: 0; transform: scale(1.15); } }
|
|
1459
|
+
.scene.is-demo .tag rect { stroke-dasharray: 3 3; }
|
|
1460
|
+
|
|
1461
|
+
.work-wait { margin-top: 16px; display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.35); }
|
|
1462
|
+
.work-wait strong { font-size: 14px; font-weight: 600; color: var(--warn-ink); }
|
|
1463
|
+
.work-wait p { font-size: 13.5px; line-height: 1.5; color: var(--ink); }
|
|
1464
|
+
.work-eyebrow.is-wait { color: var(--warn-ink); }
|
|
1465
|
+
.work-eyebrow.is-wait i { background: var(--sc-amber); }
|
|
1466
|
+
.gallery-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
1467
|
+
|
|
1468
|
+
@media (max-width: 1200px) {
|
|
1469
|
+
.canvas.is-scene { grid-template-columns: minmax(0, 1fr); }
|
|
1470
|
+
.live-window { position: absolute; right: 18px; top: 52px; width: 240px; z-index: 3; }
|
|
1471
|
+
}
|
|
1472
|
+
@media (max-width: 900px) {
|
|
1473
|
+
.stage.is-work.has-panel .canvas { right: 0; }
|
|
1474
|
+
.stage.is-work .stage-body.panel { left: 10px; right: 10px; width: auto; top: auto; max-height: 46%; }
|
|
1475
|
+
.live-window { width: 180px; }
|
|
1476
|
+
}
|
|
1477
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1478
|
+
.scene *, .scene .part, .scene-caption, .scene-inspect { animation: none !important; transition: none !important; }
|
|
1479
|
+
.scene .p-done .pipe { stroke-dashoffset: 0; }
|
|
1480
|
+
.scene .part.p-planned .f-top, .scene .part.p-planned .f-left, .scene .part.p-planned .f-right { stroke-dashoffset: 0; }
|
|
1481
|
+
.scene .p-active .pipe-flow { stroke-dasharray: none; }
|
|
1482
|
+
.scene .fx-payoff { display: none; }
|
|
1483
|
+
}
|
|
1484
|
+
|
|
1485
|
+
/* Scene light: brighter faces and a lit front edge, so objects read as solid against the floor. */
|
|
1486
|
+
.canvas.is-scene:not(:has(.live-window)) { grid-template-columns: minmax(0, 1fr); }
|
|
1487
|
+
.scene .box .f-top { fill: #3c3c46; } .scene .box .f-left { fill: #2b2b33; } .scene .box .f-right { fill: #1f1f26; }
|
|
1488
|
+
.scene .edge { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 1; stroke-linecap: round; }
|
|
1489
|
+
.scene .ground .f-top { fill: #202027; } .scene .ground .f-left { fill: #18181d; } .scene .ground .f-right { fill: #111115; }
|
|
1490
|
+
.scene .ground .edge { stroke: rgba(255, 255, 255, 0.16); }
|
|
1491
|
+
.scene .grid-lines .grid { stroke: rgba(255, 255, 255, 0.06); }
|
|
1492
|
+
.scene .frame .f-top { fill: #4b4b56; } .scene .frame .f-left { fill: #35353e; } .scene .frame .f-right { fill: #27272e; }
|
|
1493
|
+
.scene .unit .f-top { fill: #44444e; } .scene .unit .f-left { fill: #31313a; } .scene .unit .f-right { fill: #24242b; }
|
|
1494
|
+
.scene .post .f-top { fill: #42424c; } .scene .post .f-left { fill: #30303a; } .scene .post .f-right { fill: #23232a; }
|
|
1495
|
+
.scene .lamp .f-top { fill: #55555f; } .scene .lamp .f-left { fill: #3e3e47; } .scene .lamp .f-right { fill: #2f2f37; }
|
|
1496
|
+
.scene .tower .f-top { fill: #45454f; } .scene .tower .f-left { fill: #32323b; } .scene .tower .f-right { fill: #25252c; }
|
|
1497
|
+
.scene .pillar .f-top, .scene .lintel .f-top { fill: #474752; } .scene .pillar .f-left, .scene .lintel .f-left { fill: #34343d; } .scene .pillar .f-right, .scene .lintel .f-right { fill: #26262e; }
|
|
1498
|
+
.scene .crate .f-top { fill: #4a4133; } .scene .crate .f-left { fill: #383126; } .scene .crate .f-right { fill: #2b261e; }
|
|
1499
|
+
.scene .port .f-top { fill: #42424c; }
|
|
1500
|
+
.scene .cyl .f-left { fill: #232826; } .scene .cyl .f-top { fill: #303733; }
|
|
1501
|
+
.scene .part.p-planned .edge { stroke: none; }
|
|
1502
|
+
.scene .part.p-failed .edge { stroke: rgba(244, 113, 95, 0.6); }
|
|
1503
|
+
.scene .part.p-done .edge { stroke: rgba(255, 255, 255, 0.34); }
|
|
1504
|
+
.scene-stage::before { content: ""; position: absolute; left: 10%; right: 10%; top: 22%; bottom: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.045), transparent); pointer-events: none; }
|
|
1505
|
+
|
|
1506
|
+
/* ---------- units and brands: every object is a machined unit with its mark; providers wear their own colours ---------- */
|
|
1507
|
+
.scene .unit .f-top { fill: #41414b; } .scene .unit .f-left { fill: #2e2e36; } .scene .unit .f-right { fill: #222229; }
|
|
1508
|
+
.scene .pedestal .f-top { fill: #2a2a31; } .scene .pedestal .f-left { fill: #1e1e24; } .scene .pedestal .f-right { fill: #16161b; }
|
|
1509
|
+
.scene .unit-ring { fill: none; stroke: var(--brand); stroke-opacity: 0.55; stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: stroke 0.4s var(--ease), stroke-opacity 0.4s var(--ease); }
|
|
1510
|
+
.scene .unit-led { fill: var(--brand); fill-opacity: 0.35; }
|
|
1511
|
+
.scene .p-planned .unit-ring { stroke-opacity: 0.15; }
|
|
1512
|
+
.scene .p-active .unit-ring { stroke: var(--sc-amber); stroke-opacity: 0.95; }
|
|
1513
|
+
.scene .p-active .unit-led { fill: var(--sc-amber); fill-opacity: 1; animation: led 1.6s ease-in-out infinite; }
|
|
1514
|
+
.scene .p-done .unit-ring { stroke: var(--sc-green); stroke-opacity: 0.9; }
|
|
1515
|
+
.scene .p-done .unit-led { fill: var(--sc-green); fill-opacity: 1; }
|
|
1516
|
+
.scene .p-failed .unit-ring { stroke: var(--sc-red); stroke-opacity: 0.95; }
|
|
1517
|
+
.scene .p-failed .unit-led { fill: var(--sc-red); fill-opacity: 1; }
|
|
1518
|
+
.scene .p-waiting .unit-ring { stroke: var(--sc-amber); stroke-dasharray: 4 3; }
|
|
1519
|
+
.scene .p-waiting .unit-led { fill: var(--sc-amber); fill-opacity: 1; }
|
|
1520
|
+
.scene .p-done .unit-wrap .edge, .scene .p-active .unit-wrap .edge { stroke: rgba(255, 255, 255, 0.4); }
|
|
1521
|
+
|
|
1522
|
+
/* Supabase: green seams between layers, the bolt on a dark badge. */
|
|
1523
|
+
.scene .brand-supabase .cyl .f-top { fill: #2c3530; stroke: rgba(62, 207, 142, 0.55); }
|
|
1524
|
+
.scene .brand-supabase .cyl .f-left { fill: #1f2522; stroke: rgba(62, 207, 142, 0.22); }
|
|
1525
|
+
.scene .seam { fill: none; stroke: var(--brand); stroke-opacity: 0.7; stroke-width: 1.4; stroke-linecap: round; filter: url(#sc-glow); }
|
|
1526
|
+
.scene .p-active .seam { animation: led 1.8s ease-in-out infinite; }
|
|
1527
|
+
.scene .brand-badge { fill: #0f1512; stroke: rgba(62, 207, 142, 0.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
|
|
1528
|
+
|
|
1529
|
+
/* Google: coloured caps on the pillars, four lights by the G. */
|
|
1530
|
+
.scene .cap.g-blue .f-top { fill: #4285F4; } .scene .cap.g-blue .f-left { fill: #3367c7; } .scene .cap.g-blue .f-right { fill: #2a55a6; }
|
|
1531
|
+
.scene .cap.g-green .f-top { fill: #34A853; } .scene .cap.g-green .f-left { fill: #2b8a45; } .scene .cap.g-green .f-right { fill: #237038; }
|
|
1532
|
+
.scene .brand-google .lintel .f-top { fill: #4a4a55; }
|
|
1533
|
+
.scene .lintel-plate { fill: #f5f5f7; }
|
|
1534
|
+
.scene .gdot { opacity: 0.85; }
|
|
1535
|
+
.scene .p-active .gdot { animation: led 1.4s ease-in-out infinite; }
|
|
1536
|
+
.scene .p-planned .cap .f-top, .scene .p-planned .cap .f-left, .scene .p-planned .cap .f-right { fill-opacity: 0.08; }
|
|
1537
|
+
|
|
1538
|
+
/* GitHub: a dark vault with a commit graph. */
|
|
1539
|
+
.scene .vault .f-top { fill: #2d333b; } .scene .vault .f-left { fill: #22272e; } .scene .vault .f-right { fill: #1c2128; }
|
|
1540
|
+
.scene .gitgraph path { fill: none; stroke: rgba(240, 246, 252, 0.7); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
|
|
1541
|
+
.scene .gitgraph .branch { stroke: #3fb950; }
|
|
1542
|
+
.scene .gitgraph circle { fill: #0d1117; stroke: rgba(240, 246, 252, 0.85); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
|
|
1543
|
+
.scene .gitgraph .branch-dot { stroke: #3fb950; }
|
|
1544
|
+
.scene .gitgraph .tip { fill: #f5f5f7; }
|
|
1545
|
+
.scene .p-active .gitgraph .tip { animation: led 1.4s ease-in-out infinite; }
|
|
1546
|
+
|
|
1547
|
+
/* Vercel: a black pad and the white triangle. */
|
|
1548
|
+
.scene .brand-vercel .ground .f-top { fill: #0c0c0e; } .scene .brand-vercel .ground .f-left { fill: #08080a; } .scene .brand-vercel .ground .f-right { fill: #050506; }
|
|
1549
|
+
.scene .brand-vercel .ground .edge { stroke: rgba(245, 245, 247, 0.35); }
|
|
1550
|
+
.scene .pyramid .f-left { fill: #f5f5f7; stroke: rgba(255, 255, 255, 0.4); stroke-width: 0.8; }
|
|
1551
|
+
.scene .pyramid .f-right { fill: #b4b4bc; stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.8; }
|
|
1552
|
+
.scene .pyramid .edge { fill: none; stroke: #ffffff; stroke-width: 1.2; }
|
|
1553
|
+
.scene .part.p-planned .pyramid .f-left, .scene .part.p-planned .pyramid .f-right { fill-opacity: 0.06; stroke: rgba(255, 255, 255, 0.3); }
|
|
1554
|
+
.scene .part.p-failed .pyramid .f-left { fill: #f2b3a9; }
|
|
1555
|
+
|
|
1556
|
+
/* npm's command unit and the framework plate on the dev server. */
|
|
1557
|
+
.scene .unit-wrap .shadow { opacity: 0.9; }
|
|
1558
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1559
|
+
.scene .seam, .scene .gdot, .scene .gitgraph .tip { animation: none !important; }
|
|
1560
|
+
}
|
|
1561
|
+
.scene .sign .f-top { fill: #4a4a55; } .scene .sign .f-left { fill: #3a3a44; } .scene .sign .f-right { fill: #2a2a32; }
|
|
1562
|
+
|
|
1563
|
+
/* ---------- the work panel: a title, a line, a few chips, big tiles. Detail waits behind "Details". ---------- */
|
|
1564
|
+
.panel h1.wtitle { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; max-width: none; }
|
|
1565
|
+
.whead { display: flex; align-items: center; gap: 12px; }
|
|
1566
|
+
.whead h1.wtitle { padding-right: 40px; }
|
|
1567
|
+
.wbadge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #0a0a0b; animation: badge-in 0.5s var(--spring, cubic-bezier(0.34, 1.45, 0.64, 1)) both; }
|
|
1568
|
+
.wbadge.is-pass { background: var(--green); }
|
|
1569
|
+
.wbadge.is-fail { background: var(--red); }
|
|
1570
|
+
.wbadge.is-warn { background: var(--warn); }
|
|
1571
|
+
.wbadge.is-wait { background: var(--warn); }
|
|
1572
|
+
.wbadge.is-stop, .wbadge.is-plan { background: var(--panel-3); color: var(--ink-2); }
|
|
1573
|
+
@keyframes badge-in { from { transform: scale(0.6); opacity: 0; } }
|
|
1574
|
+
.wline { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
|
|
1575
|
+
.wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
|
|
1576
|
+
.wchip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
|
|
1577
|
+
.wchip .ico { color: var(--ink-2); }
|
|
1578
|
+
.wchip img { flex: none; }
|
|
1579
|
+
.wchip.is-pass { border-color: rgba(111, 208, 140, 0.45); color: var(--green); } .wchip.is-pass .ico { color: var(--green); }
|
|
1580
|
+
.wchip.is-fail { border-color: rgba(244, 113, 95, 0.5); color: var(--red-ink); } .wchip.is-fail .ico { color: var(--red); }
|
|
1581
|
+
.wchip.is-wait { border-color: rgba(242, 193, 95, 0.5); color: var(--warn-ink); font-family: var(--mono); font-size: 11.5px; } .wchip.is-wait .ico { color: var(--warn); }
|
|
1582
|
+
.wmodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
|
|
1583
|
+
.wmode { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); font-size: 13px; font-weight: 500; color: var(--ink-2); transition: border-color var(--t-hover, 140ms), background var(--t-hover, 140ms), color var(--t-hover, 140ms); }
|
|
1584
|
+
.wmode:hover:not(.on):not(:disabled) { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
|
|
1585
|
+
.wmode.on { border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.08); color: var(--ink); }
|
|
1586
|
+
.wmode-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
|
|
1587
|
+
.wmode.on .wmode-ico { background: #f5f5f7; color: #0a0a0b; }
|
|
1588
|
+
.wtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 22px; }
|
|
1589
|
+
.wtiles.is-one { grid-template-columns: minmax(0, 1fr); }
|
|
1590
|
+
.wtile { display: grid; justify-items: center; align-content: center; gap: 7px; min-height: 84px; padding: 12px 8px; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: transform var(--t-hover, 140ms), background var(--t-hover, 140ms), border-color var(--t-hover, 140ms); }
|
|
1591
|
+
.wtile:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
|
|
1592
|
+
.wtile:active:not(:disabled) { transform: translateY(0); }
|
|
1593
|
+
.wtile:disabled { opacity: 0.5; }
|
|
1594
|
+
.wtile-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255, 255, 255, 0.07); color: var(--ink); }
|
|
1595
|
+
.wtile-ico svg { width: 15px; height: 15px; }
|
|
1596
|
+
.wtile-note { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
|
|
1597
|
+
.wtile.is-primary { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: center; min-height: 56px; border-color: transparent; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; font-size: 15px; }
|
|
1598
|
+
.wtile.is-primary .wtile-ico { width: 28px; height: 28px; border-radius: 999px; background: #0a0a0b; color: #f5f5f7; }
|
|
1599
|
+
.wtile.is-primary:hover:not(:disabled) { background: #fff; border-color: transparent; }
|
|
1600
|
+
.wtile.is-danger { border-color: rgba(244, 113, 95, 0.45); color: var(--red-ink); }
|
|
1601
|
+
.wtile.is-danger .wtile-ico { background: rgba(244, 113, 95, 0.14); color: var(--red); }
|
|
1602
|
+
.wtiles.is-one .wtile.is-danger { grid-template-columns: auto auto auto; justify-content: center; min-height: 52px; border-radius: 999px; }
|
|
1603
|
+
.wtiles.is-one .wtile.is-danger .wtile-ico { width: 26px; height: 26px; }
|
|
1604
|
+
.wlink { display: block; margin: 14px auto 0; padding: 6px 10px; border-radius: 8px; font-size: 13px; color: var(--ink-3); }
|
|
1605
|
+
.wlink:hover { color: var(--ink); }
|
|
1606
|
+
.wlink.is-danger { color: var(--red-ink); }
|
|
1607
|
+
.wdetails { margin-top: 18px; border-top: 1px solid var(--line); }
|
|
1608
|
+
.wdetails > summary { padding: 12px 0 4px; font-size: 13px; color: var(--ink-3); cursor: pointer; list-style: none; }
|
|
1609
|
+
.wdetails > summary::before { content: "+ "; font-family: var(--mono); }
|
|
1610
|
+
.wdetails[open] > summary::before { content: "\2212 "; }
|
|
1611
|
+
.wdetails .agent-reply-body { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
|
|
1612
|
+
.work-steps.is-compact { margin-top: 16px; }
|
|
1613
|
+
.work-steps.is-compact .work-step { padding-bottom: 12px; }
|
|
1614
|
+
.wgallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
|
|
1615
|
+
.wscene { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13.5px; font-weight: 600; color: var(--ink-2); text-align: left; transition: border-color var(--t-hover, 140ms), background var(--t-hover, 140ms), color var(--t-hover, 140ms); }
|
|
1616
|
+
.wscene:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
|
|
1617
|
+
.wscene.on { border-color: rgba(245, 245, 247, 0.85); color: var(--ink); background: rgba(255, 255, 255, 0.08); }
|
|
1618
|
+
.wscene-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #0f0f12; border: 1px solid var(--line); }
|
|
1619
|
+
.wphases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
|
|
1620
|
+
.wphase { display: grid; justify-items: center; gap: 5px; padding: 9px 2px 8px; border-radius: 12px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 500; color: var(--ink-3); transition: color var(--t-hover, 140ms), border-color var(--t-hover, 140ms); }
|
|
1621
|
+
.wphase:hover { color: var(--ink); }
|
|
1622
|
+
.wphase.on { color: var(--ink); border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.07); }
|
|
1623
|
+
.wphase.is-work .wphase-ico { color: var(--sc-amber, #f2c15f); }
|
|
1624
|
+
.wphase.is-wait .wphase-ico { color: var(--warn); }
|
|
1625
|
+
.wphase.is-fail .wphase-ico { color: var(--red); }
|
|
1626
|
+
.wphase.is-done .wphase-ico { color: var(--green); }
|
|
1627
|
+
.wphase-ico { display: grid; place-items: center; height: 16px; }
|
|
1628
|
+
@media (prefers-reduced-motion: reduce) { .wbadge, .wtile { animation: none; transition: none; } }
|
|
1629
|
+
.screen-body.is-live { background: #0b0b0d; }
|
|
1630
|
+
.screen-body.is-live iframe { opacity: 0; transition: opacity 0.35s var(--ease); }
|
|
1631
|
+
.screen-body.is-live iframe.is-loaded { opacity: 1; }
|
|
1632
|
+
.screen-wait { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--ink-3); }
|
|
1633
|
+
|
|
1634
|
+
/* Mascots: a provider's mark walks, rolls or hops along the connection while that step works. */
|
|
1635
|
+
.scene .walker-shadow { fill: rgba(0, 0, 0, 0.45); }
|
|
1636
|
+
.scene .walker-body { transform-box: fill-box; transform-origin: 50% 100%; }
|
|
1637
|
+
.scene .walker.is-walk .walker-body { animation: waddle 0.42s ease-in-out infinite alternate; }
|
|
1638
|
+
.scene .walker.is-hop .walker-body { animation: hop 0.6s cubic-bezier(0.3, 0, 0.4, 1) infinite; }
|
|
1639
|
+
.scene .walker.is-roll .walker-body { transform-origin: 50% 50%; animation: roll 0.9s linear infinite; }
|
|
1640
|
+
.scene .walker image { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
|
|
1641
|
+
@keyframes waddle { from { transform: translateY(0) rotate(-7deg); } to { transform: translateY(-3px) rotate(7deg); } }
|
|
1642
|
+
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1.08, 0.9); } 45% { transform: translateY(-9px) scale(0.95, 1.06); } 70% { transform: translateY(-2px) scale(1, 1); } }
|
|
1643
|
+
@keyframes roll { to { transform: rotate(360deg); } }
|
|
1644
|
+
.scene.is-wait .walker { display: none; }
|
|
1645
|
+
@media (prefers-reduced-motion: reduce) { .scene .walker { display: none; } }
|
|
1646
|
+
|
|
1647
|
+
/* ---------- windows: findings, agents, releases and chat in the same calm kit as the work panel ---------- */
|
|
1648
|
+
|
|
1649
|
+
/* Drawer frame: a round close, a short line. */
|
|
1650
|
+
.drawer-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); transition: background 0.15s, color 0.15s; }
|
|
1651
|
+
.drawer-x:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
|
|
1652
|
+
.drawer { width: min(920px, calc(100vw - 40px)); }
|
|
1653
|
+
.drawer-head h3 { font-size: 22px; }
|
|
1654
|
+
|
|
1655
|
+
/* Findings. */
|
|
1656
|
+
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
|
|
1657
|
+
.fchip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); }
|
|
1658
|
+
.fchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
|
|
1659
|
+
.fchip.is-critical i { background: var(--red); } .fchip.is-critical { border-color: rgba(244, 113, 95, 0.45); }
|
|
1660
|
+
.fchip.is-warning i { background: var(--warn); } .fchip.is-warning { border-color: rgba(242, 193, 95, 0.4); }
|
|
1661
|
+
.fchip.is-info i { background: rgba(255, 255, 255, 0.4); }
|
|
1662
|
+
.fchip.is-time { color: var(--ink-3); border-style: dashed; }
|
|
1663
|
+
.panel .findings { display: grid; gap: 10px; margin-top: 18px; }
|
|
1664
|
+
.panel .group { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); overflow: hidden; }
|
|
1665
|
+
.panel .group-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
|
|
1666
|
+
.panel .group-head h2 { flex: 1; font-size: 14px; font-weight: 600; }
|
|
1667
|
+
.panel .group-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
|
|
1668
|
+
.panel .group ul { list-style: none; }
|
|
1669
|
+
.panel .group li + li { border-top: 1px solid var(--line); }
|
|
1670
|
+
.panel .finding, .panel .finding.is-static { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 0; background: none; text-align: left; transition: background 0.15s; }
|
|
1671
|
+
.panel .finding:hover:not(.is-static) { background: rgba(255, 255, 255, 0.04); }
|
|
1672
|
+
.panel .finding .finding-main { display: grid; gap: 5px; }
|
|
1673
|
+
.panel .finding .finding-title { font-size: 14px; font-weight: 500; line-height: 1.35; }
|
|
1674
|
+
.panel .finding .finding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; }
|
|
1675
|
+
.panel .finding .sev { font-size: 11.5px; font-weight: 600; }
|
|
1676
|
+
.panel .finding .where code { font-size: 11px; color: var(--ink-3); }
|
|
1677
|
+
.panel .finding-go { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; color: var(--ink); }
|
|
1678
|
+
.panel .finding.is-first .finding-go { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0b; }
|
|
1679
|
+
.panel .finding-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 11px; color: var(--ink-2); }
|
|
1680
|
+
.findings-go { margin-top: 18px; }
|
|
1681
|
+
|
|
1682
|
+
/* Agents: one card each, one big next step. */
|
|
1683
|
+
.agent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
|
|
1684
|
+
.drawer .agent-card { display: grid; align-content: start; gap: 14px; padding: 18px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); }
|
|
1685
|
+
.drawer .agent-card.is-connected { box-shadow: inset 0 0 0 1px rgba(111, 208, 140, 0.35); }
|
|
1686
|
+
.drawer .agent-card.is-selected { box-shadow: inset 0 0 0 1.5px rgba(245, 245, 247, 0.7); }
|
|
1687
|
+
.drawer .agent-card + .agent-card { margin-top: 0; }
|
|
1688
|
+
.agent-card-head { display: flex; align-items: center; gap: 12px; }
|
|
1689
|
+
.agent-card-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #0a0a0c; box-shadow: inset 0 0 0 1px var(--line-2); }
|
|
1690
|
+
.agent-card-name { flex: 1; display: grid; gap: 4px; min-width: 0; }
|
|
1691
|
+
.agent-card-name h4 { font-size: 16px; font-weight: 600; }
|
|
1692
|
+
.agent-card-docs { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ink-3); }
|
|
1693
|
+
.agent-card-docs:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
|
|
1694
|
+
.agent-card-note { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
|
|
1695
|
+
.agent-card-actions { display: flex; gap: 8px; }
|
|
1696
|
+
.agent-cta { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13.5px; font-weight: 600; color: var(--ink); transition: background 0.15s, border-color 0.15s; }
|
|
1697
|
+
.agent-cta:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); }
|
|
1698
|
+
.agent-cta.is-primary { background: #f5f5f7; border-color: #f5f5f7; color: #0a0a0b; }
|
|
1699
|
+
.agent-cta.is-primary:hover:not(:disabled) { background: #fff; }
|
|
1700
|
+
.agent-cta.is-on { color: var(--green); border-color: rgba(111, 208, 140, 0.45); }
|
|
1701
|
+
.agent-cta.is-quiet { flex: 0 0 auto; color: var(--ink-2); }
|
|
1702
|
+
.agent-how > summary, .agent-output > summary { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); cursor: pointer; list-style: none; }
|
|
1703
|
+
.agent-how > summary::before, .agent-output > summary::before { content: "+"; font-family: var(--mono); }
|
|
1704
|
+
.agent-how[open] > summary::before, .agent-output[open] > summary::before { content: "\2212"; }
|
|
1705
|
+
.agent-how .steps { margin-top: 12px; }
|
|
1706
|
+
.agent-how .step-body p { font-size: 12.5px; }
|
|
1707
|
+
.agent-output { margin-top: 16px; }
|
|
1708
|
+
.agent-output pre { margin-top: 10px; }
|
|
1709
|
+
|
|
1710
|
+
/* Releases. */
|
|
1711
|
+
.releases { display: grid; gap: 22px; }
|
|
1712
|
+
.rel-title { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; font-size: 15px; font-weight: 600; }
|
|
1713
|
+
.rel-title .ico { color: var(--ink-3); }
|
|
1714
|
+
.rel-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
|
|
1715
|
+
.rel-cards { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
|
|
1716
|
+
.rel-card { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); }
|
|
1717
|
+
.rel-card.is-current { box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.4); }
|
|
1718
|
+
.rel-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
|
|
1719
|
+
.rel-tag { font-family: var(--mono); font-size: 14px; font-weight: 600; }
|
|
1720
|
+
.rel-badge { height: 22px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 500; border: 1px solid var(--line-2); color: var(--ink-2); }
|
|
1721
|
+
.rel-badge.is-current { color: var(--warn-ink); border-color: rgba(242, 193, 95, 0.45); }
|
|
1722
|
+
.rel-badge.is-prod { color: var(--green); border-color: rgba(111, 208, 140, 0.4); }
|
|
1723
|
+
.rel-card .rel-sum { font-size: 13px; color: var(--ink-2); }
|
|
1724
|
+
.rel-card .rel-meta { font-size: 11.5px; color: var(--ink-3); }
|
|
1725
|
+
.rel-compare { justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 500; color: var(--ink); }
|
|
1726
|
+
.rel-compare:hover { background: rgba(255, 255, 255, 0.07); }
|
|
1727
|
+
.rel-empty { display: grid; justify-items: start; gap: 8px; padding: 16px; border-radius: 16px; border: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-3); }
|
|
1728
|
+
.rel-empty code { padding: 4px 8px; border-radius: 7px; background: #060607; font-family: var(--mono); font-size: 12px; color: var(--ink); }
|
|
1729
|
+
.rel-compare-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
|
|
1730
|
+
.rel-field { display: grid; gap: 6px; font-size: 12px; color: var(--ink-3); }
|
|
1731
|
+
.rel-field .sel { width: 100%; height: 42px; padding: 0 14px; border-radius: 12px; }
|
|
1732
|
+
.rel-arrow { display: grid; place-items: center; height: 42px; color: var(--ink-3); }
|
|
1733
|
+
.rel-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
|
|
1734
|
+
.rel-actions .wtile { min-height: 96px; }
|
|
1735
|
+
.rel-actions .wtile-note { text-align: center; }
|
|
1736
|
+
|
|
1737
|
+
/* Agent chat. */
|
|
1738
|
+
.side.chat { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 0; padding: 0; }
|
|
1739
|
+
.chat-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
|
|
1740
|
+
.chat-agents { flex: 1; display: flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); }
|
|
1741
|
+
.chat-agent { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); transition: background 0.15s, color 0.15s; }
|
|
1742
|
+
.chat-agent:hover:not(:disabled):not(.on) { color: var(--ink); }
|
|
1743
|
+
.chat-agent.on { background: #f5f5f7; color: #0a0a0b; }
|
|
1744
|
+
.chat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
|
|
1745
|
+
.chat-dot.is-ok { background: var(--green); } .chat-dot.is-wait { background: var(--warn); }
|
|
1746
|
+
.chat-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
|
|
1747
|
+
.chat-close:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
|
|
1748
|
+
.chat-meta { display: flex; align-items: center; gap: 8px; padding: 0 14px 12px; border-bottom: 1px solid var(--line); }
|
|
1749
|
+
.chat-status { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12.5px; font-weight: 500; color: var(--warn-ink); }
|
|
1750
|
+
.chat-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
|
|
1751
|
+
.chat-status.is-ok { color: var(--green); } .chat-status.is-ok i { background: var(--green); }
|
|
1752
|
+
.chat-model { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); font-size: 12.5px; color: var(--ink-3); }
|
|
1753
|
+
.chat-model select { flex: 1; min-width: 0; height: 28px; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 12.5px/1 var(--font); cursor: pointer; }
|
|
1754
|
+
.chat-model select option { background: #141418; color: var(--ink); }
|
|
1755
|
+
.chat-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--ink-2); }
|
|
1756
|
+
.chat-icon:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
|
|
1757
|
+
.side.chat .thread { padding: 16px 14px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
|
|
1758
|
+
.chat-welcome { display: grid; justify-items: center; gap: 8px; margin: auto 0; padding: 20px 6px; text-align: center; }
|
|
1759
|
+
.chat-welcome-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); margin-bottom: 6px; }
|
|
1760
|
+
.chat-welcome h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
|
|
1761
|
+
.chat-welcome p { font-size: 13px; color: var(--ink-3); }
|
|
1762
|
+
.chat-suggest { display: grid; gap: 8px; width: 100%; margin-top: 12px; }
|
|
1763
|
+
.chat-suggestion { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: left; transition: background 0.15s, border-color 0.15s; }
|
|
1764
|
+
.chat-suggestion .ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); color: var(--ink-2); }
|
|
1765
|
+
.chat-suggestion:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); }
|
|
1766
|
+
.chat-suggestion:disabled { opacity: 0.45; }
|
|
1767
|
+
.side.chat .msg { display: grid; gap: 6px; max-width: 100%; }
|
|
1768
|
+
.side.chat .msg.me { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; background: #f5f5f7; color: #0a0a0b; }
|
|
1769
|
+
.side.chat .msg.me .body p { color: #0a0a0b; font-size: 13.5px; }
|
|
1770
|
+
.side.chat .msg.agent, .side.chat .msg.err { padding: 0; }
|
|
1771
|
+
.side.chat .msg .who { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
|
|
1772
|
+
.side.chat .msg .who .t { font-weight: 400; color: var(--ink-3); }
|
|
1773
|
+
.msg-avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); }
|
|
1774
|
+
.msg-avatar.is-err { background: rgba(244, 113, 95, 0.15); color: var(--red); font-weight: 700; font-size: 12px; }
|
|
1775
|
+
.side.chat .msg.agent .body, .side.chat .msg.err .body { padding: 12px 14px; border-radius: 6px 16px 16px 16px; background: #121216; box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
|
|
1776
|
+
.side.chat .msg.err .body { box-shadow: inset 0 0 0 1px rgba(244, 113, 95, 0.35); }
|
|
1777
|
+
.side.chat .msg.sys { justify-self: center; text-align: center; font-size: 12.5px; color: var(--ink-3); }
|
|
1778
|
+
.chat-typing { display: inline-flex; gap: 3px; }
|
|
1779
|
+
.chat-typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); animation: typing 1.2s ease-in-out infinite; }
|
|
1780
|
+
.chat-typing i:nth-child(2) { animation-delay: 0.15s; } .chat-typing i:nth-child(3) { animation-delay: 0.3s; }
|
|
1781
|
+
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
|
|
1782
|
+
.chat-connect { margin: 0 14px 10px; padding: 12px 14px; border-radius: 14px; background: rgba(242, 193, 95, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 193, 95, 0.3); }
|
|
1783
|
+
.chat-connect p { font-size: 12.5px; line-height: 1.45; color: var(--warn-ink); }
|
|
1784
|
+
.chat-connect-row { display: flex; gap: 8px; margin-top: 10px; }
|
|
1785
|
+
.side.chat .composer { margin: 0 12px 12px; padding: 10px 10px 8px 14px; border-radius: 18px; background: #121216; box-shadow: inset 0 0 0 1px var(--line-2); }
|
|
1786
|
+
.side.chat .composer:focus-within { box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.5); }
|
|
1787
|
+
.side.chat .composer textarea { width: 100%; min-height: 44px; border: 0; outline: none; resize: none; background: transparent; color: var(--ink); font: 400 14px/1.5 var(--font); }
|
|
1788
|
+
.side.chat .composer .row { display: flex; align-items: center; gap: 8px; }
|
|
1789
|
+
.chat-access { margin-right: auto; display: inline-flex; align-items: center; height: 30px; padding: 0 4px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); }
|
|
1790
|
+
.chat-access select { height: 28px; border: 0; outline: none; background: transparent; color: var(--ink-2); font: 500 12.5px/1 var(--font); cursor: pointer; }
|
|
1791
|
+
.chat-access select option { background: #141418; color: var(--ink); }
|
|
1792
|
+
.side.chat .btn.send { width: 36px; height: 36px; padding: 0; border-radius: 999px; background: #f5f5f7; color: #0a0a0b; box-shadow: none; }
|
|
1793
|
+
.side.chat .btn.send:disabled { background: var(--panel-3); color: var(--ink-3); }
|
|
1794
|
+
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; } }
|
|
1795
|
+
|
|
1796
|
+
/* ---------- characters and hype ---------- */
|
|
1797
|
+
/* Claude Code's voxel critter. */
|
|
1798
|
+
.scene .cc .f-top { fill: #eda186; } .scene .cc .f-left { fill: #D97757; } .scene .cc .f-right { fill: #b05a3e; }
|
|
1799
|
+
.scene .cc .edge { stroke: rgba(255, 220, 200, 0.55); }
|
|
1800
|
+
.scene .cc-eye { fill: #1b0f0a; }
|
|
1801
|
+
.scene .critter .cc-torso, .scene .critter .cc-legs { transform-box: fill-box; transform-origin: 50% 100%; }
|
|
1802
|
+
.scene .p-active .critter .cc-torso, .scene .critter.is-busy .cc-torso { animation: chomp 0.1s ease-in-out infinite alternate; }
|
|
1803
|
+
.scene .p-active .critter .cc-legs.a, .scene .critter.is-busy .cc-legs.a { animation: step 0.1s ease-in-out infinite alternate; }
|
|
1804
|
+
.scene .p-active .critter .cc-legs.b, .scene .critter.is-busy .cc-legs.b { animation: step 0.1s ease-in-out infinite alternate-reverse; }
|
|
1805
|
+
.scene .p-done .critter { animation: happy 0.5s var(--spring) 2 alternate; transform-box: fill-box; transform-origin: 50% 100%; }
|
|
1806
|
+
.scene .p-planned .critter .f-top, .scene .p-planned .critter .f-left, .scene .p-planned .critter .f-right { fill-opacity: 0.12; stroke: rgba(217, 119, 87, 0.5); stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
|
|
1807
|
+
@keyframes chomp { from { transform: scale(1, 1); } to { transform: scale(1.06, 0.9); } }
|
|
1808
|
+
@keyframes step { from { transform: translateY(0); } to { transform: translateY(-3px); } }
|
|
1809
|
+
@keyframes happy { to { transform: translateY(-8px) scale(1.04); } }
|
|
1810
|
+
.scene .tok rect { fill: #fbe2a6; stroke: #f2c15f; stroke-width: 1; filter: drop-shadow(0 0 4px rgba(242, 193, 95, 0.8)); }
|
|
1811
|
+
|
|
1812
|
+
/* Supabase lightning. */
|
|
1813
|
+
.scene .zap { opacity: 0; animation: strike 1.65s linear infinite; }
|
|
1814
|
+
.scene .zap-glow { fill: none; stroke: #3ECF8E; stroke-width: 10; stroke-opacity: 0.35; stroke-linejoin: round; filter: url(#sc-glow); }
|
|
1815
|
+
.scene .zap-core { fill: none; stroke: #d9ffe9; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
|
|
1816
|
+
.scene .zap-core.thin { stroke-width: 1.6; stroke: #8ff0c2; }
|
|
1817
|
+
.scene .zap-hit { fill: rgba(62, 207, 142, 0.45); filter: url(#sc-glow); }
|
|
1818
|
+
.scene .zap-spark { stroke: #b6ffd9; stroke-width: 2; stroke-linecap: round; }
|
|
1819
|
+
@keyframes strike { 0% { opacity: 0; } 3% { opacity: 1; } 7% { opacity: 0.25; } 11% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } }
|
|
1820
|
+
|
|
1821
|
+
/* PostHog: hedgehog, events, bars. */
|
|
1822
|
+
.scene .ph-body .f-top { fill: #8b5e3c; } .scene .ph-body .f-left { fill: #6e4930; } .scene .ph-body .f-right { fill: #573925; }
|
|
1823
|
+
.scene .ph-head .f-top { fill: #c9926a; } .scene .ph-head .f-left { fill: #a97750; } .scene .ph-head .f-right { fill: #8d6141; }
|
|
1824
|
+
.scene .ph-nose .f-top, .scene .ph-nose .f-left, .scene .ph-nose .f-right { fill: #1d1f27; }
|
|
1825
|
+
.scene .ph-leg .f-top, .scene .ph-leg .f-left, .scene .ph-leg .f-right { fill: #4a3020; }
|
|
1826
|
+
.scene .ph-eye { fill: #111; }
|
|
1827
|
+
.scene .ph-spike.c0 .f-top { fill: #F54E00; } .scene .ph-spike.c0 .f-left { fill: #c43e00; } .scene .ph-spike.c0 .f-right { fill: #9a3100; }
|
|
1828
|
+
.scene .ph-spike.c1 .f-top { fill: #F9BD2B; } .scene .ph-spike.c1 .f-left { fill: #d39c17; } .scene .ph-spike.c1 .f-right { fill: #a87b10; }
|
|
1829
|
+
.scene .ph-spike.c2 .f-top { fill: #3b63ff; } .scene .ph-spike.c2 .f-left { fill: #1D4AFF; } .scene .ph-spike.c2 .f-right { fill: #1538c4; }
|
|
1830
|
+
.scene .ph-bar.c0 .f-top { fill: #F54E00; } .scene .ph-bar.c0 .f-left { fill: #c43e00; } .scene .ph-bar.c0 .f-right { fill: #9a3100; }
|
|
1831
|
+
.scene .ph-bar.c1 .f-top { fill: #F9BD2B; } .scene .ph-bar.c1 .f-left { fill: #d39c17; } .scene .ph-bar.c1 .f-right { fill: #a87b10; }
|
|
1832
|
+
.scene .ph-bar.c2 .f-top { fill: #3b63ff; } .scene .ph-bar.c2 .f-left { fill: #1D4AFF; } .scene .ph-bar.c2 .f-right { fill: #1538c4; }
|
|
1833
|
+
.scene .hedgehog .ph-legs { transform-box: fill-box; }
|
|
1834
|
+
.scene .p-active .hedgehog .ph-legs.a { animation: step 0.16s ease-in-out infinite alternate; }
|
|
1835
|
+
.scene .p-active .hedgehog .ph-legs.b { animation: step 0.16s ease-in-out infinite alternate-reverse; }
|
|
1836
|
+
.scene .p-planned .hedgehog, .scene .p-idle .hedgehog { opacity: 0.35; }
|
|
1837
|
+
.scene .bar-g { transform-box: fill-box; transform-origin: 50% 100%; animation: pump 0.7s ease-in-out infinite alternate; }
|
|
1838
|
+
@keyframes pump { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
|
|
1839
|
+
.scene .evt.c0 { fill: #F54E00; } .scene .evt.c1 { fill: #F9BD2B; } .scene .evt.c2 { fill: #3b63ff; }
|
|
1840
|
+
.scene .evt { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.35)); }
|
|
1841
|
+
|
|
1842
|
+
/* GitHub commits, Vercel launch, Google orbit. */
|
|
1843
|
+
.scene .commit .token { fill: #3fb950; } .scene .commit .token-halo { fill: rgba(63, 185, 80, 0.25); }
|
|
1844
|
+
.scene .ring-launch { fill: none; stroke: #f5f5f7; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: launch 1.2s cubic-bezier(0.2, 0.6, 0.2, 1) infinite; }
|
|
1845
|
+
@keyframes launch { from { opacity: 0.9; transform: translateY(0) scale(0.4); } to { opacity: 0; transform: translateY(-46px) scale(1.5); } }
|
|
1846
|
+
.scene .speed { stroke: rgba(245, 245, 247, 0.55); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 8 14; animation: speed 0.45s linear infinite; }
|
|
1847
|
+
@keyframes speed { to { stroke-dashoffset: 22; } }
|
|
1848
|
+
.scene .orbit-spin { animation: orbit 1.1s linear infinite; transform-origin: 0 0; }
|
|
1849
|
+
.scene .orbit circle { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.35)); }
|
|
1850
|
+
@keyframes orbit { to { transform: rotate(360deg); } }
|
|
1851
|
+
|
|
1852
|
+
.scene.is-wait .hype, .scene.is-wait .critter * { animation-play-state: paused; }
|
|
1853
|
+
@media (prefers-reduced-motion: reduce) { .scene .hype, .scene .tok { display: none; } .scene .critter * { animation: none !important; } }
|
|
1854
|
+
|
|
1855
|
+
/* ---------- premium kit: solid emblems, plinths, gateway doors, insight card, travelling payloads ---------- */
|
|
1856
|
+
.scene .emb-side { filter: brightness(0.34) saturate(0.85); }
|
|
1857
|
+
.scene .emb-face { filter: drop-shadow(0 0 0.02px rgba(0, 0, 0, 0)); }
|
|
1858
|
+
.scene .emb-sheen { fill: url(#sc-sheen); mix-blend-mode: screen; }
|
|
1859
|
+
.scene .emb-float { transform-box: fill-box; }
|
|
1860
|
+
.scene .p-active .emb-float { animation: hover 3.8s ease-in-out infinite; }
|
|
1861
|
+
.scene .p-done .emb-float { animation: settle-part 0.7s var(--spring) both; }
|
|
1862
|
+
.scene .part.p-planned .emblem, .scene .part.p-idle .emblem { opacity: 0.28; }
|
|
1863
|
+
.scene .part.p-planned .emb-sheen { display: none; }
|
|
1864
|
+
.scene .plinth .f-top { fill: #3a3a44; } .scene .plinth .f-left { fill: #2a2a31; } .scene .plinth .f-right { fill: #1f1f25; }
|
|
1865
|
+
.scene .emblem-unit .plinth .edge { stroke: var(--brand); stroke-opacity: 0.55; }
|
|
1866
|
+
.scene .door .f-top { fill: #52525e; } .scene .door .f-left { fill: #3c3c46; } .scene .door .f-right { fill: #2e2e36; }
|
|
1867
|
+
.scene .door.google .f-left { fill: #2f3f5e; } .scene .door.github .f-left { fill: #2d333b; }
|
|
1868
|
+
.scene .door .edge { stroke: rgba(255, 255, 255, 0.35); }
|
|
1869
|
+
.scene .cap.g-dark .f-top { fill: #2d333b; } .scene .cap.g-dark .f-left { fill: #22272e; } .scene .cap.g-dark .f-right { fill: #1c2128; }
|
|
1870
|
+
.scene .cap.g-light .f-top { fill: #f0f6fc; } .scene .cap.g-light .f-left { fill: #c9d1d9; } .scene .cap.g-light .f-right { fill: #a0a8b0; }
|
|
1871
|
+
.scene .brand-github .lintel .f-top { fill: #2d333b; } .scene .brand-github .lintel .f-left { fill: #22272e; } .scene .brand-github .lintel .f-right { fill: #1c2128; }
|
|
1872
|
+
.scene .insight .card .f-top { fill: #3a3a44; } .scene .insight .card .f-left { fill: #26262d; } .scene .insight .card .f-right { fill: #1b1b21; }
|
|
1873
|
+
.scene .insight .stand .f-top { fill: #2e2e36; } .scene .insight .stand .f-left { fill: #22222a; } .scene .insight .stand .f-right { fill: #18181d; }
|
|
1874
|
+
.scene .ins-bg { fill: #0f0f13; }
|
|
1875
|
+
.scene .ins-title { fill: rgba(255, 255, 255, 0.25); }
|
|
1876
|
+
.scene .ins-grid { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
|
|
1877
|
+
.scene .ins-line { fill: none; stroke: #F9BD2B; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
|
|
1878
|
+
.scene .ins-dot { fill: #F54E00; }
|
|
1879
|
+
.scene .pl { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55)); }
|
|
1880
|
+
.wproviders { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
|
|
1881
|
+
.wprov { display: grid; place-items: center; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); transition: border-color 0.14s, background 0.14s; }
|
|
1882
|
+
.wprov:hover { background: rgba(255, 255, 255, 0.07); }
|
|
1883
|
+
.wprov.on { border-color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.09); }
|
|
1884
|
+
@media (prefers-reduced-motion: reduce) { .scene .emb-float { animation: none !important; } .scene .emb-sheen { display: none; } }
|
|
1885
|
+
|
|
1886
|
+
/* ---------- mascots: GitHub's Octocat, PostHog's hedgehog, Claude polishing ---------- */
|
|
1887
|
+
.scene .oc .f-top { fill: #3d444d; } .scene .oc .f-left { fill: #2b3137; } .scene .oc .f-right { fill: #1c2127; }
|
|
1888
|
+
.scene .oc .edge { stroke: rgba(240, 246, 252, 0.4); }
|
|
1889
|
+
.scene .oc-face { fill: #f6c8b3; }
|
|
1890
|
+
.scene .oc-eye { fill: #1c2127; }
|
|
1891
|
+
.scene .oc-shine { fill: #fff; }
|
|
1892
|
+
.scene .oc-mouth { fill: #a5524a; }
|
|
1893
|
+
.scene .octocat .oc-tent { transform-box: fill-box; transform-origin: 50% 0; animation: wiggle 0.24s ease-in-out infinite alternate; }
|
|
1894
|
+
.scene .octocat .oc-tent.t1 { animation-direction: alternate-reverse; }
|
|
1895
|
+
@keyframes wiggle { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
|
|
1896
|
+
.scene .mx-body .f-top { fill: #e0b07a; } .scene .mx-body .f-left { fill: #c49360; } .scene .mx-body .f-right { fill: #a47746; }
|
|
1897
|
+
.scene .mx-face .f-top { fill: #f0cfa2; } .scene .mx-face .f-left { fill: #ddb684; } .scene .mx-face .f-right { fill: #bf9564; }
|
|
1898
|
+
.scene .mx-spike .f-top { fill: #4a3524; } .scene .mx-spike .f-left { fill: #35251a; } .scene .mx-spike .f-right { fill: #251912; }
|
|
1899
|
+
.scene .mx-leg .f-top, .scene .mx-leg .f-left, .scene .mx-leg .f-right { fill: #6b4a2e; }
|
|
1900
|
+
.scene .mx-nose .f-top, .scene .mx-nose .f-left, .scene .mx-nose .f-right { fill: #15161b; }
|
|
1901
|
+
.scene .mx-eye { fill: #15161b; }
|
|
1902
|
+
.scene .mx-cheek { fill: #f08a6b; opacity: 0.8; }
|
|
1903
|
+
.scene .mx-pole .f-top { fill: #c8c8d0; } .scene .mx-pole .f-left { fill: #9a9aa5; } .scene .mx-pole .f-right { fill: #74747e; }
|
|
1904
|
+
.scene .mx-flag { stroke: rgba(255, 255, 255, 0.25); stroke-width: 0.6; }
|
|
1905
|
+
.scene .flag-text { fill: #fff; font: 800 0.26px/1 var(--font-sans, system-ui); letter-spacing: 0.02px; }
|
|
1906
|
+
.scene .mx-pole .edge, .scene .mx-body .edge, .scene .mx-face .edge, .scene .mx-spike .edge, .scene .mx-leg .edge, .scene .mx-nose .edge { stroke: rgba(255, 240, 220, 0.3); }
|
|
1907
|
+
.scene .sparkle { fill: #fff; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)); }
|
|
1908
|
+
.scene .burst { fill: rgba(137, 87, 229, 0.35); stroke: #c9b3ff; stroke-width: 2; }
|
|
1909
|
+
.scene .say { fill: #8957e5; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1; }
|
|
1910
|
+
.scene .say-text { fill: #fff; font: 800 11px/1 var(--font-sans, system-ui); letter-spacing: 0.02em; }
|
|
1911
|
+
@media (prefers-reduced-motion: reduce) { .scene .skit { display: none; } }
|
|
1912
|
+
.scene .mx-belly { fill: #f7e3c4; }
|
|
1913
|
+
.scene .mx-snout .f-top { fill: #f7e3c4; } .scene .mx-snout .f-left { fill: #e6cba6; } .scene .mx-snout .f-right { fill: #c9ab84; }
|
|
1914
|
+
.scene .mx-brow { fill: #4a2a16; }
|
|
1915
|
+
.scene .mx-hat .f-top { fill: #ffd25a; } .scene .mx-hat .f-left { fill: #F9BD2B; } .scene .mx-hat .f-right { fill: #c9921a; }
|
|
1916
|
+
.scene .mx-hat-ridge .f-top, .scene .mx-hat-ridge .f-left, .scene .mx-hat-ridge .f-right { fill: #e0a51f; }
|
|
1917
|
+
.scene .mx-hat .edge, .scene .mx-snout .edge { stroke: rgba(255, 245, 220, 0.45); }
|
|
1918
|
+
.scene .smudge { fill: rgba(214, 206, 192, 0.3); filter: blur(0.05px); }
|
|
1919
|
+
.scene .smudge .streak { fill: none; stroke: rgba(214, 206, 192, 0.35); stroke-width: 0.07; stroke-linecap: round; }
|
|
1920
|
+
.scene .bubble { fill: rgba(220, 240, 255, 0.18); stroke: rgba(235, 248, 255, 0.85); stroke-width: 1; }
|
|
1921
|
+
.scene .foam { fill: rgba(250, 252, 255, 0.85); }
|
|
1922
|
+
|
|
1923
|
+
/* Review: files Undo leaves alone, and putting one back by hand. */
|
|
1924
|
+
.work-diff-file h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
1925
|
+
.work-diff-file .diff-note { font: 600 11px/1 var(--font); color: rgba(245, 245, 247, 0.6); padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
|
|
1926
|
+
.work-diff-file .diff-note.is-warn { color: #f2c15f; background: rgba(242, 193, 95, 0.12); }
|
|
1927
|
+
.work-diff-file .diff-restore { margin-left: auto; font-size: 12px; }
|