/* Fourth-batch media and intelligence experience. */
:root {
  --mi-blue: #0a84ff;
  --mi-violet: #8f5bff;
  --mi-orange: #f27a24;
  --mi-graphite: #202126;
  --mi-line-dark: rgba(255, 255, 255, .105);
  --mi-line-light: rgba(31, 35, 42, .11);
}

button,
input,
select,
textarea {
  font: inherit;
}

.mi-books-app-icon {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .2));
}

.mi-siri-button img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}

/* Siri */
.mi-siri {
  position: fixed;
  z-index: 1500;
  right: 20px;
  top: 43px;
  width: min(390px, calc(100vw - 30px));
  height: min(520px, calc(100vh - 95px));
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr) auto 54px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 4% 0%, rgba(64, 194, 255, .2), transparent 34%),
    radial-gradient(circle at 100% 6%, rgba(208, 83, 255, .2), transparent 38%),
    rgba(24, 25, 31, .79);
  color: #f7f7fa;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .12);
  backdrop-filter: blur(42px) saturate(180%);
  -webkit-backdrop-filter: blur(42px) saturate(180%);
  opacity: 0;
  transform: translateY(-9px) scale(.96);
  transform-origin: 92% 0;
  transition: opacity .2s ease, transform .26s cubic-bezier(.2, .9, .2, 1.18);
}

.mi-siri.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mi-siri-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mi-siri-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mi-siri-head b {
  font-size: 14px;
  letter-spacing: -.01em;
}

.mi-siri-head button {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .8);
  font-size: 16px;
}

.mi-siri-head button:hover {
  background: rgba(255, 255, 255, .15);
}

.mi-siri-orb,
.mi-siri-mini-orb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: conic-gradient(from 50deg, #63f3ff, #5b6cff, #ed5dff, #ff6b95, #ffd05e, #63f3ff);
  box-shadow: 0 0 14px rgba(118, 119, 255, .6);
}

.mi-siri-orb {
  width: 29px;
  height: 29px;
  animation: mi-siri-turn 5s linear infinite;
}

.mi-siri-orb::after,
.mi-siri-mini-orb::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  background: rgba(20, 21, 28, .82);
  filter: blur(1px);
}

.mi-siri-orb i {
  position: absolute;
  z-index: 1;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  filter: blur(5px);
  background: white;
}

.mi-siri-orb i:nth-child(1) { left: 3px; top: 8px; }
.mi-siri-orb i:nth-child(2) { right: 3px; top: 4px; background: #f47aff; }
.mi-siri-orb i:nth-child(3) { left: 10px; bottom: 2px; background: #6ceeff; }

@keyframes mi-siri-turn {
  to { transform: rotate(360deg); }
}

.mi-siri-conversation {
  overflow: auto;
  padding: 16px 16px 8px;
  scrollbar-width: thin;
}

.mi-siri-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 13px;
}

.mi-siri-message.user {
  justify-content: flex-end;
}

.mi-siri-message p {
  max-width: 78%;
  margin: 0;
  padding: 9px 12px;
  border-radius: 15px 15px 15px 5px;
  background: rgba(255, 255, 255, .105);
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  line-height: 1.48;
}

.mi-siri-message.user p {
  border-radius: 15px 15px 5px 15px;
  background: linear-gradient(135deg, #1588ff, #6655e9);
  color: white;
}

.mi-siri-mini-orb {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
}

.mi-siri-mini-orb::after {
  inset: 3px;
}

.mi-siri-suggestions {
  display: flex;
  gap: 6px;
  padding: 7px 13px 8px;
  overflow-x: auto;
}

.mi-siri-suggestions button {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
}

.mi-siri-suggestions button:hover {
  color: white;
  background: rgba(255, 255, 255, .13);
}

.mi-siri-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px 32px;
  align-items: center;
  gap: 5px;
  margin: 0 11px 11px;
  padding: 5px 5px 5px 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;
  background: rgba(8, 8, 12, .36);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .16);
}

.mi-siri-input:focus-within {
  border-color: rgba(93, 167, 255, .72);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, .14);
}

.mi-siri-input input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
  font-size: 12px;
}

.mi-siri-input button {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .1);
  color: white;
}

.mi-siri-input button:last-child {
  background: #0a84ff;
  font-size: 17px;
  font-weight: 800;
}

#mi-siri-mic {
  position: relative;
  color: #ff6d91;
  font-size: 10px;
}

#mi-siri-mic.listening {
  background: #ff375f;
  color: white;
  animation: mi-listening 1.05s ease-in-out infinite;
}

@keyframes mi-listening {
  50% { box-shadow: 0 0 0 7px rgba(255, 55, 95, .18); }
}

