.theme-lilac {
  --tint: #ede9f9;
  --accent: #8063d9;
  --deep: #6245b6;
}
.theme-peach {
  --tint: #f8e9de;
  --accent: #d67a4d;
  --deep: #ab5333;
}
.theme-slate {
  --tint: #e9edf0;
  --accent: #414f65;
  --deep: #263448;
}
.theme-sand {
  --tint: #f5ecd8;
  --accent: #bc9146;
  --deep: #90651d;
}
.theme-blue {
  --tint: #e6eef1;
  --accent: #528099;
  --deep: #2e657d;
}
.theme-mint {
  --tint: #e7f0e8;
  --accent: #5e9573;
  --deep: #427653;
}
.theme-rose {
  --tint: #f5e7ec;
  --accent: #b2718b;
  --deep: #8c4b65;
}
.theme-lavender {
  --tint: #edebf7;
  --accent: #8a79c3;
  --deep: #6e5ea5;
}
/* Small product interfaces */
.product-preview {
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--tint);
  font-family: var(--font);
  container-type: inline-size;
}
.mini-app {
  position: absolute;
  background: #fff;
  border-radius: 7px;
  border: 1px solid #0000000d;
  box-shadow: 0 7px 22px #251d3511;
  overflow: hidden;
  width: 88%;
  left: 6%;
  top: 43px;
  pointer-events: none;
}
.mini-chrome {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fdfcfe;
  border-bottom: 1px solid #efedf1;
  padding: 0 9px;
  color: #746f7c;
  font-size: 5px;
}
.mini-chrome .icon {
  width: 8px;
  height: 8px;
}
.window-dots {
  display: flex;
  gap: 3px;
}
.window-dots i {
  width: 3px;
  height: 3px;
  background: #ded9e6;
  border-radius: 50%;
}
.note-layout {
  display: flex;
}
.note-sidebar {
  background: #f8f7fb;
  width: 25%;
  padding: 14px 5px;
  color: #736c79;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 5px;
  flex-shrink: 0;
}
.note-sidebar > span {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  padding: 4px 3px;
}
.note-sidebar .icon {
  width: 7px;
  height: 7px;
}
.note-sidebar .selected {
  color: #715aa7;
  background: #eeebf6;
  border-radius: 3px;
}
.note-paper {
  flex: 1;
  min-width: 0;
  padding: 13px 10px 16px;
}
.note-paper > .micro-label {
  font-size: 4px;
}
.note-paper h4 {
  font-size: 10px;
  letter-spacing: -0.3px;
  margin: 5px 0 3px;
}
.mini-muted {
  font-size: 4px;
  color: #76707f;
}
.note-summary {
  background: #f4f0fb;
  border: 1px solid #eee6fb;
  border-radius: 4px;
  padding: 6px;
  margin-top: 8px;
}
.note-summary > span {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #78609a;
  font-size: 5px;
}
.note-summary .icon {
  width: 8px;
  height: 8px;
}
.note-summary p {
  font-size: 4px;
  color: #72667c;
  margin-top: 3px;
}
.mini-task {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 4px;
  margin-top: 7px;
  color: #7a7080;
  white-space: nowrap;
}
.mini-task > .icon {
  width: 7px;
  height: 7px;
  background: #f0ebf8;
  border-radius: 2px;
  color: #a286c7;
}
.mini-task > i {
  width: 7px;
  height: 7px;
  border: 1px solid #dbd3e2;
  border-radius: 2px;
}
.mini-task b {
  font-size: 4px;
  font-weight: 400;
  margin-left: auto;
  padding: 0 3px;
  background: #efecf4;
  color: #6e6478;
}
.muse-board {
  position: absolute;
  inset: 39px 16px 0;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr;
  gap: 10px;
}
.muse-heading {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  font-size: 4px;
  letter-spacing: 1px;
  color: #786459;
  height: 8px;
}
.muse-poster {
  background: #f8e5ba;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  padding: 13px;
}
.poster-caption {
  font-size: 7px;
  line-height: 1.2;
  display: block;
  color: #66563f;
  position: relative;
  z-index: 1;
}
.muse-poster strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: 25px;
  font-family: Georgia, serif;
  line-height: 1.2;
  letter-spacing: -1px;
  font-weight: 400;
  color: #514932;
}
.muse-flower {
  position: absolute;
  right: -16px;
  bottom: 0;
  width: 125px;
  height: 125px;
  transform: rotate(12deg);
}
.poster-foot {
  font-size: 4px;
  position: absolute;
  bottom: 9px;
  left: 10px;
  color: #5c5437;
  letter-spacing: 1px;
}
.muse-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.muse-mini {
  background: #63785d;
  color: #fefdf9;
  font-family: Georgia, serif;
  font-size: 12px;
  padding: 16px 9px;
  min-height: 76px;
  line-height: 1.4;
}
.muse-mini em {
  font-weight: 400;
  font-size: 15px;
}
.swatches {
  display: flex;
  height: 15px;
  gap: 5px;
}
.swatches i {
  flex: 1;
  border-radius: 2px;
  background: #e9b862;
}
.swatches i:nth-child(2) {
  background: #e1714e;
}
.swatches i:nth-child(3) {
  background: #586e51;
}
.muse-side > span {
  font-size: 4px;
  letter-spacing: 0.5px;
  color: #75655a;
}
.code-app {
  background: #252936;
  color: #c1b9df;
  width: 86%;
  left: 7%;
  top: 40px;
  min-height: 155px;
}
.code-app .mini-chrome {
  background: #292d3a;
  color: #9398a6;
  border-color: #3b3f4d;
}
.code-app .window-dots i {
  background: #525568;
}
.code-tab {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 5px;
  color: #a6aabd;
  padding: 8px 12px;
  border-bottom: 1px solid #363a48;
}
.code-tab .icon {
  width: 9px;
  height: 9px;
  color: #9e88da;
}
.code-tab span {
  margin-left: auto;
  color: #acc7a7;
}
.code-lines {
  padding: 8px 0;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 5.5px;
  line-height: 2.1;
}
.code-lines p {
  display: flex;
  white-space: pre;
}
.code-lines p > i {
  font-style: normal;
  width: 25px;
  flex-shrink: 0;
  text-align: center;
  color: #9b9eab;
}
.code-lines b {
  font-weight: 400;
  color: #cda8e7;
}
.code-lines em {
  font-style: normal;
  color: #afd0c5;
}
.code-add {
  background: #36463e65;
}
.code-status {
  padding: 5px 10px;
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 5px;
  color: #a7c0a7;
  background: #303442;
}
.code-status > .icon {
  width: 8px;
  height: 8px;
}
.code-status > span {
  margin-left: auto;
  color: #a1acc3;
}
.audio-app {
  top: 40px;
  padding-bottom: 13px;
  background: #fffdf8;
}
.audio-app .mini-chrome {
  background: #fffcf7;
}
.voice-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 5px;
}
.voice-orb {
  background: #f5e6c7;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #b28b4a;
}
.voice-orb > .icon {
  width: 12px;
  height: 12px;
}
.voice-profile strong {
  font-size: 7px;
  display: block;
  color: #6e5c41;
}
.voice-profile div > span {
  font-size: 4px;
  display: block;
  color: #7b7160;
}
.voice-language {
  margin-left: auto;
  font-size: 4px;
  background: #f6eddc;
  color: #78664f;
  padding: 2px 4px;
  border-radius: 3px;
}
.waveform {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  gap: 2px;
  margin: 7px 14px 0;
}
.waveform > i {
  width: 3px;
  background: #d4b576;
  border-radius: 3px;
  height: calc(var(--h) * 0.55);
  flex-shrink: 1;
}
.waveform > i:nth-child(n + 25) {
  background: #e6d8ba;
}
.audio-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 14px;
  color: #7b705d;
  font-size: 4px;
}
.preview-play {
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #b7975d;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 9px;
  padding-left: 1px;
}
.audio-script {
  font-size: 5px;
  color: #7c715e;
  margin: 7px 13px 0;
  padding: 7px;
  border: 1px solid #ede2d0;
  border-radius: 3px;
}
.video-app {
  top: 38px;
  background: #fafcfc;
}
.video-landscape {
  height: 92px;
  position: relative;
  overflow: hidden;
}
.video-landscape > svg {
  width: 100%;
  height: 100%;
}
.video-title {
  position: absolute;
  top: 21px;
  left: 19px;
  color: #fff6e6;
  font:
    19px/0.9 Georgia,
    serif;
  letter-spacing: -0.5px;
}
.video-title em {
  font-size: 23px;
}
.video-label {
  position: absolute;
  bottom: 7px;
  right: 8px;
  color: #e9f0e5;
  font-size: 4px;
  letter-spacing: 1px;
}
.video-timeline {
  padding: 8px 10px;
}
.timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 4px;
  color: #97a9ab;
}
.timeline-clips {
  display: flex;
  gap: 2px;
  position: relative;
  height: 17px;
  margin-top: 4px;
}
.timeline-clips > i {
  flex: 1;
  border-radius: 2px;
  background: linear-gradient(150deg, #a4b8ae 50%, #587e70 51%);
}
.timeline-clips > i:nth-child(2) {
  background: linear-gradient(135deg, #cbd3bc 50%, #92a886 51%);
}
.timeline-clips > i:nth-child(3) {
  background: linear-gradient(120deg, #a6bcb3 40%, #34614f 41%);
}
.timeline-head {
  position: absolute;
  top: -5px;
  left: 15%;
  width: 1px;
  height: 33px;
  background: #8c739e;
}
.timeline-audio {
  height: 5px;
  margin-top: 4px;
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, #cfddd9 0 2px, #bed0ca 2px 4px);
}
.draft-app {
  top: 38px;
  width: 81%;
  left: 10%;
  background: #fffffd;
  transform: rotate(-3deg);
}
.draft-paper {
  padding: 13px 18px;
}
.draft-paper .micro-label {
  color: #6c7569;
  font-size: 5px;
}
.draft-paper h4 {
  font-family: Georgia, "Songti SC", serif;
  font-weight: 500;
  line-height: 1.6;
  font-size: 13px;
  letter-spacing: 0.4px;
  margin-top: 7px;
  color: #52674f;
}
.draft-paper p {
  font-size: 5px;
  margin-top: 8px;
  color: #6d756a;
}
.draft-paper mark {
  background: #e4efdc;
  color: #5b6d50;
  padding: 3px;
}
.draft-lines {
  margin-top: 8px;
}
.draft-lines i {
  display: block;
  width: 100%;
  height: 2px;
  background: #ebede5;
  margin-top: 5px;
}
.draft-lines i:last-child {
  width: 75%;
}
.draft-tone {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 4px;
  border-top: 1px solid #edf0e7;
  padding-top: 8px;
  margin-top: 9px;
  color: #65745e;
}
.draft-tone .icon {
  width: 8px;
  height: 8px;
}
.draft-tone span {
  border: 1px solid #e3eadc;
  padding: 2px 3px;
  border-radius: 3px;
}
.pulse-app {
  top: 40px;
  width: 91%;
  left: 4.5%;
}
.pulse-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px 7px;
}
.pulse-top strong {
  font-size: 7px;
  font-weight: 500;
  color: #7f6e7e;
}
.pulse-top > span {
  font-size: 4px;
  color: #787077;
}
.pulse-top .icon {
  width: 7px;
  height: 7px;
}
.kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 0 8px 10px;
}
.kanban > div {
  min-width: 0;
}
.kanban-title {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 4px;
  color: #7f6f7a;
  padding-bottom: 5px;
}
.kanban-title i {
  width: 3px;
  height: 3px;
  background: #c8b6c6;
  border-radius: 50%;
}
.kanban-title .dot-1 {
  background: #c5aed6;
}
.kanban-title .dot-2 {
  background: #a6bba8;
}
.kanban-title b {
  font-size: 4px;
  font-weight: 400;
  margin-left: auto;
  color: #b8aab6;
}
.kanban-card {
  padding: 7px 5px;
  border: 1px solid #eee9ed;
  border-radius: 4px;
  margin-bottom: 5px;
  background: #fff;
}
.kanban-tag {
  font-size: 3px;
  padding: 2px 4px;
  background: #f5ecdf;
  border-radius: 2px;
  color: #76654f;
}
.kanban-tag.tag-1 {
  background: #f0e7f6;
  color: #745f7f;
}
.kanban-tag.tag-2 {
  background: #e7f0e7;
  color: #5e6d5d;
}
.kanban-card p {
  font-size: 4px;
  color: #7b6f79;
  margin: 5px 0 8px;
}
.mini-avatar {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  font-size: 4px;
  display: inline-grid;
  place-items: center;
  background: #eee5f1;
  color: #b197b6;
}
.kanban-card small {
  float: right;
  font-size: 3px;
  color: #797076;
  margin-top: 2px;
}
.pixel-board {
  padding: 38px 20px 12px;
}
.pixel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.pixel-heading strong {
  font-size: 13px;
  letter-spacing: -0.5px;
  line-height: 1.1;
  font-weight: 550;
  color: #6e6380;
}
.pixel-heading > span {
  font-size: 4px;
  letter-spacing: 0.8px;
  color: #6e647b;
  text-align: right;
}
.pixel-icons {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-top: 16px;
}
.pixel-cell {
  background: #faf9fd;
  border: 1px solid #e0d9ee;
  aspect-ratio: 1;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #9b8dba;
}
.pixel-cell .icon {
  width: 15px;
  height: 15px;
}
.pixel-1 {
  color: #b5a279;
  background: #f8f2e6;
  border-color: #ebdfc6;
}
.pixel-2 {
  color: #8b9c8d;
  background: #eaf0e9;
  border-color: #d7e1d5;
}
.pixel-3 {
  color: #ba9196;
  background: #f6e9e9;
  border-color: #ead6d8;
}
.pixel-footer {
  display: flex;
  justify-content: space-between;
  color: #6e647b;
  font-size: 4px;
  letter-spacing: 0.6px;
  margin-top: 10px;
}
/* Large previews keep readable proportions at any viewport. */
.preview-large {
  min-height: 300px;
}
.preview-large .mini-app {
  top: 36px;
}
.preview-large .mini-chrome {
  height: 29px;
  font-size: 8px;
  padding-inline: 15px;
}
.preview-large .window-dots i {
  width: 4px;
  height: 4px;
}
.preview-large .mini-chrome .icon {
  width: 11px;
  height: 11px;
}
.preview-large .note-sidebar {
  font-size: 8px;
  padding: 20px 12px;
  gap: 11px;
}
.preview-large .note-sidebar .icon {
  width: 10px;
  height: 10px;
}
.preview-large .note-paper {
  padding: 20px;
}
.preview-large .note-paper > .micro-label {
  font-size: 7px;
}
.preview-large .note-paper h4 {
  font-size: 20px;
  margin: 10px 0 7px;
}
.preview-large .mini-muted {
  font-size: 7px;
}
.preview-large .note-summary {
  padding: 10px;
  margin-top: 15px;
}
.preview-large .note-summary > span,
.preview-large .note-summary p {
  font-size: 7px;
}
.preview-large .mini-task {
  font-size: 7px;
  margin-top: 13px;
}
.preview-large .mini-task b {
  font-size: 6px;
}
.preview-large .muse-board {
  inset: 15px 20px;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 14px;
}
.preview-large .muse-heading {
  font-size: 7px;
  height: 20px;
}
.preview-large .muse-poster {
  padding: 20px;
  min-height: 240px;
}
.preview-large .poster-caption {
  font-size: 13px;
}
.preview-large .muse-poster strong {
  font-size: 54px;
}
.preview-large .muse-flower {
  width: 220px;
  height: 220px;
  right: -16px;
  bottom: -10px;
}
.preview-large .poster-foot {
  font-size: 6px;
  left: 20px;
}
.preview-large .muse-mini {
  padding: 22px 17px;
  font-size: 20px;
  flex: 1;
}
.preview-large .muse-mini em {
  font-size: 25px;
}
.preview-large .swatches {
  height: 28px;
}
.preview-large .muse-side > span {
  font-size: 6px;
}
.preview-large .code-app {
  top: 15px;
  bottom: 15px;
}
.preview-large .code-tab {
  font-size: 9px;
  padding: 10px 17px;
}
.preview-large .code-tab .icon {
  width: 12px;
  height: 12px;
}
.preview-large .code-lines {
  font-size: 10px;
  padding-block: 10px;
  line-height: 2;
}
.preview-large .code-lines p > i {
  width: 38px;
}
.preview-large .code-status {
  font-size: 8px;
  padding: 8px 14px;
}
.preview-large .audio-app {
  top: 24px;
  bottom: 24px;
}
.preview-large .voice-profile {
  padding: 22px 25px 10px;
}
.preview-large .voice-orb {
  width: 40px;
  height: 40px;
}
.preview-large .voice-orb > .icon {
  width: 20px;
  height: 20px;
}
.preview-large .voice-profile strong {
  font-size: 13px;
}
.preview-large .voice-profile div > span {
  font-size: 8px;
}
.preview-large .voice-language {
  font-size: 8px;
}
.preview-large .waveform {
  height: 90px;
  gap: 4px;
  margin-inline: 25px;
}
.preview-large .waveform > i {
  width: 5px;
  height: var(--h);
}
.preview-large .audio-controls {
  font-size: 8px;
  margin-inline: 25px;
}
.preview-large .preview-play {
  height: 28px;
  width: 28px;
  font-size: 15px;
}
.preview-large .audio-script {
  font-size: 9px;
  margin: 14px 25px;
}
.preview-large .video-app {
  top: 24px;
  bottom: 24px;
}
.preview-large .video-landscape {
  height: 195px;
}
.preview-large .video-title {
  font-size: 38px;
  top: 42px;
  left: 35px;
}
.preview-large .video-title em {
  font-size: 45px;
}
.preview-large .video-label {
  font-size: 6px;
  bottom: 16px;
  right: 15px;
}
.preview-large .video-timeline {
  padding: 12px 18px;
}
.preview-large .timeline-labels {
  font-size: 7px;
}
.preview-large .timeline-clips {
  height: 27px;
  margin-top: 8px;
}
.preview-large .timeline-head {
  height: 50px;
}
.preview-large .timeline-audio {
  height: 8px;
}
.preview-large .draft-app {
  top: 29px;
  bottom: -10px;
}
.preview-large .draft-paper {
  padding: 25px 32px;
}
.preview-large .draft-paper > .micro-label {
  font-size: 8px;
}
.preview-large .draft-paper h4 {
  font-size: 25px;
  margin-top: 12px;
}
.preview-large .draft-paper p {
  font-size: 9px;
  margin-top: 16px;
}
.preview-large .draft-lines {
  margin-block: 16px;
}
.preview-large .draft-lines i {
  height: 3px;
  margin-top: 8px;
}
.preview-large .draft-tone {
  font-size: 8px;
  padding-top: 15px;
  gap: 8px;
}
.preview-large .pulse-app {
  top: 24px;
  bottom: 24px;
}
.preview-large .pulse-top {
  padding: 20px;
}
.preview-large .pulse-top strong {
  font-size: 15px;
}
.preview-large .pulse-top > span {
  font-size: 8px;
}
.preview-large .kanban {
  padding: 0 17px 20px;
  gap: 9px;
}
.preview-large .kanban-title {
  font-size: 8px;
  padding-bottom: 10px;
}
.preview-large .kanban-title i {
  width: 5px;
  height: 5px;
}
.preview-large .kanban-title b {
  font-size: 8px;
}
.preview-large .kanban-card {
  padding: 14px 10px;
  margin-bottom: 10px;
}
.preview-large .kanban-tag {
  font-size: 6px;
  padding: 3px 7px;
}
.preview-large .kanban-card p {
  font-size: 8px;
  margin: 12px 0 14px;
}
.preview-large .mini-avatar {
  width: 18px;
  height: 18px;
  font-size: 7px;
}
.preview-large .kanban-card small {
  font-size: 6px;
}
.preview-large .pixel-board {
  padding: 35px;
}
.preview-large .pixel-heading strong {
  font-size: 24px;
}
.preview-large .pixel-heading > span {
  font-size: 7px;
}
.preview-large .pixel-icons {
  gap: 12px;
  margin-top: 25px;
}
.preview-large .pixel-cell {
  border-radius: 12px;
}
.preview-large .pixel-cell > .icon {
  width: 26px;
  height: 26px;
}
.preview-large .pixel-footer {
  font-size: 7px;
  margin-top: 18px;
}
.hero-preview .preview-large {
  min-height: 0;
}
.hero-preview .muse-board {
  inset: 0 10px;
}
.hero-preview .muse-poster {
  min-height: 220px;
}
.hero-preview .muse-poster strong {
  font-size: 40px;
}
.hero-preview .muse-flower {
  width: 175px;
  height: 175px;
}
.hero-preview .code-app {
  top: 0;
  bottom: 0;
}
.hero-preview .code-lines {
  font-size: 9px;
  line-height: 1.85;
}
.hero-preview .code-status {
  padding: 6px 14px;
}

.preview-illustration {
  position: relative;
  height: 100%;
}
.product-preview {
  text-align: left;
  color: #1f2937;
}
.preview-large .muse-poster {
  min-height: 0;
}
.preview-large .muse-board {
  grid-template-rows: 20px 1fr;
}
.preview-large .muse-mini {
  min-height: 0;
}
.preview-large .draft-paper h4 {
  font-family: Georgia, serif;
}