@media (max-width: 1100px) {
  .j-explainer h1 {
    font-size: 34px;
  }
  .j-source-grid {
    gap: 12px 16px;
    grid-template-rows: minmax(0, 1fr) 162px minmax(0, 1fr);
  }
  .j-reader {
  }
  .j-reader .prose {
    font-size: 14px;
    line-height: 1.6;
  }
  .j-space-bar {
  }
  .j-agent {
  }
  .j-agent-response p {
    font-size: 13px;
    line-height: 1.5;
  }
  .j-insight {
  }
  .j-evidence {
    gap: 10px;
  }
  .j-evidence article {
    padding: 10px;
  }
  .j-insight-result {
    gap: 12px;
    padding-top: 16px;
  }
}
.j-short .j-source-grid {
  grid-template-rows: minmax(0, 1fr) 140px minmax(0, 1fr);
}
.j-short .j-source-type {
  padding-block: 5px;
}
.j-short .j-source-content {
  padding: 10px;
  gap: 6px;
  font-size: 12px;
}
.j-short .j-source-photo img {
  height: 106px;
}
.j-short .j-product {
  padding: 10px;
}
.j-short .j-appliance {
  height: 72px;
  width: 48px;
}
.j-short .j-bubble {
  padding: 6px 8px;
}
.j-short .j-mail-meta {
  display: none;
}
.j-short .j-explainer {
  gap: 10px;
}
.j-short .j-explainer h1 {
  font-size: 34px;
}
.j-short .j-eyebrow {
  display: none;
}
.j-short .j-reader {
}
.j-short .j-reader .prose {
  font-size: 13px;
  line-height: 1.55;
  gap: 12px;
}
.j-short .j-reader .prose > p:nth-child(2) {
  display: none;
}
.j-short .j-agent-response p {
  font-size: 13px;
  line-height: 1.5;
}
.j-short .j-agent {
}
.j-short .j-evidence .citation {
  display: none;
}
.j-short .j-insight {
}
.j-short .j-evidence {
  gap: 10px;
}
.j-short .j-insight-result {
  gap: 12px;
  padding-top: 12px;
}
.j-short .j-insight-result > p,
.j-short .j-confirmation > p {
  font-size: 14px;
  line-height: 1.55;
}
.j-short .j-confirmation {
  gap: 12px;
  padding-top: 12px;
}
.j-short .j-space-bar {
}
.j-short .j-library-toolbar {
}
@media (max-width: 720px) {
  #journey {
    padding: 12px 16px 8px;
    gap: 8px;
  }
  .j-explainer {
    left: 50%;
    top: calc(50% - 50% * var(--layout));
    transform: translate(-50%, calc(-50% + 50% * var(--layout)));
    width: 100%;
    gap: 8px;
  }
  .j-explainer h1,
  .j-short .j-explainer h1 {
    font-size: 30px;
    max-width: 460px;
  }
  .j-explainer > p:last-of-type {
    font-size: 13px;
    line-height: 1.5;
    max-width: 360px;
  }
  .j-eyebrow {
    display: none;
  }
  .j-time {
    font-size: 11px;
    margin-top: 2px;
  }
  .j-source-grid,
  .j-short .j-source-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 154px minmax(0, 1fr);
    gap: 8px;
  }
  .j-source {
    width: min(100%, 380px);
    transform: none;
  }
  .j-source:not([data-current="true"]) {
    display: none;
  }
  .j-source:nth-child(odd) {
    grid-area: 1/1;
    align-self: start;
  }
  .j-source:nth-child(even) {
    grid-area: 3/1;
    align-self: end;
  }
  .j-source-content {
    padding: 10px 14px;
    gap: 7px;
    font-size: 12px;
  }
  .j-source-email .j-mail-meta {
    display: none;
  }
  .j-source-photo {
    width: min(100%, 300px);
  }
  .j-source-photo img {
    height: 132px;
  }
  .j-source-pdf .j-source-content {
    padding: 10px 14px;
    gap: 5px;
  }
  .j-source-chat .j-chat-head {
    display: none;
  }
  .j-bubble {
    padding: 6px 9px;
  }

  .j-fragments {
    left: 0;
    justify-content: flex-end;
    padding-bottom: 22%;
    transform: translateY(calc(-15% * var(--gather)));
  }
  .j-fragments span {
    font-size: 12px;
  }
  .j-device {
    top: var(--explanation-height);
    height: calc(100% - var(--explanation-height));
    max-height: none;
    transform: none;
  }
  .j-space-bar {
  }
  .j-space-bar strong {
    font-size: 15px;
  }
  .j-space-icon {
    width: 28px;
    height: 28px;
  }
  .j-cloud-status span {
    display: none;
  }
  .j-library-toolbar {
  }
  .j-library-toolbar small {
    display: none;
  }
  #j-search {
    flex: 1;
  }
  .j-library-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .j-reader,
  .j-short .j-reader {
  }
  .j-reader .prose {
    font-size: 13px;
    line-height: 1.6;
    gap: 12px;
  }
  .j-reader .prose > p:nth-child(2) {
    display: none;
  }
  #journey[data-scene="agent"] .j-library-body {
    display: flex;
    flex-direction: column;
  }
  #journey[data-scene="agent"] .j-reader {
  }
  #journey[data-scene="agent"] .j-reader .prose {
    display: none;
  }
  .j-agent,
  .j-short .j-agent {
    border-left: 0;
    border-top: 1px solid var(--colorNeutralStroke2);
  }
  .j-agent header {
    font-size: 12px;
  }
  .j-prompt {
    padding: 8px;
    font-size: 12px;
    line-height: 1.45;
  }
  .j-agent-response small {
    font-size: 9px;
  }
  .j-agent-response p,
  .j-short .j-agent-response p {
    font-size: 12px;
    line-height: 1.5;
  }
  .j-insight,
  .j-short .j-insight {
  }
  .j-evidence,
  .j-short .j-evidence {
    gap: 6px;
  }
  .j-evidence article {
    padding: 8px;
  }
  .j-evidence article > span {
    font-size: 12px;
    gap: 4px;
  }
  .j-evidence article > span .icon {
    width: 12px;
    height: 12px;
  }
  .j-evidence .prose {
    font-size: 11px;
    line-height: 1.45;
  }
  .j-evidence .citation {
    display: none;
  }
  .j-evidence-plus {
    font-size: 18px;
  }
  .j-insight-result,
  .j-short .j-insight-result {
    padding-top: 12px;
    gap: 10px;
  }
  .j-insight-label {
    font-size: 11px;
  }
  .j-insight-result h2 {
    font-size: 21px;
  }
  .j-insight-result > p,
  .j-short .j-insight-result > p {
    font-size: 12px;
    line-height: 1.5;
  }
  #journey[data-scene="draft"] .j-evidence .prose {
    display: none;
  }
  .j-confirmation > p,
  .j-short .j-confirmation > p {
    font-size: 13px;
    line-height: 1.6;
  }
  .j-confirmation h2 {
    font-size: 20px;
  }
  .j-footer {
    gap: 6px;
    min-height: 40px;
    padding-top: 6px;
  }
  #j-chapters {
    flex: 1;
    width: 100%;
    gap: 2px;
  }
  #j-chapters fluent-button {
    flex: 1;
    min-width: 0;
    padding: 5px;
    font-size: 11px;
  }
  #j-chapters fluent-button:not([aria-current]) {
    font-size: 0;
    flex: 0 0 30px;
  }
  #j-chapters fluent-button::before {
    content: attr(data-number);
    font-size: 11px;
  }
  #j-chapters fluent-button[aria-current]::before {
    display: none;
  }
  #j-open {
    display: none;
  }
  #journey[data-chapter="4"] .j-device {
    top: var(--explanation-height);
    height: calc(100% - var(--explanation-height));
  }
  #journey[data-chapter="4"] .j-reader .prose {
    font-size: 13px;
  }
  .j-pending-action {
    gap: 6px;
    padding-top: 12px;
  }
  .j-pending-action strong {
    font-size: 12px;
  }
  .j-pending-action small {
    font-size: 10px;
  }
}