/* Shared app scaffolding */
#win-books .window-body,
#win-podcasts .window-body,
#win-appletv .window-body,
#win-automator .window-body {
  min-width: 0;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
}

#win-books.window,
#win-podcasts.window {
  background: #f4f4f7 !important;
}

#win-books .titlebar,
#win-podcasts .titlebar {
  border-bottom-color: rgba(0, 0, 0, .08);
  background: rgba(241, 241, 244, .84);
  color: #242428;
}

#win-books .window-title,
#win-podcasts .window-title {
  color: #2d2d32 !important;
}

.mi-media-sidebar {
  box-sizing: border-box;
  padding: 11px 10px;
  border-right: 1px solid var(--mi-line-light);
  background: rgba(231, 231, 236, .88);
  color: #2d2d32;
  backdrop-filter: blur(24px) saturate(150%);
}

.mi-sidebar-search {
  height: 30px;
  display: grid;
  grid-template-columns: 17px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  margin: 0 2px 12px;
  padding: 0 8px;
  border: 1px solid rgba(0, 0, 0, .035);
  border-radius: 8px;
  background: rgba(0, 0, 0, .065);
  color: #77777d;
}

.mi-sidebar-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #26262b;
  font-size: 12px;
}

.mi-media-sidebar nav {
  display: grid;
  gap: 2px;
}

.mi-media-sidebar nav button,
.mi-automator-categories > button {
  height: 31px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  padding: 0 8px;
  border-radius: 7px;
  background: transparent;
  color: #3b3b41;
  text-align: left;
  font-size: 12px;
}

.mi-media-sidebar nav button span,
.mi-automator-categories > button span {
  color: #8462d5;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.mi-media-sidebar nav button:hover,
.mi-automator-categories > button:hover {
  background: rgba(0, 0, 0, .045);
}

.mi-media-sidebar nav button.active,
.mi-automator-categories > button.active {
  background: rgba(0, 0, 0, .09);
  color: #1f1f23;
  font-weight: 600;
}

.mi-sidebar-label {
  margin: 21px 9px 6px;
  color: #85858b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}

.mi-library-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.mi-library-title small {
  display: block;
  margin-bottom: 2px;
  color: #8c8c93;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.mi-library-title h1 {
  margin: 0;
  color: #202024;
  font-size: 31px;
  line-height: 1;
  letter-spacing: -.045em;
}

.mi-library-title > button {
  width: 32px;
  height: 28px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .055);
  color: #77777d;
}

.mi-shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 24px 0 10px;
}

.mi-shelf-head h2 {
  margin: 0;
  color: #26262a;
  font-size: 18px;
  letter-spacing: -.025em;
}

.mi-shelf-head span {
  color: #85858b;
  font-size: 11px;
}

.mi-empty {
  grid-column: 1 / -1;
  padding: 70px 20px;
  color: #8a8a90;
  text-align: center;
}

/* Books */
.mi-books {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  background: #f4f4f7;
  color: #26262a;
}

.mi-books-main {
  min-width: 0;
  overflow: auto;
  padding: 29px 34px 50px;
  background:
    radial-gradient(circle at 98% 3%, rgba(255, 178, 98, .09), transparent 27%),
    #f7f7f9;
}

.mi-book-feature {
  width: 100%;
  min-height: 208px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px;
  align-items: center;
  gap: 28px;
  padding: 26px 32px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 72% 5%, rgba(255, 255, 255, .28), transparent 28%),
    linear-gradient(125deg, #e66b3f, #f5a33a 64%, #f5c662);
  color: white;
  text-align: left;
  box-shadow: 0 18px 35px rgba(170, 90, 38, .16);
}

.mi-book-feature::before {
  content: "Aa";
  position: absolute;
  right: 206px;
  top: -42px;
  color: rgba(255, 255, 255, .075);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 190px;
  font-weight: 700;
  letter-spacing: -.12em;
}

.mi-book-feature > div:first-child {
  position: relative;
  z-index: 1;
}

.mi-book-feature small {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .74;
}

.mi-book-feature h2 {
  margin: 7px 0 5px;
  font-family: Georgia, "Songti SC", serif;
  font-size: 31px;
  font-weight: 650;
  letter-spacing: -.035em;
}

.mi-book-feature p {
  margin: 0 0 20px;
  font-size: 12px;
  opacity: .72;
}

.mi-book-feature > div > span,
.mi-book-grid button > span {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, .27);
}

.mi-book-feature > div > span {
  width: min(300px, 88%);
}

.mi-book-feature > div > span i,
.mi-book-grid button > span i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
}

.mi-book-feature em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  font-size: 10px;
  opacity: .65;
}

