Spaces:
Sleeping
Sleeping
| :root { | |
| --bg: #f7f3ea; | |
| --surface: rgba(255, 252, 246, 0.78); | |
| --line: rgba(24, 56, 89, 0.12); | |
| --text: #17304a; | |
| --muted: #5e7388; | |
| --accent: #0e7c86; | |
| --warm: #ef7d47; | |
| --ok: #2d8a57; | |
| --warn: #a26c05; | |
| --bad: #c05541; | |
| --mono: "IBM Plex Mono", Consolas, monospace; | |
| --sans: "Sora", "Segoe UI", sans-serif; | |
| --shadow: 0 20px 60px rgba(21, 46, 72, 0.12); | |
| --shadow-soft: 0 8px 30px rgba(21, 46, 72, 0.08); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| html, | |
| body { | |
| margin: 0; | |
| min-height: 100%; | |
| color: var(--text); | |
| font-family: var(--sans); | |
| background: | |
| radial-gradient(circle at top left, rgba(14, 124, 134, 0.11), transparent 30%), | |
| radial-gradient(circle at top right, rgba(239, 125, 71, 0.12), transparent 32%), | |
| linear-gradient(180deg, #fffdf8 0%, var(--bg) 55%, #f4efe4 100%); | |
| } | |
| body { | |
| position: relative; | |
| overflow-x: hidden; | |
| padding: 28px 22px 40px; | |
| } | |
| code { | |
| font-family: var(--mono); | |
| font-size: 0.95em; | |
| } | |
| .backdrop { | |
| position: fixed; | |
| inset: -10vmax; | |
| background: | |
| radial-gradient(42vmax 34vmax at 8% 8%, rgba(14, 124, 134, 0.13), transparent 70%), | |
| radial-gradient(38vmax 34vmax at 94% 12%, rgba(239, 125, 71, 0.11), transparent 72%), | |
| radial-gradient(44vmax 36vmax at 50% 100%, rgba(45, 138, 87, 0.08), transparent 70%); | |
| filter: blur(10px); | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .page-shell { | |
| width: min(1380px, 100%); | |
| margin: 0 auto; | |
| } | |
| .hero { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr); | |
| gap: 18px; | |
| align-items: stretch; | |
| margin-bottom: 18px; | |
| } | |
| .hero-copy, | |
| .hero-aside, | |
| .highlight-card, | |
| .panel { | |
| border: 1px solid var(--line); | |
| background: var(--surface); | |
| backdrop-filter: blur(14px); | |
| box-shadow: var(--shadow-soft); | |
| } | |
| .hero-copy, | |
| .hero-aside { | |
| border-radius: 28px; | |
| padding: 24px; | |
| } | |
| .eyebrow, | |
| .aside-label, | |
| .section-label, | |
| .card-index { | |
| margin: 0 0 10px; | |
| color: var(--accent); | |
| font-size: 0.76rem; | |
| letter-spacing: 0.14em; | |
| text-transform: uppercase; | |
| } | |
| h1 { | |
| margin: 0; | |
| max-width: 12ch; | |
| font-size: clamp(2.15rem, 4vw, 4rem); | |
| line-height: 1.02; | |
| letter-spacing: -0.04em; | |
| } | |
| .hero-text { | |
| max-width: 66ch; | |
| margin: 14px 0 0; | |
| color: var(--muted); | |
| line-height: 1.7; | |
| } | |
| .hero-tags, | |
| .token-row, | |
| .button-row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .hero-tags { | |
| margin-top: 18px; | |
| } | |
| .tag, | |
| .token { | |
| display: inline-flex; | |
| align-items: center; | |
| border-radius: 999px; | |
| padding: 8px 12px; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.7); | |
| color: var(--text); | |
| font-size: 0.82rem; | |
| } | |
| .token-good { | |
| background: rgba(45, 138, 87, 0.12); | |
| color: var(--ok); | |
| border-color: rgba(45, 138, 87, 0.22); | |
| } | |
| .token-warn { | |
| background: rgba(162, 108, 5, 0.12); | |
| color: var(--warn); | |
| border-color: rgba(162, 108, 5, 0.2); | |
| } | |
| .token-bad { | |
| background: rgba(192, 85, 65, 0.12); | |
| color: var(--bad); | |
| border-color: rgba(192, 85, 65, 0.22); | |
| } | |
| .token-muted { | |
| color: var(--muted); | |
| background: rgba(246, 241, 232, 0.86); | |
| } | |
| .signal-list, | |
| .mini-list, | |
| .breakdown-list { | |
| margin: 0; | |
| padding-left: 18px; | |
| } | |
| .signal-list li, | |
| .mini-list li, | |
| .breakdown-list li { | |
| margin-bottom: 8px; | |
| line-height: 1.55; | |
| } | |
| .hero-meta { | |
| margin-top: 18px; | |
| padding-top: 18px; | |
| border-top: 1px solid var(--line); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| color: var(--muted); | |
| } | |
| .health-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 100px; | |
| border-radius: 999px; | |
| padding: 8px 12px; | |
| font-size: 0.82rem; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.8); | |
| } | |
| .health-pill.is-ok { | |
| color: var(--ok); | |
| border-color: rgba(45, 138, 87, 0.22); | |
| background: rgba(45, 138, 87, 0.1); | |
| } | |
| .health-pill.is-bad { | |
| color: var(--bad); | |
| border-color: rgba(192, 85, 65, 0.22); | |
| background: rgba(192, 85, 65, 0.1); | |
| } | |
| .health-pill.is-pending { | |
| color: var(--warn); | |
| border-color: rgba(162, 108, 5, 0.22); | |
| background: rgba(162, 108, 5, 0.08); | |
| } | |
| .highlight-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 14px; | |
| margin-bottom: 18px; | |
| } | |
| .highlight-card { | |
| border-radius: 24px; | |
| padding: 20px; | |
| } | |
| .highlight-card h2, | |
| .panel h2 { | |
| margin: 0; | |
| font-size: 1.08rem; | |
| } | |
| .highlight-card p:last-child { | |
| margin: 10px 0 0; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .workspace { | |
| display: grid; | |
| grid-template-columns: repeat(12, minmax(0, 1fr)); | |
| gap: 14px; | |
| } | |
| .session-panel { grid-column: span 4; } | |
| .task-panel { grid-column: span 8; } | |
| .ticket-panel { grid-column: span 7; } | |
| .action-panel { grid-column: span 5; } | |
| .log-panel { grid-column: span 7; } | |
| .state-panel { grid-column: span 5; } | |
| .panel { | |
| border-radius: 24px; | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| } | |
| .panel-head { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .muted-copy { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| max-width: 38ch; | |
| } | |
| .grid-2, | |
| .fact-grid, | |
| .state-layout, | |
| .log-layout { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .grid-2 { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .fact-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| margin-top: 18px; | |
| } | |
| .state-layout, | |
| .log-layout { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| label { | |
| display: block; | |
| } | |
| label > span { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-size: 0.82rem; | |
| color: var(--muted); | |
| } | |
| input, | |
| select, | |
| textarea, | |
| button { | |
| font: inherit; | |
| } | |
| input, | |
| select, | |
| textarea { | |
| width: 100%; | |
| border-radius: 16px; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.82); | |
| color: var(--text); | |
| padding: 12px 14px; | |
| outline: none; | |
| transition: border-color 160ms ease, box-shadow 160ms ease; | |
| } | |
| input:focus, | |
| select:focus, | |
| textarea:focus { | |
| border-color: rgba(14, 124, 134, 0.4); | |
| box-shadow: 0 0 0 4px rgba(14, 124, 134, 0.1); | |
| } | |
| textarea { | |
| min-height: 104px; | |
| resize: vertical; | |
| } | |
| .btn { | |
| border: 0; | |
| border-radius: 999px; | |
| cursor: pointer; | |
| padding: 11px 18px; | |
| font-weight: 600; | |
| transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease; | |
| } | |
| .btn:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| filter: brightness(1.03); | |
| } | |
| .btn:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.6; | |
| } | |
| .btn-small { | |
| padding: 8px 12px; | |
| font-size: 0.78rem; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(135deg, var(--accent), #1f96a1); | |
| color: #f7fffe; | |
| } | |
| .btn-secondary { | |
| background: rgba(255, 255, 255, 0.82); | |
| color: var(--text); | |
| border: 1px solid var(--line); | |
| } | |
| .btn-accent { | |
| background: linear-gradient(135deg, var(--warm), #f49d61); | |
| color: #fff9f5; | |
| } | |
| .status { | |
| min-height: 42px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 999px; | |
| border: 1px solid var(--line); | |
| padding: 8px 14px; | |
| font-size: 0.85rem; | |
| background: rgba(255, 255, 255, 0.8); | |
| } | |
| .status-idle { | |
| color: var(--muted); | |
| } | |
| .status-ok { | |
| color: var(--ok); | |
| border-color: rgba(45, 138, 87, 0.2); | |
| background: rgba(45, 138, 87, 0.08); | |
| } | |
| .status-warn { | |
| color: var(--warn); | |
| border-color: rgba(162, 108, 5, 0.2); | |
| background: rgba(162, 108, 5, 0.08); | |
| } | |
| .status-error { | |
| color: var(--bad); | |
| border-color: rgba(192, 85, 65, 0.2); | |
| background: rgba(192, 85, 65, 0.08); | |
| } | |
| .metric-grid { | |
| margin-top: 18px; | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .metric-grid article, | |
| .fact-block, | |
| .reward-card, | |
| .api-card, | |
| .preview-card, | |
| .task-brief { | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: rgba(255, 255, 255, 0.72); | |
| } | |
| .metric-grid article { | |
| padding: 14px; | |
| } | |
| .metric-grid span { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 0.78rem; | |
| margin-bottom: 8px; | |
| } | |
| .metric-grid strong { | |
| display: block; | |
| font-size: 1.24rem; | |
| letter-spacing: -0.03em; | |
| } | |
| .task-cards { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .task-card { | |
| width: 100%; | |
| text-align: left; | |
| border-radius: 20px; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.7); | |
| padding: 16px; | |
| color: var(--text); | |
| } | |
| .task-card.is-active { | |
| border-color: rgba(14, 124, 134, 0.35); | |
| background: linear-gradient(180deg, rgba(14, 124, 134, 0.08), rgba(255, 255, 255, 0.85)); | |
| box-shadow: inset 0 0 0 1px rgba(14, 124, 134, 0.1); | |
| } | |
| .task-card small { | |
| display: inline-flex; | |
| margin-bottom: 10px; | |
| color: var(--accent); | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| } | |
| .task-card strong { | |
| display: block; | |
| font-size: 1rem; | |
| margin-bottom: 8px; | |
| } | |
| .task-card p { | |
| margin: 0; | |
| color: var(--muted); | |
| line-height: 1.55; | |
| font-size: 0.88rem; | |
| } | |
| .task-brief { | |
| margin-top: 12px; | |
| padding: 18px; | |
| } | |
| .baseline-section { | |
| margin-top: 12px; | |
| border: 1px solid var(--line); | |
| border-radius: 18px; | |
| background: rgba(255, 255, 255, 0.72); | |
| padding: 18px; | |
| } | |
| .baseline-head, | |
| .card-head, | |
| .inline-actions { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .baseline-cards { | |
| margin-top: 12px; | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 10px; | |
| } | |
| .baseline-card { | |
| border: 1px solid var(--line); | |
| border-radius: 16px; | |
| background: rgba(248, 243, 234, 0.9); | |
| padding: 14px; | |
| } | |
| .baseline-card span, | |
| .baseline-card small { | |
| display: block; | |
| } | |
| .baseline-card span, | |
| .baseline-card small { | |
| color: var(--muted); | |
| font-size: 0.8rem; | |
| } | |
| .baseline-card strong { | |
| display: block; | |
| margin: 6px 0 4px; | |
| font-size: 1.2rem; | |
| } | |
| .task-brief-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .difficulty-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| border-radius: 999px; | |
| padding: 7px 12px; | |
| background: rgba(14, 124, 134, 0.08); | |
| color: var(--accent); | |
| font-size: 0.8rem; | |
| border: 1px solid rgba(14, 124, 134, 0.14); | |
| } | |
| .task-brief p { | |
| margin: 10px 0 14px; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .ticket-card-shell { | |
| border: 1px solid var(--line); | |
| border-radius: 20px; | |
| padding: 18px; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(250, 245, 237, 0.9)); | |
| } | |
| .ticket-top h3, | |
| .preview-head h3, | |
| .reward-card h3, | |
| .api-card h3 { | |
| margin: 0; | |
| font-size: 1rem; | |
| } | |
| .ticket-description, | |
| .fact-copy { | |
| margin: 12px 0 0; | |
| color: var(--muted); | |
| line-height: 1.65; | |
| } | |
| .fact-block { | |
| padding: 14px; | |
| } | |
| .fact-block h3 { | |
| margin: 0 0 10px; | |
| font-size: 0.85rem; | |
| } | |
| .details-block { | |
| margin-top: 14px; | |
| border-radius: 18px; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.7); | |
| overflow: hidden; | |
| } | |
| .details-block summary { | |
| cursor: pointer; | |
| list-style: none; | |
| padding: 14px 16px; | |
| font-weight: 600; | |
| } | |
| .details-block summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .payload-grid { | |
| display: grid; | |
| gap: 12px; | |
| margin-top: 14px; | |
| } | |
| .hint-box { | |
| margin-top: 14px; | |
| border-radius: 18px; | |
| padding: 14px 16px; | |
| border: 1px dashed rgba(14, 124, 134, 0.22); | |
| background: rgba(14, 124, 134, 0.06); | |
| color: var(--muted); | |
| line-height: 1.6; | |
| } | |
| .preview-card, | |
| .reward-card, | |
| .api-card { | |
| padding: 16px; | |
| } | |
| .preview-card { | |
| margin-top: 14px; | |
| } | |
| .preview-head { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| margin-bottom: 10px; | |
| } | |
| .preview-head span { | |
| color: var(--muted); | |
| font-size: 0.8rem; | |
| } | |
| .breakdown-list { | |
| margin-top: 12px; | |
| } | |
| .breakdown-list li { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| padding: 10px 0; | |
| border-bottom: 1px solid rgba(24, 56, 89, 0.08); | |
| } | |
| .breakdown-list li:last-child { | |
| border-bottom: 0; | |
| padding-bottom: 0; | |
| } | |
| .breakdown-list strong { | |
| font-family: var(--mono); | |
| font-size: 0.84rem; | |
| } | |
| .value-good { | |
| color: var(--ok); | |
| } | |
| .value-bad { | |
| color: var(--bad); | |
| } | |
| .value-neutral { | |
| color: var(--muted); | |
| } | |
| .json-view { | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| border-radius: 18px; | |
| border: 1px solid var(--line); | |
| padding: 14px; | |
| background: rgba(248, 243, 234, 0.95); | |
| color: #1f3850; | |
| font-family: var(--mono); | |
| font-size: 0.8rem; | |
| line-height: 1.65; | |
| max-height: 360px; | |
| overflow: auto; | |
| } | |
| .log-list { | |
| margin: 0; | |
| padding-left: 0; | |
| list-style: none; | |
| display: grid; | |
| gap: 10px; | |
| } | |
| .log-entry { | |
| border-radius: 18px; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 255, 255, 0.76); | |
| padding: 14px; | |
| } | |
| .log-entry.is-bad { | |
| border-color: rgba(192, 85, 65, 0.24); | |
| background: rgba(192, 85, 65, 0.08); | |
| } | |
| .log-entry.is-warn { | |
| border-color: rgba(162, 108, 5, 0.24); | |
| background: rgba(162, 108, 5, 0.08); | |
| } | |
| .log-head strong { | |
| font-size: 0.94rem; | |
| } | |
| .log-meta { | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: 0.76rem; | |
| margin-top: 8px; | |
| } | |
| .log-note { | |
| color: var(--muted); | |
| margin-top: 8px; | |
| line-height: 1.55; | |
| font-size: 0.86rem; | |
| } | |
| .reveal { | |
| animation: riseIn 360ms ease both; | |
| } | |
| @keyframes riseIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @media (max-width: 1200px) { | |
| .hero { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .highlight-grid { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .session-panel, | |
| .task-panel, | |
| .ticket-panel, | |
| .action-panel, | |
| .log-panel, | |
| .state-panel { | |
| grid-column: span 12; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| body { | |
| padding: 16px 14px 28px; | |
| } | |
| .highlight-grid, | |
| .task-cards, | |
| .grid-2, | |
| .fact-grid, | |
| .metric-grid { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| .panel-head, | |
| .hero-meta, | |
| .preview-head, | |
| .task-brief-header, | |
| .baseline-head, | |
| .card-head, | |
| .inline-actions { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| h1 { | |
| max-width: none; | |
| } | |
| .baseline-cards { | |
| grid-template-columns: minmax(0, 1fr); | |
| } | |
| } | |