:root {
  color-scheme: dark;
  --bg: #101315;
  --panel: #1b1e23;
  --text: #f6f5fa;
  --muted: #a0a1ac;
  --purple: #7959ff;
  --border: #292d33;
  --rail: 150px;
  --header: 64px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: radial-gradient(ellipse at 80% 35%,#191c20 0,transparent 60%),var(--bg);
  font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  color: var(--text);
  font-size: 14px;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
}
button,a {
  touch-action: manipulation;
}
button:focus-visible,a:focus-visible {
  outline: 2px solid #ad9aff;
  outline-offset: 5px;
}
h1,h2,p {
  margin: 0;
}
button:disabled {
  opacity: .5;
  cursor: wait;
}
[hidden] {
  display: none!important;
}
.global-header {
  height: var(--header);
  display: flex;
  align-items: center;
  padding: 0 26px;
  gap: 24px;
  border-bottom: 1px solid #282b30;
  background: linear-gradient(110deg,#191b20,#16191b);
  position: sticky;
  top: 0;
  z-index: 4;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand strong {
  font-size: 21px;
  letter-spacing: 1px;
  font-weight: 650;
}
.brand small {
  display: block;
  color: #a4a6b2;
  font-size: 11px;
  letter-spacing: 3px;
  margin-top: 2px;
}
.products {
  display: flex;
  align-items: stretch;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 64px;
  gap: 34px;
}
.products>a {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  white-space: nowrap;
}
.products>a.active {
  color: #beaaff;
  font-weight: 600;
}
.products>a.active:after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 4px;
  left: 0;
  right: 0;
  background: var(--purple);
  border-radius: 5px;
}
.products span {
  font-size: 11px;
  font-weight: 400;
  padding: 4px 10px;
  border-radius: 4px;
  background: #363743;
  color: #bdaaff;
}
.account-actions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
.account-actions>a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon {
  width: 19px;
  height: 19px;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.primary {
  background: linear-gradient(110deg,#805dff,#5f3ef7);
  color: white;
  border: 0;
  border-radius: 22px;
  padding: 11px 29px;
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 20px;
}
.primary:hover {
  filter: brightness(1.12);
}
#login-button {
  border-radius: 10px;
  min-width: 152px;
  padding: 9px 19px;
}
.coin {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8bc8a;
  color: #754b2e;
  border: 3px solid #ffe8c7;
  font-weight: 800;
}
.sidebar {
  position: fixed;
  top: var(--header);
  bottom: 0;
  left: 0;
  width: 150px;
  min-height: 0;
  border-right: 1px solid #24282e;
  background: linear-gradient(135deg,#1b1e23,#101518);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 0;
}
.sidebar nav a,
.sidebar .creation-tools>summary {
  display: flex;
  align-items: center;
  gap: 15px;
  height: 58px;
  padding-left: 29px;
  color: #c2c3cc;
  border-left: 3px solid transparent;
}
.sidebar nav a.active {
  background: linear-gradient(90deg,#373144,#22242e);
  color: #a18aff;
  border-left-color: #8868ff;
}
.sidebar nav .icon {
  width: 20px;
  height: 20px;
}
.side-signature {
  padding: 20px;
  color: #94969e;
  font-family: "Kaiti SC",KaiTi,serif;
  line-height: 1.9;
  letter-spacing: 2px;
  transform: rotate(-8deg);
}
.side-signature span {
  display: block;
  transform: rotate(8deg);
  font: 10px/1.6 sans-serif;
  letter-spacing: 1px;
  margin-top: 30px;
  color: #797c86;
}
#main {
  margin-left: 150px;
  padding: 0 22px 38px 23px;
  min-height: 886px;
}
.account-note {
  height: 27px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: #b8bbc5;
}
.account-note .icon {
  width: 12px;
  height: 12px;
}
.analysis-entries {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: 268px;
  margin-bottom: 24px;
}
.analysis-entry {
  position: relative;
  isolation: isolate;
  border-radius: 7px;
  overflow: hidden;
  background: #222631;
  border: 1px solid #2b2e38;
}
.analysis-entry>img {
  position: absolute;
  z-index: -2;
  right: 0;
  top: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 36%;
}
.analysis-entry:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,#171c25 0%,#1c2230e8 30%,#242a3420 70%);
}
.beauty-entry {
  background: #26232f;
}
.beauty-entry:after {
  background: linear-gradient(90deg,#23202d 0%,#2b253ad9 35%,#332c4420 75%);
}
.entry-copy {
  padding: 26px 31px;
}
.overline {
  font-size: 10px;
  letter-spacing: 2.6px;
  color: #bca8ff;
  display: block;
  margin-bottom: 12px;
}
.entry-copy h1,.entry-copy h2 {
  font-size: 29px;
  line-height: 1.3;
  letter-spacing: 1px;
  font-weight: 650;
}
.entry-copy p {
  font-size: 13px;
  line-height: 1.75;
  color: #d0cfd9;
  margin: 13px 0 19px;
}
.entry-copy .primary {
  font-size: 14px;
  padding: 9px 22px;
}
.beauty-caption {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-family: "Kaiti SC",serif;
  color: #e1d9f3;
  letter-spacing: 3px;
  font-size: 13px;
}
.home-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 278px;
  gap: 23px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}
.feature-card {
  height: 260px;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #282c33;
  display: block;
}
.sprite {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}
.sprite img {
  position: absolute;
  max-width: none;
}
.feature-card:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,#171b2460,transparent 62%);
}
.feature-copy {
  padding: 25px 20px;
}
.feature-card h2 {
  font-size: 24px;
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: .5px;
  font-weight: 600;
}
.feature-card p {
  color: #dddde3;
  font-size: 13px;
  line-height: 1.55;
  max-width: 156px;
}
.round-arrow {
  border: 1px solid #e2e1e7a8;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 300;
  margin-top: 17px;
}
.feature-card:hover .round-arrow {
  background: #7959ff;
  border-color: #9b81ff;
}
.feature-card .caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  color: #dbdce1;
  font-size: 12px;
}
.recent-panel {
  height: 530px;
  border: 1px solid #252931;
  border-radius: 8px;
  background: linear-gradient(125deg,#1c2025,#15191c);
  padding: 20px;
}
.recent-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.recent-heading h2 {
  font-size: 16px;
}
.recent-heading a {
  font-size: 11px;
  color: #a0a2ad;
}
.recent-item {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}
.recent-thumb {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 111px;
  height: 82px;
  border-radius: 6px;
  flex-shrink: 0;
}
.recent-item strong {
  font-size: 13px;
  font-weight: 400;
}
.recent-item small {
  display: block;
  font-size: 11px;
  color: #9195a1;
  margin-top: 8px;
}
.recent-signature {
  text-align: right;
  padding-top: 15px;
  font-family: "Kaiti SC",KaiTi,serif;
  font-size: 21px;
  line-height: 1.6;
  letter-spacing: 3px;
  color: #b4b6bf;
  transform: rotate(-10deg);
}
.recent-empty {
  color: #b2b3c0;
  font-size: 13px;
  line-height: 1.8;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.recent-empty .primary {
  margin-top: 22px;
  font-size: 13px;
}
.site-footer {
  border-top: 1px solid #272b30;
  padding: 27px 26px 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  color: #8c8f99;
  font-size: 12px;
  min-height: 74px;
}
.legal {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 10px;
  opacity: .8;
}
.feature-directory {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  line-height: 1.6;
}
.feature-directory a { color: inherit; }
.feature-directory a:hover { color: #d7c3ff; }
@media (min-width: 850px) { .site-footer { margin-left: var(--rail); } }
@media (min-width: 621px) and (max-width: 849px) { .site-footer { margin-left: 200px; } }
.detail-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0 28px;
  gap: 20px;
}
.breadcrumb {
  font-size: 12px;
  color: #9b99ad;
  margin-bottom: 14px;
}
.detail-heading h1 {
  font-size: 30px;
  line-height: 1.4;
}
.detail-heading p {
  margin-top: 10px;
  color: #b1b0bf;
  line-height: 1.7;
}
.quiet-button {
  padding: 11px 18px;
  border: 1px solid #44414f;
  border-radius: 8px;
  display: inline-block;
  background: transparent;
  color: #d8d1e8;
  white-space: nowrap;
}
.workbench {
  border: 1px solid #333340;
  border-radius: 14px;
  overflow: hidden;
  background: #1c1f25;
  min-height: 700px;
}
#workbench-frame {
  border: 0;
  width: 100%;
  height: calc(100vh - 250px);
  min-height: 760px;
  display: block;
}
#frame-loading {
  padding: 90px;
  text-align: center;
  color: #b7b2c9;
}
#avatar-view {
  text-align: center;
  padding: 85px 20px;
  min-height: 800px;
}
.avatar-orbit {
  width: 210px;
  height: 210px;
  border: 1px solid #755bd487;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 45px;
  background: radial-gradient(circle,#59419450,transparent 72%);
  box-shadow: 0 0 60px #6046a520;
}
.avatar-orbit span {
  font-size: 70px;
  letter-spacing: -8px;
  color: #b8a3ff;
  font-weight: 200;
}
#avatar-view h1 {
  font-size: 36px;
  margin: 20px 0;
}
#avatar-view p {
  line-height: 1.9;
  color: #b1adbe;
}
#avatar-view .primary {
  display: flex;
  width: max-content;
  margin: 30px auto;
}
.coming-label {
  display: inline-block;
  padding: 7px 17px;
  border-radius: 8px;
  background: #292435;
  color: #b5a1de;
  margin-top: 22px;
}
dialog {
  background: #1d1d26;
  color: #f3efff;
  border: 1px solid #3a3549;
  border-radius: 20px;
  padding: 38px;
  width: 430px;
  max-width: calc(100vw - 32px);
  text-align: center;
}
dialog::backdrop {
  background: #070912b8;
  backdrop-filter: blur(7px);
}
.dialog-close {
  position: absolute;
  right: 14px;
  top: 10px;
  background: none;
  font-size: 28px;
  color: #a6a0b3;
}
.login-emblem {
  color: #a18aff;
  margin: 10px 0 17px;
}
.login-emblem .icon {
  width: 32px;
  height: 32px;
}
dialog h2 {
  font-size: 25px;
  margin-bottom: 10px;
}
dialog p {
  color: #aaa5bb;
  font-size: 13px;
  line-height: 1.8;
}
.login-code {
  width: 224px;
  height: 224px;
  margin: 25px auto 15px;
  background: #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  padding: 12px;
  color: #514764;
}
.login-code img {
  width: 200px;
  height: 200px;
  object-fit: contain;
}
.login-foot {
  padding-top: 22px;
  font-size: 11px;
  color: #858094;
}
#login-state {
  margin-bottom: 16px;
}
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: #292337;
  border: 1px solid #766191;
  padding: 16px 26px;
  border-radius: 12px;
  z-index: 20;
  max-width: 90vw;
}
@media(min-width:1700px) {
  .analysis-entries {
    height: 320px;
  }
  .feature-card {
    height: 310px;
  }
  .recent-panel {
    height: 630px;
  }
  .entry-copy {
    padding: 40px;
  }
  .entry-copy h1,.entry-copy h2 {
    font-size: 36px;
  }
  .home-grid {
    grid-template-columns: minmax(0,1fr) 300px;
  }
}
@media(max-width:1200px) {
  .products {
    position: static;
    transform: none;
    margin-left: 25px;
    gap: 20px;
  }
  .account-actions {
    gap: 16px;
  }
  .account-actions>a {
    font-size: 0;
    gap: 0;
  }
  .brand strong {
    font-size: 17px;
  }
  .brand small {
    font-size: 9px;
  }
  .home-grid {
    grid-template-columns: minmax(0,1fr) 230px;
    gap: 14px;
  }
  .recent-panel {
    padding: 15px;
  }
  .recent-thumb {
    width: 85px;
  }
  .feature-card h2 {
    font-size: 20px;
  }
  .feature-copy {
    padding: 22px 15px;
  }
  .entry-copy {
    padding: 25px 20px;
  }
  .entry-copy h1,.entry-copy h2 {
    font-size: 25px;
  }
  .sidebar {
    width: 120px;
  }
  .sidebar nav a,
.sidebar .creation-tools>summary {
    padding-left: 15px;
    gap: 10px;
  }
  #main {
    margin-left: 120px;
  }
  .feature-card .caption {
    left: 15px;
    font-size: 11px;
  }
}
@media(max-width:950px) {
  .brand small {
    display: none;
  }
  .global-header {
    padding: 0 15px;
    gap: 8px;
  }
  .products {
    gap: 15px;
    margin-left: 10px;
    font-size: 13px;
  }
  .products span {
    display: none;
  }
  #login-button {
    min-width: 0;
    padding: 9px 12px;
    font-size: 12px;
  }
  .account-actions {
    gap: 10px;
  }
  .recent-panel {
    display: none;
  }
  .home-grid {
    grid-template-columns: 1fr;
  }
  .sidebar {
    width: 76px;
  }
  .sidebar nav a,
