:root { color-scheme: dark light; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.beautyWorkbench {
  margin: 0;
  background: #140b12;
  color: #fff8fc;
  font-family: "Cambria", "Georgia", serif;
  line-height: 1.6;
}
.chrome {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px max(18px, calc((100% - 1180px) / 2));
  background: rgba(20, 11, 18, .88);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.mark, nav, .hero, .permission-ledger, .download-strip { display: flex; align-items: center; }
.mark, nav a, .primary { text-decoration: none; }
.mark { gap: 10px; color: #fff; font-weight: 900; }
.mark img { width: 38px; height: 38px; border-radius: 12px; }
nav { gap: 14px; flex-wrap: wrap; }
nav a { color: #f9a8d4; font-weight: 800; }
main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 58px; }
section {
  margin: 24px 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  padding: clamp(24px, 4vw, 46px);
  background: #20111d;
  box-shadow: 0 24px 80px rgba(0,0,0,.24);
}
.hero {
  min-height: 560px;
  justify-content: space-between;
  gap: clamp(26px, 5vw, 70px);
  background:
    radial-gradient(circle at 80% 24%, rgba(249,168,212,.26), transparent 240px),
    linear-gradient(135deg, #2b1023, #130912 62%, #35152b);
}
.headline { max-width: 760px; }
.eyebrow { margin: 0 0 10px; color: #f9a8d4; font-size: 12px; font-weight: 900; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 16px; font-size: clamp(44px, 8vw, 92px); line-height: .92; letter-spacing: 0; }
h2 { margin-bottom: 12px; font-size: clamp(28px, 4vw, 46px); line-height: 1.06; letter-spacing: 0; }
p { color: #ead5e2; }
.primary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  border-radius: 8px;
  padding: 0 22px;
  color: #280f21;
  background: #f9a8d4;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 900;
  white-space: nowrap;
}
.version-slab {
  flex: 0 0 300px;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  padding: 22px;
}
.version-slab img { width: 92px; height: 92px; border-radius: 24px; }
.version-slab strong { font-size: 46px; line-height: 1; }
.version-slab span { overflow-wrap: anywhere; color: #fff; }
.version-slab small { color: #f3bfdc; }
.permission-ledger { align-items: flex-start; gap: 34px; }
.permission-ledger > div { flex: 1; }
.permission-ledger ol {
  flex: 1;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.permission-ledger li {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr);
  gap: 10px;
  border-radius: 8px;
  padding: 14px;
  background: #fff8fc;
  color: #2b1023;
}
.permission-ledger b { color: #9d174d; }
.flow-grid, .fixes, .faq-grid { display: grid; gap: 16px; }
.flow-grid, .fixes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
article, details {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  padding: 18px;
}
.screen-wall {
  display: grid;
  grid-template-columns: minmax(240px, .82fr) minmax(220px, 1fr) minmax(180px, .7fr);
  gap: 16px;
  align-items: stretch;
}
.screen-copy { grid-row: span 2; align-self: center; }
figure { margin: 0; overflow: hidden; border-radius: 8px; background: #09060a; }
figure.large { grid-row: span 2; }
figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
figcaption { padding: 11px 13px; color: #fff; font-family: "Trebuchet MS", sans-serif; font-size: 13px; font-weight: 800; }
.release dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.release div {
  border-radius: 8px;
  padding: 14px;
  background: #fff8fc;
  color: #2b1023;
}
dt { color: #9d174d; font-size: 12px; font-weight: 900; text-transform: uppercase; }
dd { margin: 4px 0 0; font-weight: 900; overflow-wrap: anywhere; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border-radius: 8px;
  padding: 0 12px;
  background: #f9a8d4;
  color: #2b1023;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: 900;
}
.faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
summary { cursor: pointer; color: #fff; font-weight: 900; }
details p { margin: 10px 0 0; }
.download-strip { justify-content: space-between; gap: 24px; background: #fff8fc; color: #2b1023; }
.download-strip h2, .download-strip p { color: #2b1023; }
.download-strip .primary { margin: 0; color: #fff; background: #9d174d; }
footer { width: min(1180px, calc(100% - 32px)); margin: 0 auto 36px; color: #f3bfdc; }
@media (max-width: 900px) {
  .chrome, .hero, .permission-ledger, .download-strip { align-items: stretch; flex-direction: column; }
  .version-slab { flex-basis: auto; }
  .permission-ledger li, .screen-wall, .release dl, .flow-grid, .fixes, .steps, .faq-grid { grid-template-columns: 1fr; }
  .screen-copy, figure.large { grid-row: auto; }
  h1 { font-size: clamp(38px, 13vw, 64px); }
  .primary { width: 100%; }
}