.simulation-workspace { display: grid; min-width: 0; gap: 0.9rem; padding-bottom: 1rem; } .simulation-workspace--scene { height: 100%; min-height: 38rem; grid-template-rows: auto minmax(0, 1fr); } .simulation-workspace__head, .simulation-workspace__scene-head, .simulation-viewport__toolbar, .simulation-viewport__notice, .simulation-catalog__summary, .simulation-catalog__state, .simulation-catalog__actions, .simulation-project-window__footer-state, .simulation-source-drop > div, .simulation-upload-progress { display: flex; align-items: center; } .simulation-workspace__head, .simulation-workspace__scene-head { justify-content: space-between; gap: 1rem; padding: 0.25rem 0.2rem; } .simulation-workspace__head h2, .simulation-workspace__head p, .simulation-workspace__scene-head h2 { margin: 0; } .simulation-workspace__head h2, .simulation-workspace__scene-head h2 { margin-top: 0.3rem; color: var(--nodedc-text-primary); font-size: 1.18rem; letter-spacing: -0.035em; } .simulation-workspace__head p { max-width: 46rem; margin-top: 0.38rem; color: var(--nodedc-text-muted); font-size: 0.66rem; line-height: 1.5; } .simulation-workspace__scene-head { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr) auto; } .simulation-catalog { display: grid; gap: 0.55rem; min-width: 0; } .simulation-catalog__summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } .simulation-catalog__summary > div { display: grid; gap: 0.28rem; border-radius: 0.85rem; background: rgb(255 255 255 / 0.03); padding: 0.85rem; } .simulation-catalog__summary span { color: var(--nodedc-text-muted); font-size: 0.58rem; } .simulation-catalog__table th { color: var(--nodedc-text-muted); font-size: 0.52rem; font-weight: 680; letter-spacing: 0.075em; text-transform: uppercase; } .simulation-catalog__summary strong { color: var(--nodedc-text-primary); font-size: 1.15rem; } .simulation-catalog__table-wrap { overflow: auto; border-radius: 1rem; background: rgb(255 255 255 / 0.025); } .simulation-catalog__table { width: 100%; min-width: 62rem; border-collapse: collapse; } .simulation-catalog__table th, .simulation-catalog__table td { border-bottom: 1px solid var(--station-hairline); padding: 0.72rem 0.8rem; text-align: left; vertical-align: middle; } .simulation-catalog__table th:first-child, .simulation-catalog__table td:first-child { padding-left: 1rem; } .simulation-catalog__table th:last-child, .simulation-catalog__table td:last-child { padding-right: 1rem; } .simulation-catalog__table tbody tr { transition: background var(--nodedc-duration-fast) var(--nodedc-ease-standard); } .simulation-catalog__table tbody tr:hover { background: rgb(255 255 255 / 0.025); } .simulation-catalog__table tbody tr:last-child td { border-bottom: 0; } .simulation-catalog__table td { color: var(--nodedc-text-secondary); font-size: 0.64rem; } .simulation-catalog__table td > small, .simulation-catalog__table td > button small { display: block; margin-top: 0.18rem; color: var(--nodedc-text-muted); font-size: 0.54rem; } .simulation-catalog__table td:first-child > button { display: flex; align-items: center; gap: 0.65rem; min-width: 14rem; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .simulation-catalog__table td:first-child > button strong { display: block; max-width: 20rem; overflow: hidden; color: var(--nodedc-text-primary); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; } .simulation-catalog__project-icon, .simulation-catalog__empty > span { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: 0.62rem; background: rgb(var(--nodedc-accent-rgb) / 0.07); color: var(--nodedc-text-secondary); } .simulation-catalog__actions { justify-content: flex-end; gap: 0.28rem; } .simulation-catalog__state, .simulation-catalog__empty { min-height: 20rem; justify-content: center; gap: 0.75rem; color: var(--nodedc-text-muted); border-radius: 1rem; background: rgb(255 255 255 / 0.025); font-size: 0.65rem; } .simulation-catalog__state > div { display: grid; gap: 0.2rem; } .simulation-catalog__state strong, .simulation-catalog__empty strong { color: var(--nodedc-text-primary); } .simulation-catalog__empty { display: flex; flex-direction: column; text-align: center; } .simulation-catalog__empty p { max-width: 30rem; margin: 0; line-height: 1.5; } .simulation-project-window { display: grid; gap: 0.9rem; } .simulation-project-window .nodedc-select-anchor, .simulation-project-window .nodedc-select { width: 100%; } .simulation-source-drop { display: grid; min-height: 12rem; place-items: center; align-content: center; gap: 0.55rem; border: 1px dashed var(--nodedc-glass-outline); border-radius: 0.85rem; background: rgb(255 255 255 / 0.018); color: var(--nodedc-text-muted); text-align: center; transition: border-color var(--nodedc-duration-fast) var(--nodedc-ease-standard), background var(--nodedc-duration-fast) var(--nodedc-ease-standard); } .simulation-source-drop[data-dragging="true"] { border-color: rgb(var(--nodedc-accent-rgb) / 0.72); background: rgb(var(--nodedc-accent-rgb) / 0.08); } .simulation-source-drop > strong { color: var(--nodedc-text-primary); font-size: 0.72rem; } .simulation-source-drop > span { max-width: 30rem; font-size: 0.58rem; } .simulation-source-drop > div { gap: 0.45rem; margin-top: 0.25rem; } .simulation-upload-progress { gap: 0.7rem; border-radius: 0.72rem; background: rgb(255 255 255 / 0.025); padding: 0.7rem; } .simulation-upload-progress > span { position: relative; overflow: hidden; min-width: 12rem; flex: 1 1 auto; height: 0.28rem; border-radius: 999px; background: rgb(255 255 255 / 0.08); } .simulation-upload-progress > span i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: rgb(var(--nodedc-accent-rgb)); } .simulation-upload-progress > div { display: grid; min-width: 9rem; max-width: 13rem; flex: 0 1 13rem; gap: 0.14rem; } .simulation-upload-progress strong { color: var(--nodedc-text-primary); font-size: 0.62rem; } .simulation-upload-progress small { overflow: hidden; color: var(--nodedc-text-muted); font-size: 0.54rem; text-overflow: ellipsis; white-space: nowrap; } .simulation-project-window__footer-state { gap: 0.4rem; color: var(--nodedc-text-muted); font-size: 0.58rem; } .simulation-project-window__error { margin: 0; border-radius: 0.65rem; background: rgb(var(--nodedc-danger-rgb) / 0.08); color: var(--nodedc-danger); padding: 0.65rem 0.75rem; font-size: 0.6rem; line-height: 1.45; } .simulation-viewport { container-type: inline-size; display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 1rem; background: #07090d; } .simulation-viewport__toolbar { display: grid; grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr); align-items: center; gap: 0.55rem; border-bottom: 1px solid var(--station-hairline); background: var(--nodedc-glass-panel-bg-soft); padding: 0.55rem 0.65rem; } .simulation-viewport__toolbar > div:first-child { display: flex; min-width: 12rem; flex: 1; align-items: center; gap: 0.45rem; } .simulation-viewport__controls { display: flex; min-width: 0; align-items: center; justify-content: center; gap: 0.55rem; } .simulation-viewport__settings-anchor { position: relative; display: grid; place-items: center; } .simulation-viewport__settings { position: absolute; z-index: 12; top: calc(100% + 0.65rem); right: 0; display: grid; width: min(21rem, calc(100cqw - 1.3rem)); gap: 0.75rem; border-radius: 0.9rem; background: rgb(25 27 31 / 0.98); box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.42); padding: 0.8rem; } .simulation-viewport__settings-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .simulation-viewport__settings-head > div, .simulation-viewport__settings-group, .simulation-viewport__settings-switches { display: grid; gap: 0.32rem; } .simulation-viewport__settings-head strong { color: var(--nodedc-text-primary); font-size: 0.72rem; } .simulation-viewport__settings span, .simulation-viewport__settings p { color: var(--nodedc-text-muted); font-size: 0.56rem; line-height: 1.45; } .simulation-viewport__settings p { margin: 0; } .simulation-viewport__settings-group { gap: 0.55rem; border-radius: 0.72rem; background: rgb(255 255 255 / 0.035); padding: 0.65rem; } .simulation-viewport__settings-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .simulation-viewport__settings-group-head strong { color: var(--nodedc-text-secondary); font-size: 0.62rem; } .simulation-viewport__settings-switches { gap: 0.55rem; } .simulation-viewport__settings-layer-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem; align-items: center; gap: 0.55rem; } .simulation-viewport__axis-select { width: 4.5rem; min-width: 0; } .simulation-viewport__settings-error { border-radius: 0.65rem; background: rgb(var(--nodedc-danger-rgb) / 0.08); color: var(--nodedc-danger) !important; padding: 0.55rem 0.65rem; } .simulation-viewport__toolbar-balance { min-width: 0; } .simulation-viewport__toolbar > div:first-child > span:last-child, .simulation-viewport__notice > span:last-child { color: var(--nodedc-text-muted); font-size: 0.55rem; } .simulation-viewport__stage { position: relative; min-width: 0; min-height: 30rem; overflow: hidden; } .simulation-viewport__stage canvas { display: block; max-width: 100%; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: none; user-select: none; } .simulation-viewport__stage canvas:active { cursor: grabbing; } .simulation-viewport__stage canvas:focus-visible { box-shadow: inset 0 0 0 2px rgb(var(--nodedc-accent-rgb) / 0.7); } .simulation-viewport__state { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0.55rem; background: rgb(7 9 13 / 0.84); color: var(--nodedc-text-muted); text-align: center; } .simulation-viewport__state strong { color: var(--nodedc-text-primary); font-size: 0.75rem; } .simulation-viewport__state p { max-width: 34rem; margin: 0; font-size: 0.6rem; } .simulation-viewport__notice { gap: 0.55rem; border-top: 1px solid var(--station-hairline); padding: 0.48rem 0.65rem; } @container (max-width: 68rem) { .simulation-viewport__toolbar { grid-template-columns: 1fr; } .simulation-viewport__controls { flex-wrap: wrap; justify-content: center; } .simulation-viewport__toolbar-balance { display: none; } } .simulation-workspace__processing { display: flex; min-height: 18rem; align-items: center; justify-content: center; gap: 0.8rem; } .simulation-workspace__processing-copy { display: grid; max-width: 40rem; gap: 0.25rem; } .simulation-workspace__processing-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 0.55rem; } .simulation-workspace__processing strong { color: var(--nodedc-text-primary); font-size: 0.75rem; } .simulation-workspace__processing p { margin: 0; color: var(--nodedc-text-muted); font-size: 0.62rem; line-height: 1.5; } @media (max-width: 900px) { .simulation-catalog__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .simulation-workspace__scene-head { grid-template-columns: 1fr auto; } .simulation-workspace__scene-head > .nodedc-button { grid-column: 1 / -1; justify-self: start; } }