/* A looping, stoppable product illustration; no live editor actions are performed. */
.editor-window { position: relative; }
.editor-window .demo-logo-stage { border: 0; }
.animated-forma-logo { display: block; width: 100%; height: auto; overflow: visible; }
.demo-word-motion { transform-box: fill-box; transform-origin: left center; transition: transform 1s cubic-bezier(.2,.75,.25,1); }
.demo-logo-stage[data-layout="draft"] .demo-word-motion { transform: translate(9px,1px) scale(.88); }
.demo-logo-mark path { transition: fill .65s ease; }
.forma-letter { transition: opacity .08s; }
.demo-logo-selection, .demo-website-selection {
  position: absolute; border: 1px solid #80947a; pointer-events: none;
  transition: left 1s, top 1s, width 1s, height 1s, opacity .3s;
}
.demo-logo-selection { left: 31%; top: 12%; width: 66%; height: 78%; }
.demo-logo-stage[data-layout="draft"] .demo-logo-selection { left: 38%; top: 15%; width: 58%; height: 70%; }
.demo-logo-stage[data-selection="symbol"] .demo-logo-selection { left: 3%; top: 15%; width: 24%; height: 68%; }
.demo-logo-selection > i, .demo-website-selection > i {
  position: absolute; width: .35cqw; height: .35cqw; min-width: 2px; min-height: 2px;
  border: 1px solid #80947a; background: #f7f7f0;
}
.demo-logo-selection > i:nth-child(1), .demo-website-selection > i:nth-child(1) { left: -2px; top: -2px; }
.demo-logo-selection > i:nth-child(2), .demo-website-selection > i:nth-child(2) { right: -2px; top: -2px; }
.demo-logo-selection > i:nth-child(3), .demo-website-selection > i:nth-child(3) { left: -2px; bottom: -2px; }
.demo-logo-selection > i:nth-child(4), .demo-website-selection > i:nth-child(4) { right: -2px; bottom: -2px; }
.demo-website-selection { opacity: 0; z-index: 2; transition: all .6s ease; background: #a8b89906; }
.demo-website-selection.is-visible { opacity: 1; }
.website-live-art { display: block; width: 100%; height: 100%; overflow: hidden; }
.website-headline-letter { transition: opacity .07s; }
.demo-planet-motion { transform-box: fill-box; transform-origin: center; transition: transform 1.1s cubic-bezier(.2,.75,.25,1); }
.website-live-art[data-planet-size="small"] .demo-planet-motion { transform: scale(.72); }
.website-live-art [data-forma-layer="15"] rect { transition: fill .65s; }
.app-export-preview[data-preview-kind="planet"] > span { display: grid; place-items: center; width: 100%; height: 100%; }
.demo-planet-preview { display: block; width: 65%; height: 100%; }
.demo-button-preview { display: inline-flex; background: #202820; color: #fff; padding: .5em .8em; border-radius: 2em; font-size: .75em; font-weight: 600; }
.demo-cursor {
  position: absolute; z-index: 20; pointer-events: none; color: #6d8964;
  transition: left .7s cubic-bezier(.3,.05,.2,1), top .7s cubic-bezier(.3,.05,.2,1), opacity .35s;
}
.demo-cursor > .icon { display: block; width: 1.5cqw; height: 1.5cqw; fill: #e8eddf; filter: drop-shadow(0 1px 1px #0003); }
.demo-cursor > span { display: block; margin: -.15cqw 0 0 1cqw; background: #6d8964; color: white; padding: .25cqw .5cqw; font: .65cqw/1.2 var(--sans); border-radius: .2cqw; }
.demo-cursor > i { position: absolute; top: -.45cqw; left: -.45cqw; height: 2cqw; width: 2cqw; border: 1px solid #a4bd8f; border-radius: 50%; opacity: 0; }
.demo-cursor.is-clicking > i { animation: demo-click .45s ease-out; }
@keyframes demo-click { from { opacity: 1; transform: scale(.2); } to { opacity: 0; transform: scale(1.4); } }
.demo-fill-heading { margin-top: 1.4em; }
.app-shape-section { position: relative; }
.demo-colour-popover { position: absolute; z-index: 15; left: 5%; top: 92%; width: 90%; background: #2c2c2c; border: 1px solid #505050; border-radius: .8em; padding: 1em; box-shadow: 0 .4em 2em #0005; }
.demo-picker-sv { position: relative; width: 100%; aspect-ratio: 10 / 7; border-radius: .5em; margin-bottom: .8em; background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--picker-hue, #00ff00)); }
.demo-picker-hue { position: relative; height: 1.2em; border-radius: .6em; margin-bottom: .8em; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.demo-picker-sv-handle, .demo-picker-hue-handle { position: absolute; width: 1em; height: 1em; border: .2em solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #0005; transform: translate(-50%, -50%); }
.demo-picker-sv-handle { left: var(--picker-saturation, 20%); top: var(--picker-darkness, 84.3%); }
.demo-picker-hue-handle { width: 1.4em; height: 1.4em; top: 50%; left: var(--picker-hue-position, 33.33%); }
.demo-picker-hex { padding: .45em .65em; border-radius: .5em; background: #383838; color: #e2e2e2; line-height: 1.35; }
.demo-picker-recent { display: flex; gap: .4em; margin-top: .8em; }
.demo-picker-recent > i { width: 1.8em; height: 1.8em; border: 1px solid #ddd; border-radius: .3em; background: #fff; }
.demo-picker-recent > i + i { background: #000; }
.demo-picker-palettes { margin-top: 1em; padding-top: 1em; border-top: 1px solid #404040; }
.demo-picker-palettes > strong, .demo-picker-palettes > span { display: block; }
.demo-picker-palettes > strong { font-weight: 600; }
.demo-picker-palettes > span { margin-top: .8em; color: #aaa; }
.demo-picker-create { display: flex; align-items: center; gap: .4em; margin-top: .8em; }
.demo-picker-create > span { flex: 1; min-width: 0; padding: .45em .65em; background: #383838; color: #aaa; border-radius: .5em; }
.demo-picker-create > b { padding: .4em .65em; border: 1px solid #505050; border-radius: .5em; background: #383838; font-weight: 400; }
#demo-format-control { position: relative; }
.demo-format-menu { position: absolute; z-index: 15; left: -1px; right: -1px; bottom: calc(100% + .7em); display: flex; flex-direction: column; padding: .3em; border: 1px solid #62665b; border-radius: .4em; background: #363636; box-shadow: 0 .5em 2em #0008; }
.demo-format-menu > span { display: flex; justify-content: space-between; padding: .55em .65em; border-radius: .25em; }
.demo-format-menu > span[data-highlighted="true"] { background: #355773; color: white; }
.demo-format-menu i { font-style: normal; color: #bdcdb3; }
.demo-symbol-preview { display: block; height: 1em; width: 1em; }
.demo-replay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; background: transparent; color: #526044; border: 1px solid #d5dacb; border-radius: 5px; font-size: 14px; min-height: 44px; white-space: nowrap; }
.demo-replay:hover { background: #e9ecdf; }
.demo-replay > .icon { height: 15px; width: 15px; }
.preview-controls { flex-wrap: wrap; }
.preview-caption { margin-left: auto; max-width: 330px; }
.demo-announcement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 800px) { .preview-caption { margin-left: 0; } }
@media (max-width: 600px) {
  .preview-controls { flex-direction: row; justify-content: center; }
  .preview-tabs { flex-basis: 100%; }
  .preview-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; }
  .preview-tabs button > span { margin-right: 0; }
  .preview-caption { flex-basis: 100%; order: 3; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-replay, .demo-cursor { display: none !important; }
  .demo-word-motion, .demo-logo-mark path, .demo-logo-selection, .demo-website-selection { transition: none; }
  .demo-planet-motion, .website-live-art [data-forma-layer="15"] rect { transition: none; }
}