.mi-book-cover {
  --book-a: #e66b45;
  --book-b: #f0a13e;
  position: relative;
  width: 116px;
  height: 158px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 15px 13px;
  border-radius: 4px 10px 10px 4px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 5%, transparent 94%, rgba(255, 255, 255, .16)),
    linear-gradient(145deg, var(--book-a), var(--book-b));
  color: white;
  text-align: left;
  box-shadow: -7px 9px 18px rgba(34, 34, 38, .2), inset 2px 0 2px rgba(255, 255, 255, .16);
  transform: perspective(400px) rotateY(4deg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.mi-book-cover.large {
  width: 132px;
  height: 181px;
  justify-self: center;
  transform: perspective(450px) rotateY(-7deg) rotateZ(2deg);
  box-shadow: -14px 18px 30px rgba(94, 44, 24, .28);
}

.mi-book-cover.blue { --book-a: #174d77; --book-b: #70afc5; }
.mi-book-cover.violet { --book-a: #453076; --book-b: #a16ad1; }
.mi-book-cover.ink { --book-a: #11161f; --book-b: #4d5e76; }
.mi-book-cover.mint { --book-a: #277c76; --book-b: #92c5a9; }

.mi-book-cover span {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .72;
}

.mi-book-cover b {
  max-width: 90px;
  margin-top: 17px;
  font-family: Georgia, "Songti SC", serif;
  font-size: 19px;
  line-height: 1.12;
}

.mi-book-cover small {
  margin-top: auto;
  font-size: 8px;
  opacity: .65;
}

.mi-book-cover i {
  position: absolute;
  right: -21px;
  top: 61px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
}

.mi-book-cover i::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: inherit;
  border-radius: inherit;
}

.mi-book-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(104px, 1fr));
  gap: 22px 19px;
}

.mi-book-grid > button {
  min-width: 0;
  display: grid;
  justify-items: start;
  background: transparent;
  color: #2a2a2f;
  text-align: left;
}

.mi-book-grid > button:hover .mi-book-cover {
  transform: perspective(400px) rotateY(0) translateY(-4px);
  box-shadow: -4px 14px 25px rgba(34, 34, 38, .23);
}

.mi-book-grid > button > b {
  width: 100%;
  overflow: hidden;
  margin-top: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.mi-book-grid > button > small {
  width: 100%;
  overflow: hidden;
  margin-top: 2px;
  color: #8b8b91;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.mi-book-grid button > span {
  width: 116px;
  margin-top: 7px;
  background: rgba(0, 0, 0, .09);
  color: #f0802b;
}

.mi-reader-toolbar {
  position: sticky;
  z-index: 2;
  top: -29px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px;
  align-items: center;
  margin: -29px -34px 0;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  background: rgba(247, 247, 249, .88);
  backdrop-filter: blur(22px);
}

.mi-reader-toolbar > button,
.mi-reader-toolbar div button {
  height: 28px;
  padding: 0 9px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .055);
  color: #5f5f65;
  font-size: 11px;
}

.mi-reader-toolbar > span {
  min-width: 0;
  display: grid;
  justify-items: center;
}

.mi-reader-toolbar > span b,
.mi-reader-toolbar > span small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-reader-toolbar > span b { font-size: 11px; }
.mi-reader-toolbar > span small { color: #909096; font-size: 9px; }
.mi-reader-toolbar > div { display: flex; justify-content: flex-end; gap: 4px; }
.mi-reader-toolbar div button.active { background: #f18a34; color: white; }

.mi-reader-page {
  width: min(620px, calc(100% - 48px));
  min-height: 750px;
  box-sizing: border-box;
  margin: 34px auto 22px;
  padding: 64px 76px 90px;
  border: 1px solid rgba(61, 46, 31, .08);
  border-radius: 3px;
  background: #fffdf8;
  color: #332d26;
  box-shadow: 0 16px 45px rgba(48, 39, 30, .09);
}

.mi-reader-page > small {
  color: #b06e3d;
  font: 700 9px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mi-reader-page h1 {
  margin: 14px 0 35px;
  font-family: Georgia, "Songti SC", serif;
  font-size: calc(var(--reader-size) * 1.85);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.035em;
}

.mi-reader-page p {
  margin: 0 0 1.35em;
  font-family: Georgia, "Songti SC", serif;
  font-size: var(--reader-size);
  line-height: 1.95;
  text-align: justify;
}

.mi-reader-page blockquote {
  margin: 32px 0;
  padding: 18px 0 18px 24px;
  border-left: 2px solid #d9894d;
  color: #8f6649;
  font-family: Georgia, "Songti SC", serif;
  font-size: calc(var(--reader-size) * 1.08);
  line-height: 1.7;
}

.mi-reader-footer {
  display: grid;
  grid-template-columns: 90px minmax(100px, 1fr) 42px 90px;
  align-items: center;
  gap: 9px;
  width: min(620px, calc(100% - 48px));
  margin: 0 auto;
}

.mi-reader-footer button {
  height: 29px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .055);
  color: #66666b;
  font-size: 10px;
}

.mi-reader-footer button:disabled { opacity: .35; }
.mi-reader-footer > span { height: 3px; overflow: hidden; border-radius: 2px; background: rgba(0, 0, 0, .09); }
.mi-reader-footer > span i { display: block; height: 100%; border-radius: inherit; background: #ef8734; }
.mi-reader-footer em { color: #8c8c91; font-style: normal; font-size: 10px; }

/* Podcasts */
.mi-podcasts {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 76px;
  background: #f5f5f8;
}

.mi-podcasts > aside {
  grid-row: 1 / 3;
}

.mi-podcasts-main {
  min-width: 0;
  overflow: auto;
  padding: 28px 32px 45px;
}

.mi-podcast-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) 140px;
  align-items: center;
  gap: 23px;
  min-height: 178px;
  padding: 21px 27px;
  border-radius: 19px;
  background:
    radial-gradient(circle at 95% 0, rgba(241, 139, 255, .25), transparent 38%),
    linear-gradient(125deg, #4a2479, #8243ac 56%, #b151b6);
  color: white;
  box-shadow: 0 17px 35px rgba(75, 38, 107, .16);
}

.mi-podcast-hero > div {
  position: relative;
  z-index: 1;
}

.mi-podcast-hero > div > small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .66;
}

.mi-podcast-hero h2 {
  margin: 7px 0 6px;
  font-size: 23px;
  letter-spacing: -.035em;
}

.mi-podcast-hero p {
  max-width: 440px;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  line-height: 1.5;
}

.mi-podcast-hero > div > button {
  height: 29px;
  padding: 0 14px;
  border-radius: 15px;
  background: white;
  color: #67338c;
  font-size: 11px;
  font-weight: 700;
}

.mi-podcast-cover {
  position: relative;
  width: 54px;
  height: 54px;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  background: linear-gradient(145deg, #bd59ed, #6020a5);
  color: white;
  box-shadow: 0 8px 17px rgba(62, 25, 90, .2), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.mi-podcast-cover.large {
  width: 134px;
  height: 134px;
  border-radius: 25px;
  box-shadow: 0 18px 28px rgba(37, 17, 53, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.mi-podcast-cover.indigo { background: linear-gradient(145deg, #5265d9, #252b77); }
.mi-podcast-cover.cyan { background: linear-gradient(145deg, #48c7d8, #176681); }
.mi-podcast-cover.orange { background: linear-gradient(145deg, #ffa840, #d74f27); }

.mi-podcast-cover i {
  position: absolute;
  width: 62%;
  height: 62%;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
}

.mi-podcast-cover i::after {
  content: "";
  position: absolute;
  inset: 19%;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 50%;
}

.mi-podcast-cover b {
  position: relative;
  z-index: 1;
  font-size: 17px;
}

.mi-podcast-cover.large b { font-size: 34px; }
.mi-podcast-cover small {
  position: absolute;
  z-index: 1;
  bottom: 7px;
  width: 90%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  opacity: .72;
}

.mi-podcast-signal {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  opacity: .42;
}

.mi-podcast-signal i {
  width: 5px;
  border-radius: 3px;
  background: white;
  animation: mi-podcast-wave 1.4s ease-in-out infinite alternate;
}

.mi-podcast-signal i:nth-child(1) { height: 24%; }
.mi-podcast-signal i:nth-child(2) { height: 62%; animation-delay: -.4s; }
.mi-podcast-signal i:nth-child(3) { height: 92%; animation-delay: -.7s; }
.mi-podcast-signal i:nth-child(4) { height: 55%; animation-delay: -.2s; }
.mi-podcast-signal i:nth-child(5) { height: 30%; animation-delay: -.9s; }

@keyframes mi-podcast-wave {
  to { transform: scaleY(.45); }
}

.mi-show-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  gap: 16px;
}

.mi-show-strip > button {
  min-width: 0;
  display: grid;
  justify-items: start;
  background: transparent;
  color: #29292d;
  text-align: left;
}

.mi-show-strip .mi-podcast-cover {
  width: min(126px, 100%);
  height: auto;
  aspect-ratio: 1;
}

.mi-show-strip > button > b,
.mi-show-strip > button > small {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-show-strip > button > b { margin-top: 8px; font-size: 11px; }
.mi-show-strip > button > small { margin-top: 2px; color: #8a8a90; font-size: 9px; }

.mi-episode-list {
  display: grid;
}

.mi-episode-list article {
  min-width: 0;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 34px 32px;
  align-items: center;
  gap: 10px;
  padding: 13px 2px;
  border-top: 1px solid rgba(0, 0, 0, .075);
}

.mi-episode-list article > div {
  min-width: 0;
}

.mi-episode-list article small,
.mi-episode-list article span {
  color: #8a8a91;
  font-size: 9px;
}

.mi-episode-list article h3 {
  overflow: hidden;
  margin: 3px 0 4px;
  color: #28282d;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.mi-episode-list article p {
  overflow: hidden;
  margin: 0 0 6px;
  color: #73737a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.mi-episode-list article > button {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: rgba(131, 72, 181, .1);
  color: #8c4dc0;
  font-size: 11px;
}

.mi-episode-list article > button:hover {
  background: #8b4fc0;
  color: white;
}

.mi-episode-list .mi-more {
  background: transparent;
  color: #8a8a90;
}

.mi-podcast-player {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(320px, 1.6fr) minmax(100px, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid rgba(0, 0, 0, .1);
  background: rgba(239, 239, 243, .94);
  backdrop-filter: blur(24px);
}

.mi-player-empty {
  grid-column: 1 / -1;
  color: #8d8d92;
  text-align: center;
  font-size: 11px;
}

.mi-player-copy {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.mi-player-copy .mi-podcast-cover {
  width: 45px;
  height: 45px;
  border-radius: 10px;
}

.mi-player-copy > span {
  min-width: 0;
  display: grid;
}

.mi-player-copy b,
.mi-player-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-player-copy > span:last-child b { color: #29292e; font-size: 10px; }
.mi-player-copy small { margin-top: 2px; color: #8b8b90; font-size: 9px; }

.mi-player-controls {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 5px;
}

.mi-player-controls > div {
  display: flex;
  align-items: center;
  gap: 15px;
}

.mi-player-controls button {
  background: transparent;
  color: #45454a;
  font-size: 10px;
}

.mi-player-controls button.play {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #333338;
  color: white;
  font-size: 11px;
}

.mi-player-controls > span {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 5px;
}

.mi-player-controls em {
  color: #8a8a90;
  font-style: normal;
  font-size: 8px;
  text-align: center;
}

.mi-player-controls input {
  width: 100%;
  accent-color: #8d4cca;
}

.mi-player-tools {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}

.mi-player-tools button {
  min-width: 30px;
  height: 25px;
  padding: 0 7px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .055);
  color: #626268;
  font-size: 9px;
}

/* Apple TV */
#win-appletv.window {
  border-color: rgba(255, 255, 255, .11);
  background: #080a0d !important;
}

#win-appletv .titlebar {
  border-bottom-color: rgba(255, 255, 255, .07);
  background: rgba(12, 14, 18, .88);
  color: white;
}

.mi-tv {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 49px minmax(0, 1fr);
  background: #080a0d;
  color: #f5f5f7;
}

.mi-tv-nav {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) 160px;
  align-items: center;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
  background: rgba(12, 14, 18, .82);
  backdrop-filter: blur(24px);
}

.mi-tv-brand {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.06em;
}

.mi-tv-nav nav {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.mi-tv-nav nav button {
  height: 29px;
  padding: 0 14px;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
}

.mi-tv-nav nav button.active,
.mi-tv-nav nav button:hover {
  background: rgba(255, 255, 255, .09);
  color: white;
}

.mi-tv-nav > div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.mi-tv-nav > div button {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .085);
  color: white;
}

.mi-tv-account {
  background: linear-gradient(135deg, #25a1bb, #4a6cc4) !important;
  font-size: 10px;
  font-weight: 700;
}

#mi-tv-main {
  min-height: 0;
  overflow: auto;
  padding-bottom: 45px;
}

.mi-tv-hero {
  min-height: 335px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  padding: 42px 48px;
  background-image: var(--hero-image);
  background-position: center 48%;
  background-size: cover;
}

.mi-tv-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 8, 11, .94) 0%, rgba(6, 8, 11, .48) 52%, rgba(6, 8, 11, .08) 78%), linear-gradient(0deg, #080a0d 0%, transparent 38%);
}

.mi-tv-hero-shade {
  position: absolute;
  z-index: 1;
  left: 35%;
  top: -50%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(114, 91, 230, .23);
  filter: blur(90px);
}

.mi-tv-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 430px;
}

.mi-tv-hero-copy > small,
.mi-tv-title > small {
  color: #9fa4ff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .2em;
}

.mi-tv-hero-copy h1 {
  margin: 6px 0 8px;
  font-size: 48px;
  font-weight: 650;
  letter-spacing: -.07em;
}

.mi-tv-hero-copy p {
  max-width: 390px;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .68);
  font-size: 12px;
  line-height: 1.55;
}

.mi-tv-hero-copy > div {
  display: flex;
  gap: 7px;
}

.mi-tv-hero-copy button {
  height: 32px;
  padding: 0 15px;
  border-radius: 9px;
  background: white;
  color: #17181d;
  font-size: 10px;
  font-weight: 700;
}

.mi-tv-hero-copy button + button {
  background: rgba(255, 255, 255, .12);
  color: white;
  backdrop-filter: blur(12px);
}

.mi-tv-rail {
  padding: 3px 29px 0;
}

.mi-tv-rail > div:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 10px;
}

.mi-tv-rail h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -.025em;
}

.mi-tv-rail > div:first-child button {
  background: transparent;
  color: rgba(255, 255, 255, .4);
  font-size: 10px;
}

.mi-tv-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.mi-tv-cards > button {
  min-width: 0;
  height: 121px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background-image: linear-gradient(0deg, rgba(6, 7, 10, .9), transparent 70%), var(--poster);
  background-position: center;
  background-size: cover;
  color: white;
  text-align: left;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .24);
  transition: transform .2s ease, border-color .2s ease;
}

.mi-tv-cards > button:hover {
  z-index: 1;
  border-color: rgba(255, 255, 255, .26);
  transform: scale(1.035);
}

.mi-tv-cards > button::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--accent);
  opacity: .7;
}

.mi-tv-cards span {
  min-width: 0;
  display: grid;
}

.mi-tv-cards b,
.mi-tv-cards small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-tv-cards b { font-size: 11px; }
.mi-tv-cards small { margin-top: 2px; color: rgba(255, 255, 255, .55); font-size: 8px; }

.mi-tv-cards > button > i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: white;
}

.mi-tv-rail.compact {
  margin-top: 27px;
}

.mi-tv-rail.compact .mi-tv-cards > button {
  height: 92px;
}

.mi-tv-player {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  background: black;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .22s ease, transform .25s ease;
}

.mi-tv-player.show {
  opacity: 1;
  transform: scale(1);
}

.mi-tv-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mi-tv-player-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 28%, transparent 58%, rgba(0, 0, 0, .8)), linear-gradient(90deg, rgba(0, 0, 0, .62), transparent 52%);
}

.mi-tv-player header {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 80px 1fr 80px;
  align-items: center;
  padding: 14px 18px;
}

.mi-tv-player header span {
  text-align: center;
  font-size: 10px;
  opacity: .65;
}

.mi-tv-player header button {
  width: max-content;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .15);
  color: white;
  backdrop-filter: blur(14px);
}

.mi-tv-player header button:last-child {
  justify-self: end;
  font-size: 9px;
}

.mi-tv-title {
  position: absolute;
  left: 50px;
  bottom: 92px;
  max-width: 460px;
}

.mi-tv-title h2 {
  margin: 5px 0;
  font-size: 38px;
  letter-spacing: -.06em;
}

.mi-tv-title p {
  margin: 0;
  color: rgba(255, 255, 255, .65);
  font-size: 11px;
  line-height: 1.5;
}

.mi-tv-player footer {
  position: absolute;
  left: 21px;
  right: 21px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) 110px;
  align-items: center;
  gap: 10px;
}

.mi-tv-player footer button {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .17);
  color: white;
}

