/* Project windows retain a real application's density at any preview size. */
.monitor-frame .desktop { background: #b7c4c8; }
.monitor-frame .desktop[data-project="project-b"] { background: #c3cbc0; }
.monitor-frame .desktop[data-project="project-c"] { background: #cfcac0; }
.monitor-frame .desktop-menubar { height: 4.1cqw; padding: 0 2cqw; gap: 2cqw; font-size: 1.4cqw; background: #f4f5f6df; }
.monitor-frame .desktop-menubar strong { font-weight: 550; }
.monitor-frame .desktop-menu-icon { font-size: 2cqw; }
.monitor-frame .desktop-windows,
.monitor-frame .desktop[data-kind="web"] .desktop-windows { inset: 5.5cqw 1.4cqw 1.4cqw; gap: 1.3cqw; }
.monitor-frame .desktop .project-preview { border: .15cqw solid #0002; border-radius: 1.2cqw; box-shadow: 0 1cqw 2cqw #17212825; }
.project-preview { container: project-window / inline-size; overflow: hidden; min-width: 0; min-height: 0; }
.project-preview .scene-shell { height: 100%; display: grid; grid-template-rows: 4cqw minmax(0, 1fr); font: 1.2cqw/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; }
.scene-shell svg { width: 1.5em; height: 1.5em; flex: none; fill: currentColor; }
.scene-chrome { display: flex; justify-content: space-between; align-items: center; gap: 2em; padding: 0 1.4em; background: #f0f0f1; color: #696b70; border-bottom: 1px solid #0001; font-size: 1em; }
.scene-chrome > svg { width: 1.4em; }
.scene-title { flex: 1; text-align: center; font-size: .92em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scene-lights { display: flex; gap: .55em; }
.scene-lights i { width: .9em; height: .9em; border-radius: 100%; background: #fa6058; }
.scene-lights i:nth-child(2) { background: #fabc30; }
.scene-lights i:nth-child(3) { background: #34c948; }
.scene-address { width: 50%; padding: .08em; text-align: center; border: 1px solid #0001; border-radius: .4em; background: #e5e5e7; color: #5e6066; font-size: .9em; }

/* A complete editor, including the explorer, tabs, source and integrated terminal. */
.scene-editor .scene-shell { grid-template-rows: 4cqw minmax(0, 1fr) 2.3cqw; background: #1f1f1f; color: #c7c7c7; }
.scene-editor .scene-chrome { background: #242424; border-color: #0006; color: #b4b4b4; }
.scene-editor-body { display: grid; grid-template-columns: 4.2% 19% minmax(0, 1fr); min-height: 0; }
.scene-activity { display: flex; flex-direction: column; align-items: center; padding: 1em 0; gap: 1.4em; border-right: 1px solid #333; color: #858585; }
.scene-activity > svg { width: 1.8em; height: 1.8em; }
.scene-activity > svg:first-child { color: #f5f5f5; }
.scene-activity > span { flex: 1; }
.scene-explorer { overflow: hidden; border-right: 1px solid #303030; background: #181818; padding-top: .8em; font-size: .88em; }
.scene-explorer-title { display: flex; justify-content: space-between; align-items: center; margin: 0 1.1em 1.6em; font-size: .85em; letter-spacing: .06em; }
.scene-explorer > strong { display: block; padding: .3em 1em .6em; font-weight: 550; font-size: .86em; }
.scene-tree-row { display: flex; align-items: center; gap: .55em; height: 1.85em; padding-left: calc(.9em + var(--indent) * .35em); white-space: nowrap; }
.scene-tree-row svg { color: #6aaacb; width: 1.2em; height: 1.2em; }
.scene-tree-row.is-current { background: #37373d; color: #fff; }
.scene-editor-main { display: grid; grid-template-rows: 3.4cqw 2.2cqw minmax(0,1fr) 10.5cqw; min-height: 0; overflow: hidden; }
.scene-editor-tabs { display: flex; background: #181818; overflow: hidden; font-size: .88em; }
.scene-editor-tabs > span { display: flex; align-items: center; gap: .6em; padding: 0 1.2em; white-space: nowrap; border-right: 1px solid #333; color: #8e8e8e; }
.scene-editor-tabs > span:first-child { border-top: 1px solid #4298d2; color: #dadada; background: #1f1f1f; }
.scene-editor-tabs b { color: #69adcc; font-size: .8em; }
.scene-breadcrumb { color: #999; padding: .15em 1.4em; font-size: .86em; }
.scene-source { padding-top: .7em; overflow: hidden; }
.scene-code-line { display: flex; font: 1.05cqw/1.68 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }
.scene-code-line > span { width: 3.7em; padding-right: 1.4em; text-align: right; color: #6c7075; flex: none; user-select: none; }
.scene-code-line code { font: inherit; color: #aac6db; }
.syntax-keyword { color: #c586c0; }
.syntax-string { color: #ce9178; }
.syntax-number { color: #b5cea8; }
.syntax-comment { color: #6a9955; }
.scene-terminal { border-top: 1px solid #3b3b3b; font-size: .84em; padding: .65em 1.5em; overflow: hidden; }
.scene-terminal > div { font-size: .83em; display: flex; gap: 2em; color: #989898; margin-bottom: 1em; }
.scene-terminal strong { color: #ddd; font-weight: 500; border-bottom: 1px solid #4a9bd1; }
.scene-terminal p { margin: .3em 0; font-family: ui-monospace, SFMono-Regular, monospace; }
.scene-terminal p b { color: #80cba9; font-weight: 500; }
.scene-terminal p span { color: #70a3cf; }
.scene-editor-status { display: flex; justify-content: space-between; align-items: center; padding: 0 1em; background: #181818; border-top: 1px solid #353535; color: #ababab; font-size: .78em; white-space: nowrap; }

/* Simulator renders the phone itself, with no surrounding application window. */
.project-preview.scene-simulator,
.monitor-frame .desktop .project-preview.scene-simulator { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.scene-simulator .scene-shell { grid-template-rows: minmax(0, 1fr); }
.scene-simulator-stage { container: simulator / size; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; background: transparent; }
.scene-phone { height: 96cqh; aspect-ratio: 0.48; border-radius: 5.2cqh; padding: 1.15cqh; background: #272a2b; box-shadow: 0 1cqh 3cqh #1d242b36, 0 0 0 .3cqh #a3a7aa; font-size: 1.8cqh; flex: none; }
.scene-mobile-app { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 4.2cqh; padding: 2.2cqh 2.2cqh 1.3cqh; font-size: 1.8cqh; line-height: 1.3; }
.mobile-topline { display: flex; justify-content: space-between; font-size: .82em; margin-bottom: 1.8em; }
.mobile-topline > span { font-size: .78em; }
.mobile-brand { display: flex; justify-content: space-between; align-items: center; font-size: 1.6em; font-weight: 700; letter-spacing: -.04em; margin-bottom: 1.2em; }
.mobile-brand span { font-size: .55em; font-weight: 400; }
.mobile-eyebrow { margin: 0 0 .8em; font-size: .52em; letter-spacing: .08em; font-weight: 600; }
.scene-mobile-app h4 { margin: 0 0 .6em; font-size: 2.05em; line-height: 1.03; letter-spacing: -.05em; font-weight: 550; }
.fitness-app { background: #171b18; color: #f4f6ed; }
.fitness-app .mobile-brand { color: #d8fb78; }
.fitness-app .mobile-eyebrow { color: #a1aaa1; }
.fitness-session { padding: 1.3em; border-radius: 1.2em; color: #1b2617; background: #d9f995; }
.fitness-session > span { font-size: .58em; letter-spacing: .08em; }
.fitness-session h5 { font-size: 1.65em; line-height: 1.04; margin: .55em 0 .7em; font-weight: 550; letter-spacing: -.04em; }
.session-metrics { display: flex; gap: 2.5em; }
.session-metrics strong { display: flex; align-items: baseline; gap: .25em; font-size: 2em; font-weight: 500; letter-spacing: -.06em; }
.session-metrics small { font-size: .27em; letter-spacing: .02em; font-weight: 600; }
.session-progress { margin: .6em 0 .8em; }
.session-progress progress { display: block; width: 100%; height: .3em; border: none; accent-color: #405334; }
.session-progress progress::-webkit-progress-bar { background: #bfd785; border-radius: 1em; }
.session-progress progress::-webkit-progress-value { background: #31472a; border-radius: 1em; }
.session-action { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #31472a26; padding-top: .8em; font-size: .66em; font-weight: 650; }
.mobile-section-label { display: flex; justify-content: space-between; align-items: center; margin: 1.9em 0 .8em; font-size: .57em; letter-spacing: .05em; font-weight: 600; }
.mobile-section-label > span { opacity: .55; font-weight: 400; letter-spacing: 0; }
.fitness-exercises > div { display: flex; align-items: center; gap: 1em; padding: .8em 0; border-bottom: 1px solid #ffffff12; font-size: .73em; }
.fitness-exercises > div > span { color: #bac4b2; font-size: .8em; }
.fitness-exercises p { flex: 1; margin: 0; }
.fitness-exercises small { display: block; font-size: .7em; color: #8f9a8d; margin-top: .3em; }
.fitness-exercises svg { width: 1.1em; }
.mobile-bottom-nav { display: flex; justify-content: space-around; align-items: center; padding: 1.2em 0 .5em; margin-top: auto; opacity: .75; font-size: .74em; }
.meals-app { color: #233f30; background: #f9f6ef; }
.meals-app .mobile-brand { font: 600 2em/.8 Georgia, serif; letter-spacing: -.06em; }
.meals-app .mobile-eyebrow { font-size: .44em; color: #7e8374; }
.meals-app h4 { font-family: Georgia, serif; font-size: 2.1em; font-weight: 400; letter-spacing: -.04em; }
.meal-calendar { display: flex; justify-content: space-between; padding: .7em 0 0; }
.meal-calendar > div { display: flex; flex-direction: column; align-items: center; gap: .5em; padding: .75em .9em; border-radius: 2em; font-size: .63em; }
.meal-calendar span { opacity: .6; }
.meal-calendar b { font-weight: 500; }
.meal-calendar .is-today { background: #315640; color: white; }
.meals-app .mobile-section-label { margin-top: 1.8em; }
.meal-feature { border-radius: 1em; overflow: hidden; background: #fff; box-shadow: 0 .2em 1em #243a2b08; }
.meal-feature > img { display: block; width: 100%; height: 10em; object-fit: cover; }
.meal-feature > div { padding: .8em 1em; }
.meal-feature span, .meal-evening > span { font-size: .48em; letter-spacing: .1em; color: #8a876f; }
.meal-feature h5 { margin: .35em 0; font-size: .99em; font-family: Georgia, serif; font-weight: 500; }
.meal-feature p { margin: .5em 0 .2em; font-size: .6em; color: #8b8f84; }
.meal-feature p > span { margin: 0 .6em; }
.meal-evening { display: flex; flex-direction: column; gap: .4em; margin-top: 1em; padding: 1em; border: 1px solid #d9ddcf; border-radius: .8em; }
.meal-evening strong { font: 400 .9em Georgia, serif; }
.meal-evening small { color: #8b8f84; font-size: .6em; }

/* Editorial architecture preview with photographic imagery. */
.scene-studio { display: grid; grid-template-columns: 39% minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 2.8cqw 2cqw; padding: 3cqw 3.5cqw 2cqw; background: #f4f2eb; color: #303c31; overflow: hidden; }
.scene-studio-nav { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.scene-studio-nav strong { font-size: 1.7em; font-weight: 600; letter-spacing: -.04em; }
.scene-studio-nav strong > span { display: block; font-size: .32em; letter-spacing: .18em; margin-top: .35em; font-weight: 400; }
.scene-studio-nav > div { font-size: .78em; }
.scene-studio-heading { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0; }
.scene-studio-heading h4 { margin: 0; font: 400 5.5cqw/1.04 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
.scene-studio-heading p { margin: 2em 0 0; font-size: .88em; line-height: 1.7; color: #7b7e72; }
.scene-studio-photo { min-height: 0; position: relative; background: #dddacf; }
.scene-studio-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.scene-studio-photo > span { position: absolute; right: 1.8em; bottom: 1.3em; font-size: .72em; color: white; text-shadow: 0 1px 3px #000; }
.scene-studio-caption { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.8em; padding-top: 0; font-size: .71em; letter-spacing: .04em; }
.scene-studio-caption > span:nth-child(2) { flex: 1; color: #8d8e83; letter-spacing: 0; }

/* Reuse the same windows as setup thumbnails instead of placeholder drawings. */
.setup-mini-window.setup-real-preview { display: block; position: relative; overflow: hidden; height: 52px; background: #e8ecf0; border: 1px solid #d3d9df; padding: 0; }
.setup-real-preview > .project-preview { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 0; box-shadow: none; }
.setup-mini-window.setup-real-preview.setup-preview-phone { background: transparent; border: 0; box-shadow: none; }
@media (min-width: 901px) { .monitor-device { width: min(470px, 100%); } }

.scene-terminal-window .scene-shell { background: #161b23; color: #c1cad6; }
.scene-terminal-window .scene-chrome { background: #262d36; color: #aeb8c5; }
.scene-terminal-full { padding: 2.5cqw; font: 1.42cqw/1.9 ui-monospace, SFMono-Regular, Menlo, monospace; overflow: hidden; }
.scene-terminal-full p { margin: 0 0 1.3em; }
.scene-terminal-full b { color: #a2d2b3; font-weight: 500; }
.scene-terminal-full span { color: #96aada; }
.scene-terminal-full .terminal-ready { color: #b5d695; font-weight: 600; }
.scene-terminal-full .terminal-ready span { margin-left: 1em; color: #7e8b9d; font-weight: 400; }
.scene-terminal-full .terminal-muted { color: #6e7a8b; }
.scene-docs { display: grid; grid-template-columns: 25% minmax(0,1fr); background: #fff; color: #293541; overflow: hidden; }
.scene-docs aside { background: #f6f8fa; border-right: 1px solid #e6eaf0; padding: 2cqw 1cqw; display: flex; flex-direction: column; gap: .9em; font-size: 1.13cqw; }
.scene-docs aside strong { font-size: 1.15em; padding: 0 .8em; margin-bottom: 1.5em; }
.scene-docs aside span { padding: .45em .8em; color: #75808d; }
.scene-docs aside .docs-selected { background: #e6edf5; color: #376387; border-radius: .4em; }
.scene-docs article { padding: 3cqw 4cqw; }
.scene-docs article small { font-size: .7em; color: #69829a; letter-spacing: .08em; }
.scene-docs h4 { font-size: 2.6cqw; line-height: 1.2; font-weight: 600; margin: .6em 0; letter-spacing: -.03em; }
.scene-docs p { color: #718092; font-size: 1.05cqw; }
.scene-docs h5 { font-size: 1.1cqw; font-weight: 550; margin: 2em 0 .7em; }
.scene-docs pre { background: #f4f6f9; border: 1px solid #e3e7ef; border-radius: .5em; color: #49617a; padding: 1em; font: 1.05cqw/1.7 ui-monospace, monospace; }
.docs-note { padding: 1em; color: #43825b; background: #f0f8f1; border-radius: .4em; font-size: .95cqw; margin-top: 1.5em; }

.monitor-frame .preview-empty { color: #263d4a; }
.monitor-frame .preview-empty span { color: #455c67; opacity: 1; }
.setup-real-preview { pointer-events: none; user-select: none; }