.sidebar .creation-tools>summary {
    font-size: 0;
    padding-left: 25px;
    height: 65px;
  }
  .sidebar .side-signature {
    display: none;
  }
  #main {
    margin-left: 76px;
    padding: 0 16px 30px;
  }
  .entry-copy h1,.entry-copy h2 {
    font-size: 23px;
  }
  .entry-copy p {
    font-size: 12px;
  }
  .feature-card {
    height: 270px;
  }
  .detail-heading {
    align-items: flex-start;
  }
  .detail-heading h1 {
    font-size: 25px;
  }
}
@media(max-width:620px) {
  .global-header {
    height: auto;
    min-height: 100px;
    flex-wrap: wrap;
    padding: 12px 16px;
  }
  .brand img {
    width: 30px;
    height: 30px;
  }
  .brand strong {
    font-size: 16px;
  }
  .account-actions>a {
    display: none;
  }
  .products {
    order: 3;
    width: 100%;
    height: 37px;
    justify-content: center;
    margin: 0;
    gap: 40px;
  }
  .products span {
    display: block;
    font-size: 10px;
  }
  .account-actions {
    margin-left: auto;
  }
  .sidebar {
    display: none;
  }
  #main {
    margin-left: 0;
    padding: 0 14px 28px;
    min-height: 0;
  }
  .account-note {
    font-size: 9px;
  }
  .analysis-entries {
    grid-template-columns: 1fr;
    height: auto;
    gap: 12px;
    margin-bottom: 14px;
  }
  .analysis-entry {
    height: 245px;
  }
  .entry-copy {
    padding: 24px;
  }
  .entry-copy h1,.entry-copy h2 {
    font-size: 26px;
  }
  .entry-copy p {
    margin: 10px 0 15px;
  }
  .feature-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }
  .feature-card {
    height: 230px;
  }
  .feature-copy {
    padding: 18px 12px;
  }
  .feature-card h2 {
    font-size: 19px;
  }
  .feature-card p {
    font-size: 11px;
    max-width: 120px;
  }
  .feature-card .caption {
    font-size: 10px;
    left: 12px;
    bottom: 14px;
  }
  .round-arrow {
    width: 29px;
    height: 29px;
  }
  .site-footer {
    padding: 22px 16px;
    gap: 12px;
  }
  .site-footer>span:nth-child(2) {
    display: none;
  }
  .legal {
    flex-wrap: wrap;
    gap: 8px;
    font-size: 9px;
  }
  .detail-heading {
    padding: 15px 0 22px;
  }
  .detail-heading .quiet-button {
    font-size: 11px;
    padding: 8px;
  }
  .detail-heading p {
    font-size: 12px;
  }
  .workbench {
    border-radius: 10px;
  }
  #workbench-frame {
    min-height: 780px;
    height: calc(100svh - 180px);
  }
  #avatar-view {
    padding: 55px 10px;
    min-height: 650px;
  }
  #avatar-view h1 {
    font-size: 25px;
  }
}
.feature-card[href="#face"]:after {
  background: linear-gradient(90deg,#141820db,#171b2460 60%,transparent);
}
.side-signature {
  font-size: 12px;
  letter-spacing: 1px;
  padding: 16px;
}
.feature-card:nth-child(-n+3) {
  height: 258px;
}
.feature-card:nth-child(n+4) {
  height: 262px;
}
@media(min-width:1201px) and (max-width:1699px) {
  #main {
    padding-right: 20px;
    padding-bottom: 37px;
  }
  .analysis-entries {
    margin-right: 1px;
  }
  .home-grid {
    margin-left: 1px;
  }
  .feature-grid {
    gap: 10px 9px;
  }
  .products {
    font-size: 16px;
    gap: 42px;
  }
  .site-footer {
    row-gap: 4px;
  }
}
/* Retain the reference's original portrait pixels where no baked typography exists. */
.original-portrait {
  position: absolute;
  inset: 0;
  z-index: -1;
  mask-image: linear-gradient(90deg,transparent 47%,#000 63%);
  pointer-events: none;
}
.original-portrait .sprite {
  z-index: 0;
}
.feature-card:not([href="#face"]):after {
  background: none;
}
@media(max-width:1200px){
  .feature-card .sprite { width:341px; height:260px; left:50%; top:50%; right:auto; bottom:auto; transform:translate(-58%,-50%); }
}
/* Extended product library and desktop workspace navigation. */
.extended-tools{margin:44px 0 24px;padding-top:28px;border-top:1px solid #303038}.tools-heading{display:flex;align-items:center;justify-content:space-between;gap:24px}.tools-heading h2{font-size:25px;margin-top:10px}.tools-heading input{width:260px;padding:12px 16px;background:#202129;border:1px solid #3b3546;border-radius:10px;color:#f3edf8;font:inherit}.tool-filters,.work-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.tool-filters button,.work-tabs a{padding:10px 20px;border:1px solid transparent;border-radius:8px;background:transparent;color:#a8a2b6;font:inherit;cursor:pointer}.tool-filters button.active,.work-tabs a.active{background:#352b49;color:#d5bcff;border-color:#554169}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.tool-card{display:flex;align-items:flex-start;gap:16px;position:relative;padding:24px;background:linear-gradient(120deg,#22222c,#1b1e24);border:1px solid #36323e;border-radius:12px;transition:border-color .18s,transform .18s}.tool-card:hover{border-color:#9873d8;transform:translateY(-2px)}.tool-symbol{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:12px;background:#373047;color:#c4a6ff;font-size:28px}.tool-card h3{font-size:18px;margin:7px 0 10px}.tool-card small{font-size:11px;color:#a68fca}.tool-card p{font-size:13px;color:#a6a1b2;line-height:1.8;max-width:240px}.tool-arrow{position:absolute;right:18px;top:22px;color:#ad91d2}.tool-empty{color:#aaa;padding:40px;text-align:center}.work-tabs{border-bottom:1px solid #38313f;padding-bottom:16px;margin:0 0 20px}.detail-heading{padding-top:14px;padding-bottom:22px;position:relative}.detail-heading .web-back{margin-left:auto}.detail-heading:has(.web-back:not([hidden]))>a{display:none}.workbench{background:#15171c;border-color:#302e3a;min-height:520px}#workbench-frame{min-height:680px;height:calc(100vh - 220px)}.sidebar{height:calc(100% - var(--header))}.recent-panel{align-self:start}
@media(max-width:1100px){.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-card{padding:18px}.tool-symbol{width:36px;height:36px}}
@media(max-width:650px){.tools-heading{align-items:flex-start;flex-direction:column}.tools-heading input{width:100%}.tool-grid{grid-template-columns:1fr}.tool-filters{gap:4px}.tool-filters button{padding:8px 12px}.work-tabs{gap:4px}.work-tabs a{padding:9px 12px}}
/* Additional homepage entries continue the original three-column art cards. */
.feature-grid{align-content:start;grid-auto-rows:max-content}.home-photo-card .home-card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-2}.feature-card.home-photo-card:after{background:linear-gradient(90deg,rgba(13,16,23,.85),rgba(13,16,23,.36) 53%,rgba(13,16,23,.04)),linear-gradient(0deg,rgba(13,16,23,.55),transparent 40%)}.home-photo-card .feature-copy{max-width:78%}.home-photo-card .caption{font-size:12px}.home-grid{align-items:start}.recent-panel{height:530px;box-sizing:border-box}
body:has(#workbench-frame[src*="style-board"]) .detail-heading{padding:8px 0 16px}body:has(#workbench-frame[src*="style-board"]) .detail-heading h1{font-size:26px}body:has(#workbench-frame[src*="style-board"]) .detail-heading p{margin-top:6px}body:has(#workbench-frame[src*="style-board"]) .workbench{min-height:0}body:has(#workbench-frame[src*="style-board"]) #workbench-frame{height:calc(100dvh - 238px);min-height:480px}
/* Full-width analysis banners: text overlays a single edge-to-edge scene. */
.analysis-entries{height:auto;min-height:0;gap:20px;margin-bottom:24px}
.analysis-entry{display:block;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:2.3/1;height:auto;min-height:0;border:1px solid #303039;border-radius:9px;background:#1b222c}
.analysis-entry>.entry-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;transform:none;border-radius:0}
.analysis-entry:after{display:block;content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#10141cbe 0%,#10141c40 35%,transparent 57%)}
.analysis-entry>.entry-copy{padding:28px;height:100%;width:43%;display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:1}
.analysis-entry .overline{font-size:9px;letter-spacing:1.6px;color:#c1c1cf}
.analysis-entry h1,.analysis-entry h2{font-size:30px;line-height:1.25;margin:15px 0 14px;color:white}
.analysis-entry p{font-size:13px;line-height:1.8;color:#e0dfe9;margin:0}
.analysis-entry .primary{margin-top:auto;display:inline-flex;align-items:center;gap:20px;border-radius:999px;padding:11px 20px;font-size:12px;background:linear-gradient(110deg,#8a60fc,#6942eb);color:#fff}
.analysis-entry:hover{border-color:#9373cf}
@media(max-width:1200px){.analysis-entry>.entry-copy{padding:20px}.analysis-entry h1,.analysis-entry h2{font-size:24px;margin:10px 0}.analysis-entry p{font-size:11px}.analysis-entry .overline{font-size:8px;letter-spacing:0}.analysis-entry .primary{padding:9px 14px;font-size:11px}}
@media(max-width:800px){.analysis-entries{grid-template-columns:1fr}.analysis-entry{aspect-ratio:2.3/1}}
/* Restore the approved full-bleed card composition. */
.feature-card.distinct-card .home-card-art{inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;background:none}
.feature-card.distinct-card .feature-copy{padding:24px 22px!important;max-width:76%}
.feature-card.distinct-card .feature-copy h2{font-size:24px;margin:0 0 12px}
.feature-card.distinct-card .feature-copy p{display:block;font-size:13px;line-height:1.7;color:#e0dfe3;margin:0}
.feature-card.distinct-card .round-arrow{position:static;width:32px;height:32px;margin-top:18px;font-size:27px}
.feature-card.distinct-card .caption{bottom:20px;left:22px;font-size:12px}
.feature-card.distinct-card:after{display:block;background:linear-gradient(90deg,rgba(12,15,21,.68),rgba(12,15,21,.27) 55%,rgba(12,15,21,.02)),linear-gradient(0deg,rgba(12,15,21,.42),transparent 35%)}
.distinct-card[href="#color"]:before{display:none}
.sidebar .creation-subnav{padding:4px 0 12px;border-bottom:1px solid #2b2b34;margin-bottom:12px}.sidebar .creation-subnav a{height:38px;font-size:12px;padding-left:42px;border-left:3px solid transparent}.sidebar .creation-subnav a.active{color:#b99bff;background:#272333;border-left-color:#8157ff}.sidebar{overflow-y:auto}.side-signature{position:static;margin:38px 18px 20px}.detail-heading{padding-bottom:16px}.detail-heading .breadcrumb{display:none}.detail-heading h1{font-size:25px}.detail-heading p{font-size:12px;margin-top:8px}body:has(.creation-subnav a.active[href="#hair"]) .workbench,body:has(.creation-subnav a.active[href="#makeup"]) .workbench{border:0;background:transparent}#workbench-frame{width:100%}

.feature-card.distinct-card{height:auto;aspect-ratio:4/3}

.feature-card .entry-action{display:inline-flex;align-items:center;justify-content:center;gap:12px;margin-top:18px;min-height:34px;padding:7px 15px;border:1px solid #bda3ff66;border-radius:999px;background:linear-gradient(110deg,#8a60fc,#6942eb);box-shadow:0 4px 16px #35206b26;color:#fff;font-size:12px;font-weight:550;line-height:1.3;white-space:nowrap;transition:filter .15s,transform .15s}
.feature-card:hover .entry-action{filter:brightness(1.12);transform:translateX(2px)}
.feature-card:focus-visible{outline:2px solid #bb9bff;outline-offset:3px}
@media(max-width:1350px){.home-grid{grid-template-columns:minmax(0,1fr)}.recent-panel{display:none}}
@media(max-width:1100px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}}
@media(max-width:650px){.feature-grid{grid-template-columns:minmax(0,1fr)!important}.feature-card.distinct-card .feature-copy{padding:22px!important}.analysis-entry>.entry-copy{padding:18px}.analysis-entry h1,.analysis-entry h2{font-size:22px}.analysis-entry .overline{display:none}}

.brand strong{font-size:23px;letter-spacing:.8px}.brand small{font-size:10px;letter-spacing:1px;margin-top:5px;color:#aaa5b8}
/* Desktop navigation: spacious parent categories with indented tools. */
.sidebar .creation-subnav{margin:12px 14px 24px;padding:0 0 20px;border:0;border-bottom:1px solid #2c2d36}
.nav-category{margin:6px 0}
.nav-category summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:0 16px;list-style:none;cursor:pointer;font-size:15px;font-weight:600;white-space:nowrap;color:#bcb8c9;border:1px solid transparent;border-radius:10px;transition:background .16s,color .16s}
.nav-category summary::-webkit-details-marker{display:none}
.nav-category summary:hover{background:#25252f;color:#f3edff}
.nav-category[open]>summary{background:#282431;border-color:#3b324b;color:#e0cffb}
.nav-chevron{width:16px;flex:none;text-align:center;font-size:23px;font-weight:400;line-height:1;transition:transform .16s;color:#a699bc}
.nav-category[open] .nav-chevron{transform:rotate(90deg)}
.nav-category-links{margin:8px 0 12px 22px;padding:0 0 0 12px;border-left:1px solid #3d354a}
.sidebar .nav-category-links a{height:42px;margin:4px 0;padding:0 14px;gap:0;border:1px solid transparent;border-radius:8px;color:#b4afbf;font-size:14px;font-weight:400;white-space:nowrap;transition:background .16s,color .16s}
.sidebar .nav-category-links a:hover{background:#25232e;color:#f1eaff}
.sidebar .nav-category-links a.active{background:#352942;border-color:#60467d;color:#e0c9ff;box-shadow:inset 3px 0 #a877f2;font-weight:600}
.nav-category summary:focus-visible,.sidebar .nav-category-links a:focus-visible{outline:2px solid #bb97f7;outline-offset:2px}
@media(min-width:850px){
 :root{--rail:240px}
 .sidebar{width:var(--rail);min-height:0;padding:24px 0;scrollbar-width:thin;scrollbar-color:#3f3b49 transparent}
 #main{margin-left:var(--rail)}
 .sidebar nav>a,.sidebar .creation-tools>summary{height:54px;padding-left:28px;font-size:16px;gap:14px}
 .sidebar nav>a:first-child{font-size:18px;font-weight:600;margin-bottom:14px}
 .sidebar nav .icon{width:22px;height:22px}
}
@media(min-width:1600px){:root{--rail:264px}.nav-category summary{font-size:16px;min-height:52px}.sidebar .nav-category-links a{font-size:15px;height:44px}}
@media(min-width:621px) and (max-width:849px){.sidebar{width:200px}#main{margin-left:200px}.sidebar nav>a,.sidebar .creation-tools>summary{font-size:14px;padding-left:22px}.nav-category summary{font-size:14px;padding:0 10px}.sidebar .nav-category-links a{font-size:13px;padding:0 8px}.nav-category-links{margin-left:14px;padding-left:8px}}

/* Full-width creative entry gallery, with a shared text/action rhythm. */
#home-view .home-grid{display:block;margin:0}
#home-view .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#home-view .feature-card.distinct-card{aspect-ratio:3/2;height:auto;min-height:252px;border:1px solid #686071;border-radius:12px;transition:border-color .18s,box-shadow .18s}
#home-view .feature-card.distinct-card:hover{border-color:#b49bdc;box-shadow:0 0 0 1px #b49bdc55,0 8px 24px #0003}
#home-view .feature-card.distinct-card .feature-copy{display:flex;flex-direction:column;align-items:flex-start;height:100%;max-width:100%;padding:24px!important}
#home-view .feature-card.distinct-card .feature-copy h2{font-size:clamp(22px,1.55vw,30px);margin:0 0 clamp(20px,1.4vw,28px)}
#home-view .feature-card.distinct-card .feature-copy p{max-width:58%;min-height:3.4em;font-size:13px;line-height:1.7}
#home-view .feature-card.distinct-card .caption{position:static;margin-top:auto;padding-top:16px;font-size:12px;line-height:1.5;color:#e2dce9}
#home-view .entry-action{margin-top:clamp(24px,1.8vw,34px);flex-shrink:0;padding:9px 17px;min-height:36px}
#home-view .analysis-entry{border:1px solid #686071}
#home-view .analysis-entry:hover{border-color:#b49bdc}
@media(min-width:1800px){#home-view .feature-card.distinct-card .feature-copy{padding:30px!important}#home-view .feature-card.distinct-card .feature-copy p{font-size:15px}#home-view .feature-card.distinct-card .caption{font-size:13px}#home-view .entry-action{font-size:14px}}
@media(max-width:1100px){#home-view .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#home-view .feature-card.distinct-card .feature-copy{padding:20px!important}}
@media(max-width:650px){#home-view .feature-grid{grid-template-columns:1fr}#home-view .feature-card.distinct-card{min-height:260px}}

.home-category{margin:0 0 34px}
.home-category-title{display:flex;align-items:center;gap:12px;margin:4px 0 18px;font-size:21px;font-weight:600;color:#eee8f6;letter-spacing:.4px}
.home-category-title:before{content:'';width:4px;height:20px;border-radius:3px;background:#a881f2}
#home-view .distinct-card[href="#face"] .home-card-art,#home-view .distinct-card[href="#beauty"] .home-card-art{object-position:right center!important}

.feature-card.distinct-card:is([href="#face"],[href="#beauty"]) .feature-copy{max-width:45%;box-sizing:border-box;padding-right:0!important}
.creation-tools>summary{padding-right:26px;cursor:pointer;font-weight:400;list-style:none}
.creation-tools>summary::-webkit-details-marker{display:none}
.creation-tools>summary>.nav-chevron{margin-left:auto}
.creation-tools[open]>summary>.nav-chevron{transform:rotate(90deg)}
/* Creation tools is level one; category groups and entries step inward. */
.sidebar .creation-tools .creation-subnav{margin:0 16px 20px 46px;padding:4px 0 8px 12px;border-bottom:0;border-left:1px solid #393340}
.creation-tools .nav-category{margin:2px 0}
.creation-tools .nav-category>summary{min-height:44px;padding:0 12px 0 22px;font-size:14px;font-weight:400;gap:8px;border-radius:8px;color:#b4afc0}
.creation-tools .nav-category[open]>summary{color:#d8c6f2;background:#25212d;border-color:#383044}
.creation-tools .nav-category-links{margin:4px 0 10px 22px;padding-left:8px}
.sidebar .creation-tools .nav-category-links a{font-size:13px;height:38px;padding:0 8px}
@media(min-width:1600px){.creation-tools .nav-category>summary{font-size:15px;min-height:46px}.sidebar .creation-tools .nav-category-links a{font-size:14px;height:40px}}
@media(min-width:621px) and (max-width:849px){.sidebar .creation-tools .creation-subnav{margin-left:34px;margin-right:10px;padding-left:8px}.creation-tools .nav-category>summary{padding-left:12px}.creation-tools .nav-category-links{margin-left:12px}}

.creation-tools .nav-category>summary{padding-left:12px;justify-content:flex-start}
.creation-tools .nav-category-icon{width:16px;height:16px;flex:none;color:#aa98c4}
.creation-tools .nav-category>summary>.nav-chevron{margin-left:auto}

/* Featured analysis shortcuts also remain in their original category below. */
#home-view .home-featured-analysis .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
#home-view .home-featured-analysis .distinct-card{aspect-ratio:2/1;min-height:300px}
#home-view .home-featured-analysis .home-card-art{left:42%!important;width:58%!important;object-fit:cover!important;object-position:center!important}
#home-view .home-featured-analysis .distinct-card:after{background:linear-gradient(90deg,#20222b 36%,transparent 65%)}
#home-view .home-featured-analysis .feature-copy p{max-width:47%}
.products{gap:12px;height:60px;align-items:center}
.products>a{padding:12px 20px;border-radius:12px;font-size:20px;font-weight:600;min-height:48px}
.products>a.active{background:linear-gradient(115deg,#49386c80,#30273955);color:#cfbcff;box-shadow:inset 0 0 0 1px #9470e444}
.products>a.active:after{left:22px;right:22px;bottom:0;height:3px}
.products span{font-size:11px;padding:4px 8px;border-radius:6px}
@media(max-width:1200px){.products>a{font-size:17px;padding:10px 12px}.products{gap:4px}}
@media(max-width:800px){#home-view .home-featured-analysis .feature-grid{grid-template-columns:1fr!important}.products>a{font-size:15px;padding:8px 10px}}

/* Desktop navigation stays in the viewport while the workspace scrolls. */
@media (min-width:621px) {
  .sidebar { height:calc(100dvh - var(--header)); overscroll-behavior-y:contain; z-index:3; }
}
/* Work detail keeps the canvas close to the global navigation. */
.web-result-detail .detail-heading p{display:none}
.web-result-detail .detail-heading{padding:10px 0;min-height:52px}
.web-result-detail .detail-heading h1{font-size:16px;color:#bfb7cf}
.web-result-detail .detail-heading a,.web-result-detail .detail-heading button{padding:7px 13px;min-height:32px;font-size:12px}
.web-result-detail #workbench-frame{height:calc(100dvh - 132px);min-height:600px}
.web-result-detail .workbench{border:0;background:transparent}

/* Persistent work filters, shared by lists and nested reports. */
.web-works #detail-description{display:none}
.web-works .work-tabs{position:sticky;top:var(--header);z-index:25;background:#121518;padding:12px 0;margin-bottom:18px;box-shadow:0 8px 18px #0002;flex-wrap:nowrap;overflow-x:auto}
.web-works .work-tabs a{flex:none;white-space:nowrap}
.web-result-detail #workbench-frame{height:calc(100dvh - 206px)}
.sidebar nav .works-subnav{display:flex;flex-direction:column;gap:4px;margin:8px 16px 20px 46px;padding:0 0 0 12px;border-left:1px solid #393340}
.sidebar nav .works-subnav a{display:flex;align-items:center;min-height:38px;height:38px;margin:0;padding:0 8px;border:1px solid transparent;border-radius:8px;font-size:13px;text-align:left;color:#b4afbf;line-height:20px;box-sizing:border-box}
.sidebar nav .works-subnav a.active{background:rgba(147,112,235,.12);border-color:transparent;color:#d5c4ff;box-shadow:none;font-weight:500}
.sidebar nav .works-subnav a:not(.active):hover{background:rgba(255,255,255,.035);color:#dedbe5}
@media(min-width:1600px){.sidebar nav .works-subnav a{font-size:14px;height:40px}}
.sidebar .works-menu>summary.active{background:#2a2637;color:#b293ff;box-shadow:inset 3px 0 #9164ff}
.sidebar .works-menu>summary:focus-visible{outline:2px solid #bb97f7;outline-offset:-2px}

.sidebar nav .works-subnav a{position:relative;border-radius:6px;padding:0 12px;transition:background .15s,color .15s;text-decoration:none}
.sidebar nav .works-subnav a.active::after{content:"";width:5px;height:5px;border-radius:50%;background:#b297ee;margin-left:auto;flex:none}
.sidebar nav .works-subnav a:focus-visible{outline:2px solid #a98adf;outline-offset:2px}
.sidebar .works-menu>summary.active{background:rgba(147,112,235,.07);box-shadow:none;color:#c4aaf5}
.sidebar .works-menu>summary>.works-chevron{width:18px;height:18px;flex:0 0 18px;margin-left:auto;transition:transform .18s;color:#a99abf}
.sidebar nav .works-subnav a{gap:10px}
.sidebar nav .works-subnav .work-type-icon{width:17px;height:17px;flex:0 0 17px;color:inherit;opacity:.85}
.sidebar nav .works-subnav a.active .work-type-icon{opacity:1}

/* Header mobile access: hover preview and keyboard/click disclosure. */
.mobile-entry{position:relative;flex-shrink:0}
.account-actions .mobile-trigger{display:flex;align-items:center;gap:8px;padding:10px 8px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.mobile-trigger svg{width:20px;height:20px}.mobile-trigger .mobile-chevron{width:14px;height:14px;transition:transform .18s}
.mobile-trigger[aria-expanded="true"]{color:#bda5ff}.mobile-trigger[aria-expanded="true"] .mobile-chevron{transform:rotate(180deg)}
.mobile-panel{position:absolute;z-index:100;top:calc(100% + 10px);right:0;width:min(520px,calc(100vw - 32px));padding:20px;background:#202129;border:1px solid #3c364b;border-radius:14px;box-shadow:0 16px 48px #0008;color:#f0edf7}
.mobile-panel[hidden]{display:none}.mobile-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.mobile-panel-heading{font-size:16px;font-weight:600;margin-bottom:14px}.mobile-panel-heading span{display:block;font-size:13px;color:#aaa5b6;font-weight:400;margin-top:6px}
.mobile-panel img{display:block;width:100%;height:auto;border-radius:8px}.mobile-ios{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #383440;margin-top:16px;padding-top:14px;font-size:13px}.mobile-ios-status{color:#9b95a7}
@media(max-width:700px){.mobile-panel{position:fixed;top:var(--header,64px);right:16px}.account-actions .mobile-trigger{gap:4px;padding:8px 4px}}
.creation-subnav .agent-nav-link{display:flex;align-items:center;gap:10px;padding:14px 12px;margin-top:4px}.agent-nav-link svg{width:20px;height:20px;flex:none}
/* Agent is a peer of the tool categories, not a category child. */
.sidebar .creation-tools .creation-subnav>a.agent-nav-link{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:44px;height:auto;margin:2px 0;padding:0 12px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:400;color:#b4afc0;box-shadow:none;line-height:1.4}
.sidebar .creation-tools .agent-nav-link svg{width:16px;height:16px;flex:none;color:#aa98c4}
.sidebar .creation-tools .creation-subnav>a.agent-nav-link.active{background:#25212d;border-color:#383044;color:#d8c6f2;box-shadow:none}
@media(min-width:1600px){.sidebar .creation-tools .creation-subnav>a.agent-nav-link{font-size:15px;min-height:46px}}
.web-agent-page .detail-heading{display:none}.web-agent-page .workbench{min-height:0}.web-agent-page #workbench-frame{height:calc(100dvh - var(--header) - 48px);min-height:480px}
/* The chat owns the available viewport; only its message list scrolls. */
html:has(body.web-chat-page){height:100%;overflow:hidden}
body.web-chat-page{height:100dvh;min-height:0;overflow:hidden}
.web-chat-page #main{position:fixed;top:var(--header);bottom:0;left:var(--rail);right:0;height:auto;min-height:0;margin:0;padding:16px;box-sizing:border-box;overflow:hidden}
.web-chat-page .detail-heading,.web-chat-page>.site-footer{display:none}
.web-chat-page #detail-view,.web-chat-page .workbench{height:100%;min-height:0;box-sizing:border-box;overflow:hidden}
.web-chat-page #workbench-frame{display:block;width:100%;height:100%;min-height:0;max-height:100%}

.native-packages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}.native-package{padding:16px;border:1px solid #665381;border-radius:12px;background:#242332;color:#eee;white-space:normal;text-align:left;line-height:1.6}.native-package[aria-pressed="true"]{border-color:#a886ff;background:#45345f}.native-code{text-align:center}.native-code img{background:white;padding:8px;border-radius:12px;max-width:100%;height:auto}.native-status{min-height:48px;line-height:1.6;color:#c9bedc}.native-actions{display:flex;flex-wrap:wrap;gap:10px}.native-actions button{padding:10px 16px;border-radius:8px}.native-packages[hidden],.native-actions button[hidden]{display:none}@media(max-width:520px){.native-packages{grid-template-columns:1fr}}
.native-actions .primary{background:#7546ff;border:1px solid #956dff;color:#fff}.native-actions .outline{background:transparent;border:1px solid #765b9d;color:#d1b7ff}.native-actions button:disabled{opacity:.6;cursor:wait}