.mi-tv-player footer span {
  height: 3px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, .28);
}

.mi-tv-player footer span i {
  display: block;
  width: 26%;
  height: 100%;
  background: white;
}

.mi-tv-player footer em {
  color: rgba(255, 255, 255, .55);
  font-style: normal;
  font-size: 9px;
}

/* Automator */
#win-automator.window {
  border-color: rgba(255, 255, 255, .12);
  background: #24252a !important;
}

#win-automator .titlebar {
  border-bottom-color: rgba(255, 255, 255, .08);
  background: #33343a;
  color: #e8e8eb;
}

.mi-automator {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 170px 235px minmax(0, 1fr);
  grid-template-rows: 43px minmax(0, 1fr);
  background: #26272c;
  color: #dedee2;
}

.mi-automator-toolbar {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  background: linear-gradient(#3b3c42, #323338);
}

.mi-automator-toolbar span {
  flex: 1;
}

.mi-automator-toolbar button {
  height: 27px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 7px;
  background: rgba(255, 255, 255, .075);
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .24);
}

.mi-automator-toolbar button.run {
  border-color: #4ea3ff;
  background: linear-gradient(#3199ff, #0a73d7);
  color: white;
  font-weight: 700;
}

.mi-automator-categories {
  min-width: 0;
  padding: 10px 8px;
  border-right: 1px solid rgba(0, 0, 0, .52);
  background: #303137;
}

.mi-automator-categories .mi-sidebar-search {
  border-color: rgba(255, 255, 255, .05);
  background: rgba(0, 0, 0, .22);
  color: #85858d;
}

.mi-automator-categories .mi-sidebar-search input {
  color: #e8e8eb;
}

.mi-automator-categories > button {
  width: 100%;
  color: #c2c2c7;
}

.mi-automator-categories > button span {
  color: #82b9f4;
}

.mi-automator-categories > button:hover {
  background: rgba(255, 255, 255, .055);
}

.mi-automator-categories > button.active {
  background: #126cca;
  color: white;
}

.mi-automator-categories > button.active span {
  color: white;
}

.mi-automator-actions {
  min-width: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(0, 0, 0, .55);
  background: #292a2f;
}

.mi-automator-actions > header {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding: 9px 11px;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
  background: #303137;
  color: #a6a6ac;
  font-size: 10px;
}

.mi-automator-actions > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  background: transparent;
  color: #d3d3d7;
  text-align: left;
}

