orchard

  1/* llm.bythewood.me. Green primary with amber for caps labels only, per
  2   DESIGN.md, because this is a page you read rather than glance at. */
  3
  4:root {
  5  --ground: #0e0d0a;
  6  --sunken: #090806;
  7  --panel: #1c1a15;
  8  --raised: #24211a;
  9
 10  --text: #ddd7cd;
 11  --muted: #b3aba2;
 12  --faint: #8a8279;
 13
 14  --green: #6b9e78;
 15  --green-bright: #7db88c;
 16  --green-hot: #95cca2;
 17  --amber: #c9a84c;
 18  --terracotta: #c47055;
 19
 20  --line: rgba(107, 158, 120, 0.28);
 21  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
 22  --track: 0.14em;
 23}
 24
 25* { box-sizing: border-box; }
 26
 27body {
 28  margin: 0;
 29  background: var(--ground);
 30  color: var(--text);
 31  font: 14px/1.6 var(--mono);
 32}
 33
 34a { color: var(--green-bright); text-decoration: none; }
 35a:hover { color: var(--green-hot); text-decoration: underline; }
 36
 37.bar {
 38  display: flex; align-items: center; gap: 1.2rem;
 39  padding: 0.6rem 1.2rem;
 40  background: var(--sunken);
 41  border-bottom: 1px solid var(--line);
 42}
 43.brand { display: flex; align-items: center; gap: 0.45rem; color: var(--text); }
 44.brand:hover { text-decoration: none; }
 45.key {
 46  display: inline-flex; align-items: center; justify-content: center;
 47  width: 1.35rem; height: 1.35rem;
 48  background: var(--panel); border: 1px solid var(--line); border-radius: 2px;
 49  color: var(--green-hot); font-size: 0.72rem; font-weight: 700;
 50}
 51.brand-name { font-weight: 700; letter-spacing: 0.02em; }
 52.nav { display: flex; gap: 1rem; flex: 1 1 auto; }
 53.nav a { color: var(--faint); font-size: 0.78rem; }
 54.nav a.on { color: var(--green-bright); }
 55.model { color: var(--faint); font-size: 0.72rem; }
 56
 57.wrap { max-width: 62rem; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
 58
 59h2 {
 60  font-size: 0.72rem; font-weight: 700;
 61  letter-spacing: var(--track); text-transform: uppercase;
 62  color: var(--amber);
 63  margin: 2rem 0 0.7rem;
 64}
 65h2:first-of-type { margin-top: 0.4rem; }
 66
 67.label {
 68  color: var(--amber); font-size: 0.64rem; font-weight: 600;
 69  letter-spacing: var(--track); text-transform: uppercase;
 70  margin: 0 0 0.3rem;
 71}
 72
 73/* A key is visible exactly once, so it gets the loudest treatment on the page
 74   and says plainly that there is no second chance. */
 75.fresh {
 76  background: var(--panel); border: 1px solid var(--green);
 77  border-left: 3px solid var(--green-hot);
 78  border-radius: 2px; padding: 0.8rem 1rem; margin-bottom: 1.4rem;
 79}
 80.secret {
 81  display: block; margin: 0.2rem 0 0.5rem;
 82  color: var(--green-hot); font-size: 0.9rem; word-break: break-all;
 83  user-select: all;
 84}
 85.note { color: var(--muted); font-size: 0.74rem; margin: 0; }
 86
 87.stats { display: flex; flex-wrap: wrap; gap: 0.8rem; }
 88.stat {
 89  flex: 1 1 8rem; background: var(--panel);
 90  border: 1px solid var(--line); border-radius: 2px; padding: 0.7rem 0.9rem;
 91}
 92.stat .num { display: block; color: var(--green-bright); font-size: 1.3rem; font-weight: 700; }
 93.stat .label { margin: 0.2rem 0 0; }
 94
 95table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
 96th {
 97  text-align: left; color: var(--amber); font-size: 0.62rem; font-weight: 600;
 98  letter-spacing: var(--track); text-transform: uppercase;
 99  padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--line);
100}
101td { padding: 0.4rem 0.6rem; border-bottom: 1px solid rgba(107, 158, 120, 0.12); }
102th.n, td.n { text-align: right; }
103td.faint { color: var(--faint); }
104td.bad, .bad { color: var(--terracotta); }
105tr.off td { color: var(--faint); }
106td.msg { color: var(--muted); max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
107td.act { text-align: right; white-space: nowrap; }
108td.act form { display: inline; }
109
110code {
111  background: var(--panel); border: 1px solid var(--line);
112  border-radius: 2px; padding: 0.05rem 0.3rem; color: var(--green-bright);
113  font-size: 0.92em;
114}
115
116input[type="text"] {
117  flex: 1 1 20rem; background: var(--panel); color: var(--text);
118  border: 1px solid var(--line); border-radius: 2px;
119  font: inherit; font-size: 0.8rem; padding: 0.35rem 0.5rem;
120}
121input[type="text"]:focus { outline: none; border-color: var(--green); }
122input::placeholder { color: var(--faint); }
123
124button {
125  background: var(--green); color: var(--sunken); border: 0; border-radius: 2px;
126  font: inherit; font-size: 0.74rem; font-weight: 700;
127  padding: 0.35rem 0.7rem; cursor: pointer;
128}
129button:hover { background: var(--green-hot); }
130button.danger { background: var(--terracotta); }
131
132.newkey { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; }
133
134.tag {
135  display: inline-block; border: 1px solid var(--line); border-radius: 2px;
136  color: var(--faint); font-size: 0.64rem; padding: 0.05rem 0.35rem;
137  margin-right: 0.35rem;
138}
139.tag.bad { border-color: rgba(196, 112, 85, 0.5); color: var(--terracotta); }
140
141.empty { color: var(--faint); font-size: 0.8rem; }
142.more { font-size: 0.78rem; }
143.how { color: var(--muted); font-size: 0.8rem; }
144.filter { color: var(--faint); font-size: 0.68rem; text-transform: none; letter-spacing: 0; }
145
146.call {
147  background: var(--panel); border: 1px solid var(--line);
148  border-radius: 2px; padding: 0.6rem 0.8rem; margin-bottom: 0.7rem;
149}
150.call.bad { border-color: rgba(196, 112, 85, 0.45); }
151.call header { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; font-size: 0.72rem; margin-bottom: 0.4rem; }
152.call .who { color: var(--green-bright); font-weight: 700; }
153.call .faint { color: var(--faint); }
154.call summary { color: var(--amber); font-size: 0.62rem; letter-spacing: var(--track); text-transform: uppercase; cursor: pointer; }
155.call pre {
156  background: var(--sunken); border: 1px solid rgba(107, 158, 120, 0.14);
157  border-radius: 2px; padding: 0.5rem 0.6rem; margin: 0.4rem 0 0.6rem;
158  color: var(--muted); font-size: 0.74rem;
159  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 26rem; overflow: auto;
160}
161
162.foot {
163  display: flex; justify-content: space-between; gap: 1rem;
164  max-width: 62rem; margin: 0 auto; padding: 0 1.2rem 1.4rem;
165  color: var(--faint); font-size: 0.7rem;
166}
167
168/* ---------------------------------------------------------------- landing */
169
170/* The one page a signed out visitor sees. Single column of prose, so it takes
171   the palette and the brand mark and none of the dashboard's table layout. */
172
173.landing { max-width: 42rem; margin: 0 auto; padding: 4rem 1.4rem 5rem; }
174.landing .brand { display: inline-flex; align-items: center; gap: 0.5rem; }
175
176.landing .eyebrow {
177  color: var(--amber); font-size: 0.64rem; font-weight: 600;
178  letter-spacing: var(--track); text-transform: uppercase;
179  margin: 1.6rem 0 0.6rem;
180}
181.landing h1 {
182  font-size: 1.7rem; line-height: 1.3; font-weight: 700;
183  letter-spacing: -0.01em; margin: 0 0 1rem; color: var(--text);
184}
185.landing h1 .accent { color: var(--green-bright); }
186.landing .lede { color: var(--muted); font-size: 0.92rem; margin: 0 0 1.6rem; }
187
188.landing .points { list-style: none; padding: 0; margin: 0 0 2rem; }
189.landing .points li {
190  color: var(--muted); font-size: 0.82rem;
191  padding: 0.5rem 0 0.5rem 1rem;
192  border-left: 1px solid var(--line);
193  margin-bottom: 0.3rem;
194}
195.landing .points b { color: var(--green-bright); font-weight: 700; }
196
197.landing .ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2.4rem; }
198.landing .btn {
199  display: inline-block; background: var(--green); color: var(--sunken);
200  border: 1px solid var(--green); border-radius: 2px;
201  font-size: 0.78rem; font-weight: 700; padding: 0.45rem 0.9rem;
202}
203.landing .btn:hover { background: var(--green-hot); border-color: var(--green-hot); text-decoration: none; }
204.landing .btn.ghost { background: none; color: var(--faint); border-color: var(--line); }
205.landing .btn.ghost:hover { color: var(--green-bright); }
206
207
208/* ------------------------------------------------------------------ narrow */
209
210@media (max-width: 52em) {
211  .wrap, .foot { padding-left: 0.7rem; padding-right: 0.7rem; }
212
213  /* A table of six columns does not fit a phone and must not widen the page.
214     display:block turns it into its own scroll container, which is the same
215     trick the markdown tables in chat use. */
216  table { display: block; overflow-x: auto; white-space: nowrap; }
217  td.msg { max-width: 14rem; }
218
219  /* The key form is a field and a button, and side by side leaves neither
220     usable at this width. */
221  .newkey { flex-direction: column; align-items: stretch; }
222  .newkey button { width: 100%; padding: 0.6rem; }
223
224  /* iOS zooms the page when it focuses a field under 16px and leaves it
225     zoomed, which is worse than the field looking slightly large. */
226  input[type="text"] { font-size: 16px; }
227
228  button { padding: 0.5rem 0.8rem; }
229  td.act form { display: block; margin-top: 0.2rem; }
230
231  .bar { flex-wrap: wrap; gap: 0.5rem 0.9rem; padding: 0.5rem 0.7rem; }
232  .nav { flex: 1 1 100%; order: 3; }
233  .model { font-size: 0.66rem; }
234
235  .call pre { font-size: 0.7rem; max-height: 18rem; }
236  .call header { gap: 0.4rem 0.7rem; font-size: 0.66rem; }
237
238  .stats { gap: 0.5rem; }
239  .stat { flex: 1 1 6rem; padding: 0.55rem 0.7rem; }
240}