profplate/browser-symptom-pattern-explorer-template

1:root {2  color-scheme: light;3  --ink: #15211c;4  --muted: #5d6b64;5  --paper: #f5f1e8;6  --panel: #fffdf7;7  --line: #c8d0c9;8  --green: #0d6b4d;9  --green-dark: #074633;10  --amber: #8a5b00;11  --red: #8d2e2e;12}13 14* {15  box-sizing: border-box;16}17 18body {19  margin: 0;20  background:21    radial-gradient(circle at 20% 0%, #dcebe2 0, transparent 38rem),22    var(--paper);23  color: var(--ink);24  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;25}26 27main {28  width: min(1050px, calc(100% - 32px));29  margin: 0 auto;30  padding: 64px 0;31}32 33header {34  max-width: 760px;35}36 37.eyebrow,38.output-label,39label,40.instrument span {41  color: var(--green);42  font-size: 0.76rem;43  font-weight: 750;44  letter-spacing: 0.11em;45  text-transform: uppercase;46}47 48h1 {49  margin: 8px 0 14px;50  font-family: Georgia, "Times New Roman", serif;51  font-size: clamp(2.4rem, 7vw, 5rem);52  font-weight: 500;53  letter-spacing: -0.045em;54  line-height: 0.98;55}56 57.lede {58  color: var(--muted);59  font-size: 1.15rem;60  line-height: 1.6;61}62 63.boundary,64.red-flags {65  margin: 28px 0;66  border-left: 5px solid var(--amber);67  background: #fff4d7;68  padding: 16px 20px;69  line-height: 1.55;70}71 72.workbench {73  display: grid;74  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);75  gap: 24px;76}77 78form,79.output,80.instrument {81  border: 1px solid var(--line);82  border-radius: 14px;83  background: color-mix(in srgb, var(--panel) 92%, transparent);84  box-shadow: 0 18px 55px rgb(21 33 28 / 7%);85  padding: 24px;86}87 88label {89  display: block;90  margin-bottom: 10px;91}92 93textarea {94  width: 100%;95  border: 1px solid var(--line);96  border-radius: 9px;97  background: white;98  color: var(--ink);99  font: inherit;100  line-height: 1.5;101  padding: 14px;102  resize: vertical;103}104 105textarea:focus {106  border-color: var(--green);107  box-shadow: 0 0 0 3px rgb(13 107 77 / 14%);108  outline: none;109}110 111.actions {112  display: flex;113  flex-wrap: wrap;114  gap: 10px;115  margin-top: 16px;116}117 118button {119  border: 1px solid var(--green);120  border-radius: 999px;121  background: var(--green);122  color: white;123  cursor: pointer;124  font: inherit;125  font-weight: 700;126  padding: 11px 17px;127}128 129button:hover:not(:disabled) {130  background: var(--green-dark);131}132 133button.secondary {134  background: transparent;135  color: var(--green);136}137 138button:disabled {139  cursor: not-allowed;140  opacity: 0.45;141}142 143.output-label {144  margin-top: 0;145}146 147.results {148  list-style: none;149  margin: 18px 0;150  padding: 0;151}152 153.results li {154  display: grid;155  grid-template-columns: 30px 1fr auto;156  gap: 10px;157  align-items: center;158  border-bottom: 1px solid #e0e4df;159  padding: 12px 0;160}161 162.results li.empty {163  display: block;164  color: var(--muted);165}166 167.rank {168  display: grid;169  width: 26px;170  height: 26px;171  place-items: center;172  border-radius: 50%;173  background: #e1eee7;174  color: var(--green-dark);175  font-size: 0.8rem;176  font-weight: 800;177}178 179.score {180  color: var(--green);181  font-variant-numeric: tabular-nums;182}183 184.score::after {185  content: "%";186}187 188.score-note {189  color: var(--muted);190  font-size: 0.82rem;191  line-height: 1.55;192}193 194.red-flags {195  border-color: var(--red);196  background: #feecec;197  color: var(--red);198}199 200.instrument {201  display: grid;202  grid-template-columns: 1fr 1fr auto;203  gap: 18px;204  align-items: center;205  margin-top: 24px;206}207 208.instrument span,209.instrument strong {210  display: block;211}212 213.instrument strong {214  margin-top: 6px;215  font-size: 0.86rem;216  line-height: 1.45;217}218 219#status[data-kind="error"] {220  color: var(--red);221}222 223#status[data-kind="success"] {224  color: var(--green);225}226 227@media (max-width: 760px) {228  main {229    padding: 36px 0;230  }231 232  .workbench,233  .instrument {234    grid-template-columns: 1fr;235  }236}237