/* Product tour: fixed desktop composition, readable layouts on smaller screens. */ #aiworkstation .work-tour { --wt-bg: #151617; --wt-panel: #1b1c1e; --wt-line: #ffffff12; --wt-text: #ececeb; --wt-muted: #9a9b9d; --wt-orange: #e6ad85; --wt-green: #9ebba8; padding: 88px 0 80px; scroll-margin-top: 48px; } #aiworkstation .work-tour [hidden] { display: none !important; } #aiworkstation .wt-container { max-width: 1496px; } #aiworkstation .wt-icon { width: 16px; height: 16px; flex: 0 0 auto; display: inline-block; vertical-align: middle; } #aiworkstation .wt-heading { text-align: center; margin: 0 auto 32px; } #aiworkstation .wt-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #787a76; font-size: 12px; font-weight: 500; letter-spacing: .14em; margin-bottom: 18px; } #aiworkstation .wt-eyebrow i { width: 5px; height: 5px; background: #c28c67; border-radius: 50%; } #aiworkstation .wt-heading h2 { font-size: clamp(32px, 3.1vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -.035em; margin-bottom: 14px; } #aiworkstation .wt-heading p { font-size: 17px; color: #727670; line-height: 1.5; } #aiworkstation .wt-tabs { display: flex; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 38px; overflow-x: auto; scrollbar-width: none; position: relative; } #aiworkstation .wt-tabs::-webkit-scrollbar { display: none; } #aiworkstation .wt-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 15px; font-size: 15px; line-height: 18px; font-weight: 500; color: #777a77; white-space: nowrap; position: relative; border-radius: 7px; transition: color .2s, background .2s; } #aiworkstation .wt-tab:hover { color: #222725; background: #f3f4f2; } #aiworkstation .wt-tab[aria-selected=true] { color: #fff; background: #242827; } #aiworkstation .wt-tab-progress { position: absolute; bottom: 0; left: 13px; right: 13px; height: 2px; background: var(--wt-orange); transform: scaleX(var(--wt-progress, 0)); transform-origin: left; } #aiworkstation .wt-tab:not([aria-selected=true]) .wt-tab-progress { visibility: hidden; } #aiworkstation .wt-panel { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 900px); gap: 52px; align-items: center; } #aiworkstation .wt-copy { max-width: 350px; padding-right: 4px; animation: wt-enter .3s ease both; } #aiworkstation .wt-feature-label { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #777b75; margin-bottom: 18px; } #aiworkstation .wt-copy h3 { font-size: clamp(26px, 2.3vw, 34px); line-height: 1.14; font-weight: 500; letter-spacing: -.035em; margin: 0 0 18px; text-wrap: balance; } #aiworkstation .wt-copy > p { font-size: 16px; color: #72766f; line-height: 1.65; max-width: 34ch; } #aiworkstation .wt-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; line-height: 1.7; color: #878b83; margin-top: 28px; } #aiworkstation .wt-hint kbd { font: 12px var(--font-site); border: 1px solid #e4e6e0; border-radius: 4px; padding: 1px 5px; color: #787c76; background: #fbfcf9; } #aiworkstation .wt-hint .wt-icon { width: 14px; height: 14px; } /* Isolated UI fragments. The containing panel is a stage, with no platform chrome. Component geometry below is ported from halofymodular/apps/web/src: AgentSessionMap, KanbanPage, MessagesTimeline and SidebarChrome. */ #aiworkstation .wt-frame { height: 575px; min-width: 0; display: grid; place-items: center; padding: 42px; border: 1px solid #232426; border-radius: 16px; background: #0e0f11; } #aiworkstation .wt-snippet { width: 100%; max-width: 660px; color: #e5e5e5; font-size: 13px; line-height: 1.5; } #aiworkstation .wt-snippet code { font: 11px/1.5 var(--font-mono); } #aiworkstation .wt-snippet h4 { font-size: 16px; font-weight: 500; letter-spacing: -.02em; } #aiworkstation .hs-orb { display: inline-block; width: 22px; height: 24px; flex: 0 0 auto; background: currentColor; color: #c6c9c1; mask: url(assets/brand/halofy-mark.png) center / contain no-repeat; } #aiworkstation .hs-signal { display: flex; align-items: center; gap: 10px; color: #9b9c9e; font-size: 12px; line-height: 1.5; } #aiworkstation .hs-signal > span:last-child { min-width: 0; } #aiworkstation .wt-provider { display: inline-flex; align-items: center; gap: 7px; color: #b7b8ba; font-size: 12px; } #aiworkstation .wt-provider img { width: 16px; height: 16px; object-fit: contain; } #aiworkstation .wt-state { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #989b9f; } #aiworkstation .wt-state-icon { display: grid; place-items: center; width: 12px; height: 12px; border: 1px solid #e2ba972b; border-top-color: #d1ad8a; border-radius: 50%; animation: wt-spin 1.1s linear infinite; } #aiworkstation .wt-state-icon .wt-icon { width: 12px; height: 12px; display: none; } #aiworkstation .wt-state[data-complete=true] { color: #91b49f; } #aiworkstation .wt-state[data-complete=true] .wt-state-icon { animation: none; border: 0; } #aiworkstation .wt-state[data-complete=true] .wt-state-icon .wt-icon { display: block; } #aiworkstation .hs-add { color: #99bda4; } #aiworkstation .hs-remove { color: #bc9691; } #aiworkstation .hs-user { position: relative; border-radius: 16px; background: #ffffff09; padding: 12px; color: #d5d5d5; font-size: 13px; line-height: 1.6; } /* Multi-agent: existing provider marks orbit the actual Halofy mark. Counter-rotation keeps every logo and its label upright. */ #aiworkstation .hs-orbit { --hs-orbit-turn: 0deg; position: relative; width: 100%; max-width: 470px; aspect-ratio: 1; margin: 0 auto; isolation: isolate; } #aiworkstation .hs-orbit-track { position: absolute; inset: 12%; border: 1px solid #ffffff0e; border-radius: 50%; } #aiworkstation .hs-orbit-inner { position: absolute; inset: 31%; border: 1px solid #ffffff07; border-radius: 50%; background: radial-gradient(circle, #e6ad8507, transparent 72%); } #aiworkstation .hs-orbit-rotation { position: absolute; inset: 0; transform: rotate(var(--hs-orbit-turn)); } #aiworkstation .hs-orbit-arm { position: absolute; inset: 0; transform: rotate(var(--hs-orbit-phase)); } #aiworkstation .hs-orbit-agent { position: absolute; top: 0; left: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%) rotate(calc(0deg - var(--hs-orbit-phase) - var(--hs-orbit-turn))); } #aiworkstation .hs-orbit-logo { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid #ffffff13; border-radius: 15px; background: linear-gradient(145deg, #202123, #161719); box-shadow: 0 4px 12px #0003, inset 0 1px #ffffff06; } #aiworkstation .hs-orbit-logo img { display: block; width: 26px; height: 26px; object-fit: contain; } #aiworkstation .hs-orbit-logo img[src*="grokbot"] { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; } #aiworkstation .hs-orbit-logo img[src*="hermes"] { border-radius: 50%; } #aiworkstation .hs-orbit-name { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); color: #94969b; font-size: 11px; line-height: 1.3; white-space: nowrap; } #aiworkstation .hs-orbit-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; pointer-events: none; } #aiworkstation .hs-orbit-center .hs-orb { width: 62px; height: 68px; color: #e9d4c1; } #aiworkstation .hs-orbit-center > span:last-child { color: #c9c5bf; font-size: 16px; font-weight: 500; letter-spacing: -.025em; } /* Linked session kanban: session identity from AgentSessionMap, in compact lanes. */ #aiworkstation .wt-panel[data-scene=agents] .wt-frame { padding: 28px; } #aiworkstation .wt-panel[data-scene=agents] .wt-snippet { max-width: 784px; min-width: 0; container: agent-kanban / inline-size; } #aiworkstation .hs-kanban { width: 100%; min-width: 0; } #aiworkstation .hs-kanban-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 2px 16px; color: #bebfc2; font-size: 12px; } #aiworkstation .hs-kanban-heading small { color: #767a82; font-size: 10px; } #aiworkstation .hs-kanban-board { width: 100%; min-width: 0; } #aiworkstation .hs-kanban-lanes { --hs-kanban-direction: horizontal; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(18px, 4cqi, 32px); min-width: 0; } #aiworkstation .hs-kanban-column { min-width: 0; padding: 7px; border: 1px solid #ffffff06; border-radius: 12px; background: #141517; } #aiworkstation .hs-kanban-column-heading { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 6px 5px; color: #bbbfc4; font-size: 12px; font-weight: 500; } #aiworkstation .hs-kanban-column-heading > i { width: 5px; height: 5px; border-radius: 50%; background: #8e9ca9; } #aiworkstation .hs-kanban-column:nth-child(2) .hs-kanban-column-heading > i { background: #c3a586; } #aiworkstation .hs-kanban-column:nth-child(3) .hs-kanban-column-heading > i { background: #96ad99; } #aiworkstation .hs-kanban-column-heading small { display: grid; place-items: center; min-width: 17px; height: 17px; margin-left: auto; background: #ffffff05; border-radius: 4px; color: #6e737d; font: 9px var(--font-mono); } #aiworkstation .hs-kanban-card { position: relative; z-index: 1; min-width: 0; min-height: 156px; padding: 12px; border: 1px solid #ffffff10; border-radius: 9px; background: #1c1d20; box-shadow: 0 2px 5px #00000014; } #aiworkstation .hs-kanban-card + .hs-kanban-card { margin-top: 20px; } #aiworkstation .hs-kanban-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; color: #727983; } #aiworkstation .hs-kanban-card-top > span:first-child { font-family: var(--font-mono); white-space: nowrap; } #aiworkstation .hs-kanban-status { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; white-space: nowrap; color: #a39584; } #aiworkstation .hs-kanban-status > i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } #aiworkstation .hs-kanban-card[data-complete=true] .hs-kanban-status { color: #98b4a1; } #aiworkstation .hs-kanban-card h4 { min-height: 34px; margin: 10px 0 8px; font-size: 13px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; color: #dedee0; } #aiworkstation .hs-kanban-provider { height: 18px; } #aiworkstation .hs-kanban-provider .wt-provider { gap: 6px; font-size: 11px; } #aiworkstation .hs-kanban-provider .wt-provider img { width: 15px; height: 15px; } #aiworkstation .hs-kanban-device { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid #ffffff09; color: #868b95; font-size: 10px; line-height: 1.3; } #aiworkstation .hs-kanban-device .wt-icon { width: 13px; height: 13px; color: #a2998c; } #aiworkstation .hs-kanban-links { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; } #aiworkstation .hs-kanban-links path { stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; } #aiworkstation .hs-kanban-wire { stroke: #8c929c29; } #aiworkstation .hs-kanban-wire-active { opacity: 0; stroke: #c8a58180; stroke-dasharray: 1; } #aiworkstation .hs-kanban-port { fill: #161719; stroke: #81736280; stroke-width: 1; } #aiworkstation .hs-kanban-packet { opacity: 0; stroke: #efd0b0; stroke-width: 2px !important; stroke-dasharray: .09 .91; } #aiworkstation .hs-kanban-link[data-complete=true] .hs-kanban-wire-active { opacity: 1; animation: hs-kanban-connect .8s ease both; } #aiworkstation .hs-kanban-link[data-message-step='4'] :is(.hs-kanban-wire, .hs-kanban-port) { display: none; } #aiworkstation .wt-panel[data-step='1'] .hs-kanban-link[data-message-step='1'] .hs-kanban-packet, #aiworkstation .wt-panel[data-step='2'] .hs-kanban-link[data-message-step='2'] .hs-kanban-packet, #aiworkstation .wt-panel[data-step='3'] .hs-kanban-link[data-message-step='3'] .hs-kanban-packet, #aiworkstation .wt-panel[data-step='4'] .hs-kanban-link[data-message-step='4'] .hs-kanban-packet { animation: hs-kanban-flight 1.6s linear both; } #aiworkstation .wt-panel[data-step='1'] .hs-kanban-card[data-session='01'], #aiworkstation .wt-panel[data-step='2'] .hs-kanban-card:is([data-session='02'], [data-session='04']), #aiworkstation .wt-panel[data-step='3'] .hs-kanban-card:is([data-session='03'], [data-session='04']) { border-color: #c8a5814d; } #aiworkstation .wt-panel[data-step='4'] .hs-kanban-card:is([data-session='02'], [data-session='04']) { border-color: #9ab6a04a; } #aiworkstation .hs-kanban-communication { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 34px; margin-top: 18px; color: #999da4; font-size: 11px; } #aiworkstation .hs-kanban-communication > .hs-orb { width: 20px; height: 22px; } #aiworkstation .hs-kanban-communication > div { min-width: 0; } #aiworkstation .hs-kanban-message { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; } #aiworkstation .hs-kanban-route { color: #b5a18c; font: 9px var(--font-mono); white-space: nowrap; } /* Narrow stages read from top to bottom, with both build sessions side by side. */ @container agent-kanban (max-width: 540px) { #aiworkstation .hs-kanban { max-width: 380px; margin: 0 auto; } #aiworkstation .hs-kanban-heading { margin-bottom: 14px; font-size: 11px; gap: 10px; } #aiworkstation .hs-kanban-heading small { font-size: 9px; white-space: nowrap; } #aiworkstation .hs-kanban-lanes { --hs-kanban-direction: vertical; grid-template-columns: minmax(0, 1fr); gap: 22px; } #aiworkstation .hs-kanban-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 12px; padding: 0; border: 0; border-radius: 0; background: none; } #aiworkstation .hs-kanban-column-heading { grid-column: 1 / -1; height: 20px; padding: 0 2px; font-size: 11px; } #aiworkstation .hs-kanban-card { min-height: 0; padding: 9px 8px; } #aiworkstation .hs-kanban-card + .hs-kanban-card { margin-top: 0; } #aiworkstation .hs-kanban-card-top { flex-wrap: wrap; gap: 4px; } #aiworkstation .hs-kanban-card h4 { min-height: 31px; margin: 7px 0; font-size: 12px; } #aiworkstation .hs-kanban-provider { height: 16px; } #aiworkstation .hs-kanban-provider .wt-provider { font-size: 10px; gap: 5px; } #aiworkstation .hs-kanban-provider .wt-provider img { width: 14px; height: 14px; } #aiworkstation .hs-kanban-device { margin-top: 8px; padding-top: 8px; gap: 5px; } #aiworkstation .hs-kanban-column:not(:nth-child(2)) .hs-kanban-card { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 10px; } #aiworkstation .hs-kanban-column:not(:nth-child(2)) :is(.hs-kanban-card-top, .hs-kanban-card h4) { grid-column: 1 / -1; } #aiworkstation .hs-kanban-column:not(:nth-child(2)) .hs-kanban-card h4 { min-height: 0; margin: 0; } #aiworkstation .hs-kanban-column:not(:nth-child(2)) .hs-kanban-device { margin: 0; padding: 0; border: 0; } #aiworkstation .hs-kanban-communication { min-height: 38px; margin-top: 14px; } #aiworkstation .hs-kanban-message { flex-direction: column; align-items: flex-start; } } @keyframes hs-kanban-connect { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes hs-kanban-flight { 0% { stroke-dashoffset: 1; opacity: 0; } 12%, 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } /* Multi-device: a compact people list, with each device connected to Halofy. */ #aiworkstation .hs-devices { display: grid; grid-template-columns: minmax(0, 328px) minmax(50px, 164px) 92px; row-gap: 16px; max-width: 584px; margin: 0 auto; align-items: center; } #aiworkstation .hs-team-pill { grid-column: 1 / 3; grid-row: 1; display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 7px 12px 7px 7px; border: 1px solid #ffffff0a; border-radius: 999px; background: #252629; color: #b9babe; font-size: 11px; } #aiworkstation .hs-team-pill > .wt-icon { width: 12px; height: 12px; margin-left: 2px; color: #7f8289; } #aiworkstation .hs-team-avatars { display: flex; padding-right: 1px; } #aiworkstation .hs-member-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid #ffffff0c; border-radius: 50%; background: #514239; color: #e2c3ab; font-size: 10px; font-weight: 500; letter-spacing: -.02em; } #aiworkstation .hs-member-avatar--1 { background: #343f4b; color: #adc4dc; } #aiworkstation .hs-member-avatar--2 { background: #3c473e; color: #b1c5ae; } #aiworkstation .hs-member-avatar--3 { background: #4b3d47; color: #d3b2c7; } #aiworkstation .hs-team-avatars .hs-member-avatar { width: 25px; height: 25px; font-size: 8px; border: 2px solid #252629; } #aiworkstation .hs-team-avatars .hs-member-avatar + .hs-member-avatar { margin-left: -8px; } #aiworkstation .hs-device-list { position: relative; z-index: 1; grid-column: 1; grid-row: 2; padding: 6px; margin: 0; list-style: none; border: 1px solid #ffffff0c; border-radius: 22px; background: #252629; box-shadow: 0 16px 36px -24px #0009; } #aiworkstation .hs-device-person { display: grid; grid-template-columns: 34px minmax(0, 1fr) 38px; align-items: center; gap: 12px; height: 68px; padding: 0 10px; border-radius: 16px; } #aiworkstation .hs-device-person[data-complete=true] { animation: hs-device-join .9s ease both; } #aiworkstation .hs-member-detail { min-width: 0; display: flex; flex-direction: column; gap: 5px; } #aiworkstation .hs-member-name { color: #e0e0e1; font-size: 13px; line-height: 1.25; white-space: nowrap; } #aiworkstation .hs-member-agents { display: flex; align-items: center; gap: 7px; color: #8f9298; } #aiworkstation .hs-member-agents > span { display: inline-flex; align-items: center; gap: 5px; } #aiworkstation .hs-member-agents img { width: 12px; height: 12px; object-fit: contain; } #aiworkstation .hs-member-agents small { font-size: 10px; line-height: 1.2; } #aiworkstation .hs-member-device { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #777a80; } #aiworkstation .hs-member-device .wt-icon { width: 22px; height: 22px; } #aiworkstation .hs-member-device small { font-size: 8px; line-height: 1.2; } #aiworkstation .hs-device-person[data-complete=true] .hs-member-device { color: #d2b395; } #aiworkstation .hs-device-connections { grid-column: 2; grid-row: 2; width: 100%; height: 286px; overflow: visible; } #aiworkstation .hs-device-connections path { vector-effect: non-scaling-stroke; stroke-width: 1; stroke-linecap: round; } #aiworkstation .hs-device-wire { stroke: #ffffff0d; } #aiworkstation .hs-device-wire-active { stroke: #bca08470; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0; } #aiworkstation .hs-device-packet { stroke: #e9c8a6; stroke-width: 1.8px !important; stroke-dasharray: .045 .955; opacity: 0; } #aiworkstation .hs-device-connections [data-complete=true] .hs-device-wire-active { opacity: 1; animation: hs-device-connect 1s ease both; } #aiworkstation .hs-device-connections [data-complete=true] .hs-device-packet { animation: hs-device-packet 3s linear 1s infinite both; } #aiworkstation .hs-device-hub { grid-column: 3; grid-row: 2; position: relative; width: 92px; height: 92px; z-index: 1; text-align: center; } #aiworkstation .hs-device-hub > div { width: 100%; height: 100%; display: grid; place-items: center; border: 1px solid #e9c8a624; border-radius: 24px; background: #18191b; box-shadow: 0 6px 24px #0002; } #aiworkstation .hs-device-hub .hs-orb { width: 48px; height: 53px; color: #e9d4c1; } #aiworkstation .hs-device-hub > span { position: absolute; top: calc(100% + 11px); left: 0; right: 0; color: #d7d2cb; font-size: 14px; font-weight: 500; } #aiworkstation .hs-device-hub > small { position: absolute; top: calc(100% + 34px); left: 0; right: 0; color: #7c7e83; font-size: 10px; white-space: nowrap; } #aiworkstation .hs-device-caption { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 17px; min-height: 18px; color: #898e93; font-size: 11px; font-variant-numeric: tabular-nums; } #aiworkstation .hs-device-caption > i { width: 4px; height: 4px; border-radius: 50%; background: #a1876d; } @keyframes hs-device-join { from { background: #e6ad8514; } to { background: #ffffff03; } } @keyframes hs-device-connect { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes hs-device-packet { 0% { stroke-dashoffset: 1; opacity: 0; } 15%, 80% { opacity: .85; } 100% { stroke-dashoffset: 0; opacity: 0; } } /* Terminal: a command excerpt and one small agent action, with no surrounding app. */ #aiworkstation .hs-terminal { max-width: 580px; margin: 0 auto; } #aiworkstation .hs-terminal-card { padding: 20px 24px; min-height: 310px; background: #141517; border: 1px solid #ffffff0e; border-radius: 10px; } #aiworkstation .hs-terminal-label { display: flex; gap: 8px; align-items: center; color: #858990; font-size: 11px; margin-bottom: 24px; } #aiworkstation .hs-terminal-label > span { margin-left: auto; color: #565c66; font-size: 9px; } #aiworkstation .hs-command { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; } #aiworkstation .hs-command > span { color: #bc9b7a; } #aiworkstation .hs-command code { font-size: 12px; } #aiworkstation .hs-terminal-caption { color: #737984; font: 10px var(--font-mono); margin-bottom: 19px; } #aiworkstation .hs-terminal-row { display: flex; align-items: center; gap: 8px; font: 11px/1.65 var(--font-mono); margin: 10px 0; color: #b8bdc3; } #aiworkstation .hs-terminal-row > i { font-style: normal; color: #8eac9a; } #aiworkstation .hs-terminal-row > time { font-size: 9px; color: #636e7c; margin-left: auto; } #aiworkstation .hs-failure, #aiworkstation .hs-failure > i { color: #bd998f; } #aiworkstation .hs-error-excerpt { margin: 10px 0 0 20px; font: 10px/1.6 var(--font-mono); color: #8e7c79; } #aiworkstation .hs-test-result { display: flex; align-items: center; gap: 10px; margin-top: 21px; color: #91b6a0; font: 12px var(--font-mono); } #aiworkstation .hs-test-result b { padding: 4px 6px; background: #86ab910e; border-radius: 3px; font-size: 9px; font-weight: 400; } #aiworkstation .hs-test-result time { margin-left: auto; color: #616e7c; font-size: 9px; } #aiworkstation .hs-terminal-action { min-height: 80px; margin: 16px 0 0 110px; } #aiworkstation .hs-terminal-action .hs-signal { padding: 10px 13px; border: 1px solid #ffffff0e; border-radius: 7px; background: #191a1d; font-size: 11px; } #aiworkstation .hs-terminal-action .hs-orb { width: 18px; height: 20px; } #aiworkstation .hs-terminal-fix { color: #717d8c; margin: 9px 0 0 14px; } #aiworkstation .hs-terminal-fix code { font-size: 9px; } /* Tasks: KanbanPage session identities in a compact, animated REUI-style board. */ #aiworkstation .wt-panel[data-scene=tasks] .wt-frame { padding: 28px; } #aiworkstation .wt-panel[data-scene=tasks] .wt-snippet { max-width: 784px; min-width: 0; container: task-kanban / inline-size; } #aiworkstation .hs-task-board { width: 100%; min-width: 0; } #aiworkstation .hs-task-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 18px; margin: 0 2px 16px; color: #c9cace; font-size: 12px; } #aiworkstation .hs-task-heading small { margin-left: auto; color: #777d86; font-size: 10px; white-space: nowrap; } #aiworkstation .hs-task-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2cqi, 16px); height: 426px; } #aiworkstation .hs-task-lane { min-width: 0; padding: 7px; border: 1px solid #ffffff09; border-radius: 11px; background: #141517; } #aiworkstation .hs-task-lane-heading { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 4px 7px; } #aiworkstation .hs-task-lane-heading > i { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #8e98a6; } #aiworkstation .hs-task-lane[data-task-lane=running] .hs-task-lane-heading > i { background: #c6a482; } #aiworkstation .hs-task-lane[data-task-lane=done] .hs-task-lane-heading > i { background: #96b39f; } #aiworkstation .hs-task-lane-heading h4 { font-size: 11px; font-weight: 500; color: #b8bbc2; letter-spacing: 0; } #aiworkstation .hs-task-lane-heading > span { display: grid; place-items: center; margin-left: auto; min-width: 17px; height: 17px; border-radius: 4px; background: #ffffff05; color: #747b85; font: 9px var(--font-mono); } #aiworkstation .hs-task-stack { display: flex; flex-direction: column; gap: 8px; } #aiworkstation .hs-task-card { position: relative; flex: 0 0 auto; min-width: 0; height: 120px; padding: 9px; border: 1px solid #ffffff12; border-radius: 8px; background: #1d1e21; box-shadow: 0 2px 4px #00000014; } #aiworkstation .hs-task-card[data-task-status=running] { border-color: #c8a58132; } #aiworkstation .hs-task-card[data-moving=true] { z-index: 3; box-shadow: 0 10px 22px #0005; } #aiworkstation .hs-task-card-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; height: 12px; color: #7b838e; font: 8px var(--font-mono); white-space: nowrap; } #aiworkstation .hs-task-state { display: inline-flex; align-items: center; gap: 4px; color: #9298a1; font: 8px var(--font-site); } #aiworkstation .hs-task-state > i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; } #aiworkstation .hs-task-card[data-task-status=running] .hs-task-state { color: #c6a482; } #aiworkstation .hs-task-card[data-task-status=done] .hs-task-state { color: #9ab8a4; } #aiworkstation .hs-task-card h4 { min-height: 31px; margin: 6px 0; color: #dedfe2; font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: -.015em; } #aiworkstation .hs-task-provider { height: 16px; } #aiworkstation .hs-task-provider .wt-provider { gap: 5px; font-size: 10px; } #aiworkstation .hs-task-provider img { width: 14px; height: 14px; } #aiworkstation .hs-task-device { display: flex; align-items: center; gap: 5px; margin-top: 7px; padding-top: 6px; border-top: 1px solid #ffffff09; color: #868e99; font-size: 9px; line-height: 1.4; } #aiworkstation .hs-task-device .wt-icon { width: 12px; height: 12px; color: #a2998c; } #aiworkstation .hs-task-empty { margin: 0; padding: 22px 5px; color: #646b75; font-size: 10px; text-align: center; } #aiworkstation .hs-task-activity { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 32px; margin-top: 16px; color: #959ca6; font-size: 11px; } #aiworkstation .hs-task-activity > .hs-orb { width: 20px; height: 22px; } #aiworkstation .hs-task-activity > div { min-width: 0; text-align: center; } #aiworkstation .hs-task-activity > div:not(:has(span:not([hidden]))) { display: none; } @container task-kanban (max-width: 540px) { #aiworkstation .hs-task-board { max-width: 380px; margin: 0 auto; } #aiworkstation .hs-task-heading { margin-bottom: 10px; font-size: 11px; } #aiworkstation .hs-task-heading small { font-size: 9px; } #aiworkstation .hs-task-lanes { grid-template-columns: minmax(0, 1fr); gap: 8px; height: auto; } #aiworkstation .hs-task-lane { padding: 6px; border-radius: 9px; } #aiworkstation .hs-task-lane-heading { height: 22px; padding: 0 3px 4px; } #aiworkstation .hs-task-stack { gap: 6px; } #aiworkstation .hs-task-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 5px 8px; height: 74px; padding: 8px; } #aiworkstation .hs-task-card-top, #aiworkstation .hs-task-card h4 { grid-column: 1 / -1; } #aiworkstation .hs-task-card h4 { min-height: 0; margin: 0; } #aiworkstation .hs-task-device { margin: 0; padding: 0; border: 0; } #aiworkstation .hs-task-empty { display: none; } #aiworkstation .hs-task-activity { justify-content: center; min-height: 34px; margin: 12px 3px 0; font-size: 10px; } } /* Malleability: two fixed workspaces revealed with a draggable divider. Dusk colors and wallpaper match Custom Workspace 1. */ #aiworkstation .hs-malleability { --mall-bg: #fff; --mall-side: #fafafa; --mall-line: #e8e8e8; --mall-text: #343439; --mall-muted: #87878d; --mall-tile: #f2f2f4; --mall-accent: #d4d4d8; width: 100%; } #aiworkstation .hs-mall-desktop { position: relative; height: 340px; padding: 15px; border: 1px solid #ffffff1a; border-radius: 12px; background: #f3f3f5; isolation: isolate; } #aiworkstation .hs-mall-desktop::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url(assets/img/desktop-wallpaper.webp) center / cover; opacity: 0; transition: opacity 1s; } #aiworkstation .hs-mall-window { position: relative; height: 100%; display: grid; grid-template-columns: 26% minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--mall-line); border-radius: 8px; background: var(--mall-bg); color: var(--mall-text); box-shadow: 0 8px 24px #0001; font-size: 10px; transition: background .8s, color .8s, border-color .8s, box-shadow .8s; } #aiworkstation .hs-mall-sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 10px 8px 7px; border-right: 1px solid var(--mall-line); background: var(--mall-side); transition: background .8s, border-color .8s; } #aiworkstation .hs-mall-brand { display: flex; align-items: center; gap: 5px; padding: 0 3px 6px; } #aiworkstation .hs-mall-brand b { font-size: 13px; font-weight: 500; letter-spacing: -.04em; } #aiworkstation .hs-mall-brand .hs-orb { color: inherit; width: 13px; height: 15px; } #aiworkstation .hs-mall-nav { display: flex; justify-content: space-between; gap: 3px; padding: 5px; border: 1px solid var(--mall-line); border-radius: 5px; font-size: 8px; color: var(--mall-muted); } #aiworkstation .hs-mall-sidebar > small { display: flex; justify-content: space-between; margin: 8px 2px 5px; color: var(--mall-muted); font-size: 8px; } #aiworkstation .hs-mall-search { padding: 4px 5px; border: 1px solid var(--mall-line); border-radius: 4px; font-size: 8px; color: var(--mall-muted); } #aiworkstation .hs-mall-thread { margin-top: 5px; padding: 6px; border: 1px solid transparent; border-radius: 5px; } #aiworkstation .hs-mall-thread--active { border-color: var(--mall-accent); background: var(--mall-tile); transition: border-color .8s, background .8s; } #aiworkstation .hs-mall-thread small { display: block; font-size: 7px; color: var(--mall-muted); margin-bottom: 3px; } #aiworkstation .hs-mall-thread b { font-size: 8px; line-height: 1.4; font-weight: 500; display: block; } #aiworkstation .hs-mall-usage { opacity: 0; transform: translateY(8px); padding: 5px; margin-top: auto; border: 1px solid var(--mall-line); border-radius: 6px; background: var(--mall-tile); transition: opacity .7s, transform .7s; } #aiworkstation .hs-mall-usage > div:first-child { display: flex; align-items: center; gap: 4px; font-size: 8px; } #aiworkstation .hs-mall-usage img, #aiworkstation .hs-mall-composer img { width: 10px; height: 10px; object-fit: contain; } #aiworkstation .hs-mall-usage i { margin-left: auto; color: #d393b7; font-style: normal; font-size: 6px; } #aiworkstation .hs-mall-usage section { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 4px 0; font-size: 6px; color: var(--mall-muted); } #aiworkstation .hs-mall-usage b { display: block; font-size: 12px; color: var(--mall-text); font-weight: 500; } #aiworkstation .hs-mall-meter { height: 3px; background: #ffffff0d; border-radius: 4px; overflow: hidden; } #aiworkstation .hs-mall-meter i { display: block; width: 38%; height: 100%; margin: 0; background: #ea5c94; } #aiworkstation .hs-mall-usage > small { display: block; margin-top: 3px; line-height: 9px; font-size: 6px; color: var(--mall-muted); } #aiworkstation .hs-mall-settings { margin-top: auto; padding: 7px 3px 0; color: var(--mall-muted); font-size: 8px; } #aiworkstation .hs-mall-work { display: grid; grid-template-rows: 28px minmax(0,1fr); min-width: 0; min-height: 0; } #aiworkstation .hs-mall-tabs { display: flex; align-items: center; gap: 9px; padding: 4px 7px; border-bottom: 1px solid var(--mall-line); font-size: 8px; color: var(--mall-muted); } #aiworkstation .hs-mall-tabs > span:first-child { padding: 2px 10px; border-radius: 4px; border: 1px solid var(--mall-accent); color: var(--mall-text); transition: border-color .8s; } #aiworkstation .hs-mall-tabs > span:last-child { margin-left: auto; } #aiworkstation .hs-mall-panes { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0fr); min-height: 0; transition: grid-template-columns .9s cubic-bezier(.2,.7,.2,1); } #aiworkstation .hs-mall-chat { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; overflow: hidden; } #aiworkstation .hs-mall-chat::before { content: ''; position: absolute; inset: 28px 0 0; z-index: -1; background: linear-gradient(#18101e30,#18101e55), url(assets/hx/ui-2.webp) center / cover; opacity: 0; transition: opacity 1.1s; } #aiworkstation .hs-mall-chat-title { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--mall-line); font-size: 8px; white-space: nowrap; overflow: hidden; } #aiworkstation .hs-mall-conversation { flex: 1; padding: 18px 12px 8px; } #aiworkstation .hs-mall-message { width: fit-content; margin-left: auto; padding: 7px 9px; background: var(--mall-tile); border-radius: 8px 8px 2px 8px; font-size: 9px; transition: background .8s; } #aiworkstation .hs-mall-answer { display: flex; align-items: flex-start; gap: 7px; margin: 15px 0 9px; } #aiworkstation .hs-mall-answer .hs-orb { color: inherit; width: 12px; height: 14px; } #aiworkstation .hs-mall-answer p { margin: 0; font-size: 9px; line-height: 1.7; } #aiworkstation .hs-mall-file { display: flex; justify-content: space-between; padding: 7px 9px; margin-left: 19px; border: 1px solid var(--mall-line); border-radius: 5px; background: var(--mall-bg); font-size: 8px; transition: background .8s; } #aiworkstation .hs-mall-composer { margin: 0 9px 9px; padding: 8px; border: 1px solid var(--mall-line); border-radius: 8px; background: var(--mall-tile); transition: background .8s; } #aiworkstation .hs-mall-composer > span { color: var(--mall-muted); font-size: 9px; } #aiworkstation .hs-mall-composer > div { display: flex; align-items: center; gap: 4px; font-size: 7px; margin-top: 12px; } #aiworkstation .hs-mall-composer > div > span { margin-left: auto; } #aiworkstation .hs-mall-composer b { display: grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border-radius: 50%; background: var(--mall-accent); color: var(--mall-bg); font-size: 12px; transition: background .8s; } #aiworkstation .hs-mall-files { min-width: 0; overflow: hidden; opacity: 0; background: var(--mall-side); border-left: 1px solid var(--mall-line); transition: opacity .8s; white-space: nowrap; } #aiworkstation .hs-mall-files > div { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid var(--mall-line); font-size: 8px; } #aiworkstation .hs-mall-files small { display: block; padding: 12px 8px 6px; font-size: 7px; color: var(--mall-muted); } #aiworkstation .hs-mall-files p { font-size: 8px; padding: 5px 7px; margin: 0 4px; color: var(--mall-muted); } #aiworkstation .hs-mall-files .hs-mall-nested { padding-left: 20px; } #aiworkstation .hs-mall-files .hs-mall-file-selected { background: #a3205a35; color: #f4ddeb; border-radius: 4px; } @media (max-width: 600px) { #aiworkstation .hs-mall-desktop { height: 330px; padding: 8px; } #aiworkstation .hs-mall-window { grid-template-columns: 28% minmax(0,1fr); } #aiworkstation .hs-mall-sidebar { padding: 9px 4px 7px; } #aiworkstation .hs-mall-brand { gap: 3px; padding-left: 1px; } #aiworkstation .hs-mall-brand b { font-size: 11px; } #aiworkstation .hs-mall-nav > span:last-child { display: none; } #aiworkstation .hs-mall-thread { padding: 5px 3px; } #aiworkstation .hs-mall-thread b { font-size: 7px; } #aiworkstation .hs-mall-chat-title { font-size: 7px; padding: 8px 6px; } #aiworkstation .hs-mall-conversation { padding: 16px 7px 8px; } #aiworkstation .hs-mall-message, #aiworkstation .hs-mall-answer p { font-size: 8px; } #aiworkstation .hs-mall-composer { margin: 0 5px 6px; padding: 7px 5px; } #aiworkstation .hs-mall-files p { font-size: 6px; padding-left: 3px; } #aiworkstation .hs-mall-files .hs-mall-nested { padding-left: 6px; } #aiworkstation .hs-mall-files > div { font-size: 7px; padding: 8px 4px; } } @media (prefers-reduced-motion: reduce) { #aiworkstation .hs-malleability *, #aiworkstation .hs-malleability *::before { transition: none !important; animation: none !important; } } #aiworkstation .hs-mall-compare { cursor: ew-resize; touch-action: pan-y; position: relative; height: 408px; border-radius: 12px; overflow: hidden; isolation: isolate; } #aiworkstation .hs-mall-compare .hs-mall-desktop { position: absolute; inset: 0; height: 100%; pointer-events: none; user-select: none; } #aiworkstation .hs-mall-after { --mall-bg: #221c27; --mall-side: #1b171e; --mall-line: #fff0fa24; --mall-text: #f7f2f9; --mall-muted: #b9afbf; --mall-tile: #3a3240; --mall-accent: #a3205a; clip-path: inset(0 0 0 var(--mall-reveal)); } #aiworkstation .hs-mall-after::before, #aiworkstation .hs-mall-after .hs-mall-chat::before { opacity: 1; } #aiworkstation .hs-mall-after .hs-mall-window { box-shadow: 0 12px 32px #150d2460; } #aiworkstation .hs-mall-after .hs-mall-panes { grid-template-columns: minmax(0,1fr) minmax(0,.57fr); } #aiworkstation .hs-mall-after :is(.hs-mall-usage,.hs-mall-files) { opacity: 1; transform: none; } #aiworkstation .hs-mall-compare *, #aiworkstation .hs-mall-compare *::before { transition: none; } #aiworkstation .hs-mall-divider { position: absolute; top: 0; bottom: 0; left: var(--mall-reveal); width: 2px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 12px #0005; pointer-events: none; } #aiworkstation .hs-mall-divider > span { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 42px; height: 42px; transform: translate(-50%,-50%); border: 1px solid #ffffff66; border-radius: 50%; color: #2e2438; background: #fff; box-shadow: 0 3px 16px #0004; } #aiworkstation .hs-mall-divider svg { width: 23px; height: 23px; } #aiworkstation .hs-mall-slider { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; pointer-events: none; } #aiworkstation .hs-mall-compare:has(.hs-mall-slider:focus-visible) { outline: 3px solid #d5b4ed; outline-offset: 4px; } #aiworkstation .hs-mall-compare:has(.hs-mall-slider:focus-visible) .hs-mall-divider > span { box-shadow: 0 0 0 4px #aa70cd88; } #aiworkstation .wt-panel[data-scene=malleability] .wt-copy { animation: none; } #aiworkstation #loop-tab-malleability .wt-tab-progress { display: none; } @media (max-width: 600px) { #aiworkstation .hs-mall-compare { height: 400px; } } /* Plugins: compact settings rows following ReUI's application design language. */ #aiworkstation .wt-panel[data-scene=plugins] .wt-copy { animation: none; } #aiworkstation #loop-tab-plugins .wt-tab-progress { display: none; } #aiworkstation .hs-plugin-manager { width: 100%; border: 1px solid #2b2b2e; border-radius: 12px; background: #171719; box-shadow: 0 4px 14px #0002; overflow: hidden; } #aiworkstation .hs-plugin-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #2b2b2e; } #aiworkstation .hs-plugin-heading > div { display: flex; align-items: center; gap: 9px; } #aiworkstation .hs-plugin-heading > div > .wt-icon { color: #a1a1aa; width: 17px; height: 17px; } #aiworkstation .hs-plugin-heading h4 { font-size: 14px; color: #fafafa; font-weight: 500; letter-spacing: -.015em; } #aiworkstation .hs-plugin-heading > div > span { border: 1px solid #333337; border-radius: 5px; padding: 1px 6px; color: #a1a1aa; font-size: 9px; white-space: nowrap; } #aiworkstation .hs-plugin-count { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 10px; color: #a1a1aa; } #aiworkstation .hs-plugin-count i { width: 5px; height: 5px; margin-right: 2px; border-radius: 50%; background: #d4d4d8; } #aiworkstation .hs-plugin-count b { color: #e4e4e7; font-weight: 500; font-variant-numeric: tabular-nums; } #aiworkstation .hs-plugin-list { list-style: none; padding: 0; margin: 0; } #aiworkstation .hs-plugin-card { display: grid; grid-template-columns: 38px minmax(0,1fr) 44px; align-items: center; gap: 13px; min-height: 77px; padding: 11px 18px; border-bottom: 1px solid #2b2b2e; transition: background .18s; } #aiworkstation .hs-plugin-card:hover { background: #1c1c1f; } #aiworkstation .hs-plugin-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid #343437; border-radius: 8px; background: #222225; color: #a1a1aa; transition: color .18s, border-color .18s; } #aiworkstation .hs-plugin-icon .wt-icon { width: 19px; height: 19px; } #aiworkstation .hs-plugin-card[data-enabled=true] .hs-plugin-icon { color: #e4e4e7; border-color: #414145; } #aiworkstation .hs-plugin-info { min-width: 0; } #aiworkstation .hs-plugin-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 8px; } #aiworkstation .hs-plugin-title h4 { font-size: 12px; line-height: 1.4; color: #f4f4f5; font-weight: 500; letter-spacing: -.01em; } #aiworkstation .hs-plugin-title small { font: 9px var(--font-mono); color: #71717a; } #aiworkstation .hs-plugin-info > p { margin: 3px 0 4px; font-size: 11px; line-height: 1.4; color: #a1a1aa; } #aiworkstation .hs-plugin-kind { display: block; width: fit-content; font-size: 9px; line-height: 1.25; color: #8c8c96; } #aiworkstation .hs-plugin-control { display: flex; flex-direction: column; align-items: center; } #aiworkstation .hs-plugin-switch { position: relative; display: block; width: 44px; height: 32px; flex: 0 0 auto; padding: 0; border: 0; background: transparent; border-radius: 6px; cursor: pointer; touch-action: manipulation; } #aiworkstation .hs-plugin-switch::before { content: ''; position: absolute; top: 6px; left: 3px; width: 38px; height: 20px; border-radius: 999px; background: #353538; border: 1px solid #424246; transition: background .18s, border-color .18s; } #aiworkstation .hs-plugin-switch > span { position: absolute; top: 9px; left: 6px; width: 14px; height: 14px; border-radius: 50%; background: #b4b4bc; box-shadow: 0 1px 2px #0004; transition: transform .18s, background .18s; } #aiworkstation .hs-plugin-switch[aria-checked=true]::before { background: #ededf0; border-color: #ededf0; } #aiworkstation .hs-plugin-switch[aria-checked=true] > span { transform: translateX(18px); background: #202023; } #aiworkstation .hs-plugin-switch:focus-visible { outline: 2px solid #d4d4d8; outline-offset: 3px; } #aiworkstation .hs-plugin-state { color: #71717a; font-size: 9px; line-height: 1.2; } #aiworkstation .hs-plugin-card[data-enabled=true] .hs-plugin-state { color: #d4d4d8; } #aiworkstation .hs-plugin-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; background: #141416; color: #85858e; font-size: 9px; line-height: 1.5; } #aiworkstation .hs-plugin-footer > span:first-child { display: flex; align-items: center; gap: 7px; color: #b8b8c0; } #aiworkstation .hs-plugin-footer .wt-icon { width: 12px; height: 12px; } #aiworkstation .hs-plugin-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (max-width: 600px) { #aiworkstation .wt-panel[data-scene=plugins] .wt-frame { height: auto; min-height: 565px; padding: 24px 14px; } #aiworkstation .hs-plugin-heading { padding: 13px 12px; gap: 7px; } #aiworkstation .hs-plugin-heading > div { gap: 7px; } #aiworkstation .hs-plugin-heading h4 { font-size: 12px; } #aiworkstation .hs-plugin-heading > div > span { font-size: 8px; padding: 1px 4px; } #aiworkstation .hs-plugin-heading > div > .wt-icon { display: none; } #aiworkstation .hs-plugin-count { font-size: 9px; } #aiworkstation .hs-plugin-card { grid-template-columns: 30px minmax(0,1fr) 44px; gap: 9px; padding: 12px; min-height: 82px; } #aiworkstation .hs-plugin-icon { width: 30px; height: 30px; border-radius: 7px; } #aiworkstation .hs-plugin-icon .wt-icon { width: 16px; height: 16px; } #aiworkstation .hs-plugin-title h4 { font-size: 11px; } #aiworkstation .hs-plugin-title small { display: none; } #aiworkstation .hs-plugin-info > p { font-size: 10px; line-height: 1.5; } #aiworkstation .hs-plugin-kind { font-size: 8px; } #aiworkstation .hs-plugin-footer { padding: 12px; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 9px; } } @media (prefers-reduced-motion: reduce) { #aiworkstation .hs-plugin-manager *, #aiworkstation .hs-plugin-manager *::before { transition: none !important; } } /* Automatic session memory, arranged as Bencho-inspired magnetic circles. */ #aiworkstation .wt-panel[data-scene=memory] .wt-copy { animation: none; } #aiworkstation .hs-session-memory { max-width: 470px; margin: 0 auto; } #aiworkstation .hs-memory-cluster { position: relative; width: min(100%, 310px); aspect-ratio: 1; margin: 6px auto 10px; isolation: isolate; } #aiworkstation .hs-mem-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } #aiworkstation .hs-mem-links path { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; } #aiworkstation .hs-mem-wire { stroke: #ffffff0b; transition: stroke .4s; } #aiworkstation .hs-mem-link[data-complete=true] .hs-mem-wire { stroke: #b2a4bd30; } #aiworkstation .hs-mem-link[data-selected=true][data-complete=true] .hs-mem-wire { stroke: #ddc6b773; } #aiworkstation .hs-mem-packet { stroke: #e5c8b4; stroke-dasharray: .18 .82; opacity: 0; } #aiworkstation .wt-panel[data-scene=memory][data-step='1'] .hs-mem-link[data-save-step='1'] .hs-mem-packet, #aiworkstation .wt-panel[data-scene=memory][data-step='2'] .hs-mem-link[data-save-step='2'] .hs-mem-packet, #aiworkstation .wt-panel[data-scene=memory][data-step='3'] .hs-mem-link[data-save-step='3'] .hs-mem-packet { animation: hs-memory-save 1.6s ease both; } #aiworkstation .wt-panel[data-scene=memory][data-step='4'] .hs-mem-link[data-selected=true] .hs-mem-packet { animation: hs-memory-recall 2s ease both; } #aiworkstation .hs-mem-hub { position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 50%; border: 1px solid #dac9df3b; color: #f0e9e3; background: radial-gradient(ellipse at 15% 15%, #866a8455, transparent 65%), radial-gradient(ellipse at 90% 90%, #bd8e6250, transparent 65%), #28252c; box-shadow: inset 0 1px 2px #ffffff16, 0 8px 22px #0005; z-index: 2; } #aiworkstation .hs-mem-hub::before { content: ''; position: absolute; inset: -11px; border-radius: 50%; z-index: -1; background: conic-gradient(from 25deg, #97709e26, #b9987429, #657f7421, #97709e26); filter: blur(10px); } #aiworkstation .hs-mem-hub .hs-orb { color: #f0e6dd; width: 30px; height: 33px; } #aiworkstation .hs-mem-hub b { font-size: 12px; font-weight: 500; letter-spacing: -.025em; } #aiworkstation .hs-mem-block { position: absolute; left: var(--mem-x); top: var(--mem-y); width: 66px; height: 66px; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%,-50%); cursor: pointer; touch-action: manipulation; z-index: 3; } #aiworkstation .hs-mem-skin { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 50%; border: 1px solid #ffffff0a; background: #232426; color: #85878d; box-shadow: inset 0 1px 1px #ffffff06, 0 5px 12px #0002; transition: transform .4s cubic-bezier(.2,1.5,.4,1), background .3s, color .3s, border-color .3s, box-shadow .3s; } #aiworkstation .hs-mem-skin > .wt-icon { width: 19px; height: 19px; } #aiworkstation .hs-mem-skin > span { font-size: 8px; line-height: 1.2; font-weight: 500; } #aiworkstation .hs-mem-block[data-complete=true] .hs-mem-skin { background: #2b2c30; color: #c2c3c7; border-color: #ffffff0f; } #aiworkstation .hs-mem-block[aria-checked=true] .hs-mem-skin { color: #f2e5d9; border-color: #d6bba46b; background: #39322f; box-shadow: inset 0 1px 1px #ffffff13, 0 0 0 4px #d3bba608, 0 6px 15px #0003; transform: scale(1.08); } #aiworkstation .hs-mem-block:focus-visible { outline: 2px solid #dcc5ae; outline-offset: 7px; } @media (hover: hover) and (pointer: fine) { #aiworkstation .hs-mem-block:hover .hs-mem-skin { transform: scale(1.13); color: #f2e5d9; border-color: #d6bba46b; } #aiworkstation .hs-memory-cluster:has(.hs-mem-block:hover) .hs-mem-block:not(:hover):not([aria-checked=true]) .hs-mem-skin { transform: scale(.94); } } #aiworkstation .hs-mem-detail { padding: 14px 17px; border: 1px solid #ffffff12; border-radius: 11px; background: #18191b; min-height: 103px; } #aiworkstation .hs-mem-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; line-height: 1.3; } #aiworkstation .hs-mem-detail-head > span { color: #d2b79e; font-size: 10px; } #aiworkstation .hs-mem-detail-head small { color: #7b8088; font-size: 9px; text-align: right; } #aiworkstation .hs-mem-detail > p { font-size: 13px; line-height: 1.5; color: #dfe0e1; margin: 0 0 10px; } #aiworkstation .hs-mem-reuse { display: flex; align-items: flex-start; gap: 7px; color: #969aa2; font-size: 10px; line-height: 1.5; } #aiworkstation .hs-mem-reuse .wt-icon { width: 12px; height: 12px; margin-top: 1px; color: #bfa98f; } #aiworkstation .hs-mem-caption { min-height: 18px; margin-top: 14px; text-align: center; color: #797f87; font-size: 10px; line-height: 1.6; } #aiworkstation .hs-mem-caption [data-from] { animation: none !important; } @keyframes hs-memory-save { 0% { stroke-dashoffset: .2; opacity: 0; } 15%, 75% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } } @keyframes hs-memory-recall { 0% { stroke-dashoffset: -1; opacity: 0; } 15%, 80% { opacity: 1; } 100% { stroke-dashoffset: .2; opacity: 0; } } @media (max-width:600px) { #aiworkstation .wt-panel[data-scene=memory] .wt-frame { height: auto; min-height: 565px; padding: 24px 17px; } #aiworkstation .hs-mem-block { width: 60px; height: 60px; } #aiworkstation .hs-mem-hub { width: 78px; height: 78px; } #aiworkstation .hs-mem-hub .hs-orb { width: 27px; height: 30px; } #aiworkstation .hs-mem-detail { padding: 13px; min-height: 118px; } #aiworkstation .hs-mem-detail-head { gap: 8px; } #aiworkstation .hs-mem-detail-head small { max-width: 65%; font-size: 8px; } #aiworkstation .hs-mem-detail > p { font-size: 12px; } #aiworkstation .hs-mem-reuse { font-size: 9px; } #aiworkstation .hs-mem-caption { font-size: 9px; } } @media (max-width:375px) { #aiworkstation .hs-mem-block { width: 54px; height: 54px; } #aiworkstation .hs-mem-hub { width: 70px; height: 70px; } #aiworkstation .hs-mem-skin { gap: 5px; } #aiworkstation .hs-mem-skin > span { font-size: 7px; } } @media (prefers-reduced-motion:reduce) { #aiworkstation .hs-session-memory *, #aiworkstation .hs-session-memory *::before { transition: none !important; animation: none !important; } #aiworkstation .hs-mem-packet { display: none; } } #aiworkstation .work-tour [data-from]:not([hidden]) { animation: wt-enter .4s ease both; } #aiworkstation .work-tour[data-running=false] *, #aiworkstation .work-tour[data-running=false] *::after { animation-play-state: paused !important; } @keyframes wt-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes wt-spin { to { transform: rotate(360deg); } } @media (max-width:1190px) { #aiworkstation .wt-panel { grid-template-columns: minmax(220px,.72fr) minmax(0,1.65fr); gap: 30px; } #aiworkstation .wt-copy h3 { font-size: 29px; } #aiworkstation .wt-frame { padding: 28px; } } @media (max-width:1000px) { #aiworkstation .wt-panel { grid-template-columns: 1fr; gap: 26px; } #aiworkstation .wt-copy { max-width: 640px; } #aiworkstation .wt-copy h3 br { display: none; } #aiworkstation .wt-feature-label { margin-bottom: 12px; } #aiworkstation .wt-copy > p { max-width: 60ch; } #aiworkstation .wt-copy h3 { margin-bottom: 10px; } #aiworkstation .wt-hint { margin-top: 12px; } #aiworkstation .wt-frame { width: 100%; } } @media (max-width:600px) { #aiworkstation .work-tour { padding: 56px 0 48px; } #aiworkstation .wt-container { padding: 0 20px; } #aiworkstation .wt-heading { margin-bottom: 25px; } #aiworkstation .wt-heading p { font-size: 15px; max-width: 28ch; margin: 0 auto; } #aiworkstation .wt-eyebrow { font-size: 9px; } #aiworkstation .wt-tabs { width: 100%; justify-content: flex-start; gap: 2px; margin-bottom: 28px; padding: 3px 0; } #aiworkstation .wt-tab { padding: 10px 13px; font-size: 12px; } #aiworkstation .wt-copy { min-height: 182px; } #aiworkstation .wt-copy h3 { font-size: 28px; } #aiworkstation .wt-copy > p { font-size: 15px; } #aiworkstation .wt-hint { font-size: 10px; } #aiworkstation .wt-frame { height: 565px; padding: 22px 17px; border-radius: 12px; } #aiworkstation .hs-orbit-agent { width: 36px; height: 36px; } #aiworkstation .hs-orbit-logo { border-radius: 11px; } #aiworkstation .hs-orbit-logo img { width: 20px; height: 20px; } #aiworkstation .hs-orbit-logo img[src*="grokbot"] { border-radius: 10px; } #aiworkstation .hs-orbit-name { font-size: 9px; top: calc(100% + 6px); } #aiworkstation .hs-orbit-center { gap: 9px; } #aiworkstation .hs-orbit-center .hs-orb { width: 42px; height: 46px; } #aiworkstation .hs-orbit-center > span:last-child { font-size: 13px; } #aiworkstation .wt-state { font-size: 10px; } #aiworkstation .wt-panel[data-scene=agents] .wt-frame { padding: 24px 17px; } #aiworkstation .hs-kanban-heading { align-items: flex-start; gap: 10px; font-size: 11px; } #aiworkstation .hs-kanban-heading small { font-size: 9px; } #aiworkstation .hs-kanban-communication { justify-content: flex-start; min-height: 38px; margin: 13px 5px 0; } #aiworkstation .hs-kanban-message { flex-direction: column; align-items: flex-start; } #aiworkstation .hs-devices { grid-template-columns: minmax(0, 1fr) 34px 54px; row-gap: 16px; } #aiworkstation .hs-team-pill { padding: 6px 10px 6px 6px; gap: 8px; font-size: 10px; } #aiworkstation .hs-team-avatars .hs-member-avatar { width: 22px; height: 22px; font-size: 7px; } #aiworkstation .hs-device-list { padding: 6px; border-radius: 17px; } #aiworkstation .hs-device-person { grid-template-columns: 26px minmax(0, 1fr) 22px; height: 64px; gap: 7px; padding: 0 5px; border-radius: 12px; } #aiworkstation .hs-device-person .hs-member-avatar { width: 26px; height: 26px; font-size: 8px; } #aiworkstation .hs-member-name { font-size: 11px; } #aiworkstation .hs-member-detail { gap: 6px; } #aiworkstation .hs-member-agents { gap: 5px; } #aiworkstation .hs-member-agents > span { gap: 3px; } #aiworkstation .hs-member-agents img { width: 10px; height: 10px; } #aiworkstation .hs-member-agents small { font-size: 8px; white-space: nowrap; } #aiworkstation .hs-member-device .wt-icon { width: 18px; height: 18px; } #aiworkstation .hs-member-device small { font-size: 7px; } #aiworkstation .hs-device-connections { height: 270px; } #aiworkstation .hs-device-hub { width: 54px; height: 54px; } #aiworkstation .hs-device-hub > div { border-radius: 16px; } #aiworkstation .hs-device-hub .hs-orb { width: 30px; height: 33px; } #aiworkstation .hs-device-hub > span { top: calc(100% + 9px); font-size: 11px; } #aiworkstation .hs-device-hub > small { display: none; } #aiworkstation .hs-device-caption { margin-top: 18px; font-size: 9px; gap: 6px; } #aiworkstation .hs-terminal-card { padding: 18px 15px; min-height: 300px; } #aiworkstation .hs-terminal-label { font-size: 10px; margin-bottom: 21px; } #aiworkstation .hs-command code { font-size: 11px; } #aiworkstation .hs-terminal-caption { font-size: 9px; line-height: 1.7; } #aiworkstation .hs-terminal-row { font-size: 10px; } #aiworkstation .hs-terminal-row > time { font-size: 8px; } #aiworkstation .hs-terminal-action { margin-left: 20px; } #aiworkstation .hs-terminal-action .hs-signal { font-size: 10px; } #aiworkstation .hs-terminal-fix { margin-left: 5px; } #aiworkstation .hs-terminal-fix code { font-size: 8px; } #aiworkstation .wt-panel[data-scene=tasks] .wt-frame { padding: 24px 17px; } } @media (max-width: 400px) { #aiworkstation .hs-orbit-track { inset: 7%; } } @media (max-width: 375px) { #aiworkstation .hs-orbit-agent { width: 30px; height: 30px; } #aiworkstation .hs-orbit-logo { border-radius: 9px; } #aiworkstation .hs-orbit-logo img { width: 17px; height: 17px; } #aiworkstation .hs-orbit-logo img[src*="grokbot"] { border-radius: 8px; } #aiworkstation .hs-orbit-name { font-size: 8px; top: calc(100% + 5px); } } @media (prefers-reduced-motion: reduce) { #aiworkstation .wt-tab-progress { display: none; } } @media (max-width: 600px) { }