.mi-automator-actions > button:hover {
  background: rgba(255, 255, 255, .055);
}

.mi-automator-actions > button i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  background: linear-gradient(145deg, #4a5568, #272d38);
  color: #a9d3ff;
  font-style: normal;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.mi-automator-actions > button span {
  min-width: 0;
  display: grid;
}

.mi-automator-actions > button b,
.mi-automator-actions > button small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-automator-actions > button b { font-size: 10px; }
.mi-automator-actions > button small { margin-top: 2px; color: #77777e; font-size: 8px; }

.mi-automator-actions > footer {
  margin-top: auto;
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, .045);
  color: #707077;
  text-align: center;
  font-size: 8px;
}

.mi-automator-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 66px minmax(0, 1fr) auto;
  background:
    linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px),
    #202126;
  background-size: 18px 18px;
}

.mi-workflow-head {
  padding: 9px 13px;
  border-bottom: 1px solid rgba(0, 0, 0, .55);
  background: rgba(48, 49, 55, .95);
}

.mi-workflow-head > div {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #a9a9af;
  font-size: 9px;
}

.mi-workflow-head select {
  height: 25px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  outline: 0;
  background: #24252a;
  color: #d6d6da;
  font-size: 9px;
}

.mi-workflow-head > small {
  display: block;
  margin-top: 8px;
  color: #727279;
  font-size: 8px;
}

