/* J-Space — Her Frontier observatory.
   Brand: Metallic Teal Glass, two worlds. Tokens mirror the live site's
   globals.css (role-based, flipped by [data-theme="dark"]). The observatory
   panel itself is an instrument: it stays in the night world in both themes. */

:root {
  --deep-teal: #0d4d56;
  --structural-teal: #147a7e;
  --living-turquoise: #36b6b4;
  --open-mint: #8fd9d6;
  --warm-cream: #f3e9d6;
  --signal-gold: #d4af37;
  --gold-deep: #9a7c25;
  --ink-soft: #16545d;
  --bg: #ffffff;
  --glass-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.66), rgba(243, 233, 214, 0.44));
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 10px 40px rgba(13, 77, 86, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --bubble-user: linear-gradient(150deg, rgba(20, 122, 126, 0.14), rgba(143, 217, 214, 0.18));
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Montserrat', -apple-system, sans-serif;
}
[data-theme="dark"] {
  --deep-teal: #e9f4f1;
  --structural-teal: #56c4bd;
  --living-turquoise: #4fd1cc;
  --gold-deep: #d9bc5e;
  --ink-soft: #c7dcd8;
  --bg: #052b32;
  --glass-bg: linear-gradient(150deg, rgba(17, 78, 88, 0.5), rgba(7, 51, 59, 0.62));
  --glass-border: rgba(143, 217, 214, 0.16);
  --glass-shadow: 0 14px 44px rgba(0, 18, 22, 0.5), inset 0 1px 0 rgba(243, 233, 214, 0.08);
  --bubble-user: linear-gradient(150deg, rgba(86, 196, 189, 0.14), rgba(13, 77, 86, 0.4));
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(38% 46% at 12% 5%, rgba(243, 233, 214, 0.55), transparent 62%),
    radial-gradient(42% 52% at 90% 8%, rgba(143, 217, 214, 0.42), transparent 60%),
    radial-gradient(46% 50% at 84% 98%, rgba(54, 182, 180, 0.24), transparent 62%),
    radial-gradient(40% 44% at 12% 99%, rgba(20, 122, 126, 0.18), transparent 62%),
    #ffffff;
  background-attachment: fixed;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] body {
  background:
    radial-gradient(46% 52% at 88% 4%, rgba(20, 122, 126, 0.34), transparent 62%),
    radial-gradient(34% 42% at 8% 10%, rgba(212, 175, 55, 0.09), transparent 58%),
    radial-gradient(52% 56% at 84% 100%, rgba(13, 77, 86, 0.6), transparent 64%),
    radial-gradient(40% 44% at 10% 96%, rgba(8, 61, 70, 0.65), transparent 62%),
    #052b32;
  background-attachment: fixed;
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ---------- shell ---------- */

#app { display: flex; flex-direction: column; height: 100dvh; width: 100%; overflow: hidden; }

header.top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid var(--glass-border);
  z-index: 30;
}
.brand { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand .eyebrow {
  font-size: 9px; letter-spacing: 0.28em; font-weight: 600;
  color: var(--gold-deep); text-transform: uppercase;
}
.brand h1 {
  font-family: var(--font-serif); font-weight: 700; font-size: 22px;
  background: linear-gradient(120deg, var(--deep-teal), var(--structural-teal) 55%, var(--signal-gold));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap;
}
.brand .byline {
  font-family: var(--font-serif); font-style: italic; font-size: 13.5px;
  color: var(--signal-gold); opacity: 1; white-space: nowrap; margin-top: 2px;
}
.name-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.name-link:hover, .name-link:focus-visible { opacity: 0.75; }
.head-spacer { flex: 1; }

select#model {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 10px; padding: 8px 10px; cursor: pointer; max-width: 46vw;
}
select#model:focus { outline: 2px solid var(--living-turquoise); outline-offset: 1px; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--glass-border);
  background: var(--glass-bg); color: var(--ink-soft); cursor: pointer;
  font-size: 15px; display: grid; place-items: center; flex: none;
}
.icon-btn:hover { border-color: var(--living-turquoise); }

