/* The homepage illustration follows the Mac app's three-column workspace.
   All UI dimensions scale from the app window, keeping both sidebars visible. */
.product-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}
.product-stage > .editor-window { grid-column: 1 / -1; min-width: 0; }
.product-stage > .ai-note,
.product-stage > .export-note {
  position: relative;
  inset: auto;
  width: fit-content;
  max-width: 100%;
}
.product-stage > .ai-note { justify-self: start; transform: rotate(-2deg); }
.product-stage > .export-note { justify-self: end; transform: rotate(2deg); }
.editor-window {
  --app-u: .64cqw;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  aspect-ratio: 16 / 10;
  background: #222;
  border-color: #454640;
  color: #ddd;
}
.editor-window .editor-titlebar {
  height: 2.5cqw;
  flex: 0 0 2.5cqw;
  padding-inline: 1.1cqw;
  background: #2b2b2b;
  border-bottom: 1px solid #393939;
  color: #a6a6a6;
  font-size: .68cqw;
}
.editor-window .traffic-lights { gap: .45cqw; }
.editor-window .traffic-lights i { width: .65cqw; height: .65cqw; }
.editor-window .editor-ai { font-size: .6cqw; gap: .4cqw; }
.editor-window .editor-ai i { width: .35cqw; height: .35cqw; background: #15b978; }
.editor-documentbar {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  height: 2.7cqw;
  flex: 0 0 2.7cqw;
  background: #292929;
  border-bottom: 1px solid #424242;
  font-size: .65cqw;
  color: #c4c4c4;
}
.mock-document-tab { display: flex; align-items: center; gap: 2cqw; height: 100%; padding-inline: 1cqw; border-right: 1px solid #494949; }
.mock-document-tab > span { color: #9b9b9b; }
.mock-new-document { display: grid; place-items: center; height: 100%; padding-inline: .6cqw; background: #e5e5e5; color: #444; font-size: 1.2cqw; margin-left: -1.2cqw; }
.mock-ai-enabled { display: flex; align-items: center; gap: .4cqw; }
.mock-ai-enabled > i { height: .35cqw; width: .35cqw; background: #08ae6b; border-radius: 50%; }
.editor-window .editor-body { display: flex; height: auto; flex: 1; min-height: 0; }
.editor-window .app-inspector,
.editor-window .app-layers {
  width: 17cqw;
  flex: 0 0 17cqw;
  min-width: 0;
  min-height: 0;
  padding: 0;
  background: #2c2c2c;
  color: #d6d6d6;
  font: var(--app-u)/1.35 var(--sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-window .app-inspector { border-right: 1px solid #424242; }
.editor-window .app-layers { border-left: 1px solid #424242; }
.app-inspector-scroll { flex: 1; min-height: 0; overflow: hidden; }
.app-control-section { padding: calc(var(--app-u) * 1.05) calc(var(--app-u) * 1.2); border-bottom: 1px solid #404040; }
.app-section-title { display: flex; align-items: center; justify-content: space-between; gap: .5em; font-size: 1em; font-weight: 550; margin-bottom: .8em; color: #e5e5e5; }
.app-section-title > strong { margin-right: .25em; }
.app-section-title > span { color: #8c8c8c; font-size: .85em; font-weight: 400; }
.app-ui-select,
.app-ui-field,
.app-ui-button { display: flex; align-items: center; justify-content: space-between; gap: .4em; padding: .42em .65em; border-radius: .45em; background: #383838; color: #e2e2e2; min-width: 0; }
.app-ui-select { border: 1px solid #505050; }
.app-ui-button { justify-content: center; border: 1px solid #535353; padding-block: .3em; }
.app-class-section > .app-ui-button { margin-top: .6em; }
.app-ui-note { font-size: .88em; line-height: 1.4; color: #9d9d9d; margin-top: .75em; }
.app-text-section .app-section-title { justify-content: flex-start; margin-bottom: .9em; }
.app-ui-field { border: 0; }
.app-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6em .7em; margin-top: .7em; }
.app-field-grid label { display: block; color: #b3b3b3; font-size: .93em; margin-bottom: .3em; }
.app-ui-field small { color: #888; font-size: .9em; }
.app-colour-field { gap: .5em; font-size: .92em; }
.app-colour-field > i { width: 1.2em; height: 1.2em; background: #ed6845; border-radius: .2em; flex-shrink: 0; }
.app-colour-field > span:last-child { margin-left: auto; color: #8d8d8d; }
.app-type-formatting { display: flex; align-items: center; gap: .5em; margin-top: .65em; }
.app-type-formatting > .app-ui-field { flex: 1; }
.app-type-formatting > i,
.app-type-formatting > u,
.app-type-formatting > s { display: grid; place-items: center; width: 2.2em; height: 2.1em; border: 1px solid #515151; border-radius: .55em; color: #c2c2c2; font-size: .95em; }
.app-text-align { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: .7em; color: #aaa; font-size: .93em; }
.app-text-align > span:first-child { flex: 1; }
.app-text-align > span:not(:first-child) { display: grid; place-items: center; border: 1px solid #515151; border-radius: .4em; height: 2em; width: 2em; }
.app-text-align .app-format-active { color: #252525; background: #e7e7e7; }
.app-align-icons { display: flex; justify-content: space-between; gap: .45em; color: #6a6a6a; font-size: 1.4em; margin-block: -.1em .4em; }
.app-align-icons > span { text-align: center; flex: 1; background: #333; border-radius: .25em; }
.app-snap-control { display: inline-block; border: 1px solid #565656; border-radius: .4em; padding: .25em .5em; }
.app-disclosure { display: flex; align-items: center; gap: .5em; padding: 1.1em 1.2em; border-bottom: 1px solid #404040; }
.app-disclosure > strong { font-weight: 500; white-space: nowrap; }
.app-disclosure > span { margin-left: auto; font-size: .83em; color: #858585; white-space: nowrap; }
.app-disclosure > b { font-size: 1.4em; line-height: 1; color: #888; font-weight: 400; }
.app-effects-section { border-bottom: 0; }
.app-effects-section .app-section-title { margin-bottom: .4em; }
.app-effect-row { display: flex; align-items: center; gap: .6em; padding-block: .85em; }
.app-effect-row + .app-effect-row { border-top: 1px solid #404040; }
.app-effect-row > i { width: .8em; height: .8em; border-radius: .2em; background: #f5f5f5; }
.app-effect-row > b { margin-left: auto; color: #777; font-weight: 400; }
.app-effects-section .app-ui-note { margin-top: .3em; }
.app-effects-section .app-ui-button { margin-top: .75em; }
.app-canvas-controls { flex-shrink: 0; padding: 1.1em 1.2em 1.3em; border-top: 1px solid #404040; }
.app-canvas-controls .app-section-title { color: #9e9e9e; font-weight: 400; }
.app-canvas-controls .app-section-title > .icon { height: 1.2em; width: 1.2em; color: #aaa; }
.app-canvas-colour { display: flex; gap: .7em; align-items: center; }
.app-canvas-colour > .app-ui-field:first-child { flex: 1.6; }
.app-canvas-colour > .app-ui-field:nth-child(2) { flex: 1; }
.app-canvas-colour .app-ui-field { padding-inline: .5em; }
.app-canvas-colour i { width: 1.1em; height: 1.1em; background: #222; border-radius: .2em; }
.app-canvas-colour > .icon { height: 1.3em; width: 1.3em; margin-left: .5em; }
.app-file-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; margin-top: 1.4em; }
/* Right workspace: history, layer browser, and the real export arrangement. */
.app-history-heading { display: flex; align-items: center; justify-content: space-between; padding: 1.4em 1.2em; border-bottom: 1px solid #414141; color: #e1e1e1; }
.app-history-heading > span { color: #aaa; }
.app-workspace-tabs { display: flex; justify-content: space-between; align-items: center; gap: .4em; padding: .95em 1.05em; border-bottom: 1px solid #414141; font-size: .93em; font-weight: 550; white-space: nowrap; }
.app-workspace-tabs > span { padding: .4em .5em; }
.app-workspace-tab-active { background: #414141; border-radius: .35em; }
.app-layer-filter { display: flex; gap: .8em; align-items: center; padding: .8em 1.15em; border-bottom: 1px solid #3c3c3c; color: #999; font-size: .95em; }
.app-layer-filter > .app-ui-select { flex: 1; border: 0; padding-block: .3em; }
.app-layer-filter > .app-ui-select > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-layers-scroll { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.app-layers-scroll::after { content: ''; position: absolute; top: .3em; right: .25em; width: .45em; height: 73%; border-radius: 1em; background: #161616; }
.app-layer-row { display: flex; align-items: center; gap: .6em; padding: .64em .85em; border: 1px solid transparent; min-width: 0; }
.app-layer-group { background: #252525; }
.app-layer-type { width: 1.55em; height: 1.55em; flex: 0 0 1.55em; display: grid; place-items: center; font-size: 1.05em; background: #555; border-radius: .2em; color: #e3e3e3; }
.app-layer-shape { background: #a4b29b; color: #4a5943; }
.app-layer-vector { background: #594838; color: #ed986d; }
.app-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .93em; }
.app-layer-actions { display: flex; gap: .48em; align-items: center; color: #a1a1a1; }
.app-layer-actions > .icon { height: 1.05em; width: 1.05em; stroke-width: 1.25; }
.app-layer-actions > span { font-size: 1.1em; line-height: 1; }
.app-layer-selected { background: #355773; border-color: #10a6f7; }
.app-layer-selected .app-layer-actions { color: #e0e9f0; }
.app-export-section { flex-shrink: 0; padding: 1.2em 1.25em 1em; border-top: 1px solid #414141; background: #292929; }
.app-export-section .app-section-title { margin-bottom: 1.4em; }
.app-export-section .app-section-title > span { color: #d6d6d6; font-size: 1.3em; }
.app-export-options { display: grid; grid-template-columns: 1fr 1.8fr .55fr; gap: .7em; margin-bottom: .75em; }
.app-export-options .app-ui-select { border-color: #505050; padding-block: .3em; }
.app-export-options .app-ui-button { padding: .1em; }
.app-export-button { text-align: center; background: #00985d; color: #fff; border-radius: .3em; padding: .5em .2em; font-weight: 550; }
.app-export-presets { border-top: 1px solid #414141; margin-top: 1.1em; padding-top: .85em; font-size: .95em; }
.app-export-preview-label { font-weight: 550; padding-block: .8em; }
.app-export-preview { height: 5.5em; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #e1e1e1; background-image: conic-gradient(#aaa 25%,transparent 0 50%,#aaa 0 75%,transparent 0); background-size: 1.1em 1.1em; }
.app-export-preview > span { font: 5em/.95 var(--serif); color: #ed6845; letter-spacing: -.035em; white-space: nowrap; }
.app-export-preview.is-website > span { font: 550 1.8em/1.05 var(--sans); letter-spacing: -.04em; color: #202820; white-space: normal; padding-inline: .4em; }
.app-export-dimensions { margin-top: .55em; color: #999; font-size: .9em; }
/* Keep the canvas and toolbar in the same dark workspace as the real app. */
.editor-window .mock-workspace { background: #222; padding: 3.3cqw 2.2cqw 5.5cqw; }
.editor-window .canvas-label { left: 2.2cqw; right: 2.2cqw; top: 1.45cqw; color: #999; font-size: .55cqw; }
.editor-window .app-toolbar { gap: 1.15cqw; padding: .95cqw 1.15cqw; bottom: 1.3cqw; background: #2b2b2b; color: #b5b5b5; border: 1px solid #535353; border-radius: 1.1cqw; box-shadow: 0 .7cqw 1.7cqw #0005; }
.editor-window .app-toolbar > .icon,
.editor-window .app-toolbar > span > .icon { height: 1.05cqw; width: 1.05cqw; }
.editor-window .app-toolbar > span { font-size: .75cqw; }
.editor-window .app-toolbar .tool-active { border-radius: .8cqw; padding: .7cqw; margin: -.65cqw; background: #484848; color: #ddd; }
.app-tool-pair { display: inline-flex; align-items: center; gap: .45cqw; }
.app-tool-pair > small { font-size: .65cqw; color: #999; }
.editor-window .app-toolbar > i { height: 1.5cqw; background: #555; }
.app-toolbar-label { color: #e3e3e3; font-weight: 600; }
.editor-window .brand-artboard { padding: 1.8cqw 2cqw; }
.editor-window .artboard-top,
.editor-window .artboard-bottom { font-size: .43cqw; letter-spacing: .08cqw; }
.editor-window .morrow-flower { width: 7cqw; height: 7cqw; flex-shrink: 0; }
.editor-window .selected-wordmark { font-size: 9cqw; letter-spacing: -.4cqw; }
.editor-window .morrow-lockup > p { font-size: .6cqw; margin-top: 1.2cqw; }
.editor-window .website-artboard { display: flex; flex-direction: column; }
.editor-window .mini-web-hero { flex: 1; }
.editor-window .mini-web-hero h3 { font-size: 3.2cqw; }
.editor-window .mini-web-nav > span:last-child { font-size: .46cqw; }
.editor-window .mini-web-hero small { font-size: .4cqw; }
.editor-window .mini-web-hero p { font-size: .53cqw; }
.editor-window .mini-web-art { height: 17cqw; }
.editor-window .mini-web-art > svg { width: 12cqw; height: 12cqw; }
.editor-window .code-artboard pre { font-size: .7cqw; }
/* Original Forma artwork from the desktop project; the surrounding UI is an illustration. */
.editor-window .forma-brand-artboard { background: #f7f7f0; color: #202820; }
.forma-lockup { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2cqw; }
.editor-window .forma-lockup .selected-wordmark { width: 38cqw; padding: .8cqw; line-height: 0; letter-spacing: 0; }
.forma-lockup img { width: 100%; height: auto; }
.forma-lockup p { font: .7cqw/1.5 var(--sans); color: #69725e; letter-spacing: .08cqw; }
.forma-brand-artboard .colour-chips > i:nth-child(1) { background: #202820; }
.forma-brand-artboard .colour-chips > i:nth-child(2) { background: #f87943; }
.forma-brand-artboard .colour-chips > i:nth-child(3) { background: #c9b9e7; }
.forma-brand-artboard .colour-chips > i:nth-child(4) { background: #e6e9dc; }
.editor-window .forma-website-artboard { padding: 0; background: #f7f7f0; overflow: hidden; }
.forma-website-artboard > picture { display: block; width: 100%; height: 100%; min-height: 0; }
.forma-website-artboard > picture > img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: top; }
.app-colour-field > i { background: #202820; }
.app-export-preview > span { font: 700 4em/1 var(--sans); color: #202820; letter-spacing: -.05em; }
.editor-window .code-artboard pre { font-size: .85cqw; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: #d5decc; }
.forma-logo-visual .logo-tile { background: #f7f7f0; }
.forma-logo-visual .logo-tile > img { width: 82%; height: auto; }
.forma-logo-visual .small-logo-tile { background: #202820; }
.forma-logo-visual .small-logo-tile > img { width: 48%; height: 48%; filter: brightness(0) invert(1); }
.forma-web-visual .little-browser-content { padding: 0; background: #f7f7f0; }
.forma-web-visual .little-browser-content > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.forma-chat-art { background: #f7f7f0; }
.forma-chat-art > div > img { width: 80%; max-width: 280px; height: auto; }
.forma-walkthrough-brand > img { width: 65%; max-width: 300px; height: auto; }
.forma-walkthrough-brand > small { color: #69725e; }
.forma-walkthrough-site { flex: 1; min-height: 0; width: min(390px,100%); overflow: hidden; background: #f7f7f0; border: 1px solid #d9ddcf; border-radius: 5px; box-shadow: 0 6px 14px #5367450a; }
.forma-walkthrough-site > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media(max-width:800px) {
  .editor-window { aspect-ratio: 4 / 3; }
  .editor-window .app-inspector,
  .editor-window .app-layers { width: 18cqw; flex-basis: 18cqw; }
}
@media(max-width:600px) {
  .product-stage { grid-template-columns: 1fr; gap: 13px; }
  .product-stage > .ai-note,
  .product-stage > .export-note { justify-self: center; }
  .editor-window { aspect-ratio: 1.22; --app-u: .68cqw; }
  .editor-window .app-inspector,
  .editor-window .app-layers { width: 20cqw; flex-basis: 20cqw; }
  .editor-window .mini-web-nav { gap: 1cqw; }
  .editor-window .mini-web-nav > span:last-child { font-size: .4cqw; white-space: nowrap; }
  .editor-window .mini-web-nav b { padding: .7cqw; }
  .editor-window .mini-web-hero { gap: 1cqw; margin-top: 1cqw; }
  .editor-window .mini-web-hero h3 { font-size: 4cqw; letter-spacing: -.15cqw; }
  .editor-window .mini-web-hero p { font-size: .6cqw; margin-top: 1cqw; }
  .editor-window .mini-web-hero small { font-size: .42cqw; letter-spacing: .05cqw; }
  .editor-window .website-artboard { padding: 1.4cqw; }
  .editor-window .mini-morrow { font-size: 3.3cqw; }
  .editor-window .mini-morrow > span { font-size: 2cqw; }
  .editor-window .mini-web-nav { padding-bottom: 1cqw; }
  .editor-window .mini-web-button { font-size: .6cqw; padding: 1cqw; }
  .editor-window .mini-web-footer { margin-top: 1.5cqw; padding-top: 1cqw; font-size: .5cqw; }
  .editor-window .mini-web-footer > span { font-size: .42cqw; }
  .editor-window .mini-web-art > span { font-size: .4cqw; letter-spacing: .05cqw; bottom: 1cqw; }
  .editor-window .mini-web-art { border-radius: 9cqw 9cqw 1cqw 1cqw; }
  .editor-window .code-artboard pre { font-size: .7cqw; padding: 1.5cqw; }
  .editor-window .code-top { font-size: .65cqw; padding: 1cqw; }
  .editor-window .code-bottom { font-size: .5cqw; padding: 1cqw; gap: .5cqw; }
  .editor-window .code-bottom > .icon { height: 1cqw; width: 1cqw; }
  .editor-window .colour-chips > i { width: 1cqw; height: 1cqw; }
  .editor-window .colour-chips { gap: .5cqw; }
  .editor-window .design-cursor > .icon { width: 2cqw; height: 2cqw; }
  .editor-window .design-cursor > span { font-size: .65cqw; padding: .4cqw .7cqw; margin-left: 1cqw; }
}