Spaces:
Sleeping
Sleeping
| :root { | |
| color-scheme: light; | |
| --bg: #eee5d7; | |
| --paper: rgba(255, 251, 245, 0.98); | |
| --paper-strong: rgba(255, 255, 255, 0.99); | |
| --ink: #1d140d; | |
| --muted: #3d3027; | |
| --soft: #5f4d40; | |
| --accent: #8f3518; | |
| --accent-2: #d2a152; | |
| --line: rgba(29, 20, 13, 0.16); | |
| --line-strong: rgba(29, 20, 13, 0.24); | |
| --shadow: 0 18px 42px rgba(50, 28, 8, 0.14); | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| font-family: Georgia, "Times New Roman", serif; | |
| color: var(--ink); | |
| background: | |
| radial-gradient(circle at top left, rgba(217, 164, 65, 0.2), transparent 30%), | |
| radial-gradient(circle at bottom right, rgba(166, 69, 36, 0.14), transparent 24%), | |
| var(--bg); | |
| } | |
| .layout { | |
| width: min(1080px, calc(100% - 32px)); | |
| margin: 0 auto; | |
| padding: 44px 0 64px; | |
| } | |
| .hero { | |
| margin-bottom: 24px; | |
| } | |
| .hero-top { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 20px; | |
| margin-bottom: 12px; | |
| } | |
| .eyebrow, | |
| .section-label { | |
| margin: 0 0 8px; | |
| color: var(--accent); | |
| text-transform: uppercase; | |
| letter-spacing: 0.18em; | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| } | |
| .doc-library { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| .doc-row { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.25fr) auto; | |
| gap: 12px; | |
| align-items: center; | |
| padding: 12px 14px; | |
| border-radius: 20px; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 251, 245, 0.72); | |
| } | |
| .doc-copy { | |
| display: grid; | |
| gap: 4px; | |
| } | |
| .doc-copy strong { | |
| font-size: 1rem; | |
| } | |
| .doc-copy span { | |
| color: var(--muted); | |
| font-size: 0.92rem; | |
| line-height: 1.4; | |
| } | |
| .doc-actions, | |
| .doc-tail { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| } | |
| .doc-actions { | |
| justify-content: flex-end; | |
| } | |
| .doc-tail { | |
| justify-content: flex-start; | |
| } | |
| .doc-link { | |
| display: inline-flex; | |
| align-items: center; | |
| min-height: 36px; | |
| padding: 0 12px; | |
| border-radius: 999px; | |
| border: 1px solid rgba(61, 23, 10, 0.38); | |
| background: linear-gradient(135deg, #7d2f17, #aa5a22); | |
| color: #fff8f2; | |
| text-decoration: none; | |
| font-weight: 700; | |
| font-size: 0.9rem; | |
| white-space: nowrap; | |
| } | |
| .doc-link:hover { | |
| filter: brightness(1.05); | |
| } | |
| h1, | |
| h2, | |
| h3 { | |
| margin: 0; | |
| font-weight: 600; | |
| } | |
| h1 { | |
| max-width: 14ch; | |
| font-size: clamp(1.7rem, 3.4vw, 3.1rem); | |
| line-height: 1.02; | |
| } | |
| .lede { | |
| max-width: 68ch; | |
| margin: 0; | |
| color: var(--muted); | |
| font-size: 0.96rem; | |
| line-height: 1.65; | |
| } | |
| .hero .lede + .lede { | |
| margin-top: 10px; | |
| } | |
| .solution-alternatives { | |
| margin-top: 18px; | |
| } | |
| .solution-card { | |
| display: grid; | |
| gap: 8px; | |
| max-width: 68ch; | |
| padding: 18px 20px; | |
| border: 1px solid var(--line); | |
| border-radius: 20px; | |
| background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(244, 233, 221, 0.98)); | |
| color: inherit; | |
| text-decoration: none; | |
| box-shadow: 0 14px 32px rgba(50, 28, 8, 0.08); | |
| } | |
| .solution-card:hover { | |
| border-color: rgba(143, 53, 24, 0.34); | |
| transform: translateY(-1px); | |
| } | |
| .solution-label { | |
| color: var(--accent); | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| font-size: 0.74rem; | |
| font-weight: 700; | |
| } | |
| .solution-card strong { | |
| font-size: 1.05rem; | |
| } | |
| .solution-card span:last-child { | |
| color: var(--muted); | |
| line-height: 1.55; | |
| font-size: 0.94rem; | |
| } | |
| .panel { | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 238, 226, 0.98)); | |
| border: 1px solid var(--line); | |
| border-radius: 24px; | |
| padding: 24px; | |
| box-shadow: var(--shadow); | |
| } | |
| .panel + .panel, | |
| .workflow-strip + .panel { | |
| margin-top: 20px; | |
| } | |
| .workflow-strip { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); | |
| gap: 12px; | |
| } | |
| .workflow-step { | |
| border-radius: 18px; | |
| border: 1px solid var(--line); | |
| background: rgba(255, 253, 249, 0.99); | |
| padding: 14px 16px; | |
| } | |
| .workflow-step strong { | |
| display: block; | |
| margin-bottom: 6px; | |
| color: var(--ink); | |
| font-weight: 700; | |
| } | |
| .workflow-step span { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| font-weight: 500; | |
| } | |
| form { | |
| display: grid; | |
| gap: 12px; | |
| } | |
| label { | |
| font-weight: 700; | |
| letter-spacing: 0.02em; | |
| color: var(--ink); | |
| } | |
| input, | |
| select, | |
| textarea, | |
| button { | |
| font: inherit; | |
| } | |
| input, | |
| select, | |
| textarea { | |
| width: 100%; | |
| border: 1px solid var(--line-strong); | |
| border-radius: 14px; | |
| padding: 14px 16px; | |
| background: var(--paper-strong); | |
| color: var(--ink); | |
| } | |
| select, | |
| option { | |
| background: #fffaf4; | |
| color: var(--ink); | |
| } | |
| input::placeholder, | |
| textarea::placeholder { | |
| color: var(--soft); | |
| } | |
| .scenario-help { | |
| margin: -2px 0 8px; | |
| color: var(--muted); | |
| line-height: 1.5; | |
| font-size: 0.93rem; | |
| font-weight: 500; | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 230px; | |
| } | |
| button { | |
| width: fit-content; | |
| border: 0; | |
| border-radius: 999px; | |
| padding: 14px 20px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent-2)); | |
| color: white; | |
| font-weight: 700; | |
| cursor: pointer; | |
| } | |
| button:hover { | |
| filter: brightness(1.03); | |
| } | |
| .status-row { | |
| display: flex; | |
| gap: 12px; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| margin-bottom: 16px; | |
| } | |
| #status { | |
| color: var(--muted); | |
| font-size: 0.95rem; | |
| } | |
| .empty-state { | |
| padding: 18px; | |
| border-radius: 18px; | |
| background: rgba(255, 252, 247, 0.97); | |
| border: 1px dashed var(--line-strong); | |
| color: var(--muted); | |
| line-height: 1.6; | |
| font-weight: 500; | |
| } | |
| .report-shell { | |
| display: grid; | |
| gap: 18px; | |
| } | |
| .summary-grid, | |
| .diagram-flow { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); | |
| gap: 12px; | |
| } | |
| .metric-card, | |
| .diagram-card, | |
| .diagram-node, | |
| .stage-card { | |
| border: 1px solid var(--line); | |
| border-radius: 20px; | |
| background: rgba(255, 253, 248, 0.99); | |
| box-shadow: 0 14px 32px rgba(50, 28, 8, 0.10); | |
| } | |
| .metric-card { | |
| padding: 16px 18px; | |
| } | |
| .metric-label { | |
| font-size: 0.78rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--accent); | |
| font-weight: 700; | |
| } | |
| .metric-value { | |
| margin-top: 8px; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--ink); | |
| } | |
| .diagram-card { | |
| padding: 18px; | |
| } | |
| .diagram-card h3 { | |
| margin-bottom: 10px; | |
| font-size: 1rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--accent); | |
| } | |
| .diagram-node { | |
| padding: 14px 16px; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(244, 232, 220, 0.96)); | |
| } | |
| .diagram-node strong { | |
| display: block; | |
| margin-bottom: 6px; | |
| color: var(--ink); | |
| } | |
| .diagram-node span { | |
| display: block; | |
| color: var(--muted); | |
| font-size: 0.92rem; | |
| line-height: 1.45; | |
| font-weight: 500; | |
| } | |
| .stage-grid { | |
| display: grid; | |
| gap: 14px; | |
| } | |
| .stage-card { | |
| overflow: hidden; | |
| } | |
| .stage-toggle { | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .stage-toggle summary { | |
| list-style: none; | |
| cursor: pointer; | |
| } | |
| .stage-toggle summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .stage-head { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.9fr); | |
| gap: 12px; | |
| padding: 16px 18px; | |
| background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 236, 224, 0.96)); | |
| } | |
| .stage-index { | |
| font-size: 0.76rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.14em; | |
| color: var(--accent); | |
| font-weight: 700; | |
| } | |
| .stage-role { | |
| font-size: 1.08rem; | |
| font-weight: 700; | |
| color: var(--ink); | |
| } | |
| .stage-meta { | |
| font-size: 0.92rem; | |
| color: var(--muted); | |
| align-self: end; | |
| font-weight: 500; | |
| } | |
| .stage-chevron { | |
| justify-self: end; | |
| align-self: center; | |
| color: var(--accent); | |
| font-weight: 700; | |
| } | |
| .stage-toggle[open] .stage-chevron::before { | |
| content: "Collapse"; | |
| } | |
| .stage-toggle:not([open]) .stage-chevron::before { | |
| content: "Expand"; | |
| } | |
| .stage-body { | |
| padding: 16px 18px 18px; | |
| } | |
| .io-summary { | |
| margin: 0 0 10px; | |
| color: #2b211a; | |
| line-height: 1.6; | |
| font-weight: 500; | |
| } | |
| .agent-config-text { | |
| margin: 0 0 10px; | |
| color: var(--muted); | |
| line-height: 1.6; | |
| font-size: 0.95rem; | |
| } | |
| .log-title { | |
| margin: 0 0 10px; | |
| font-size: 0.88rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.12em; | |
| color: var(--accent); | |
| font-weight: 700; | |
| } | |
| .log-list { | |
| margin: 0; | |
| padding-left: 18px; | |
| color: #2b211a; | |
| line-height: 1.6; | |
| font-weight: 500; | |
| } | |
| .log-list li + li { | |
| margin-top: 7px; | |
| } | |
| @media (max-width: 720px) { | |
| .layout { | |
| width: min(100% - 20px, 1000px); | |
| padding-top: 24px; | |
| } | |
| .hero-top, | |
| .status-row, | |
| .stage-head { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| grid-template-columns: 1fr; | |
| } | |
| .doc-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .stage-chevron { | |
| justify-self: start; | |
| } | |
| .panel { | |
| padding: 18px; | |
| } | |
| .doc-link { | |
| white-space: normal; | |
| } | |
| .doc-actions { | |
| justify-content: flex-start; | |
| } | |
| } | |