.mi-automator-canvas {
  min-height: 0;
  overflow: auto;
  padding: 15px 18px 40px;
}

.mi-workflow-empty {
  min-height: 250px;
  display: grid;
  place-items: center;
  align-content: center;
  color: #6f7077;
  text-align: center;
}

.mi-workflow-empty span { font-size: 34px; }
.mi-workflow-empty b { margin-top: 10px; color: #a1a1a7; font-size: 13px; }
.mi-workflow-empty p { max-width: 250px; margin: 5px 0; font-size: 9px; line-height: 1.45; }

.mi-automation-step {
  width: min(560px, 100%);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 auto 11px;
  border: 1px solid rgba(0, 0, 0, .72);
  border-radius: 8px;
  background: #38393f;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .075);
}

.mi-automation-step::after {
  content: "";
  position: absolute;
  left: 29px;
  bottom: -13px;
  width: 2px;
  height: 13px;
  background: #0a84ff;
}

.mi-automation-step.running {
  border-color: rgba(10, 132, 255, .58);
}

.mi-automation-step > header {
  height: 34px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 25px 23px 23px 23px;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  border-bottom: 1px solid rgba(0, 0, 0, .45);
  background: linear-gradient(#4a4b52, #3b3c42);
}

.mi-automation-step > header i {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #25384c;
  color: #9ecfff;
  font-style: normal;
  font-size: 9px;
}

.mi-automation-step > header b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
}

.mi-automation-step > header span {
  color: #777880;
  font-size: 8px;
}

.mi-automation-step > header button {
  width: 21px;
  height: 21px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .055);
  color: #a9a9af;
  font-size: 9px;
}