main.app { flex: 1; display: grid; grid-template-columns: minmax(340px, 430px) 1fr; min-height: 0; }
/* Grid and flex children default to min-width:auto, so one long unbreakable
   string in a message pushes the whole layout wider than the screen. */
main.app > section { min-width: 0; }

/* ---------- chat column ---------- */

section.chat { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--glass-border); }
.messages { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth; }

.msg { max-width: 92%; min-width: 0; border-radius: 14px; padding: 11px 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--bubble-user); border: 1px solid var(--glass-border); color: var(--ink-soft); }
.msg.assistant {
  align-self: flex-start; background: var(--glass-bg); border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow); cursor: pointer; position: relative;
  border-left: 3px solid transparent; transition: border-color 0.25s ease;
}
.msg.assistant.active { border-left-color: var(--signal-gold); }
.msg.assistant .who {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--gold-deep);
  white-space: normal;
}
.msg.assistant .who .view-hint { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--structural-teal); opacity: 0; transition: opacity 0.2s; }
.msg.assistant:hover .who .view-hint { opacity: 0.9; }
.msg.assistant.active .who .view-hint { opacity: 0.9; }
.msg .body { color: var(--ink-soft); }
.msg .body em.cursor { border-right: 2px solid var(--living-turquoise); animation: blink 0.9s step-end infinite; }
@keyframes blink { 50% { border-color: transparent; } }
.msg.error { align-self: center; font-size: 12.5px; color: #b3564d; background: rgba(179, 86, 77, 0.08); border: 1px solid rgba(179, 86, 77, 0.25); }

details.inner-monologue { margin-top: 9px; border-top: 1px dashed var(--glass-border); padding-top: 7px; }
details.inner-monologue summary {
  cursor: pointer; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; color: var(--structural-teal); list-style: none;
}
details.inner-monologue summary::before { content: '\25B8\00a0'; }
details.inner-monologue[open] summary::before { content: '\25BE\00a0'; }
details.inner-monologue .inner-text { margin-top: 6px; font-size: 12.5px; font-style: italic; opacity: 0.82; max-height: 180px; overflow-y: auto; }

.composer {
  padding: 12px 16px 16px; display: flex; gap: 10px; align-items: flex-end;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.composer textarea {
  flex: 1; resize: none; min-height: 46px; max-height: 130px;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--ink-soft);
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 13px;
  padding: 12px 14px; outline: none;
}
.composer textarea:focus { border-color: var(--living-turquoise); }
.composer textarea::placeholder { color: var(--ink-soft); opacity: 0.5; }
button.send {
  flex: none; height: 46px; padding: 0 20px; border: none; border-radius: 13px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 13.5px; letter-spacing: 0.04em; color: #f7fbfa;
  background: linear-gradient(160deg, #17858a, #0d4d56 60%, #093a42);
  box-shadow: 0 8px 24px rgba(13, 77, 86, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
button.send:hover { filter: brightness(1.08); }
button.send:disabled { opacity: 0.55; cursor: default; filter: none; }

/* ---------- observatory (night world, both themes) ---------- */

section.observatory {
  position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background:
    radial-gradient(46% 52% at 88% 4%, rgba(20, 122, 126, 0.34), transparent 62%),
    radial-gradient(34% 42% at 8% 10%, rgba(212, 175, 55, 0.09), transparent 58%),
    radial-gradient(52% 56% at 84% 100%, rgba(13, 77, 86, 0.6), transparent 64%),
    radial-gradient(40% 44% at 10% 96%, rgba(8, 61, 70, 0.65), transparent 62%),
    #052b32;
  color: #c7dcd8;
}

.obs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px 4px; font-size: 11px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.legend .chip { display: inline-flex; align-items: center; gap: 5px; letter-spacing: 0.04em; }
.legend .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.dot.said { background: #d4af37; color: #d4af37; }
.dot.rival { background: #4fd1cc; color: #4fd1cc; }
.dot.inner { background: #f3e9d6; color: #f3e9d6; }
.legend-note { margin-left: auto; opacity: 0.6; font-size: 10.5px; letter-spacing: 0.05em; }
.legend-note-m { display: none; }

.obs-expand {
  display: none; flex: none; margin-left: auto;
  width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(143, 217, 214, 0.28); background: rgba(5, 40, 47, 0.6);
  color: #c7dcd8; font-size: 13px; line-height: 1; place-items: center;
}
.obs-expand:hover { border-color: #4fd1cc; }

.field-wrap { position: relative; flex: 1; min-height: 0; overflow: hidden; }
canvas#field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }

.empty-state {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  padding: 24px; pointer-events: none; transition: opacity 0.6s ease;
}
.empty-state .inner-copy { max-width: 460px; }
.empty-state h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 3.2vw, 30px); color: #e9f4f1; margin-bottom: 10px; }
.empty-state h2 .gold { color: #d9bc5e; font-style: italic; }
.empty-state p { font-size: 13.5px; line-height: 1.65; opacity: 0.72; }
.empty-state.gone { opacity: 0; }
.empty-state.gone .starter { pointer-events: none; }

.starters { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; align-items: center; }
.starter {
  pointer-events: auto; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 340px;
  padding: 9px 14px; border-radius: 12px;
  border: 1px solid rgba(143, 217, 214, 0.22);
  background: rgba(13, 77, 86, 0.35);
  color: #e9f4f1; font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.starter:hover { border-color: #4fd1cc; background: rgba(20, 122, 126, 0.4); transform: translateY(-1px); }
.starter .s-why { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #d9bc5e; font-weight: 600; }

.reset-view {
  position: absolute; bottom: 12px; right: 14px; z-index: 15; display: none;
  padding: 6px 12px; border-radius: 9px; cursor: pointer;
  border: 1px solid rgba(143, 217, 214, 0.3); background: rgba(5, 40, 47, 0.75); color: #c7dcd8;
  font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.08em; font-weight: 600;
}
.reset-view.show { display: block; }
.reset-view:hover { border-color: #4fd1cc; }

.detail-card {
  position: absolute; min-width: 190px; max-width: 250px; z-index: 20; pointer-events: none;
  background: linear-gradient(150deg, rgba(5, 40, 47, 0.92), rgba(13, 77, 86, 0.85));
  border: 1px solid rgba(143, 217, 214, 0.25); border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0, 18, 22, 0.6);
  padding: 11px 13px; font-size: 11.5px; color: #c7dcd8;
  display: none;
}
.detail-card.show { display: block; }
.detail-card .d-word { font-family: var(--font-serif); font-size: 17px; color: #e9f4f1; margin-bottom: 2px; }
.detail-card .d-kind { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 7px; }
.detail-card .d-kind.said { color: #d9bc5e; }
.detail-card .d-kind.rival { color: #4fd1cc; }
.detail-card .d-kind.inner { color: #f3e9d6; }
.detail-card .d-row { display: flex; justify-content: space-between; gap: 10px; margin: 2.5px 0; opacity: 0.85; }
.detail-card .d-rivals { margin-top: 7px; border-top: 1px dashed rgba(143, 217, 214, 0.2); padding-top: 6px; }
.detail-card .d-rivals .label { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #4fd1cc; margin-bottom: 4px; }
.detail-card .rv { display: flex; align-items: center; gap: 7px; margin: 3px 0; }
.detail-card .rv .rw { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-card .rv .bar { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #4fd1cc, #8fd9d6); min-width: 2px; }
.detail-card .rv .rp { opacity: 0.65; font-variant-numeric: tabular-nums; }

.obs-foot { padding: 8px 16px 14px; display: flex; flex-direction: column; gap: 7px; }
.stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.04em; opacity: 0.85; min-height: 15px; }
.stats .s-wide { display: contents; }
.stats .s-narrow { display: none; }
.stats b { color: #d9bc5e; font-weight: 600; }
.stats .model-badge { margin-left: auto; color: #56c4bd; font-weight: 600; }

canvas#spark { width: 100%; height: 34px; display: block; border-radius: 6px; cursor: pointer; }

.timeline { display: flex; align-items: center; gap: 10px; }
.timeline button {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(143, 217, 214, 0.25); background: rgba(13, 77, 86, 0.4); color: #c7dcd8; font-size: 12px;
}
.timeline button:hover { border-color: #4fd1cc; }
.timeline input[type="range"] { flex: 1; accent-color: #d4af37; cursor: pointer; }
.timeline .t-label { flex: none; font-size: 10.5px; opacity: 0.7; font-variant-numeric: tabular-nums; min-width: 74px; text-align: right; }

.embed-note { position: absolute; top: 10px; right: 14px; font-size: 10px; letter-spacing: 0.06em; color: #8fd9d6; opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.embed-note.show { opacity: 0.75; }

/* ---------- science modal ---------- */

.modal-veil {
  position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: rgba(3, 22, 26, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 20px;
}
.modal-veil.show { display: flex; }
.modal {
  max-width: 620px; width: 100%; max-height: 86dvh; overflow-y: auto; border-radius: 18px;
  background: linear-gradient(150deg, rgba(5, 40, 47, 0.97), rgba(13, 77, 86, 0.94));
  border: 1px solid rgba(143, 217, 214, 0.22);
  box-shadow: 0 24px 80px rgba(0, 18, 22, 0.7);
  padding: 30px 32px 26px; color: #c7dcd8;
}
.modal h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 600; color: #e9f4f1; margin-bottom: 4px; }
.modal .sub { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #d9bc5e; margin-bottom: 16px; }
.modal p { font-size: 13.5px; line-height: 1.7; margin-bottom: 13px; }
.modal .signal { display: flex; gap: 10px; margin-bottom: 11px; align-items: baseline; }
.modal .signal .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 9px currentColor; position: relative; top: 1px; }
.modal .signal p { margin: 0; }
.modal .signal b { color: #e9f4f1; }
.modal .links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.modal .links a {
  font-size: 12.5px; font-weight: 600; text-decoration: none; color: #052b32;
  background: linear-gradient(140deg, #d9bc5e, #d4af37); border-radius: 10px; padding: 9px 15px;
}
.modal .links a.quiet { background: none; border: 1px solid rgba(143, 217, 214, 0.3); color: #c7dcd8; }
.modal .links a:hover { filter: brightness(1.07); }
.modal .fine { margin-top: 16px; font-size: 11px; opacity: 0.6; line-height: 1.6; }
.modal .close-x { float: right; background: none; border: none; color: #c7dcd8; font-size: 20px; cursor: pointer; opacity: 0.7; }
.modal .close-x:hover { opacity: 1; }

.modal.intro { max-width: 480px; }
.modal.intro .hint { font-size: 12px; opacity: 0.7; }
.modal.intro .links a { cursor: pointer; }

/* ---------- responsive ---------- */

@media (max-width: 920px) {
  main.app { grid-template-columns: 1fr; grid-template-rows: 54dvh 1fr; }
  section.observatory { order: -1; border-bottom: 1px solid rgba(143, 217, 214, 0.16); }
  section.chat { border-right: none; }
  .obs-head { padding: 8px 12px 2px; gap: 8px; }
  .legend { gap: 10px; }
  .legend-note { display: none; }
  .legend-note-m { display: block; width: 100%; opacity: 0.55; font-size: 9.5px; letter-spacing: 0.05em; }
  .obs-expand { display: grid; }
  /* The drawing is the app, so the readouts under it are squeezed to give it
     the height. The stats run as one scrolling line instead of wrapping. */
  .obs-foot { padding: 4px 12px 8px; gap: 5px; }
  .stats {
    flex-wrap: nowrap; overflow-x: auto; gap: 10px; font-size: 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .stats::-webkit-scrollbar { display: none; }
  .stats span { flex: none; white-space: nowrap; }
  .stats .s-wide { display: none; }
  .stats .s-narrow { display: contents; }
  /* The model already names itself on every answer, so it does not repeat here. */
  .stats .model-badge { display: none; }
  canvas#spark { height: 22px; }
  .timeline { gap: 8px; }
  .brand h1 { font-size: 17px; }
  .brand .eyebrow { font-size: 8px; letter-spacing: 0.18em; white-space: nowrap; }
  .brand .byline { font-size: 10px; }
  header.top {
    gap: 10px; padding: 8px 12px;
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
  select#model { font-size: 11.5px; max-width: 34vw; padding: 8px; }
  .empty-state { padding: 12px; }
  .empty-state .inner-copy p { display: none; }
  .empty-state h2 { font-size: 19px; margin-bottom: 2px; }
  .starters { margin-top: 10px; gap: 6px; }
  .starter { padding: 7px 11px; font-size: 12px; max-width: 300px; }

  /* Touch sizing: 16px in the box stops iOS zooming the page on focus, and the
     controls grow to a finger-sized target. */
  .composer { padding: 10px 12px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .composer textarea { font-size: 16px; min-height: 44px; border-radius: 12px; padding: 11px 12px; }
  button.send { height: 44px; padding: 0 16px; }
  .icon-btn { width: 40px; height: 40px; font-size: 16px; }
  .messages { padding: 12px 12px 8px; }
  .msg { max-width: 94%; }
  .timeline button { width: 30px; height: 30px; }
  .timeline .t-label { min-width: 58px; }
  .detail-card { max-width: min(250px, 74vw); font-size: 11px; }
  .reset-view { bottom: 10px; right: 10px; padding: 8px 12px; }
  .modal { padding: 22px 20px 20px; max-height: 84dvh; border-radius: 16px; }
  .modal h2 { font-size: 21px; }
  .modal p { font-size: 13px; }
  .modal .links a { padding: 11px 15px; }

  /* Full-screen instrument: the chat log folds away and the ask box stays. */
  main.app.obs-max { grid-template-rows: 1fr auto; }
  main.app.obs-max .messages { display: none; }

  /* Before the first answer there is no timeline to scrub and no uncertainty to
     draw, so the strip gives its space back to the opening screen. */
  section.observatory:has(#empty-state:not(.gone)) .obs-foot { display: none; }
  /* The hint is for the first look. Once there is a drawing it steps aside. */
  section.observatory:has(#empty-state.gone) .legend-note-m { display: none; }
  .empty-state h2 { line-height: 1.25; }
}

/* Short phones: the opening screen has to fit the top half without clipping. */
@media (max-width: 920px) and (max-height: 720px) {
  .empty-state h2 { font-size: 16px; }
  .starters { margin-top: 8px; gap: 5px; }
  .starter { font-size: 11.5px; padding: 5px 10px; }
  .starter .s-why { font-size: 8.5px; letter-spacing: 0.1em; }
  .legend-note-m { font-size: 9px; }
}

@media (max-width: 400px) {
  .brand .eyebrow { display: none; }
  .brand h1 { font-size: 16px; }
  select#model { max-width: 30vw; }
  header.top { gap: 8px; }
}

/* Phone in landscape: the split leaves nothing for either half, so the
   instrument takes the screen and the chat becomes the ask box alone. */
@media (max-width: 920px) and (max-height: 460px) {
  main.app { grid-template-rows: 1fr auto; }
  main.app .messages { display: none; }
  .empty-state .inner-copy h2 { font-size: 16px; }
  .starters { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .starter { max-width: 200px; }
}