@charset "UTF-8";

:root {
  --system: Tahoma, "DM Sans", sans-serif;
  --ink: #172934;
  --paper: #fbfaf4;
  --blue: #2c58aa;
  --blue-dark: #1a3774;
  --blue-bright: #4d80d7;
  --sage: #b6c7a2;
  --line: #aab8bd;
  --head: 0px;
  --task: 32px;
  --edge: clamp(17px, 5.4vw, 96px);
  --window-gap: clamp(16px, 4vh, 51px);
}

*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; color-scheme: light; }
body { margin: 0; color: var(--ink); background: #a9c3ca; font: 400 .96rem/1.48 var(--system); }
a { color: inherit; }
button, input, textarea, select { color: inherit; font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure { margin: 0; }
[hidden] { display: none !important; }
::selection { color: #12264a; background: #b5cefc; }
:focus-visible { outline: 2px solid #183e88; outline-offset: 3px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  z-index: 500;
  top: 10px;
  left: 10px;
  padding: 8px 12px;
  color: #102d5c;
  background: #fff;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.desktop-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-bottom: var(--task);
  isolation: isolate;
}
.desktop-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0 0 var(--task);
  pointer-events: none;
  background: #4c9edb url("./assets/desktop-hill.webp") center center / cover no-repeat;
}
.desktop-workspace { position: relative; flex: 1; min-width: 0; }
.desktop-home {
  min-height: calc(100svh - var(--task));
  padding: 13px 12px 14px;
}
.desktop-intro {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.desktop-files {
  display: grid;
  grid-template-columns: 112px;
  width: max-content;
  max-width: 100%;
  align-items: start;
  gap: 6px 9px;
}
.desktop-icon {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 70px;
  padding: 5px 4px 3px;
  border: 1px solid transparent;
  border-radius: 1px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 2px #0c1e3e, 1px 1px 2px #122544, -1px 0 2px #142843;
  font-size: .79rem;
  font-weight: 700;
  line-height: 1.22;
  overflow-wrap: anywhere;
}
.desktop-icon:is(:hover, :focus-visible) {
  border-color: #d5e6ff85;
  background: #134ba665;
}
.desktop-icon:is([aria-current], [aria-expanded="true"], .is-open, .is-selected) {
  border-color: #dbeaff9e;
  background: #1649a4a3;
}
.desktop-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.file-icon {
  position: relative;
  display: grid;
  width: 47px;
  height: 41px;
  place-items: center;
}
.file-icon::before, .file-icon::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.file-icon::before {
  top: 2px;
  left: 1px;
  width: 22px;
  height: 13px;
  background: linear-gradient(#ffe99c, #d3a331);
  border: 1px solid #a98129;
  border-radius: 4px 5px 0 0;
}
.file-icon::after {
  inset: 10px 0 3px;
  border: 1px solid #a77e24;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff2b8, 1px 3px 2px #24383465;
  background: linear-gradient(#ffdf79 0%, #f5c549 75%, #e7aa32 100%);
}
.file-icon img, .desktop-icon > img {
  width: 42px;
  height: 40px;
  object-fit: contain;
  border: 1px solid #506c77;
  border-radius: 2px;
  background: #fff;
  box-shadow: 1px 3px 2px #24383465;
}
.file-icon img {
  position: absolute;
  z-index: 1;
  right: 1px;
  bottom: 2px;
  width: 23px;
  height: 23px;
  border-color: #695823;
}
.desktop-icon--contact .file-icon::before {
  inset: 7px 0 3px;
  width: auto;
  height: auto;
  background: #fffaf0;
  border-color: #857e67;
  border-radius: 3px;
}
.desktop-icon--contact .file-icon::after {
  inset: 8px 2px auto;
  height: 17px;
  border: 0;
  border-radius: 0;
  background: #afc8ec;
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.desktop-windows { min-width: 0; }
.app-window {
  --xp-panel: #ece9d8;
  --xp-border: #aca899;
  --xp-field: #7f9db9;
  --xp-link: #003c91;
  --xp-selected: #316ac5;
  --window-pad: clamp(12px, 2.05vw, 25px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #202020;
  background: var(--xp-panel);
  border: 2px solid #0a48b3;
  border-radius: 8px 8px 3px 3px;
  box-shadow: 0 14px 42px #13376d68, inset 0 0 0 1px #d5e3ff;
  font: 400 .94rem/1.5 var(--system);
}
.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 33px;
  padding: 3px 4px 3px 9px;
  border-radius: 5px 5px 0 0;
  border-top: 1px solid #a8c9ff;
  border-bottom: 1px solid #164cb3;
  color: #fff;
  background: linear-gradient(#7297cd 0%, #557ebc 15%, #486eaa 54%, #3c609b 92%);
}
.is-active .window-bar {
  background: linear-gradient(#5d9bff 0%, #3887f2 11%, #1969db 36%, #0753c6 76%, #184cae 100%);
}
.window-bar h2 {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font: 700 .9rem/1.2 var(--system);
  text-overflow: ellipsis;
  text-shadow: 1px 1px #103e90;
  white-space: nowrap;
}
.window-controls { display: flex; align-items: center; flex: none; gap: 3px; }
.window-controls button {
  display: grid;
  place-items: center;
  width: 24px;
  min-height: 23px;
  padding: 0;
  border: 1px solid #deebff;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(#75aaff, #4079df 53%, #2a61c6);
  box-shadow: inset 1px 1px 1px #ffffff60;
  font: 700 .95rem/1 var(--system);
}
.window-controls button:hover { background: linear-gradient(#8bb8ff, #2456ba); }
.window-controls button[data-action="close"] { background: linear-gradient(#ffaf88, #de653e 54%, #b93821); }
.window-controls button[data-action="close"]:hover { background: linear-gradient(#ffc09d, #c7442b); }
.window-controls button:focus-visible, .desktop-taskbar :focus-visible { outline-color: #fff7ae; outline-offset: -2px; }
.start-menu :focus-visible { outline-color: #fff7ae; outline-offset: -2px; }

.window-body {
  min-width: 0;
  min-height: 0;
  padding: var(--window-pad);
  overflow-wrap: anywhere;
  background: var(--xp-panel);
  scrollbar-color: #87a3d7 #ece9d8;
}
.window-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: calc(-1 * var(--window-pad)) calc(-1 * var(--window-pad)) 13px;
  padding: 5px var(--window-pad);
  color: #173f73;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #9aaecd;
  background: linear-gradient(#f4f8ff, #dfe8f7);
  font-size: .86rem;
}
.window-toolbar img { width: 25px; height: 25px; object-fit: contain; border: 1px solid #a2b3c9; background: #fff; }
.window-toolbar p { font-weight: 700; }
.window-toolbar a { margin-inline-start: auto; }
.window-body a { color: var(--xp-link); text-underline-offset: 3px; }
.window-body > * + * { margin-top: 12px; }
.window-body h3 {
  color: #173b6f;
  font: 700 clamp(1.08rem, 1.65vw, 1.38rem)/1.25 var(--system);
  letter-spacing: normal;
}
.window-body h4 { color: #173b6f; font: 700 .95rem/1.3 var(--system); }
.window-body :is(h3, h4) + p { margin-top: 7px; }

.case-grid, .meritoo-copy, .video-browser {
  padding: clamp(10px, 1.55vw, 20px);
  border: 1px solid var(--xp-border);
  background: #fff;
  box-shadow: 1px 1px 0 #fff;
}
.case-grid {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.06fr);
  align-items: start;
  gap: clamp(13px, 2.65vw, 34px);
}
.case-copy, .case-art { min-width: 0; }
.case-copy > h3 { padding-bottom: 6px; border-bottom: 1px solid #d4deed; }
.case-copy > * + * { margin-top: 10px; }
.case-copy p { max-width: 51ch; color: #303030; }
.case-copy a { font-weight: 700; }

.diamond-photo { position: relative; display: grid; min-width: 0; border: 1px solid var(--xp-field); background: #f5f2e5; }
.diamond-photo-image {
  width: 100%;
  aspect-ratio: 1.39;
  object-fit: cover;
  object-position: 50% 58%;
  background: #202d29;
}
.diamond-art {
  padding: 10px clamp(9px, 1.55vw, 16px);
  border: 1px solid #9eb4d3;
  background: #edf3fc;
  box-shadow: inset 0 1px 0 #fff;
}
.diamond-art > * + * { margin-top: 6px; }
.diamond-brand-logo {
  position: absolute;
  top: 8px;
  left: 8px;
  width: clamp(44px, 6.75vw, 82px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 2px;
  border: 1px solid #fff5a9;
  background: #f3dd40;
  box-shadow: 1px 2px 4px #10171180;
}
.diamond-photo figcaption, .diamond-photo .diamond-caption {
  margin-top: 0;
  padding: 6px 8px;
  border-top: 1px solid var(--xp-field);
  color: #353535;
  font-size: .82rem;
  line-height: 1.35;
}
.diamond-count {
  display: block;
  color: #123b77;
  font: 700 clamp(1.65rem, 3.85vw, 3.25rem)/1.03 var(--system);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.diamond-count :is(small, span) { font-size: .5em; letter-spacing: normal; white-space: normal; }
.case-compare, .switcher, .video-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.case-compare button, .switcher button, .video-choices [data-video], .brief-form button,
.brief-form .contact-send, .contact-copy, .video-preview button, [data-modem-action] {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #41678b;
  border-radius: 3px;
  color: #183555;
  background: linear-gradient(#fffefa 0%, #f4f1e6 57%, #e7e0c9 100%);
  box-shadow: inset 1px 1px 0 #fff;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
}
:is(.case-compare, .switcher, .video-choices, .brief-form) :is(button, a):hover,
.contact-copy:hover, .video-preview button:hover, [data-modem-action]:hover {
  border-color: #28599b;
  background: linear-gradient(#fff, #e2edff 55%, #c9ddfa);
}
:is(.case-compare, .switcher, .video-choices) [aria-pressed="true"], .video-choices [aria-current] {
  border-color: #194793;
  color: #fff;
  background: var(--xp-selected);
  box-shadow: inset 1px 1px 0 #597fc5;
}
:is(.case-compare, .switcher, .video-choices) [aria-pressed="true"]:hover, .video-choices [aria-current]:hover {
  color: #fff;
  background: #2757aa;
}
.case-art > * + * { margin-top: 8px; }

.meritoo-responsibilities { margin: 10px 0 0; padding-inline-start: 21px; }
.meritoo-responsibilities li + li { margin-top: 5px; }
.video-browser {
  display: grid;
  grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr);
  gap: 12px clamp(10px, 2vw, 23px);
}
.video-choices {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 8px;
  border: 1px solid #a1b7da;
  background: linear-gradient(#eef4ff, #d8e5f8);
}
.video-choices [data-video] { display: block; width: 100%; }
.video-display { min-width: 0; }
.video-display > * + * { margin-top: 7px; }
.video-preview, .video-frame {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: clip;
  border: 2px solid;
  border-color: #52657e #b1bfce #b1bfce #52657e;
  background: #10151d;
}
.video-preview img, .video-frame iframe, .video-display > iframe {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.video-preview img { position: absolute; inset: 0; }
.video-preview button {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding-inline: 11px;
  box-shadow: inset 1px 1px 0 #fff, 0 3px 9px #141b2b95;
}
.video-title {
  padding: 5px 8px;
  border: 1px solid #c2cde0;
  color: #153a70;
  background: #edf3fc;
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.35;
}
.video-links { gap: 6px 13px; }
.video-links a { font-size: .86rem; font-weight: 700; }

.profile-card, .brief-form {
  min-width: 0;
  padding: clamp(11px, 2.15vw, 26px);
  border: 1px solid var(--xp-field);
  background: #f3f5fa;
  box-shadow: inset 0 1px 0 #fff;
}
.profile-card {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 6px;
}
.profile-card img { width: clamp(56px, 9vw, 100px); aspect-ratio: 1; object-fit: contain; border: 1px solid #aab9d0; background: #fff; }
.profile-card strong { color: #173b6f; font-size: 1.03rem; }
.profile-card p { color: #303030; }
.brief-form { display: grid; align-content: start; gap: 8px; background: #f6f3e8; }
.brief-form label { color: #222; font-size: .9rem; font-weight: 700; }
.brief-form :is(input, textarea, select) {
  width: 100%;
  min-height: 35px;
  padding: 5px 7px;
  border: 1px solid var(--xp-field);
  border-radius: 0;
  color: #202020;
  background: #fff;
  box-shadow: inset 1px 1px 1px #405b751f;
}
.brief-form textarea { resize: vertical; }
.brief-form button, .brief-form a { justify-self: start; }
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 10px; }
.contact-status { font-size: .85rem; }
.contact-email { overflow-wrap: anywhere; }


.desktop-taskbar {
  position: fixed;
  z-index: 80;
  inset: auto 0 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  height: var(--task);
  padding: 1px max(0px, env(safe-area-inset-right)) 1px max(0px, env(safe-area-inset-left));
  border-top: 1px solid #66a5fa;
  color: #f3f8ff;
  background: linear-gradient(#4a97f3 0%, #2f78df 10%, #2366d7 27%, #205cd1 84%, #1a43a0 100%);
}
.start-button {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  justify-content: center;
  min-width: clamp(81px, 11vw, 110px);
  padding: 1px 9px;
  border: 1px solid #37713b;
  border-radius: 0 10px 10px 0;
  color: #fff;
  background: linear-gradient(#7fc45e, #60a84c 23%, #438d36 73%, #35762b);
  box-shadow: inset 0 1px 0 #c2e5a8, 2px 0 4px #1d3a7582;
  font-size: 1.03rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  text-shadow: 1px 1px #2b5c36;
}
.start-button:hover, .start-button[aria-expanded="true"] { background: linear-gradient(#a7d575, #65ac4c 36%, #397d32); }
.start-symbol {
  width: 14px;
  height: 14px;
  border-radius: 1px;
  background:
    linear-gradient(#0000 0 43%, #2c7040 43% 54%, #0000 54%),
    linear-gradient(90deg, #0000 0 44%, #2c7040 44% 54%, #0000 54%),
    conic-gradient(#cbe777 25%, #e5ce7d 25% 50%, #79bdec 50% 75%, #fcba7e 75%);
  transform: rotate(-8deg);
}
.taskbar-apps {
  display: flex;
  flex: 1;
  gap: 3px;
  min-width: 0;
  padding-block: 2px;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
}
.taskbar-apps::-webkit-scrollbar { display: none; }
.taskbar-apps :is(button, a) {
  display: block;
  flex: 0 1 155px;
  min-width: 75px;
  max-width: 183px;
  overflow: hidden;
  padding: 1px 7px;
  color: #fff;
  border: 1px solid #6b9de6;
  border-radius: 2px;
  background: linear-gradient(#6196e3, #3e73c6);
  font-size: .79rem;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.taskbar-apps :is(button, a):hover { background: #376cc3; }
.taskbar-apps :is(button, a):is(.is-active, [aria-pressed="true"], [aria-current]) {
  border-color: #1b4898;
  background: #214b9c;
  box-shadow: inset 1px 1px 3px #1329518c;
}
.taskbar-status {
  display: flex;
  align-items: center;
  justify-content: end;
  flex: none;
  gap: 7px;
  padding-inline: 7px 9px;
  color: #fff;
  border-left: 1px solid #8db9fb;
  background: linear-gradient(#49a1ec, #238bdc 52%, #2373c3);
  font-size: .76rem;
  white-space: nowrap;
}
.taskbar-clock, .desktop-clock { font-variant-numeric: tabular-nums; }
.start-menu {
  position: fixed;
  z-index: 81;
  bottom: calc(var(--task) + 2px);
  left: 4px;
  width: min(300px, calc(100% - 8px));
  max-height: calc(100svh - var(--task) - 10px);
  overflow-y: auto;
  display: grid;
  gap: 1px;
  padding: 5px;
  border: 2px solid #3159a1;
  border-radius: 7px 7px 3px 3px;
  color: #203c53;
  background: #f3f6ed;
  box-shadow: 0 10px 26px #1c32525c;
}
.start-menu h2, .start-menu > strong, .start-menu-heading {
  display: block;
  padding: 8px 10px;
  color: #fff;
  background: linear-gradient(#5381cf, #2d58a9);
  font-size: 1rem;
  font-weight: 700;
}
.start-menu :is(nav, ul, .start-menu-apps, .start-menu-links) { display: grid; gap: 1px; padding: 0; margin: 0; list-style: none; }
.start-menu-links { border-top: 1px solid #adbed1; }
.start-menu a, .start-menu button {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 35px;
  padding: 5px 8px;
  border: 1px solid transparent;
  color: #23415e;
  background: none;
  font-weight: 700;
  text-decoration: none;
}
.start-menu a:hover, .start-menu button:hover { color: #103b79; border-color: #a9bfe4; background: #e0ecfd; }
.start-menu .motion-toggle::after { content: "✓"; margin-inline-start: auto; visibility: hidden; }
.start-menu .motion-toggle[aria-pressed="true"]::after { visibility: visible; }
.start-menu :focus-visible { outline-color: #183e88; }
.desktop-help { color: #3b5562; font-size: .9rem; }
.desktop-workspace > .desktop-help { margin: 0 var(--edge) 10px; }
.desktop-welcome {
  flex: none;
  color: #fff;
  text-shadow: 0 1px 1px #142f64, 0 2px 8px #0c2c6e;
}
.desktop-welcome h1 { line-height: 1.12; }
.desktop-welcome p { margin-top: 5px; font-weight: 700; line-height: 1.25; }
.mobile-folder-nav, .podcast-shortcut { display: none; }
.task-contact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-block: 1px;
  padding-inline: 12px;
  border: 1px solid #9ecbff;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(#3879ca, #2254a8);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
}
.task-contact:is(:hover, [aria-current]) { background: #153c85; }
.task-contact-icon {
  position: relative;
  width: 16px;
  height: 11px;
  border: 1px solid #c5d8ff;
  border-radius: 2px;
  background: #f7faff;
}
.task-contact-icon::after {
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  content: "";
  background: #86abed;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.desktop-ready .podcast-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 4px 12px;
  border: 1px solid #7596c1;
  border-radius: 4px;
  color: #173b6f;
  background: linear-gradient(#fff, #dce9f8);
  font-size: .92rem;
  font-weight: 700;
}
.podcast-shortcut:hover { background: #dceaff; }

@media (min-width: 761px) and (not ((orientation: landscape) and (max-height: 500px) and (hover: none))) {
  .desktop-home {
    display: flex;
    flex-direction: column;
    width: min(100%, 990px);
    margin-inline: auto;
    padding: clamp(25px, 9svh, 96px) 32px clamp(20px, 7svh, 76px);
  }
  .desktop-welcome { margin-bottom: clamp(14px, 4svh, 38px); }
  .desktop-welcome h1 { font-size: clamp(2.3rem, 5.2vw, 4.5rem); }
  .desktop-welcome p { font-size: clamp(1rem, 1.7vw, 1.25rem); }
  .desktop-files {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin-block: auto;
    gap: clamp(10px, 2.5svh, 26px) 14px;
  }
  .desktop-icon {
    align-content: center;
    gap: 8px;
    min-height: clamp(78px, 17svh, 145px);
    padding: 6px;
    font-size: 1.03rem;
    text-shadow: 0 1px 2px #031435, 1px 1px 2px #031435, -1px 0 2px #031435, 0 2px 4px #071a3b;
  }
  .desktop-icon .file-icon { width: clamp(50px, 8svh, 76px); height: clamp(44px, 7svh, 66px); }
  .desktop-icon:not(.desktop-icon--contact) .file-icon::before { width: 48%; height: 33%; }
  .desktop-icon:not(.desktop-icon--contact) .file-icon::after { inset-block-start: 26%; }
  .desktop-icon .file-icon img { width: 48%; height: auto; aspect-ratio: 1; right: 2px; bottom: 3px; }
  .desktop-icon--contact .file-icon::after { height: 43%; }
  .desktop-ready .desktop-windows {
    position: absolute;
    z-index: 6;
    inset: var(--window-gap) clamp(8px, 4vw, 68px);
    pointer-events: none;
  }
  .desktop-ready .app-window {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(calc(100% - 16px), 1070px);
    max-height: 100%;
    translate: -50% 0;
    transform: translate(var(--window-x, 0px), var(--window-y, 0px));
    pointer-events: auto;
  }
  .desktop-ready .window-body { overflow: auto; }
  .desktop-ready .app-window.is-maximized {
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    translate: none;
    transform: none;
  }
  .desktop-ready .app-window:not(.is-maximized) .window-bar { cursor: grab; touch-action: none; user-select: none; }
  .desktop-ready .app-window.is-dragging .window-bar { cursor: grabbing; }
  .desktop-ready .app-window.window--modem:not(.is-maximized) { top: 14%; }
}

@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (hover: none) {
  :root {
    --task: calc(51px + env(safe-area-inset-bottom, 0px));
    --mobile-title: calc(55px + env(safe-area-inset-top, 0px));
    --edge: clamp(12px, 4vw, 25px);
  }
  html:has(.desktop-shell.desktop-ready) { overscroll-behavior-y: none; }
  .desktop-shell.desktop-ready {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  .desktop-ready .desktop-workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .desktop-home {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: min(100%, 620px);
    min-height: 0;
    margin-inline: auto;
    padding: calc(clamp(24px, 8svh, 72px) + env(safe-area-inset-top, 0px))
      max(var(--edge), env(safe-area-inset-right, 0px))
      clamp(18px, 5svh, 50px) max(var(--edge), env(safe-area-inset-left, 0px));
  }
  .desktop-ready .desktop-home {
    overflow: hidden;
    overflow: clip;
    touch-action: pinch-zoom;
  }
  .desktop-welcome {
    position: static;
    margin: 0 0 clamp(16px, 3.3svh, 29px);
  }
  .desktop-welcome h1 { font-size: clamp(1.85rem, 7vw, 2.65rem); line-height: 1.12; }
  .desktop-welcome p { margin-top: 5px; font-size: .93rem; font-weight: 700; line-height: 1.25; }
  .desktop-files {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-flow: row;
    flex: none;
    width: 100%;
    margin-block: auto;
    align-items: stretch;
    gap: clamp(7px, 1.35svh, 12px) 12px;
  }
  .desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: clamp(77px, 13.7svh, 122px);
    padding: 4px 6px;
    font-size: clamp(.9rem, 4.1vw, 1.07rem);
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 2px #031435, 1px 1px 2px #031435, -1px 0 2px #031435, 0 2px 4px #071a3b;
  }
  .desktop-icon:hover:not(:active, :focus-visible) { border-color: transparent; background: transparent; }
  .desktop-icon .file-icon {
    flex: none;
    width: clamp(49px, 7.1svh, 65px);
    height: clamp(43px, 6.2svh, 57px);
  }
  .desktop-icon:not(.desktop-icon--contact) .file-icon::before { width: 48%; height: 33%; }
  .desktop-icon:not(.desktop-icon--contact) .file-icon::after { inset-block-start: 26%; }
  .desktop-icon .file-icon img { width: 48%; height: auto; aspect-ratio: 1; right: 2px; bottom: 3px; }
  .desktop-icon--contact .file-icon::after { height: 43%; }
  .desktop-icon > span:last-child { min-width: 0; overflow-wrap: break-word; }
  .desktop-ready .desktop-windows { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .desktop-shell.desktop-ready:not(.has-mobile-folder) .desktop-windows,
  .has-mobile-folder .desktop-home,
  .desktop-ready .app-window:not(.is-active) { display: none; }
  .mobile-folder-nav {
    position: relative;
    z-index: 78;
    display: flex;
    flex: none;
    min-height: var(--mobile-title);
    align-items: center;
    gap: 12px;
    padding: calc(5px + env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) 5px max(8px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid #063f9a;
    color: #fff;
    background: linear-gradient(#5d9bff, #2875e8 21%, #0753c6 75%, #1448a9);
    box-shadow: 0 2px 5px #173b6b30;
  }
  .mobile-desktop-return {
    display: inline-flex;
    flex: none;
    min-height: 44px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid #c2dbff;
    border-radius: 4px;
    color: #fff;
    background: linear-gradient(#386fb7, #2355a6);
    box-shadow: inset 0 1px #9abfee7a;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
  }
  .mobile-desktop-return span { font-size: 1.5rem; line-height: 1; }
  .mobile-desktop-return:focus-visible { outline-color: #fff7ae; outline-offset: -3px; }
  .mobile-folder-title { min-width: 0; font-size: 1rem; font-weight: 700; line-height: 1.2; text-shadow: 0 1px #103e90; overflow-wrap: anywhere; }
  .desktop-ready .app-window { flex: 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
  .desktop-ready .app-window .window-bar { display: none; }
  .has-mobile-folder { background: #ece9d8; }
  .desktop-ready .window-body {
    --window-pad: clamp(8px, 2.6vw, 20px);
    flex: 1;
    overflow: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 12px;
    padding-inline: max(var(--window-pad), env(safe-area-inset-left, 0px)) max(var(--window-pad), env(safe-area-inset-right, 0px));
  }
  .desktop-taskbar { padding-bottom: calc(1px + env(safe-area-inset-bottom, 0px)); gap: 0; }
  .start-button { min-width: 82px; min-height: 44px; }
  .taskbar-apps { visibility: hidden; padding: 0; }
  .task-contact { min-height: 44px; }
  .taskbar-status { padding-inline: 7px; margin-inline-start: 5px; }
  .start-menu {
    left: max(4px, env(safe-area-inset-left, 0px));
    width: min(340px, calc(100% - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    max-height: calc(100dvh - var(--task) - 9px - env(safe-area-inset-top, 0px));
    overscroll-behavior: contain;
  }
  .start-menu a, .start-menu button { min-height: 44px; }
  .desktop-ready .podcast-shortcut { min-height: 44px; }
}

@media (max-width: 515px) {
  .desktop-shell::before { background-position: 54% center; }
  .case-grid, .video-browser { grid-template-columns: minmax(0, 1fr); }
  .case-grid .case-art { order: -1; }
  .case-grid .case-art .diamond-photo-image { aspect-ratio: 1.62; }
  .case-copy > * + * { margin-top: 9px; }
  .video-choices { display: flex; overflow-x: auto; padding-block-end: 4px; }
  .video-choices [data-video] { width: auto; flex: 0 0 135px; font-size: .87rem; }
}

@media (min-width: 550px) and (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (hover: none) {
  .desktop-files { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) and (max-height: 550px), (orientation: landscape) and (max-height: 500px) and (hover: none) {
  .desktop-home { padding-block: calc(12px + env(safe-area-inset-top, 0px)) 8px; }
  .desktop-welcome { margin-bottom: 10px; }
}
@media (min-width: 450px) and (max-width: 549px) and (max-height: 440px) {
  .desktop-files { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) and (max-height: 460px), (orientation: landscape) and (max-height: 460px) and (hover: none) {
  .desktop-files { row-gap: 5px; }
  .desktop-icon { min-height: 62px; gap: 4px; padding-block: 2px; }
  .desktop-icon .file-icon { width: 44px; height: 37px; }
  .desktop-welcome h1 { font-size: 1.65rem; }
}
@media (max-width: 449px) and (max-height: 390px) {
  .desktop-welcome h1 { font-size: 1.45rem; }
  .desktop-welcome p { margin-top: 3px; font-size: .84rem; }
  .desktop-icon { min-height: 53px; gap: 2px; }
  .desktop-icon .file-icon { width: 38px; height: 32px; }
}

.desktop-ready .app-window.window--modem:not(.is-maximized) { width: min(100%, 475px); }
.modem-ui { display: grid; gap: 10px; padding: 12px; border: 1px solid #aca899; background: #fff; }
.modem-ui h3 { color: #173b6f; font: 700 1.02rem/1.25 var(--system); }
.modem-progress {
  position: relative;
  width: 100%;
  height: 17px;
  overflow: hidden;
  border: 1px solid #8e9da8;
  border-radius: 2px;
  background: #e9eced;
  accent-color: #4e963c;
  box-shadow: inset 1px 1px 3px #23334529;
}
.modem-progress > span, .modem-progress > div {
  display: block;
  width: var(--modem-progress, 0%);
  height: 100%;
  background: repeating-linear-gradient(90deg, #73ad51 0 10px, #5b9b3c 10px 12px, transparent 12px 14px);
}
.modem-result { min-height: 1.4em; color: #213e64; font-weight: 700; }
[data-modem-action] { justify-self: start; }
[data-modem-action]:disabled { cursor: wait; opacity: .72; }

.motion-on .app-window.is-opening { animation: open-window .27s cubic-bezier(.2,.77,.28,1) both; }
.motion-on .desktop-files { animation: desktop-in .46s cubic-bezier(.2,.77,.28,1) both; }
.motion-on .desktop-icon { transition: background-color .18s, border-color .18s; }
.motion-on .desktop-icon .file-icon { transition: transform .23s cubic-bezier(.2,.77,.28,1); }
.motion-on .desktop-icon:hover .file-icon { transform: translateY(-3px); }
.motion-on .desktop-icon:active .file-icon { transform: translateY(1px) scale(.94); }
.motion-on .start-menu:not([hidden]) { animation: open-menu .2s ease-out both; }
.motion-on :is(.diamond-count, .video-display, .profile-card).is-changing { animation: open-menu .23s ease-out both; }

@keyframes open-window { from { opacity: .32; scale: .955; } to { opacity: 1; scale: 1; } }
@keyframes open-menu { from { opacity: .35; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }

@keyframes desktop-in { from { opacity: .6; translate: -12px 0; } to { opacity: 1; translate: 0 0; } }
.motion-on .modem-progress > :is(span, div) { transition: width .22s linear; }

/* Explorer-style tabs and media panes for the project windows. */
.case-workbench { min-width: 0; }
.case-tabbar {
  display: flex;
  gap: 2px;
  align-items: end;
  padding: 0 6px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.case-tabbar [role="tab"] {
  position: relative;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid #a3a89a;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  color: #29426a;
  background: linear-gradient(#fdfdf9, #e7e7da);
  box-shadow: inset 1px 0 #fff, inset 0 1px #fff;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.26;
  white-space: nowrap;
}
.case-tabbar [role="tab"]:hover { background: #edf3fb; }
.case-tabbar [role="tab"][aria-selected="true"] {
  min-height: 37px;
  border-top: 3px solid #e7a349;
  color: #132d54;
  background: #fff;
}
.case-tabbar [role="tab"]:focus-visible { outline-offset: -3px; }
.case-tabpanel {
  min-width: 0;
  padding: clamp(10px, 1.55vw, 22px);
  border: 1px solid var(--xp-border);
  background: #fff;
  box-shadow: 1px 1px 0 #fff;
}
.case-overview {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 12px clamp(11px, 2.1vw, 27px);
}
.case-intro, .case-side { min-width: 0; }
.case-intro > * + *, .case-side > * + * { margin-top: 10px; }
.case-intro > p { max-width: 52ch; color: #303030; }
.case-intro > p + p { margin-top: 7px; }
.case-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #ccd9ea;
}
.case-identity img {
  flex: none;
  width: clamp(42px, 6vw, 62px);
  aspect-ratio: 1;
  padding: 3px;
  object-fit: contain;
  border: 1px solid var(--xp-field);
  background: #fff;
}
.case-identity h3 { color: #163763; }
.case-identity h3 + p { margin-top: 3px; color: #3c4653; font-size: .85rem; }
.case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
  gap: 7px;
  padding: 0;
  list-style: none;
}
.case-facts > * {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #a5b8d5;
  color: #29466b;
  background: linear-gradient(#f6faff, #e7eef9);
  font-size: .84rem;
}
.case-facts strong { display: block; color: #123b77; font-size: 1.1rem; }
.case-hero-photo {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  overflow: clip;
  border: 1px solid var(--xp-field);
  color: #173b6f;
  background: #eaf0f8;
}
button.case-hero-photo { padding: 0; text-align: left; }
.case-hero-photo :is(img, picture) { width: 100%; }
.case-hero-photo > img, .case-hero-photo picture img {
  aspect-ratio: 1.37;
  object-fit: cover;
  object-position: center 56%;
  background: #243342;
}
.case-hero-photo figcaption, .case-hero-photo .case-photo-credit {
  display: block;
  padding: 5px 8px;
  border-top: 1px solid #a6b8d1;
  color: #2d435f;
  background: linear-gradient(#f5f8fc, #e5ecf5);
  font-size: .82rem;
  line-height: 1.4;
}
.case-photo-credit { color: #3e4a59; font-size: .82rem; line-height: 1.38; }
.window--odiseia .case-hero-photo :is(img, picture img) { object-position: center; }

.case-channel-list, .case-resource-list, .case-timeline {
  display: grid;
  gap: 5px;
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
}
.case-channel-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 166px), 1fr)); }
.case-channel-list a, .case-resource-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 1px solid #aebfd7;
  color: #173b6f;
  background: linear-gradient(#f8fbff, #eaf0fa);
  text-decoration: none;
}
.case-channel-list a:hover, .case-resource-list a:hover {
  border-color: #7a9ac4;
  background: #e0ecfc;
  text-decoration: underline;
}
.case-channel-list a > span:last-child { min-width: 0; }
.case-channel-list strong, .case-channel-list small { display: block; }
.case-channel-list strong, .case-resource-list strong { font-size: .9rem; }
.case-channel-list small, .case-resource-list small { color: #465468; font-size: .81rem; line-height: 1.3; }
.channel-symbol {
  display: grid;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid #557db1;
  border-radius: 3px;
  color: #173b6f;
  background: linear-gradient(#fff, #d8e6fb);
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}
.channel-symbol :is(img, svg) { width: 17px; height: 17px; object-fit: contain; }
.case-timeline li {
  padding: 7px 9px;
  border-left: 2px solid #8ca9d0;
  color: #303030;
  background: #f5f8fc;
  font-size: .86rem;
}
.case-timeline time { color: #193c6c; font-weight: 700; }

.case-gallery { display: grid; min-width: 0; gap: 8px; }
.gallery-stage {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  max-height: min(46vh, 408px);
  overflow: clip;
  border: 2px solid;
  border-color: #637789 #becbd9 #becbd9 #637789;
  background: #eaf0f8;
}
.gallery-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.window--diamond .gallery-stage img { object-position: 50% 56%; }
.gallery-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid #a6b7ce;
  color: #253e62;
  background: linear-gradient(#f5f8fe, #e4ecf8);
  font-size: .85rem;
}
.gallery-toolbar > :is(p, output, [aria-live], .gallery-caption) {
  flex: 1 1 140px;
  min-width: 0;
  line-height: 1.38;
}
.gallery-toolbar button, .gallery-thumbs button, .case-side button:not(.case-hero-photo) {
  min-height: 31px;
  padding: 4px 7px;
  border: 1px solid #6b8eb3;
  border-radius: 3px;
  color: #193955;
  background: linear-gradient(#fff, #edf2f6 55%, #dce8f6);
  box-shadow: inset 1px 1px #fff;
  font-size: .85rem;
  font-weight: 700;
}
.gallery-toolbar button:hover, .gallery-thumbs button:hover, .case-side button:not(.case-hero-photo):hover {
  border-color: #3d69a5;
  background: #dae8fc;
}
.gallery-toolbar button:disabled { cursor: default; opacity: .63; }
.gallery-thumbs {
  display: flex;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #a7b9d4;
  background: #f0f4fb;
  scrollbar-color: #87a3d7 #e5edf9;
}
.gallery-thumbs button {
  display: grid;
  flex: 0 0 clamp(100px, 14vw, 120px);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 4px;
  padding: 4px;
  text-align: left;
}
.gallery-thumbs button img { width: 100%; height: 48px; border: 1px solid #8ca2be; object-fit: cover; }
.gallery-thumbs button span { padding-inline: 1px; font-size: .76rem; line-height: 1.3; }
.gallery-thumbs button:is([aria-current], [aria-pressed="true"]) {
  border-color: #194793;
  color: #fff;
  background: var(--xp-selected);
  box-shadow: inset 1px 1px #597fc5;
}

@media (max-width: 515px) {
  .case-tabbar { gap: 1px; padding-inline: 2px; }
  .case-tabbar [role="tab"] { padding-inline: clamp(5px, 2.15vw, 11px); font-size: .79rem; }
  .case-tabpanel { padding: 9px; }
  .case-overview { grid-template-columns: 1fr; }
  .case-hero-photo > img, .case-hero-photo picture img { aspect-ratio: 1.54; }
  .case-channel-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
  .gallery-stage { aspect-ratio: 4 / 3; max-height: 43vh; }
}

.diamond-meter {
  height: 9px;
  overflow: hidden;
  border: 1px solid #8b9fba;
  background: #fff;
  box-shadow: inset 1px 1px #d7e0ed;
}
.diamond-meter span {
  display: block;
  width: 100%;
  min-width: 3px;
  height: 100%;
  background: linear-gradient(#73a3ed, #2d63b3);
}
.diamond-art[data-period="start"] .diamond-meter span { width: .75%; }
.motion-on .diamond-meter span { transition: width .38s ease-out; }
.case-hero-photo .case-photo-credit strong { float: right; color: #174984; }
button.case-hero-photo:hover .case-photo-credit { background: #dceaff; }
.case-links-heading { margin-top: 17px; }
.case-resource-list a > span:last-child { display: grid; gap: 2px; }
.gallery-caption [data-gallery-count] { margin-inline-start: 6px; color: #536981; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case-hero-photo--polaroid > img { object-position: center 45%; }

.window--diamond #diamond-pane-events { container-type: inline-size; }
.window--diamond #diamond-pane-events > h3 + p { max-width: 65ch; }
.window--diamond .diamond-events {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
  align-items: stretch;
  gap: 9px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.window--diamond .diamond-event {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid #a7b7cd;
  background: linear-gradient(#fff, #f1f5fb);
  box-shadow: 1px 1px #edf2fa;
}
.window--diamond .diamond-event > :is(img, figure, picture) {
  min-width: 0;
  border-bottom: 1px solid #a7b7cd;
  background: #eaf0f9;
}
.window--diamond .diamond-event :is(img, picture) { width: 100%; }
.window--diamond .diamond-event img { aspect-ratio: 2; object-fit: cover; background: #25354a; }
.window--diamond .diamond-event figcaption {
  padding: 4px 8px;
  color: #435877;
  font-size: .78rem;
  line-height: 1.3;
}
.window--diamond .diamond-event-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 11px 12px;
}
.window--diamond .diamond-event-copy h4 { margin: 0; font-size: 1.04rem; }
.window--diamond .diamond-event-copy h4 + p { margin-top: 0; }
.window--diamond .diamond-event-copy p { max-width: 54ch; font-size: .88rem; }
.window--diamond .diamond-event-copy .diamond-event-meta { color: #425978; font-size: .79rem; font-weight: 700; }
.window--diamond .diamond-event-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: auto 0 0;
  padding: 3px 0 0;
  list-style: none;
}
.window--diamond .diamond-event-links a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid #839fc7;
  border-radius: 3px;
  background: linear-gradient(#fff, #e1ecfa);
  color: #173b6f;
  box-shadow: inset 1px 1px #fff;
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
.window--diamond .diamond-event-links a:hover { border-color: #5c81b8; background: #dceaff; }

.diamond-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 8px;
  margin: 8px 0 5px;
}
.diamond-video {
  min-width: 0;
  padding: 8px;
  border: 1px solid #a7b7cd;
  background: linear-gradient(#fff, #edf3fb);
}
.diamond-video h5 {
  margin: 0;
  color: #173b6f;
  font-size: 1rem;
  line-height: 1.3;
}
.diamond-video p { margin: 3px 0 8px; font-size: .88rem; }
.diamond-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eaf0f8;
}

@container (min-width: 530px) {
  .window--diamond .diamond-event--featured { grid-column: 1 / -1; }
  .window--diamond .diamond-event--featured:has(> :is(img, figure, picture)) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .window--diamond .diamond-event--featured > :is(img, figure, picture) {
    border-right: 1px solid #a7b7cd;
    border-bottom: 0;
  }
}

.window--creative .creative-library {
  container-type: inline-size;
  min-width: 0;
  border: 1px solid var(--xp-border);
  background: #fff;
  box-shadow: 1px 1px #fff;
}
.window--creative .creative-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 7px;
  border-bottom: 1px solid #a6badb;
  background: linear-gradient(#f7faff, #d9e5f8);
}
.window--creative .creative-switcher :is(button, a) {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border: 1px solid #a2b5d0;
  border-radius: 3px;
  background: linear-gradient(#fff, #ecf2fc);
  color: #173b6f;
  font-size: .92rem;
  line-height: 1.23;
  text-align: left;
  text-decoration: none;
  white-space: normal;
}
.window--creative .creative-switcher :is(button, a):hover {
  border-color: #638cc5;
  background: #e1eeff;
}
.window--creative .creative-switcher :is(button, a):is([aria-pressed="true"], [aria-selected="true"], [aria-current="true"]) {
  border-width: 1px;
  border-color: #1e4d9e;
  background: linear-gradient(#3e6fbd, #2556aa);
  color: #fff;
  box-shadow: inset 0 1px #93b3ea;
}
.window--creative .creative-switcher :is(strong, small) { display: block; }
.window--creative .creative-switcher small { margin-top: 3px; font-size: .79em; }
.window--creative .creative-switcher img {
  flex: none;
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 1px solid #96a9c4;
  background: #fff;
}
.window--creative .creative-feature {
  display: grid;
  grid-template-columns: minmax(0, clamp(150px, 37cqi, 270px)) minmax(0, 1fr);
  align-items: start;
  gap: clamp(11px, 3cqi, 26px);
  padding: clamp(10px, 2.8cqi, 22px);
}
.window--creative .creative-artwork {
  align-self: start;
  min-width: 0;
  padding: 5px;
  border: 1px solid #8da4c4;
  background: #f3f6fc;
  box-shadow: 2px 2px #e4eaf4;
}
.window--creative .creative-artwork img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #101923;
}
.window--creative .creative-details { min-width: 0; }
.window--creative .creative-details h3 {
  font-size: clamp(1.52rem, 5cqi, 2.65rem);
  line-height: 1.08;
  letter-spacing: -.025em;
}
.window--creative .creative-details p { max-width: 52ch; }
.window--creative .creative-details > * + * { margin-top: 10px; }
.window--creative .creative-details .creative-meta {
  margin-top: 5px;
  padding-bottom: 8px;
  border-bottom: 1px solid #d4e0f0;
  color: #496084;
  font-size: .88rem;
  font-weight: 700;
}
.window--creative .creative-result {
  color: #244575;
  font-size: .9rem;
  font-weight: 700;
}
.window--creative .creative-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.window--creative .creative-actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 4px 9px;
  border: 1px solid #6c8cb8;
  border-radius: 3px;
  background: linear-gradient(#fff, #edf3fe 50%, #dce7f7);
  color: #173b6f;
  box-shadow: inset 1px 1px #fff;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.window--creative .creative-actions :is(a, button):hover { background: #dceaff; }
.window--creative .creative-actions button[aria-expanded="true"] {
  background: #d3e4fb;
  box-shadow: inset 1px 1px #91aad1;
}
.window--creative .creative-player {
  min-width: 0;
  margin: 0 clamp(10px, 2.8cqi, 22px) clamp(10px, 2.8cqi, 22px);
  padding: 6px;
  border: 1px solid #92a9c8;
  background: #eaf1fc;
  overflow-x: auto;
}
.window--creative .creative-player iframe { display: block; width: 100%; min-width: 280px; border: 0; }
.motion-on .window--creative .creative-feature.is-changing { animation: open-menu .22s ease-out both; }

.window--creative .creative-covers {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(8px, 2cqi, 16px);
}
.window--creative .creative-cover {
  display: grid;
  grid-template-columns: minmax(0, clamp(76px, 26cqi, 152px)) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 2cqi, 16px);
  padding: clamp(7px, 1.75cqi, 14px);
  border: 1px solid #adc2df;
  background: #f6f9ff;
}
.window--creative .creative-cover .creative-artwork img { object-fit: cover; }
.window--creative .creative-cover h3 { font-size: clamp(1.05rem, 4.5cqi, 1.6rem); }
.window--creative .creative-cover .creative-actions { display: flex; }
.window--creative .creative-cover .creative-player {
  grid-column: 1 / -1;
  margin: 0;
}
.window--creative .creative-cover .creative-player iframe { min-width: 0; }

@media (min-width: 761px) and (not ((orientation: landscape) and (max-height: 500px) and (hover: none))) {
  .desktop-ready .app-window.window--creative:not(.is-maximized) { width: min(calc(100% - 16px), 850px); }
}

@container (max-width: 460px) {
  .window--creative .creative-switcher :is(button, a) {
    flex-direction: column;
    justify-content: start;
    gap: 4px;
    padding-inline: 3px;
    text-align: center;
  }
  .window--creative .creative-feature { grid-template-columns: 1fr; }
  .window--creative .creative-artwork { width: min(100%, 240px); justify-self: center; }
}