.mi-automation-step > header button:disabled { opacity: .28; }

.mi-automation-step > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 10px 12px 12px;
}

.mi-automation-step label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #9c9ca2;
  font-size: 9px;
}

.mi-automation-step input,
.mi-automation-step select {
  min-width: 0;
  height: 25px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, .52);
  border-radius: 5px;
  outline: 0;
  background: #292a2f;
  color: #dedee2;
  font-size: 9px;
}

.mi-automation-step input:focus,
.mi-automation-step select:focus {
  border-color: #0a84ff;
  box-shadow: 0 0 0 2px rgba(10, 132, 255, .16);
}

.mi-automation-step > div > p {
  grid-column: 1 / -1;
  margin: 0;
  color: #929299;
  font-size: 9px;
}

.mi-safe-note {
  padding: 5px 7px;
  border-radius: 5px;
  background: rgba(255, 159, 10, .08);
  color: #e2a13d !important;
}

.mi-automator-log {
  max-height: 125px;
  overflow: auto;
  border-top: 1px solid rgba(0, 0, 0, .62);
  background: rgba(24, 25, 29, .96);
}

.mi-automator-log:empty { display: none; }

.mi-automator-log header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding: 7px 10px;
  background: #2d2e33;
  color: #8e8e95;
  font-size: 9px;
}

