| :root { |
| --ink: #101828; |
| --muted: #526071; |
| --paper: #f6f7fb; |
| --card: #ffffff; |
| --line: #d8deea; |
| --accent: #3c4dcc; |
| --accent-dark: #25348e; |
| --wash: #e9ecff; |
| --warning: #7a4b00; |
| } |
|
|
| * { box-sizing: border-box; } |
|
|
| body { |
| margin: 0; |
| color: var(--ink); |
| background: var(--paper); |
| font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| line-height: 1.55; |
| } |
|
|
| .masthead { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 1rem clamp(1.25rem, 4vw, 4rem); |
| border-bottom: 1px solid var(--line); |
| background: rgba(255,255,255,.9); |
| } |
|
|
| .brand { color: var(--ink); font-weight: 750; text-decoration: none; } |
| .status { color: var(--muted); font-size: .85rem; } |
| main { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; } |
|
|
| .hero { padding: 4.5rem 0 2.5rem; max-width: 850px; } |
| .eyebrow, .mini-label { color: var(--accent); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .76rem; } |
| h1 { font-size: clamp(2.7rem, 7vw, 5.5rem); line-height: .95; letter-spacing: -.055em; margin: .4rem 0 1.4rem; } |
| .lede { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--muted); max-width: 760px; } |
| .boundary { border-left: 3px solid var(--accent); padding-left: 1rem; color: var(--warning); } |
|
|
| .workspace { |
| display: grid; |
| grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); |
| gap: 1.25rem; |
| padding-bottom: 4rem; |
| } |
|
|
| .scenario-panel, .review-panel { |
| background: var(--card); |
| border: 1px solid var(--line); |
| border-radius: 18px; |
| padding: clamp(1.2rem, 3vw, 2rem); |
| box-shadow: 0 18px 50px rgba(30, 43, 82, .07); |
| } |
|
|
| label { display: block; font-weight: 700; margin-bottom: .5rem; } |
| select, textarea { |
| width: 100%; |
| border: 1px solid var(--line); |
| border-radius: 10px; |
| background: #fff; |
| color: var(--ink); |
| font: inherit; |
| padding: .85rem; |
| } |
| textarea { resize: vertical; } |
| select:focus, textarea:focus { outline: 3px solid var(--wash); border-color: var(--accent); } |
| .domain { margin-top: 1.2rem; color: var(--accent-dark); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85rem; } |
| .context { background: #f9faff; border-radius: 12px; padding: .9rem 1rem; } |
| .context ul { padding-left: 1.25rem; margin: 0; } |
| blockquote { margin: 1.2rem 0; border-left: 4px solid var(--accent); padding: .8rem 1rem; background: var(--wash); border-radius: 0 10px 10px 0; font-size: 1.05rem; } |
| .chips { display: flex; flex-wrap: wrap; gap: .45rem; } |
| .chip { background: var(--wash); color: var(--accent-dark); border-radius: 999px; padding: .35rem .65rem; font-size: .8rem; } |
| .checklist-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1.8rem 0 .8rem; } |
| .checklist-header h2, .scenario-panel h2 { margin: .2rem 0 1rem; } |
| .checklist { display: grid; gap: .7rem; margin-bottom: 1.5rem; } |
| .check-item { border: 1px solid var(--line); border-radius: 12px; padding: .9rem; } |
| .check-item strong { display: block; } |
| .check-item p { margin: .2rem 0 .7rem; color: var(--muted); font-size: .92rem; } |
| .choice-row { display: flex; flex-wrap: wrap; gap: .45rem; } |
| .choice-row label { margin: 0; font-weight: 600; font-size: .86rem; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .6rem; cursor: pointer; } |
| .choice-row input { margin-right: .25rem; } |
| .actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; } |
| .primary-button, .quiet-button { border: 0; border-radius: 9px; font: inherit; font-weight: 750; cursor: pointer; } |
| .primary-button { background: var(--accent); color: white; padding: .8rem 1rem; } |
| .quiet-button { background: var(--wash); color: var(--accent-dark); padding: .55rem .8rem; } |
| .actions a { color: var(--accent-dark); font-weight: 700; } |
| .research { padding: 0 0 4.5rem; } |
| .research > h2 { font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.03em; margin: .25rem 0 1.25rem; } |
| .research-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } |
| .research-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; } |
| .research-card h3 { margin: .25rem 0 .7rem; font-size: 1.25rem; } |
| .research-card p { color: var(--muted); } |
| .research-links { display: flex; flex-wrap: wrap; gap: 1rem; } |
| .research-links a { color: var(--accent-dark); font-weight: 750; } |
| .license-note { color: var(--muted); font-size: .85rem; margin-top: 1rem; } |
| footer { border-top: 1px solid var(--line); padding: 2rem clamp(1.25rem, 4vw, 4rem); color: var(--muted); font-size: .85rem; display: flex; justify-content: space-between; gap: 1rem; } |
|
|
| @media (max-width: 800px) { |
| .workspace { grid-template-columns: 1fr; } |
| .research-grid { grid-template-columns: 1fr; } |
| .hero { padding-top: 3rem; } |
| .actions, footer { align-items: flex-start; flex-direction: column; } |
| } |
|
|
