| :root { |
| color-scheme: dark; |
| --ink: #f7f0df; |
| --muted: #b9ad95; |
| --quiet: #766d5f; |
| --black: #070806; |
| --surface: rgba(247, 240, 223, 0.055); |
| --surface-strong: rgba(247, 240, 223, 0.1); |
| --line: rgba(247, 240, 223, 0.16); |
| --line-strong: rgba(247, 240, 223, 0.34); |
| --agent: #80dcc9; |
| --human: #e5aa3d; |
| --overload: #df6242; |
| --owner: #a7ff4f; |
| --empty: rgba(247, 240, 223, 0.08); |
| --max: 1240px; |
| --pad: clamp(16px, 3.8vw, 54px); |
| --display: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| --body: "Aptos", "Segoe UI", sans-serif; |
| --mono: "Berkeley Mono", "Iosevka", "SFMono-Regular", Consolas, monospace; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| background: var(--black); |
| max-width: 100%; |
| overflow-x: hidden; |
| } |
|
|
| body { |
| width: 100%; |
| max-width: 100%; |
| min-width: 320px; |
| margin: 0; |
| color: var(--ink); |
| font-family: var(--body); |
| background: |
| radial-gradient(circle at 82% 10%, rgba(128, 220, 201, 0.14), transparent 34vw), |
| radial-gradient(circle at 9% 28%, rgba(223, 98, 66, 0.12), transparent 28vw), |
| linear-gradient(180deg, #070806 0%, #11110d 48%, #080907 100%); |
| overflow-x: hidden; |
| } |
|
|
| button, |
| input { |
| font: inherit; |
| } |
|
|
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
|
|
| h1, |
| h2, |
| h3, |
| p { |
| margin: 0; |
| } |
|
|
| .grain { |
| position: fixed; |
| inset: 0; |
| z-index: 20; |
| pointer-events: none; |
| opacity: 0.2; |
| background-image: |
| linear-gradient(rgba(247, 240, 223, 0.035) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(247, 240, 223, 0.028) 1px, transparent 1px); |
| background-size: 72px 72px; |
| mask-image: linear-gradient(180deg, black, transparent 82%); |
| } |
|
|
| .topbar { |
| width: min(var(--max), calc(100% - (2 * var(--pad)))); |
| min-height: 58px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| margin: 18px auto 0; |
| padding: 12px 14px; |
| border: 1px solid var(--line); |
| background: rgba(7, 8, 6, 0.74); |
| backdrop-filter: blur(18px); |
| } |
|
|
| .brand, |
| .top-actions, |
| .privacy-badge { |
| display: inline-flex; |
| align-items: center; |
| } |
|
|
| .brand { |
| min-width: 0; |
| gap: 10px; |
| color: var(--muted); |
| font-family: var(--mono); |
| font-size: 12px; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .brand-mark { |
| width: 34px; |
| height: 34px; |
| display: grid; |
| place-items: center; |
| flex: 0 0 auto; |
| border: 1px solid var(--line-strong); |
| color: var(--owner); |
| font-size: 11px; |
| } |
|
|
| .top-actions { |
| gap: 14px; |
| color: var(--quiet); |
| font-family: var(--mono); |
| font-size: 11px; |
| letter-spacing: 0.06em; |
| text-transform: uppercase; |
| } |
|
|
| .privacy-badge { |
| min-height: 30px; |
| padding: 0 10px; |
| border: 1px solid rgba(167, 255, 79, 0.42); |
| color: var(--owner); |
| background: rgba(167, 255, 79, 0.08); |
| } |
|
|
| .text-link { |
| color: var(--muted); |
| } |
|
|
| .app-shell { |
| width: min(var(--max), calc(100% - (2 * var(--pad)))); |
| display: grid; |
| grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.2fr) minmax(260px, 0.58fr); |
| gap: 16px; |
| margin: 34px auto 70px; |
| } |
|
|
| .intro-panel, |
| .map-panel, |
| .detail-panel, |
| .meaning-panel { |
| min-width: 0; |
| border: 1px solid var(--line); |
| background: rgba(7, 8, 6, 0.68); |
| box-shadow: 0 24px 88px rgba(0, 0, 0, 0.24); |
| } |
|
|
| .intro-panel, |
| .detail-panel { |
| align-self: start; |
| padding: clamp(20px, 2.6vw, 30px); |
| } |
|
|
| .map-panel { |
| min-width: 0; |
| padding: clamp(20px, 2.8vw, 34px); |
| background: |
| linear-gradient(180deg, rgba(128, 220, 201, 0.06), rgba(247, 240, 223, 0.025)), |
| rgba(7, 8, 6, 0.72); |
| } |
|
|
| .meaning-panel { |
| grid-column: 1 / -1; |
| padding: clamp(24px, 4vw, 44px); |
| } |
|
|
| .eyebrow { |
| margin-bottom: 14px; |
| color: var(--human); |
| font-family: var(--mono); |
| font-size: 11px; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| } |
|
|
| h1 { |
| font-family: var(--display); |
| font-size: clamp(44px, 5vw, 68px); |
| font-weight: 500; |
| line-height: 0.96; |
| letter-spacing: 0; |
| overflow-wrap: break-word; |
| } |
|
|
| h2 { |
| font-family: var(--display); |
| font-size: clamp(32px, 4vw, 58px); |
| font-weight: 500; |
| line-height: 0.98; |
| letter-spacing: 0; |
| overflow-wrap: break-word; |
| } |
|
|
| h3 { |
| font-family: var(--display); |
| font-size: 28px; |
| font-weight: 500; |
| line-height: 1; |
| } |
|
|
| .intro-copy { |
| margin-top: 22px; |
| color: var(--muted); |
| font-size: 18px; |
| line-height: 1.48; |
| overflow-wrap: break-word; |
| } |
|
|
| .controls { |
| display: grid; |
| gap: 10px; |
| margin-top: 28px; |
| } |
|
|
| .button, |
| .file-button { |
| min-height: 46px; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| border: 1px solid var(--line); |
| background: rgba(247, 240, 223, 0.055); |
| color: var(--ink); |
| cursor: pointer; |
| font-family: var(--mono); |
| font-size: 11px; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| transition: transform 160ms ease, border-color 160ms ease, background 160ms ease; |
| } |
|
|
| .button.primary { |
| border-color: rgba(167, 255, 79, 0.72); |
| background: rgba(167, 255, 79, 0.13); |
| color: var(--owner); |
| } |
|
|
| .button:hover, |
| .button:focus-visible, |
| .file-button:hover, |
| .file-button:focus-within { |
| transform: translateY(-1px); |
| border-color: var(--line-strong); |
| background: rgba(247, 240, 223, 0.09); |
| } |
|
|
| .file-button input { |
| position: absolute; |
| inline-size: 1px; |
| block-size: 1px; |
| opacity: 0; |
| pointer-events: none; |
| } |
|
|
| .status-line { |
| min-height: 34px; |
| margin-top: 18px; |
| color: var(--quiet); |
| font-family: var(--mono); |
| font-size: 11px; |
| line-height: 1.45; |
| letter-spacing: 0.04em; |
| text-transform: uppercase; |
| } |
|
|
| .map-heading { |
| display: flex; |
| justify-content: space-between; |
| gap: 18px; |
| align-items: start; |
| } |
|
|
| .source-card { |
| min-width: 118px; |
| padding: 12px; |
| border: 1px solid var(--line); |
| background: rgba(247, 240, 223, 0.04); |
| font-family: var(--mono); |
| text-transform: uppercase; |
| } |
|
|
| .source-card span { |
| display: block; |
| color: var(--quiet); |
| font-size: 10px; |
| letter-spacing: 0.08em; |
| } |
|
|
| .source-card strong { |
| display: block; |
| margin-top: 7px; |
| color: var(--agent); |
| font-size: 13px; |
| letter-spacing: 0.04em; |
| } |
|
|
| .metrics { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 1px; |
| margin-top: 28px; |
| border: 1px solid var(--line); |
| background: var(--line); |
| } |
|
|
| .metric { |
| min-height: 88px; |
| display: grid; |
| align-content: space-between; |
| padding: 14px; |
| background: rgba(7, 8, 6, 0.86); |
| } |
|
|
| .metric span { |
| color: var(--quiet); |
| font-family: var(--mono); |
| font-size: 10px; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .metric strong { |
| color: var(--ink); |
| font-family: var(--display); |
| font-size: 38px; |
| font-weight: 500; |
| line-height: 0.9; |
| } |
|
|
| .grid-wrap { |
| margin-top: 30px; |
| padding: clamp(14px, 2.2vw, 22px); |
| border: 1px solid rgba(247, 240, 223, 0.13); |
| background: |
| radial-gradient(circle at 18% 22%, rgba(128, 220, 201, 0.12), transparent 30%), |
| rgba(247, 240, 223, 0.035); |
| } |
|
|
| .owner-grid { |
| display: grid; |
| grid-template-columns: repeat(14, minmax(0, 1fr)); |
| gap: 7px; |
| } |
|
|
| .day-cell { |
| position: relative; |
| aspect-ratio: 1; |
| border: 1px solid rgba(247, 240, 223, 0.12); |
| background: var(--empty); |
| cursor: pointer; |
| transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; |
| } |
|
|
| .day-cell::after { |
| content: attr(data-day); |
| position: absolute; |
| left: 5px; |
| bottom: 4px; |
| color: rgba(7, 8, 6, 0.58); |
| font-family: var(--mono); |
| font-size: 9px; |
| } |
|
|
| .day-cell.agent { |
| border-color: rgba(128, 220, 201, 0.42); |
| background: rgba(128, 220, 201, 0.54); |
| } |
|
|
| .day-cell.overload { |
| border-color: rgba(223, 98, 66, 0.64); |
| background: rgba(223, 98, 66, 0.7); |
| } |
|
|
| .day-cell.human { |
| border-color: rgba(229, 170, 61, 0.6); |
| background: rgba(229, 170, 61, 0.72); |
| } |
|
|
| .day-cell.owner { |
| border-color: rgba(167, 255, 79, 0.88); |
| background: rgba(167, 255, 79, 0.82); |
| box-shadow: 0 0 28px rgba(167, 255, 79, 0.18); |
| } |
|
|
| .day-cell.selected, |
| .day-cell:hover, |
| .day-cell:focus-visible { |
| outline: none; |
| transform: translateY(-2px); |
| border-color: var(--ink); |
| box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25); |
| } |
|
|
| .legend { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px 16px; |
| margin-top: 18px; |
| color: var(--quiet); |
| font-family: var(--mono); |
| font-size: 10px; |
| letter-spacing: 0.07em; |
| text-transform: uppercase; |
| } |
|
|
| .legend span { |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| } |
|
|
| .dot { |
| width: 10px; |
| height: 10px; |
| display: inline-block; |
| border: 1px solid rgba(247, 240, 223, 0.18); |
| } |
|
|
| .dot.agent { |
| background: var(--agent); |
| } |
|
|
| .dot.overload { |
| background: var(--overload); |
| } |
|
|
| .dot.human { |
| background: var(--human); |
| } |
|
|
| .dot.owner { |
| background: var(--owner); |
| } |
|
|
| .dot.empty { |
| background: var(--empty); |
| } |
|
|
| .day-state { |
| margin-top: 18px; |
| padding: 14px; |
| border-left: 2px solid var(--owner); |
| background: rgba(167, 255, 79, 0.075); |
| color: var(--ink); |
| font-size: 17px; |
| line-height: 1.35; |
| } |
|
|
| .detail-list { |
| display: grid; |
| gap: 1px; |
| margin: 22px 0 0; |
| border: 1px solid var(--line); |
| background: var(--line); |
| } |
|
|
| .detail-list div { |
| display: grid; |
| grid-template-columns: 1fr auto; |
| gap: 14px; |
| padding: 13px; |
| background: rgba(7, 8, 6, 0.82); |
| } |
|
|
| .detail-list dt, |
| .notes-box span { |
| color: var(--quiet); |
| font-family: var(--mono); |
| font-size: 10px; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| } |
|
|
| .detail-list dd { |
| margin: 0; |
| color: var(--ink); |
| font-family: var(--mono); |
| font-size: 12px; |
| } |
|
|
| .notes-box { |
| margin-top: 18px; |
| padding: 16px; |
| border: 1px solid var(--line); |
| background: rgba(247, 240, 223, 0.045); |
| } |
|
|
| .notes-box p { |
| margin-top: 10px; |
| color: var(--muted); |
| font-size: 15px; |
| line-height: 1.45; |
| } |
|
|
| .meaning-grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 1px; |
| margin-top: 26px; |
| border: 1px solid var(--line); |
| background: var(--line); |
| } |
|
|
| .meaning-grid article { |
| min-height: 210px; |
| display: grid; |
| align-content: space-between; |
| padding: 20px; |
| background: rgba(7, 8, 6, 0.84); |
| } |
|
|
| .meaning-grid span { |
| color: var(--overload); |
| font-family: var(--mono); |
| font-size: 11px; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| } |
|
|
| .meaning-grid p { |
| color: var(--muted); |
| font-size: 15px; |
| line-height: 1.45; |
| } |
|
|
| @media (max-width: 1080px) { |
| .app-shell { |
| grid-template-columns: 1fr; |
| } |
|
|
| .meaning-panel { |
| grid-column: auto; |
| } |
|
|
| .meaning-grid { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
| } |
|
|
| @media (max-width: 620px) { |
| .topbar, |
| .app-shell { |
| width: min(340px, calc(100vw - 28px)); |
| margin-left: 14px; |
| margin-right: 14px; |
| } |
|
|
| .topbar { |
| align-items: flex-start; |
| } |
|
|
| .top-actions { |
| display: none; |
| } |
|
|
| h1 { |
| font-size: clamp(40px, 12vw, 52px); |
| } |
|
|
| h1, |
| h2, |
| h3, |
| p, |
| .brand span:last-child, |
| .metric strong, |
| .detail-list dd { |
| max-width: 100%; |
| overflow-wrap: anywhere; |
| } |
|
|
| .map-heading, |
| .metrics { |
| grid-template-columns: 1fr; |
| } |
|
|
| .map-heading { |
| display: grid; |
| } |
|
|
| .owner-grid { |
| grid-template-columns: repeat(7, minmax(0, 1fr)); |
| gap: 6px; |
| } |
|
|
| .meaning-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
