@composy/layout-vue 0.0.1

package/es/style/workspace.css

@@ -0,0 +1,2370 @@
+:root {
+  color: #172033;
+  background: #eef2f7;
+  font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif;
+  font-synthesis: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+body {
+  min-width: 0;
+}
+
+button {
+  font: inherit;
+}
+
+button:focus-visible {
+  outline: 2px solid #5b7cfa;
+  outline-offset: 2px;
+}
+
+.layout-demo {
+  --ink: #172033;
+  --muted: #768198;
+  --line: #dce3ed;
+  --line-strong: #c7d1df;
+  --panel: #fff;
+  --canvas: #f5f7fb;
+  --topbar: rgb(255 255 255 / 92%);
+  --stage: #fff;
+  --stage-header: rgb(250 251 255 / 88%);
+  --card: #fff;
+  --card-line: #d8def0;
+  --checker-a: #e7e9ed;
+  --checker-b: #f8f9fb;
+  --accent: #536df1;
+  --accent-soft: #eef0ff;
+  --shadow: 0 16px 40px rgb(36 52 82 / 8%);
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-rows: 82px minmax(0, 1fr);
+  overflow: hidden;
+  background: var(--canvas);
+  color: var(--ink);
+}
+
+.topbar {
+  min-width: 0;
+  min-height: 0;
+  position: relative;
+  z-index: 60;
+  padding: 10px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  overflow: visible;
+  background: var(--topbar);
+  border-bottom: 1px solid var(--line);
+  box-shadow: 0 1px 0 rgb(255 255 255 / 80%);
+}
+
+.brand,
+.actions,
+.route-tabs,
+.route-tabs button,
+.mode-button,
+.material-source,
+.breakpoint-button {
+  display: flex;
+  align-items: center;
+}
+
+.brand {
+  min-width: 150px;
+  gap: 10px;
+}
+
+.brand-copy {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.brand-copy strong {
+  color: var(--ink);
+  font-size: 14px;
+  line-height: 1.1;
+  white-space: nowrap;
+}
+
+.brand-copy span {
+  color: var(--muted);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.topbar-center {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.topbar-center__shell {
+  min-width: max-content;
+  padding: 4px 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--panel) 86%, #f0f3fa);
+  box-shadow: 0 5px 18px rgb(49 68 104 / 6%);
+}
+
+.topbar-center__section {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.workspace-mode,
+.device-select {
+  min-height: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  color: var(--muted);
+}
+
+.workspace-mode {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.development-mode {
+  position: relative;
+  min-width: 124px;
+  min-height: 36px;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--panel) 86%, #eef1f7);
+  color: var(--ink);
+  box-shadow: 0 4px 12px rgb(49 68 104 / 5%);
+}
+
+.development-mode:hover,
+.development-mode.is-open {
+  border-color: var(--accent);
+  background: var(--panel);
+  color: var(--accent);
+  box-shadow: 0 0 0 3px rgb(88 105 241 / 10%);
+}
+
+.development-mode .custom-select__trigger {
+  min-width: 122px;
+  min-height: 34px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.development-mode__menu {
+  min-width: 226px;
+  right: 0;
+  left: auto;
+}
+
+.development-mode__menu .custom-select__option {
+  min-height: 44px;
+}
+
+.development-mode__menu .custom-select__option > span {
+  min-width: 0;
+  display: grid;
+  gap: 2px;
+}
+
+.development-mode__menu strong {
+  color: inherit;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.development-mode__menu small {
+  color: var(--muted);
+  font-size: 9px;
+  line-height: 1.2;
+}
+
+.workspace-mode__hint {
+  padding-left: 7px;
+  border-left: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 500;
+}
+
+.device-select {
+  position: relative;
+  padding: 0;
+  background: color-mix(in srgb, var(--panel) 72%, #eef1f7);
+}
+
+.device-select:hover,
+.device-select.is-open {
+  border-color: var(--line);
+  background: var(--panel);
+  color: var(--ink);
+}
+
+.custom-select__trigger {
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 104px;
+  padding: 0 9px;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 11px;
+  text-align: left;
+}
+
+.custom-select__trigger svg:last-child {
+  margin-left: auto;
+  transition: transform 140ms ease;
+}
+
+.custom-select.is-open .custom-select__trigger svg:last-child {
+  transform: rotate(180deg);
+}
+
+.custom-select__menu {
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + 7px);
+  left: 0;
+  min-width: 154px;
+  padding: 5px;
+  display: grid;
+  gap: 2px;
+  border: 1px solid var(--line);
+  border-radius: 11px;
+  background: var(--panel);
+  box-shadow: 0 14px 32px rgb(37 53 91 / 16%);
+  animation: select-menu-in 140ms ease-out;
+}
+
+.custom-select__option {
+  min-height: 31px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 11px;
+  text-align: left;
+}
+
+.custom-select__option:hover,
+.custom-select__option[aria-selected="true"] {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.custom-select__option-meta {
+  margin-left: auto;
+  color: var(--muted);
+  font-size: 9px;
+}
+
+@keyframes select-menu-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.orientation-button {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--panel) 72%, #eef1f7);
+  color: var(--muted);
+  cursor: pointer;
+  transition: 140ms ease;
+}
+
+.orientation-button:hover,
+.orientation-button[aria-pressed="true"] {
+  border-color: var(--line);
+  background: var(--panel);
+  color: var(--accent);
+}
+
+.topbar-center__label {
+  padding: 0 2px 0 4px;
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  white-space: nowrap;
+}
+
+.topbar-center__divider {
+  width: 1px;
+  height: 24px;
+  background: var(--line);
+}
+
+.topbar-center::-webkit-scrollbar {
+  display: none;
+}
+
+.brand-mark {
+  width: 34px;
+  height: 34px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 11px;
+  background: linear-gradient(145deg, #5f74f6, #8495ff);
+  color: #fff;
+  font-size: 18px;
+  font-weight: 800;
+  box-shadow: 0 8px 18px rgb(83 109 241 / 25%);
+}
+
+.brand-mark svg,
+.route-icon,
+.actions svg,
+.material-icon svg,
+.material-add svg,
+.breakpoint-icon svg,
+.panel-tip > svg,
+.inspector-icon svg {
+  display: block;
+  flex: 0 0 auto;
+}
+
+.brand strong,
+.brand span {
+  display: block;
+}
+
+.brand strong {
+  font-size: 14px;
+  letter-spacing: 0.01em;
+}
+
+.brand div > span {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.actions {
+  min-width: 0;
+  gap: 6px;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+
+.route-tabs {
+  flex: 0 0 auto;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--panel) 72%, #eef1f7);
+}
+
+.breakpoint-tabs {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 2px;
+  border-radius: 9px;
+  background: color-mix(in srgb, var(--panel) 72%, #eef1f7);
+}
+
+.breakpoint-tab {
+  min-height: 30px;
+  padding: 4px 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #7a8498;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: 140ms ease;
+}
+
+.breakpoint-tab:hover {
+  color: var(--ink);
+  background: #fff;
+}
+
+.breakpoint-tab[aria-pressed="true"] {
+  background: #fff;
+  color: var(--accent);
+  box-shadow: 0 2px 8px rgb(38 52 82 / 10%);
+}
+
+.breakpoint-download-button {
+  display: none;
+}
+
+.route-tabs button {
+  gap: 5px;
+  min-height: 30px;
+  padding: 4px 9px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #6a7488;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: 140ms ease;
+}
+
+.route-tabs button:hover {
+  color: var(--ink);
+  background: rgb(255 255 255 / 70%);
+}
+
+.route-tabs button[aria-current="page"] {
+  background: #fff;
+  color: var(--accent);
+  box-shadow: 0 2px 8px rgb(38 52 82 / 10%);
+}
+
+.route-icon {
+  color: currentColor;
+}
+
+.actions button {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: #68748a;
+  cursor: pointer;
+  transition: 140ms ease;
+}
+
+.actions button:hover:not(:disabled) {
+  border-color: var(--line);
+  background: #fff;
+  color: var(--ink);
+}
+
+.actions button:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.icon-button {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  display: grid !important;
+  place-items: center;
+  font-size: 20px;
+  line-height: 1;
+}
+
+.icon-button:nth-of-type(5) {
+  color: #e36c7e;
+}
+
+.mode-button {
+  flex: 0 0 auto;
+  gap: 6px;
+  min-height: 32px;
+  padding: 0 11px;
+  border-color: #cbd4ff !important;
+  background: var(--accent-soft) !important;
+  color: #4d63dc !important;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.mode-button span:first-child {
+  font-size: 16px;
+}
+
+.preview-open-button {
+  min-height: 32px;
+  padding: 0 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #cbd4ff !important;
+  border-radius: 8px;
+  background: #fff !important;
+  color: #536df1 !important;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 700;
+  white-space: nowrap;
+}
+
+.preview-open-button:hover {
+  background: var(--accent-soft) !important;
+  box-shadow: 0 5px 14px rgb(83 109 241 / 12%);
+}
+
+.workspace {
+  min-width: 0;
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(290px, 330px) minmax(0, 1fr) minmax(
+      320px,
+      400px
+    );
+  overflow: hidden;
+}
+
+.panel-scroll {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+}
+
+.materials {
+  padding: 16px 16px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 9px;
+  background: linear-gradient(
+    180deg,
+    var(--panel) 0%,
+    color-mix(in srgb, var(--panel) 94%, var(--canvas)) 100%
+  );
+  border-right: 1px solid var(--line);
+}
+
+.panel-heading,
+.inspector-heading {
+  min-width: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.panel-heading {
+  padding: 0 3px 4px;
+}
+
+.materials .panel-heading .eyebrow {
+  display: none;
+}
+
+.materials .panel-heading h2 {
+  margin: 0;
+  font-size: 18px;
+  letter-spacing: -0.03em;
+}
+
+.panel-heading--breakpoint {
+  margin-top: 18px;
+}
+
+.eyebrow,
+.stage-kicker {
+  display: block;
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.panel-heading h2,
+.inspector-heading h2 {
+  margin: 3px 0 0;
+  font-size: 14px;
+  line-height: 1.15;
+}
+
+.panel-count,
+.breakpoint-icon,
+.inspector-icon {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: 9px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.material-toolbar {
+  position: relative;
+  z-index: 10;
+  display: grid;
+  gap: 6px;
+  padding-bottom: 4px;
+  margin: 0 0 2px;
+  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
+}
+
+.material-search {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 38px;
+  padding: 0 11px;
+  border: 1px solid var(--line);
+  border-radius: 11px;
+  background: color-mix(in srgb, var(--panel) 78%, #fff);
+  color: var(--muted);
+}
+
+.material-search:focus-within {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgb(88 105 241 / 10%);
+}
+
+.material-search input {
+  width: 100%;
+  min-width: 0;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  font-size: 11px;
+}
+
+.material-filter-row {
+  min-width: 0;
+  position: relative;
+  z-index: 20;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 28px;
+  gap: 6px;
+}
+
+.material-select {
+  min-width: 0;
+  min-height: 34px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--panel) 78%, #eef2f8);
+  color: var(--muted);
+}
+
+.material-select:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.material-select.is-open {
+  z-index: 30;
+  border-color: var(--accent);
+  background: var(--panel);
+  color: var(--ink);
+  box-shadow: 0 0 0 3px rgb(88 105 241 / 10%);
+}
+
+.material-select .custom-select__trigger {
+  width: 100%;
+  min-width: 0;
+  padding: 0 8px;
+  font-size: 10px;
+}
+
+.material-select .custom-select__trigger span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.material-select .custom-select__menu {
+  min-width: max(100%, 180px);
+  max-width: min(260px, calc(100vw - 32px));
+  max-height: min(280px, calc(100vh - 180px));
+  overflow-y: auto;
+}
+
+.material-select:nth-child(2) .custom-select__menu {
+  right: 0;
+  left: auto;
+}
+
+.material-filter-reset {
+  width: 28px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.material-filter-reset:hover {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.material-result-summary {
+  min-height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 0 2px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.material-result-summary span:last-child {
+  color: var(--accent);
+}
+
+.material-category-list {
+  display: flex;
+  gap: 5px;
+  overflow-x: auto;
+  padding-bottom: 2px;
+  scrollbar-width: none;
+}
+
+.material-category-list::-webkit-scrollbar {
+  display: none;
+}
+
+.material-category-button {
+  flex: 0 0 auto;
+  min-height: 25px;
+  padding: 0 9px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 10px;
+}
+
+.material-category-button:hover,
+.material-category-button.active {
+  border-color: rgb(88 105 241 / 18%);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.material-empty {
+  min-height: 150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 24px 12px;
+  border: 1px dashed var(--line-strong);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--panel) 76%, var(--canvas));
+  color: var(--muted);
+  font-size: 11px;
+  text-align: center;
+}
+
+.material-empty svg {
+  color: var(--accent);
+}
+
+.material-empty strong {
+  color: var(--ink);
+  font-size: 12px;
+}
+
+.material-empty span {
+  font-size: 10px;
+}
+
+.material-empty button {
+  min-height: 28px;
+  margin-top: 4px;
+  padding: 0 10px;
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
+  border-radius: 8px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  cursor: pointer;
+  font: inherit;
+  font-size: 10px;
+}
+
+.material-empty button:hover {
+  background: color-mix(in srgb, var(--accent-soft) 72%, var(--accent));
+}
+
+.material-source {
+  min-height: 72px;
+  gap: 9px;
+  padding: 11px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #fff;
+  color: var(--ink);
+  text-align: left;
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+  box-shadow: 0 4px 14px rgb(48 65 95 / 6%);
+  transition: 140ms ease;
+}
+
+.material-source {
+  display: grid;
+  grid-template-columns: 30px minmax(0, 1fr) auto auto;
+  align-items: center;
+}
+
+.material-source:hover {
+  border-color: #bcc6ff;
+  background: #fbfbff;
+  transform: translateY(-1px);
+  box-shadow: 0 8px 18px rgb(68 87 164 / 12%);
+}
+
+.material-source:active {
+  cursor: grabbing;
+  transform: translateY(0);
+}
+
+.material-source > span:nth-child(2) {
+  min-width: 0;
+  flex: 1;
+}
+
+.material-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.material-size {
+  flex: 0 0 auto;
+  align-self: flex-start;
+  padding: 3px 5px;
+  border-radius: 5px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+}
+
+.material-card-meta {
+  min-width: 0;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 5px;
+}
+
+.material-renderer-badges {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.material-renderer-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 4px;
+  border-radius: 5px;
+  background: #edf5ff;
+  color: #4381d9;
+  font-size: 8px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.material-renderer-badge--vue {
+  background: #eaf8f1;
+  color: #3f9a74;
+}
+
+.material-source strong,
+.material-source small {
+  display: block;
+}
+
+.material-source strong {
+  font-size: 12px;
+}
+
+.material-source small {
+  margin-top: 3px;
+  color: var(--muted);
+  font-size: 10px;
+}
+
+.material-icon {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  flex: 0 0 auto;
+  border-radius: 8px;
+}
+
+.material-icon--metric {
+  background: #edf5ff;
+  color: #4381d9;
+}
+
+.material-icon--chart {
+  background: #f2eeff;
+  color: #8167dd;
+}
+
+.material-add {
+  display: grid;
+  place-items: center;
+  color: #a1abc0;
+}
+
+.breakpoint-button {
+  min-height: 42px;
+  gap: 9px;
+  padding: 8px 9px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: #69758b;
+  text-align: left;
+  cursor: pointer;
+}
+
+.breakpoint-button:hover {
+  background: #f6f8fc;
+  color: var(--ink);
+}
+
+.breakpoint-button[aria-pressed="true"] {
+  border-color: #ccd4ff;
+  background: var(--accent-soft);
+  color: #4d63dc;
+}
+
+.breakpoint-button span:nth-child(2) {
+  flex: 1;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.breakpoint-button small {
+  color: #a0a9b9;
+  font-size: 10px;
+}
+
+.breakpoint-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #c8d0dc;
+}
+
+.breakpoint-button[aria-pressed="true"] .breakpoint-dot {
+  background: var(--accent);
+  box-shadow: 0 0 0 4px rgb(83 109 241 / 14%);
+}
+
+.panel-tip {
+  margin-top: auto;
+  padding: 10px;
+  display: flex;
+  gap: 7px;
+  align-items: flex-start;
+  border-radius: 9px;
+  background: #f7f8fb;
+  color: #8993a5;
+  font-size: 10px;
+  line-height: 1.55;
+}
+
+.panel-tip > svg {
+  color: var(--accent);
+}
+
+.canvas {
+  position: relative;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background-color: var(--checker-a);
+  background-image:
+    linear-gradient(45deg, var(--checker-b) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--checker-b) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--checker-b) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--checker-b) 75%);
+  background-size: 32px 32px;
+  background-position:
+    0 0,
+    0 16px,
+    16px -16px,
+    -16px 0;
+}
+
+.canvas-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  align-self: stretch;
+  width: 100%;
+  min-height: 38px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 3px;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.canvas-toolbar > * {
+  pointer-events: auto;
+}
+
+.canvas-device-control {
+  position: absolute;
+  z-index: 35;
+  left: 0;
+  top: 4px;
+  min-height: 34px;
+  padding: 0;
+  border: 1px solid rgb(198 208 225 / 78%);
+  border-radius: 10px;
+  background: var(--topbar);
+  box-shadow:
+    0 8px 22px rgb(67 84 122 / 12%),
+    inset 0 1px 0 rgb(255 255 255 / 80%);
+  backdrop-filter: blur(12px);
+}
+
+.canvas-device-control:hover,
+.canvas-device-control.is-open {
+  border-color: var(--line-strong);
+  background: var(--panel);
+  color: var(--ink);
+}
+
+.canvas-device-control .custom-select__trigger {
+  min-width: 112px;
+}
+
+.canvas-device-control .custom-select__menu {
+  top: calc(100% + 7px);
+  left: 0;
+}
+
+.canvas-device-control + .orientation-button {
+  position: absolute;
+  z-index: 35;
+  top: 4px;
+  left: 120px;
+  border: 1px solid rgb(198 208 225 / 78%);
+  background: var(--topbar);
+  box-shadow:
+    0 8px 22px rgb(67 84 122 / 12%),
+    inset 0 1px 0 rgb(255 255 255 / 80%);
+  backdrop-filter: blur(12px);
+}
+
+.canvas-device-control + .orientation-button + .canvas-toolbar__divider {
+  display: none;
+}
+
+.canvas-toolbar__group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.canvas-toolbar__divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 3px;
+  background: var(--line);
+}
+
+.canvas-tool-button {
+  width: 29px;
+  height: 29px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: #7a879d;
+  cursor: pointer;
+  transition:
+    background 140ms ease,
+    color 140ms ease,
+    transform 140ms ease;
+}
+
+.canvas-tool-button:hover {
+  background: #f0f3ff;
+  color: var(--accent);
+}
+
+.canvas-tool-button:active {
+  transform: scale(0.94);
+}
+
+.canvas-tool-button.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  box-shadow: inset 0 0 0 1px rgb(83 109 241 / 12%);
+}
+
+.canvas-zoom-label {
+  min-width: 42px;
+  color: #5f6d84;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  text-align: center;
+}
+
+.canvas-viewport {
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 620px;
+  overflow: visible;
+  border-radius: 16px;
+  touch-action: none;
+  cursor: default;
+}
+
+.canvas-viewport.is-pan-tool {
+  cursor: grab;
+}
+
+.canvas-viewport.is-panning {
+  cursor: grabbing;
+}
+
+.canvas-scene {
+  width: 100%;
+  min-width: 0;
+  transform-origin: 0 0;
+  will-change: transform;
+}
+
+.editor-stage,
+.preview-stage,
+.runtime-preview-stage,
+.vanilla-runtime-stage {
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 620px;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  overflow: visible;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--stage);
+  box-shadow: var(--shadow);
+}
+
+.editor-stage::before,
+.preview-stage::before,
+.runtime-preview-stage::before,
+.vanilla-runtime-stage::before {
+  content: "";
+  height: 3px;
+  flex: 0 0 3px;
+  background: linear-gradient(90deg, #5b73f2, #9c83ff 55%, #74cbb1);
+}
+
+.stage-header {
+  min-height: 62px;
+  padding: 13px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--line);
+  background: var(--stage-header);
+}
+
+.stage-header h2 {
+  margin: 4px 0 0;
+  font-size: 15px;
+  line-height: 1.15;
+}
+
+.stage-kicker {
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.stage-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: var(--panel);
+  color: var(--muted);
+  font-size: 10px;
+  white-space: nowrap;
+}
+
+.stage-badge i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #62c49c;
+  box-shadow: 0 0 0 3px rgb(98 196 156 / 15%);
+}
+
+.layout-editor-grid,
+.ldesign-layout-grid,
+.runtime-preview-grid {
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 558px;
+  padding: 16px;
+  position: relative;
+  isolation: isolate;
+  background: var(--stage);
+  --gs-cell-height: 8px;
+  --gs-item-margin-top: 16px !important;
+  --gs-item-margin-bottom: 0px !important;
+  --gs-item-margin-left: 16px !important;
+  --gs-item-margin-right: 0px !important;
+}
+
+.layout-editor-grid.gs-12 {
+  --gs-column-width: calc((100% - 16px) / 12) !important;
+}
+
+.layout-editor-grid.gs-8 {
+  --gs-column-width: calc((100% - 16px) / 8) !important;
+  --gs-item-margin-bottom: -4px !important;
+}
+
+.layout-editor-grid.gs-4 {
+  --gs-column-width: calc((100% - 16px) / 4) !important;
+  --gs-item-margin-bottom: -8px !important;
+}
+
+.layout-editor-grid .grid-stack-item-content {
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: var(--ink);
+  cursor: grab;
+}
+
+.layout-editor-grid .grid-stack-item-content:active,
+.layout-editor-grid.grid-stack-dragging .grid-stack-item-content,
+.layout-editor-grid .ui-draggable-dragging .grid-stack-item-content {
+  cursor: grabbing;
+}
+
+.layout-editor-grid .ui-draggable-dragging,
+.layout-editor-grid .grid-stack-item.ui-draggable-dragging,
+.layout-editor-grid .grid-stack-item.ui-resizable-resizing {
+  transition: none !important;
+  will-change: left, top, width, height;
+}
+
+body > .ui-draggable-dragging[data-layout-material] {
+  transition: none !important;
+  animation: none !important;
+  will-change: left, top;
+}
+
+.layout-editor-grid .grid-stack-placeholder > .placeholder-content {
+  border: 1px dashed rgb(83 109 241 / 58%);
+  border-radius: 12px;
+  background: rgb(83 109 241 / 10%);
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%);
+}
+
+.layout-editor-grid::after {
+  content: "拖入物料开始布局";
+  inset: 50% auto auto 50%;
+  z-index: -1;
+  transform: translate(-50%, -50%);
+  color: #a8b2c5;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  pointer-events: none;
+}
+
+.layout-editor-grid:has(.grid-stack-item)::after {
+  opacity: 0;
+}
+
+.layout-editor-grid .grid-stack-item.is-selected .grid-stack-item-content {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+  border-radius: 12px;
+}
+
+.layout-editor-grid .grid-stack-item:focus-visible .grid-stack-item-content {
+  outline: 2px solid #12a594;
+  outline-offset: -4px;
+}
+
+.ldesign-layout-grid {
+  flex: 1 0 auto;
+  min-height: max(180px, min(558px, var(--canvas-grid-height, 558px)));
+}
+
+.runtime-preview-grid {
+  flex: 1 0 auto;
+}
+
+.layout-item-shell,
+.layout-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.layout-item-shell {
+  display: block;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.layout-item-shell--interactive {
+  cursor: pointer;
+}
+
+.layout-card {
+  min-height: 84px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--card-line);
+  border-radius: 12px;
+  background:
+    linear-gradient(145deg, rgb(255 255 255 / 98%), rgb(248 249 255 / 94%)),
+    var(--card);
+  color: var(--ink);
+  box-shadow:
+    0 10px 24px rgb(71 86 132 / 9%),
+    inset 0 1px 0 rgb(255 255 255 / 80%);
+  transition:
+    border-color 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.layout-card__actions {
+  position: absolute;
+  z-index: 2;
+  top: 9px;
+  right: 9px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  opacity: 0;
+  transform: translateY(-3px);
+  pointer-events: none;
+  transition:
+    opacity 140ms ease,
+    transform 140ms ease;
+  isolation: isolate;
+}
+
+.layout-editor-grid .grid-stack-item:hover .layout-card__actions,
+.layout-editor-grid .grid-stack-item.is-selected .layout-card__actions {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+}
+
+.layout-card__action {
+  position: relative;
+  z-index: 3;
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--panel) 94%, transparent);
+  color: var(--muted);
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 3px 8px rgb(37 53 91 / 10%);
+  transition:
+    color 140ms ease,
+    border-color 140ms ease,
+    background 140ms ease,
+    transform 140ms ease;
+}
+
+.layout-card__action:hover {
+  border-color: #9aa9ff;
+  background: var(--accent-soft);
+  color: var(--accent);
+  transform: translateY(-1px);
+}
+
+.layout-card__meta,
+.layout-card__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.layout-card__meta {
+  color: #8590a5;
+  font-size: 10px;
+}
+
+.layout-card__type {
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.layout-card__status {
+  padding: 2px 5px;
+  border-radius: 4px;
+  background: #edf8f3;
+  color: #4aaf84;
+  white-space: nowrap;
+}
+
+.layout-card__title {
+  margin: 10px 0 7px;
+  overflow: hidden;
+  color: #273249;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.layout-card__value {
+  display: block;
+  color: #25345a;
+  font-size: clamp(20px, 2.2vw, 30px);
+  line-height: 1;
+  letter-spacing: -0.04em;
+}
+
+.layout-card__chart {
+  height: 36px;
+  display: flex;
+  align-items: flex-end;
+  gap: 5px;
+  padding: 0 3px;
+}
+
+.layout-card__chart i {
+  width: 100%;
+  border-radius: 4px 4px 1px 1px;
+  background: linear-gradient(180deg, #8b9cff, #5e72ed);
+}
+
+.layout-card__chart i:nth-child(1) {
+  height: 38%;
+}
+.layout-card__chart i:nth-child(2) {
+  height: 62%;
+}
+.layout-card__chart i:nth-child(3) {
+  height: 48%;
+}
+.layout-card__chart i:nth-child(4) {
+  height: 82%;
+}
+.layout-card__chart i:nth-child(5) {
+  height: 100%;
+}
+
+.layout-card__footer {
+  margin-top: auto;
+  padding-top: 12px;
+  color: #9aa3b4;
+  font-size: 10px;
+}
+
+.layout-card__spark {
+  color: #56b78e;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.widget.selected .layout-card,
+.layout-item-shell[aria-pressed="true"] .layout-card {
+  border-color: #8392f6;
+  box-shadow:
+    0 0 0 2px rgb(83 109 241 / 18%),
+    0 10px 22px rgb(71 86 132 / 12%);
+}
+
+.layout-editor-grid .grid-stack-item:hover .layout-card,
+.layout-item-shell--interactive:hover .layout-card {
+  border-color: #aab6f7;
+  box-shadow:
+    0 0 0 2px rgb(83 109 241 / 12%),
+    0 14px 28px rgb(71 86 132 / 14%);
+}
+
+.inspectors {
+  padding: 18px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--panel);
+  color: var(--ink);
+  border-left: 1px solid var(--line);
+  overflow: auto;
+}
+
+.inspector-heading {
+  align-items: center;
+  padding: 2px 3px 0;
+  flex: 0 0 auto;
+}
+
+.inspector-heading > div:first-child {
+  min-width: 0;
+  flex: 1;
+}
+
+.inspector-heading h2 {
+  color: var(--ink);
+}
+
+.inspector-heading .eyebrow {
+  color: var(--muted);
+}
+
+.inspector-icon {
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+}
+
+.copy-code-button {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  cursor: pointer;
+  transition: 140ms ease;
+}
+
+.copy-code-button:hover {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
+  background: color-mix(in srgb, var(--accent-soft) 72%, #fff);
+  color: var(--accent);
+}
+
+.download-code-button {
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  cursor: pointer;
+  transition: 140ms ease;
+}
+
+.download-code-button:hover {
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
+  background: color-mix(in srgb, var(--accent-soft) 72%, #fff);
+  color: var(--accent);
+}
+
+.code-block {
+  min-height: 0;
+  height: 0;
+  flex: 1 1 0;
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: #f7f9fc;
+  color: #263653;
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  font-size: 11px;
+  line-height: 1.65;
+  tab-size: 2;
+  white-space: pre;
+  scrollbar-width: thin;
+}
+
+.code-block code {
+  display: block;
+  min-width: max-content;
+  color: inherit;
+}
+
+.code-token-comment {
+  color: #8b96a8;
+  font-style: italic;
+}
+
+.code-token-tag,
+.code-token-keyword {
+  color: #7257d8;
+}
+
+.code-token-attribute,
+.code-token-property {
+  color: #197d9a;
+}
+
+.code-token-string {
+  color: #b05b2b;
+}
+
+.code-token-number,
+.code-token-constant {
+  color: #b43d78;
+}
+
+.code-status {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 3px 2px;
+  flex: 0 0 auto;
+  color: var(--muted);
+  font-size: 10px;
+  line-height: 1.4;
+}
+
+.material-card-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  justify-self: end;
+}
+
+.material-code-button {
+  width: 25px;
+  height: 25px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  transition: 140ms ease;
+}
+
+.material-code-button:hover,
+.material-code-button:focus-visible {
+  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
+  background: var(--accent-soft);
+  color: var(--accent);
+  outline: none;
+}
+
+.code-status__dot {
+  width: 6px;
+  height: 6px;
+  flex: 0 0 6px;
+  border-radius: 50%;
+  background: #60c99b;
+  box-shadow: 0 0 0 3px rgb(96 201 155 / 14%);
+}
+
+.preview-dialog {
+  --ink: #172033;
+  --muted: #768198;
+  --line: #dce3ed;
+  --panel: #fff;
+  --canvas: #f5f7fb;
+  --stage: #fff;
+  --card: #fff;
+  --card-line: #d8def0;
+  --accent: #536df1;
+  --accent-soft: #eef0ff;
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  display: grid;
+  place-items: center;
+  padding: 28px;
+  color: var(--ink);
+}
+
+.preview-dialog-enter-active,
+.preview-dialog-leave-active {
+  transition: opacity 180ms ease;
+}
+
+.preview-dialog-enter-active .preview-dialog__panel,
+.preview-dialog-leave-active .preview-dialog__panel {
+  transition:
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 180ms ease;
+}
+
+.preview-dialog-enter-from,
+.preview-dialog-leave-to {
+  opacity: 0;
+}
+
+.preview-dialog-enter-from .preview-dialog__panel,
+.preview-dialog-leave-to .preview-dialog__panel {
+  opacity: 0;
+  transform: translateY(14px) scale(0.975);
+}
+
+.preview-dialog__backdrop {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: rgb(20 31 51 / 42%);
+  cursor: default;
+  backdrop-filter: blur(6px);
+}
+
+.preview-dialog__panel {
+  position: relative;
+  z-index: 1;
+  width: min(1080px, 100%);
+  max-height: min(820px, calc(100vh - 56px));
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 18px;
+  background: var(--panel);
+  box-shadow: 0 28px 80px rgb(31 46 78 / 26%);
+}
+
+.preview-dialog__header,
+.preview-dialog__footer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 15px 18px;
+  border-bottom: 1px solid var(--line);
+}
+
+.preview-dialog__header h2 {
+  margin: 4px 0 0;
+  font-size: 17px;
+}
+
+.preview-dialog__header-meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.preview-dialog__header .icon-button {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: var(--panel);
+  color: var(--muted);
+  cursor: pointer;
+  transition: 140ms ease;
+}
+
+.preview-dialog__header .icon-button:hover {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+  transform: rotate(6deg);
+}
+
+.preview-dialog__body {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 18px;
+  background: var(--canvas);
+}
+
+.preview-dialog__canvas {
+  min-height: 520px;
+  padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: var(--stage);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%);
+}
+
+.preview-dialog__canvas .ldesign-layout-grid {
+  min-height: 480px;
+  padding: 0;
+  background: transparent;
+}
+
+.preview-dialog__card {
+  height: 100%;
+}
+
+.preview-dialog__footer {
+  border-top: 1px solid var(--line);
+  border-bottom: 0;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.preview-dialog__close-button {
+  min-height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  cursor: pointer;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.preview-dialog__close-button:hover {
+  border-color: var(--accent);
+}
+
+.material-code-dialog__panel {
+  width: min(820px, 100%);
+}
+
+.material-code-dialog__subtitle {
+  margin: 5px 0 0;
+  color: var(--muted);
+  font-size: 11px;
+}
+
+.material-code-dialog__body {
+  min-height: 0;
+  padding: 16px;
+}
+
+.material-code-dialog__code {
+  min-height: 360px;
+  max-height: min(560px, calc(100vh - 250px));
+  margin: 0;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--stage) 82%, var(--canvas));
+}
+
+.material-code-dialog__actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.material-code-dialog__actions .copy-code-button {
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--panel);
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.material-code-dialog__actions .copy-code-button:hover {
+  border-color: var(--accent);
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.preview-dialog[data-theme="dark"] {
+  --ink: #edf2ff;
+  --muted: #95a3be;
+  --line: #34405a;
+  --panel: #192238;
+  --canvas: #121a2d;
+  --stage: #202b43;
+  --card: #1d2940;
+  --card-line: #405071;
+  --accent: #8ea2ff;
+  --accent-soft: #293762;
+}
+
+.preview-dialog[data-theme="dark"] .preview-dialog__backdrop {
+  background: rgb(4 8 18 / 64%);
+}
+
+.preview-dialog[data-theme="dark"] .preview-dialog__canvas {
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
+}
+
+.preview-dialog[data-theme="dark"] .layout-card {
+  background:
+    linear-gradient(145deg, rgb(39 53 80 / 98%), rgb(29 41 64 / 96%)),
+    var(--card);
+  box-shadow:
+    0 10px 24px rgb(2 8 22 / 30%),
+    inset 0 1px 0 rgb(255 255 255 / 5%);
+}
+
+.preview-dialog[data-theme="dark"] .layout-card__title {
+  color: #edf2ff;
+}
+
+.preview-dialog[data-theme="dark"] .layout-card__value {
+  color: #dbe4ff;
+}
+
+.preview-dialog[data-theme="dark"] .layout-card__meta,
+.preview-dialog[data-theme="dark"] .layout-card__footer {
+  color: #a8b6d0;
+}
+
+@media (max-width: 1080px) {
+  .workspace {
+    grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(
+        260px,
+        320px
+      );
+  }
+
+  .topbar {
+    gap: 10px;
+    padding-inline: 12px;
+  }
+
+  .brand {
+    min-width: 132px;
+  }
+
+  .route-tabs button {
+    padding-inline: 7px;
+  }
+
+  .route-tabs button > span:last-child {
+    display: none;
+  }
+
+  .breakpoint-tab {
+    padding-inline: 7px;
+  }
+
+  .breakpoint-tab span {
+    display: none;
+  }
+
+  .canvas {
+    padding: 14px;
+  }
+}
+
+@media (max-width: 720px) {
+  .layout-demo {
+    grid-template-rows: 70px minmax(0, 1fr);
+  }
+
+  .brand-copy {
+    display: none;
+  }
+
+  .workspace {
+    grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.8fr) minmax(
+        170px,
+        1fr
+      );
+  }
+
+  .materials,
+  .inspectors {
+    padding-inline: 9px;
+  }
+
+  .canvas {
+    padding: 9px;
+  }
+
+  .stage-header {
+    padding-inline: 11px;
+  }
+
+  .stage-header h2 {
+    font-size: 13px;
+  }
+
+  .stage-badge {
+    padding-inline: 6px;
+  }
+
+  .stage-badge i {
+    display: none;
+  }
+
+  .material-source {
+    align-items: flex-start;
+  }
+
+  .material-source > span:nth-child(2) small,
+  .breakpoint-button small,
+  .panel-tip {
+    display: none;
+  }
+
+  .topbar {
+    gap: 8px;
+    padding-inline: 10px;
+  }
+
+  .topbar-center {
+    order: 3;
+    flex: 1 1 100%;
+  }
+
+  .topbar {
+    flex-wrap: wrap;
+  }
+
+  .actions {
+    margin-left: auto;
+  }
+
+  .breakpoint-tabs {
+    display: none;
+  }
+
+  .layout-card {
+    padding: 10px;
+  }
+
+  .layout-card__footer {
+    padding-top: 7px;
+  }
+}
+
+.layout-demo[data-theme="dark"] {
+  --ink: #edf2ff;
+  --muted: #93a1bb;
+  --line: #2d3a50;
+  --line-strong: #43516a;
+  --panel: #151e2e;
+  --canvas: #0e1625;
+  --topbar: rgb(17 25 39 / 94%);
+  --stage: #172235;
+  --stage-header: rgb(24 36 56 / 96%);
+  --card: #1d2a40;
+  --card-line: #3b4b68;
+  --checker-a: #1a2638;
+  --checker-b: #223047;
+  --accent: #90a2ff;
+  --accent-soft: #29345d;
+  --shadow: 0 18px 42px rgb(0 0 0 / 28%);
+  background: var(--canvas);
+}
+
+.layout-demo[data-theme="dark"] .route-tabs,
+.layout-demo[data-theme="dark"] .breakpoint-tabs {
+  background: #1b273b;
+}
+
+.layout-demo[data-theme="dark"] .topbar-center__shell {
+  background: #151f31;
+  border-color: #2d3a50;
+  box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
+}
+
+.layout-demo[data-theme="dark"] .workspace-mode,
+.layout-demo[data-theme="dark"] .development-mode,
+.layout-demo[data-theme="dark"] .device-select,
+.layout-demo[data-theme="dark"] .canvas-device-control,
+.layout-demo[data-theme="dark"] .orientation-button {
+  background: #1b273b;
+  color: #a7b3c9;
+}
+
+.layout-demo[data-theme="dark"] .workspace-mode {
+  background: transparent;
+  color: #b7c2ff;
+}
+
+.layout-demo[data-theme="dark"] .development-mode:hover,
+.layout-demo[data-theme="dark"] .development-mode.is-open {
+  border-color: #455aab;
+  background: #25324b;
+  color: var(--accent);
+}
+
+.layout-demo[data-theme="dark"] .workspace-mode__hint {
+  border-color: #34435d;
+  color: #8190aa;
+}
+
+.layout-demo[data-theme="dark"] .device-select:hover,
+.layout-demo[data-theme="dark"] .device-select.is-open,
+.layout-demo[data-theme="dark"] .canvas-device-control:hover,
+.layout-demo[data-theme="dark"] .canvas-device-control.is-open,
+.layout-demo[data-theme="dark"] .orientation-button:hover,
+.layout-demo[data-theme="dark"] .orientation-button[aria-pressed="true"] {
+  border-color: #455aab;
+  background: #25324b;
+  color: var(--accent);
+}
+
+.layout-demo[data-theme="dark"] .custom-select__menu {
+  border-color: #36455f;
+  background: #17243a;
+  box-shadow: 0 16px 34px rgb(0 0 0 / 32%);
+}
+
+.layout-demo[data-theme="dark"] .custom-select__option:hover,
+.layout-demo[data-theme="dark"] .custom-select__option[aria-selected="true"] {
+  background: #26365b;
+  color: #c5ceff;
+}
+
+.layout-demo[data-theme="dark"] .preview-open-button {
+  border-color: #455aab !important;
+  background: #202d4d !important;
+  color: #c5ceff !important;
+}
+
+.layout-demo[data-theme="dark"] .route-tabs button,
+.layout-demo[data-theme="dark"] .breakpoint-tab {
+  color: #a7b3c9;
+}
+
+.layout-demo[data-theme="dark"] .route-tabs button:hover,
+.layout-demo[data-theme="dark"] .breakpoint-tab:hover,
+.layout-demo[data-theme="dark"] .route-tabs button[aria-current="page"],
+.layout-demo[data-theme="dark"] .breakpoint-tab[aria-pressed="true"] {
+  background: #25324b;
+  color: var(--accent);
+}
+
+.layout-demo[data-theme="dark"] .actions button:hover:not(:disabled),
+.layout-demo[data-theme="dark"] .canvas-tool-button:hover {
+  background: #273552;
+  color: var(--accent);
+}
+
+.layout-demo[data-theme="dark"] .material-source {
+  background: #1b293e;
+  border-color: var(--line);
+  box-shadow: 0 6px 16px rgb(0 0 0 / 18%);
+}
+
+.layout-demo[data-theme="dark"] .material-search {
+  background: #17243a;
+}
+
+.layout-demo[data-theme="dark"] .material-select {
+  background: #1b293e;
+}
+
+.layout-demo[data-theme="dark"] .material-filter-reset:hover {
+  background: #26365b;
+}
+
+.layout-demo[data-theme="dark"] .material-category-button:hover,
+.layout-demo[data-theme="dark"] .material-category-button.active {
+  background: #26365b;
+}
+
+.layout-demo[data-theme="dark"] .material-source:hover {
+  background: #22324e;
+  border-color: #5c6fbb;
+}
+
+.layout-demo[data-theme="dark"] .panel-count,
+.layout-demo[data-theme="dark"] .breakpoint-button[aria-pressed="true"] {
+  background: var(--accent-soft);
+}
+
+.layout-demo[data-theme="dark"] .breakpoint-button {
+  color: #a0aec5;
+}
+
+.layout-demo[data-theme="dark"] .breakpoint-button:hover {
+  background: #202e47;
+}
+
+.layout-demo[data-theme="dark"] .panel-tip {
+  background: #1a2639;
+  color: #8999b5;
+}
+
+.layout-demo[data-theme="dark"] .stage-badge {
+  background: #1f2d45;
+}
+
+.layout-demo[data-theme="dark"] .layout-card {
+  background: var(--card);
+  color: var(--ink);
+  box-shadow:
+    0 12px 26px rgb(0 0 0 / 20%),
+    inset 0 1px 0 rgb(255 255 255 / 4%);
+}
+
+.layout-demo[data-theme="dark"] .layout-card__action {
+  border-color: #40516e;
+  background: #1b2940;
+  color: #a8b6d0;
+}
+
+.layout-demo[data-theme="dark"] .layout-card__title {
+  color: #eef3ff;
+}
+
+.layout-demo[data-theme="dark"] .layout-card__value {
+  color: #dbe3ff;
+}
+
+.layout-demo[data-theme="dark"] .layout-card__meta,
+.layout-demo[data-theme="dark"] .layout-card__footer {
+  color: #9caac1;
+}
+
+.layout-demo[data-theme="dark"] .layout-editor-grid::after {
+  color: #7889a5;
+}
+
+.layout-demo[data-theme="dark"] .inspectors {
+  background: #101827;
+  color: #e9eff9;
+  border-left-color: rgb(10 19 34 / 12%);
+}
+
+.layout-demo[data-theme="dark"] .copy-code-button,
+.layout-demo[data-theme="dark"] .download-code-button {
+  border-color: rgb(153 170 210 / 16%);
+  background: rgb(117 137 255 / 12%);
+  color: #aab5ff;
+}
+
+.layout-demo[data-theme="dark"] .copy-code-button:hover,
+.layout-demo[data-theme="dark"] .download-code-button:hover {
+  border-color: rgb(153 170 210 / 34%);
+  background: rgb(117 137 255 / 22%);
+  color: #fff;
+}
+
+.layout-demo[data-theme="dark"] .code-block {
+  background: #192438;
+  color: #cad5ea;
+  border-color: rgb(153 170 210 / 12%);
+}
+
+.layout-demo[data-theme="dark"] .code-token-comment {
+  color: #71819e;
+}
+
+.layout-demo[data-theme="dark"] .code-token-tag,
+.layout-demo[data-theme="dark"] .code-token-keyword {
+  color: #c4b5fd;
+}
+
+.layout-demo[data-theme="dark"] .code-token-attribute,
+.layout-demo[data-theme="dark"] .code-token-property {
+  color: #80d8ee;
+}
+
+.layout-demo[data-theme="dark"] .code-token-string {
+  color: #f3b18a;
+}
+
+.layout-demo[data-theme="dark"] .code-token-number,
+.layout-demo[data-theme="dark"] .code-token-constant {
+  color: #f3a6cb;
+}
+
+.layout-demo[data-theme="dark"] .code-status {
+  color: #7f8da6;
+}
+
+.layout-demo[data-theme="dark"] .mode-button {
+  border-color: #5265b8 !important;
+  background: #27345c !important;
+  color: #c5ceff !important;
+}