/* FairPhoto's supplied native workspace, recreated with scoped HTML and CSS. */
.photo-demo { container-type: inline-size; width: 100%; min-width: 0; margin: 0; color: #dedede; font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif; text-align: left; line-height: 1.35; font-size: 12px; font-weight: 400; letter-spacing: 0; }
.photo-demo *, .photo-demo *::before, .photo-demo *::after { box-sizing: border-box; }
.photo-demo strong, .photo-demo b { color: inherit; }
.photo-demo-window { font-size: 1.06cqw; border: 1px solid #555; border-radius: 1.25em; overflow: hidden; background: #202020; box-shadow: 0 20px 55px #16161624, 0 2px 5px #1616161c; }
.photo-demo-titlebar { display: flex; align-items: center; gap: 1.4em; height: 2.55em; padding: 0 .7em; background: #242a2c; color: #a9aeb0; }
.photo-demo-titlebar strong { font-size: 1.1em; font-weight: 650; }
.photo-demo-traffic { display: flex; gap: .75em; }
.photo-demo-traffic i { width: 1.05em; height: 1.05em; border-radius: 50%; background: #ff5a62; }
.photo-demo-traffic i:nth-child(2) { background: #ffbd00; }
.photo-demo-traffic i:nth-child(3) { background: #20c955; }
.photo-demo-appbar { display: flex; align-items: center; gap: 1.2em; height: 3.7em; padding: .6em 1em; border-bottom: 1px solid #ffffff1f; background: #262626; }
.photo-demo-brand { display: flex; align-items: center; gap: .7em; font-size: 1.07em; font-weight: 650; white-space: nowrap; }
.photo-demo-brand img { width: 2em; height: 2em; margin: 0; }
.photo-demo-options { display: flex; align-items: center; gap: 1.25em; flex: 1; padding-left: 1em; border-left: 1px solid #ffffff1f; color: #dedede; font-size: .86em; white-space: nowrap; }
.photo-demo-options > span { display: flex; align-items: center; gap: .55em; }
.photo-demo-options i { display: inline-flex; justify-content: center; align-items: center; width: .95em; height: .95em; border-radius: .1em; background: #52bfdf; color: #174c5b; font-size: .92em; font-style: normal; }
.photo-demo-move { padding: .1em .5em; border-radius: .25em; background: #343434; font-size: 1.6em; }
.photo-demo-ai { padding: .1em .2em; background: #314249; border-radius: .25em; color: #5bc2e7; font-size: 1.8em; line-height: 1; }
.photo-demo-share { padding: .48em 1em; border-radius: .4em; background: #358ffc; color: white; font-weight: 650; }
.photo-demo-account { font-size: .9em; }
.photo-demo-documentbar { display: flex; align-items: center; gap: 2em; height: 2.7em; border-bottom: 1px solid #ffffff1f; color: #b8b8b8; }
.photo-demo-document { display: flex; align-items: center; gap: .6em; align-self: stretch; padding: .5em 1em; background: #292929; border-top: 2px solid #53bfdf; border-right: 1px solid #ffffff1f; font-size: .95em; color: #e6e6e6; }
.photo-demo-document img { width: 1.3em; height: 1.3em; object-fit: cover; border-radius: .2em; margin: 0; }
.photo-demo-document span { color: #aaa; }
.photo-demo-untitled { display: flex; gap: .6em; align-items: center; }
.photo-demo-untitled i { width: 1.55em; height: 1.2em; background: white; border-radius: .25em; }
.photo-demo-editor { display: grid; grid-template-columns: 6.35% minmax(0, 1fr) 22.6%; height: 49.2em; }
.photo-demo-tools { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: .2em; padding: .35em .25em; background: #262626; border-right: 1px solid #ffffff3d; }
.photo-demo-tool { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; color: #b8b8b8; border-radius: .5em; }
.photo-demo-tool-active { background: #454545; color: #fff; }
.photo-demo-tool svg, .photo-demo-filter svg { display: block; width: 1.55em; height: 1.55em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.photo-demo-more { font-size: 1.5em; }
.photo-demo-colors { position: relative; display: block; grid-column: 1 / -1; width: 3em; height: 3.3em; margin: .8em auto 0; }
.photo-demo-colors::after, .photo-demo-colors::before { content: ""; position: absolute; display: block; width: 2em; height: 2em; border: 1px solid #bbb; border-radius: .15em; }
.photo-demo-colors::before { background: white; bottom: 0; right: 0; }
.photo-demo-colors::after { background: #000; top: 0; left: 0; }
.photo-demo-canvas { position: relative; display: flex; flex-direction: column; min-width: 0; background: #242424; }
.photo-demo-ruler { height: 1.65em; flex-shrink: 0; display: flex; justify-content: space-between; padding: .2em 1.5em 0 3em; border-bottom: 1px solid #8d8d8d; background: repeating-linear-gradient(90deg, transparent 0 1em, #777 1em 1.06em) bottom / 100% .55em no-repeat; font-size: .72em; color: #a4a4a4; }
.photo-demo-vertical-ruler { position: absolute; inset: 1.18em auto 0 0; width: 1.65em; display: flex; flex-direction: column; justify-content: space-around; border-right: 1px solid #8d8d8d; background: repeating-linear-gradient(0deg, transparent 0 .85em, #777 .85em .91em) right / .5em 100% no-repeat; color: #aaa; }
.photo-demo-vertical-ruler span { transform: rotate(-90deg); font-size: .7em; }
.photo-demo-artboard { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 2em 1.5em 1.5em 3em; }
.photo-demo-poster { position: relative; height: 31em; max-height: 100%; aspect-ratio: 1788 / 2724; max-width: 100%; box-shadow: 0 5px 20px #0005; container-type: inline-size; }
.photo-demo-poster > img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; margin: 0; }
.photo-demo-headline { position: absolute; top: 26%; left: 4%; width: 43%; color: #e8e1e5; font-family: Helvetica, Arial, sans-serif; font-size: 8.2cqw; line-height: 1.12; letter-spacing: -.045em; font-weight: 400; opacity: 1; transition: opacity 450ms ease, transform 450ms ease; }
.photo-demo-headline > span:first-child { display: block; padding: .12em; }
.photo-demo-headline strong { font-size: 1.08em; font-weight: 400; }
.photo-demo-transform { position: absolute; inset: -.12em; border: 1px solid #59bfff; opacity: 0; transition: opacity 220ms ease; }
.photo-demo-transform i { position: absolute; width: .3em; height: .3em; background: white; border: 1px solid #59bfff; transform: translate(-50%, -50%); }
.photo-demo-transform i:nth-child(1) { top: 0; left: 0; }.photo-demo-transform i:nth-child(2) { top: 0; left: 50%; }.photo-demo-transform i:nth-child(3) { top: 0; left: 100%; }.photo-demo-transform i:nth-child(4) { top: 50%; left: 0; }.photo-demo-transform i:nth-child(5) { top: 50%; left: 100%; }.photo-demo-transform i:nth-child(6) { top: 100%; left: 0; }.photo-demo-transform i:nth-child(7) { top: 100%; left: 50%; }.photo-demo-transform i:nth-child(8) { top: 100%; left: 100%; }
.photo-demo-transform b { position: absolute; left: 50%; top: -1.5em; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); width: .8em; height: .8em; border: 1px solid #59bfff; border-radius: 50%; font-size: .8em; font-weight: 400; }
.photo-demo-transform b::after { content: ""; position: absolute; top: 100%; left: 50%; height: .85em; border-left: 1px solid #59bfff; }
.photo-demo-prompt { position: relative; margin: 0 1.65em 2.7em 2.75em; padding: .85em 1em; border: 1px solid #424242; border-radius: 1.4em; background: linear-gradient(#262626f2,#282828ee); box-shadow: 0 .75em 1em #0006; }
.photo-demo-prompt-placeholder { color: #bbb; padding: .62em .8em; font-size: 1.05em; margin-bottom: .85em; border: 1.5px solid #54c3e4; border-radius: .65em; background: #212121; }
.photo-demo-prompt-controls { display: flex; align-items: center; justify-content: space-between; gap: .65em; white-space: nowrap; min-width: 0; font-size: .94em; }
.photo-demo-plus { font-size: 1.5em; }.photo-demo-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 2em; padding: .25em .9em; border-radius: 2em; background: #393939; color: #eee; font-weight: 600; }
.photo-demo-video { display: flex; align-items: center; gap: .3em; color: #aaa; }.photo-demo-video span { font-size: .75em; }.photo-demo-detail { color: #aaa; }.photo-demo-model { color: #ddd; font-size: .92em; }.photo-demo-settings { color: #aaa; }
.photo-demo-generate { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2em; height: 2em; border-radius: 50%; background: #3b3b3b; color: #242424; font-size: 1.25em; }
.photo-demo-dock { padding: .45em .35em; border-left: 1px solid #ffffff1f; overflow: hidden; background: #242424; }
.photo-demo-layers-panel, .photo-demo-histogram-panel { border: 1px solid #414141; border-radius: .5em; overflow: hidden; }
.photo-demo-tabs { display: flex; justify-content: space-between; gap: .7em; padding: 0 .8em; background: #2e2e2e; color: #b8b8b8; }
.photo-demo-tabs > span { padding: .65em 0; }.photo-demo-tabs > span:last-child { font-size: 1.1em; }
.photo-demo-tabs .photo-demo-tab-active { border-bottom: 2px solid #5bc2e7; color: #eee; font-weight: 600; }
.photo-demo-filter { display: flex; align-items: center; gap: .65em; margin: .65em .7em; padding: .55em .7em; border-radius: .5em; color: #aaa; background: #202020; font-size: .88em; }
.photo-demo-filter svg { width: 1em; height: 1em; }
.photo-demo-blend { display: flex; justify-content: space-between; align-items: center; gap: .6em; margin: 0 .65em .35em; color: #aaa; font-size: .76em; }
.photo-demo-blend > span:first-child { display: flex; justify-content: space-between; flex: 1; padding: .2em .9em; border-radius: .45em; background: #363636; color: #ddd; font-size: 1.28em; }
.photo-demo-blend b { font-weight: 400; }.photo-demo-blend strong { margin-left: .2em; padding: .2em .4em; background: #222; font-weight: 400; color: #eee; }
.photo-demo-lock { display: flex; align-items: center; gap: .3em; padding: 0 .7em .4em; color: #aaa; font-size: .75em; }.photo-demo-lock > span:last-child { margin-left: auto; }
.photo-demo-layer { display: flex; align-items: center; gap: .65em; height: 2.95em; padding: .25em .7em; background: #262626; border-top: 1px solid #ffffff1a; font-size: .92em; }
.photo-demo-layer > span:not([class]) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.photo-demo-layer > b { margin-left: auto; font-weight: 400; color: #aaa; }
.photo-demo-headline-layer { background: #414141; }.photo-demo-eye { color: #ccc; font-size: 1.1em; flex-shrink: 0; }.photo-demo-eye-hidden { opacity: .65; text-decoration: line-through; }
.photo-demo-thumbnail { display: block; width: 2.2em; height: 2.2em; flex-shrink: 0; border: 1px solid #777; border-radius: .25em; }
.photo-demo-type { background: repeating-conic-gradient(#9a9a9a 0% 25%,#d8d8d8 0% 50%) 50% / .55em .55em; }
.photo-demo-image-thumb { background: url('/static/robotlady-artwork.jpg') center 42% / cover; }.photo-demo-blue-thumb { filter: saturate(1.7); }
.photo-demo-mask { display: block; width: 2.6em; height: 2.2em; border: 1px solid #666; border-radius: .25em; background: linear-gradient(90deg,white 0 24%,black 25%); flex-shrink: 0; }
.photo-demo-layer-actions { display: flex; gap: 1em; padding: .6em .65em; border-top: 1px solid #ffffff1f; color: #b8b8b8; font-size: 1em; }.photo-demo-layer-actions > span:last-child { margin-left: auto; }
.photo-demo-histogram-panel { margin-top: .5em; }.photo-demo-panel-title { display: flex; justify-content: space-between; padding: .6em .65em; color: #ccc; background: #2b2b2b; font-size: .95em; font-weight: 600; }.photo-demo-panel-title > span { color: #aaa; }
.photo-demo-histogram { height: 7.5em; margin: .65em .75em .4em; background: #202020; border-radius: .3em; overflow: hidden; }.photo-demo-histogram svg { display: block; width: 100%; height: 100%; }
.photo-demo-histogram-values { padding: .15em .9em; color: #aaa; font-family: ui-monospace, SFMono-Regular, monospace; font-size: .72em; }
.photo-demo-source { display: flex; align-items: center; gap: .7em; padding: .6em .9em; color: #aaa; font-size: .78em; }.photo-demo-source > span { padding: .3em .8em; border-radius: .35em; background: #363636; color: #ddd; }
.photo-demo-dimensions { padding: 0 .9em .8em; color: #aaa; font-size: .72em; }
.photo-demo-status { display: flex; align-items: center; justify-content: space-between; gap: .8em; height: 2em; padding: .3em 1em; border-top: 1px solid #ffffff1f; color: #b8b8b8; font-size: .86em; }.photo-demo-status-dim { color: #aaa; }.photo-demo-status b { display: inline-block; padding: 0 .35em; border-radius: .2em; border: 1px solid #555; font-weight: 400; margin-left: 1em; }
.photo-demo[data-demo-stage="0"] .photo-demo-headline { opacity: 0; visibility: hidden; transform: translateX(-.5em); }.photo-demo[data-demo-stage="0"] .photo-demo-headline-layer { opacity: .35; background: #262626; }.photo-demo[data-demo-stage="0"] .photo-demo-fill-layer { background: #414141; }
.photo-demo[data-demo-stage="0"] .photo-demo-headline-layer .photo-demo-eye { text-decoration: line-through; }
.photo-demo[data-demo-stage="1"] .photo-demo-transform { opacity: 1; }.photo-demo[data-demo-stage="1"] .photo-demo-text-tool { color: #fff; background: #454545; }.photo-demo[data-demo-stage="1"] .photo-demo-tool-active { background: transparent; color: #b8b8b8; }
.photo-demo figcaption { margin: 13px 0 0; color: #646464; text-align: center; font-size: 12px; line-height: 1.5; }
@container (max-width: 600px) {
  .photo-demo-window { font-size: 8px; }
  .photo-demo-appbar { gap: .8em; }
  .photo-demo-options, .photo-demo-account { display: none; }.photo-demo-ai { margin-left: auto; }
  .photo-demo-editor { grid-template-columns: 4.9em minmax(0, 1fr); height: 48em; }.photo-demo-dock { display: none; }
  .photo-demo-tools { gap: .15em; }.photo-demo-tool svg { width: 1.8em; height: 1.8em; }
  .photo-demo-poster { height: 32em; }.photo-demo-artboard { padding: 2em 1em 1.5em 2em; }
  .photo-demo-prompt { margin: 0 .8em 1.4em 2.3em; padding: .8em; border-radius: 1em; }
  .photo-demo-prompt-controls { gap: .3em; font-size: .9em; }.photo-demo-detail, .photo-demo-settings, .photo-demo-size, .photo-demo-video span { display: none; }.photo-demo-pill { padding: .25em .6em; }.photo-demo-model { font-size: .8em; }.photo-demo-status-dim { font-size: .84em; }
}
@media (prefers-reduced-motion: reduce) { .photo-demo-headline, .photo-demo-transform { transition: none; } }