.j-short .j-chat-head {
  display: none;
}
#journey[data-chapter="1"] #j-search {
  display: none;
}

@media (max-width: 720px) {
  #journey:is([data-scene="compose"], [data-scene="read"]) .j-library-body {
    grid-template-rows: auto minmax(0, 1fr);
  }
}
@media (max-width: 720px) and (min-height: 700px) {
  #journey .j-reader .prose > p:nth-child(2) {
    display: block;
  }
}

.j-short .j-device {
  --j-block: var(--spacingVerticalS);
  --j-stack: var(--spacingVerticalM);
}
@media (max-width: 720px) {
  .j-device {
    --j-inset: var(--spacingHorizontalM);
    --j-block: var(--spacingVerticalS);
    --j-stack: var(--spacingVerticalM);
  }
  .j-shelves {
    flex-direction: row;
    padding: var(--spacingVerticalXS);
    gap: var(--spacingHorizontalXXS);
    border-right: 0;
    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  }
  .j-shelf {
    flex: 1;
  }
  .j-shelf .collection-open {
    padding: 6px;
  }
  .j-shelf .row-title strong {
    font-size: 11px;
    line-height: 16px;
  }
  .j-shelf .row-meta {
    display: none;
  }
  #journey:is([data-scene="library"], [data-scene="search"], [data-scene="results"]) .j-shelves {
    flex-direction: column;
    padding: var(--spacingVerticalXS) calc(var(--j-inset) - 8px);
  }
  #journey:is([data-scene="library"], [data-scene="search"], [data-scene="results"]) .j-shelf {
    flex: none;
  }
  #journey:is([data-scene="library"], [data-scene="search"], [data-scene="results"])
    .collection-open {
    padding: 8px;
  }
  #journey:is([data-scene="library"], [data-scene="search"], [data-scene="results"])
    .row-title
    strong {
    font-size: 14px;
    line-height: 20px;
  }
  .j-document-heading .eyebrow {
    display: none;
  }
  .j-document-heading h2 {
    font-size: 24px;
    line-height: 30px;
  }
  #journey[data-scene="agent"] .j-document-heading h2 {
    font-size: 18px;
    line-height: 24px;
  }
}