.mi-automator-log header button {
  background: transparent;
  color: #74747b;
  font-size: 8px;
}

.mi-automator-log p {
  display: grid;
  grid-template-columns: 67px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 5px 10px;
  border-top: 1px solid rgba(255, 255, 255, .035);
  color: #aaaab0;
  font: 9px/1.25 "SFMono-Regular", Consolas, monospace;
}

.mi-automator-log p span { color: #606168; }
.mi-automator-log p.success { color: #53d269; }
.mi-automator-log p.error { color: #ff6262; }
.mi-automator-log p.warning { color: #ffb64a; }
.mi-automator-log p.running { color: #75b8ff; }

/* Light-mode Siri and compact layouts */
.light-mode .mi-siri {
  border-color: rgba(0, 0, 0, .12);
  background:
    radial-gradient(circle at 4% 0%, rgba(64, 194, 255, .17), transparent 34%),
    radial-gradient(circle at 100% 6%, rgba(208, 83, 255, .16), transparent 38%),
    rgba(247, 247, 250, .86);
  color: #242429;
  box-shadow: 0 28px 80px rgba(35, 37, 45, .3), inset 0 1px 0 white;
}

.light-mode .mi-siri-head { border-bottom-color: rgba(0, 0, 0, .07); }
.light-mode .mi-siri-head button,
.light-mode .mi-siri-suggestions button { background: rgba(0, 0, 0, .055); color: #55555b; }
.light-mode .mi-siri-message p { background: rgba(0, 0, 0, .06); color: #34343a; }
.light-mode .mi-siri-message.user p { background: linear-gradient(135deg, #1588ff, #6655e9); color: white; }
.light-mode .mi-siri-input { border-color: rgba(0, 0, 0, .1); background: rgba(255, 255, 255, .62); }
.light-mode .mi-siri-input input { color: #29292e; }

@media (max-width: 850px) {
  .mi-books,
  .mi-podcasts {
    grid-template-columns: 155px minmax(0, 1fr);
  }

  .mi-book-grid { grid-template-columns: repeat(3, minmax(104px, 1fr)); }
  .mi-podcast-hero { grid-template-columns: 110px minmax(0, 1fr); }
  .mi-podcast-hero .mi-podcast-cover.large { width: 105px; height: 105px; }
  .mi-podcast-signal { display: none; }
  .mi-player-copy { display: none; }
  .mi-podcast-player { grid-template-columns: minmax(260px, 1fr) 90px; }
  .mi-tv-cards { grid-template-columns: repeat(3, minmax(140px, 1fr)); }
  .mi-automator { grid-template-columns: 145px 190px minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .mi-siri {
    right: 10px;
    top: 40px;
    width: calc(100vw - 20px);
  }

  .mi-books,
  .mi-podcasts {
    grid-template-columns: 1fr;
  }

  .mi-books > aside,
  .mi-podcasts > aside {
    display: none;
  }

  .mi-books-main,
  .mi-podcasts-main {
    padding: 22px 18px 40px;
  }

  .mi-book-grid { grid-template-columns: repeat(2, minmax(104px, 1fr)); }
  .mi-book-feature { grid-template-columns: 1fr 100px; padding: 22px; }
  .mi-book-cover.large { width: 96px; height: 132px; }
  .mi-reader-page { width: 100%; padding: 45px 27px 70px; }
  .mi-podcasts { grid-template-rows: minmax(0, 1fr) 70px; }
  .mi-podcast-player { grid-template-columns: 1fr 70px; }
  .mi-show-strip { grid-template-columns: repeat(2, 1fr); }
  .mi-tv-nav { grid-template-columns: 75px 1fr 75px; padding: 0 8px; }
  .mi-tv-nav nav button { padding: 0 6px; }
  .mi-tv-hero { min-height: 300px; padding: 30px 23px; }
  .mi-tv-hero-copy h1 { font-size: 36px; }
  .mi-tv-cards { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .mi-automator { grid-template-columns: 1fr; }
  .mi-automator-toolbar { grid-column: 1; }
  .mi-automator-categories,
  .mi-automator-actions { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mi-siri,
  .mi-tv-player,
  .mi-book-cover,
  .mi-tv-cards > button {
    transition: none !important;
  }

  .mi-siri-orb,
  .mi-podcast-signal i,
  #mi-siri-mic.listening {
    animation: none !important;
  }
}

.reduce-motion .mi-siri,
.reduce-motion .mi-tv-player,
.reduce-motion .mi-book-cover,
.reduce-motion .mi-tv-cards > button {
  transition: none !important;
}