:root {
  --bg: #070707;
  --panel: #121212;
  --panel-2: #181818;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.24);
  --text: #f3efe7;
  --muted: rgba(243, 239, 231, 0.62);
  --accent: #c96a3b;
  --surface: #ede6dc;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Noto Sans TC", "Manrope", sans-serif;
}

body {
  min-height: 100vh;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  min-height: 100vh;
}

.sidebar {
  padding: 18px;
  border-right: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    var(--panel);
  overflow-y: auto;
}

.brandbar,
.panel,
.workspace__topbar,
.stage,
.template-card,
.size-card,
.artboard {
  border: 1px solid var(--line);
  border-radius: 0;
}

.brandbar {
  padding: 14px;
  background: var(--panel-2);
  margin-bottom: 16px;
}

.brandbar__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.brandbar__meta {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.panel {
  padding: 14px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.02);
}

.panel__title,
.section-kicker,
.field span,
.artboard__kicker {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--muted);
}

.panel__title {
  margin-bottom: 12px;
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.field--range input[type="range"] {
  width: 100%;
}

.field input[type="text"],
.field select,
.field input[type="color"] {
  width: 100%;
  min-height: 42px;
  background: #101010;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 10px;
}

.field input[type="color"] {
  padding: 4px;
}

.split-grid,
.preset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.stack-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.stack-actions--single {
  grid-template-columns: 1fr;
}

.filter-btn,
.action-btn {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  background: #141414;
  color: var(--text);
  cursor: pointer;
}

.filter-btn:hover,
.filter-btn.active,
.action-btn:hover,
.action-btn--primary {
  background: var(--accent);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.note-stack {
  display: grid;
  gap: 8px;
}

.mini-note,
.asset-status {
  border: 1px solid var(--line);
  padding: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  background: rgba(255, 255, 255, 0.02);
}

.inline-toggle {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
}

.inline-toggle label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hidden-file-input,
.hidden-canvas {
  display: none;
}

.workspace {
  padding: 18px;
  overflow-y: auto;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    #0c0c0c;
  background-size: 40px 40px;
}

.workspace__topbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 14px;
}

.stage {
  background: #111111;
  padding: 18px;
  margin-bottom: 22px;
}

.stage__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
}

.artboard {
  position: relative;
  width: min(100%, 1120px);
  aspect-ratio: var(--artboard-width, 1440) / var(--artboard-height, 720);
  min-height: 320px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #0f0f0f;
}

.artboard__grid,
.artboard__image-frame,
.artboard__image,
.artboard::before,
.artboard::after,
.template-card::after {
  position: absolute;
}

.artboard__grid,
.artboard::before,
.artboard::after,
.template-card::after {
  inset: 0;
}

.artboard__grid {
  opacity: calc(0.24 * var(--pattern-strength, 1));
}

.artboard__image-frame {
  inset: var(--image-top, 0) auto auto var(--image-left, 0);
  width: var(--image-width, 40%);
  height: var(--image-height, 100%);
  overflow: hidden;
  cursor: grab;
  z-index: 1;
}

.artboard__image-frame.is-dragging,
.artboard__panel--main.is-dragging {
  cursor: grabbing;
}

.artboard__image {
  opacity: 0.92;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: normal;
  transform: translate(0, 0) scale(1) rotate(0deg);
  transform-origin: center;
  pointer-events: none;
}

.artboard::before {
  content: "";
  pointer-events: none;
  z-index: 0;
}

.artboard::after,
.template-card::after {
  content: "";
  pointer-events: none;
  z-index: 0;
}

.artboard__panel {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.artboard__panel--main {
  inset: var(--main-top, 8%) auto auto var(--main-left, 6%);
  width: var(--main-width, 48%);
  cursor: grab;
}

.artboard__panel--side {
  inset: auto var(--side-right, 6%) var(--side-bottom, 8%) auto;
  width: var(--side-width, 24%);
  align-items: flex-start;
}

.artboard__headline {
  margin: 0;
  font-size: clamp(2.2rem, calc(5vw * var(--headline-scale, 1)), 5rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.artboard__subline {
  margin: 0;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.6;
}

.artboard__brand,
.artboard__layout,
.artboard__cta {
  display: inline-flex;
}

.artboard__cta {
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid currentColor;
}

.artboard[data-show-asset="false"] .artboard__image {
  opacity: 0;
}

.section-block {
  margin-bottom: 28px;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 16px;
}

.section-heading h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
}

.section-heading p {
  margin: 0;
  max-width: 52ch;
  color: var(--muted);
  line-height: 1.6;
}

.size-groups {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.size-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.size-card__top,
.template-card__meta,
.template-card__footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.size-card h3,
.template-card h3 {
  margin: 0;
}

.size-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.template-card {
  grid-column: span 4;
  min-height: 280px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease;
}

.template-card:hover,
.template-card.is-selected {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.42);
}

.template-card__image,
.template-card__overlay,
.template-card__pattern {
  position: absolute;
  inset: 0;
}

.template-card__image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.88;
}

.template-card__pattern {
  opacity: 0.6;
}

.template-card__overlay {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  z-index: 2;
}

.template-card h3 {
  margin-top: 28px;
  max-width: 12ch;
  font-size: 1.95rem;
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.template-card p {
  margin: 14px 0 0;
  max-width: 30ch;
  line-height: 1.55;
}

.template-card__footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid currentColor;
}

.style-minimal {
  background:
    linear-gradient(135deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 82%, white) 100%);
  color: #161514;
}

.style-minimal .artboard__grid,
.style-minimal .template-card__pattern {
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(0, 0, 0, 0.08) 72% 73%, transparent 73% 100%),
    linear-gradient(0deg, transparent 0 78%, rgba(0, 0, 0, 0.08) 78% 79%, transparent 79% 100%);
}

.style-tech {
  background:
    linear-gradient(180deg, rgba(72, 217, 255, 0.12), transparent 36%),
    linear-gradient(135deg, #08131a, #132834 62%, #0a1d29);
  color: #dff7ff;
}

.style-tech .artboard__grid,
.style-tech .template-card__pattern {
  background:
    linear-gradient(rgba(223, 247, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 247, 255, 0.08) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 70%, rgba(72, 217, 255, 0.18) 70% 71%, transparent 71% 100%);
  background-size: 28px 28px, 28px 28px, auto;
}

.style-street {
  background:
    linear-gradient(135deg, #131313, #47231b 42%, #a73c22 100%);
  color: #fff5ec;
}

.style-street .artboard__grid,
.style-street .template-card__pattern {
  background:
    linear-gradient(145deg, transparent 0 58%, rgba(255, 255, 255, 0.12) 58% 72%, transparent 72% 100%),
    linear-gradient(0deg, transparent 0 82%, rgba(255, 255, 255, 0.2) 82% 84%, transparent 84% 100%);
}

.artboard[data-substyle="luxury-minimal"],
.template-card[data-substyle="luxury-minimal"] {
  letter-spacing: -0.01em;
}

.artboard[data-substyle="luxury-minimal"] {
  background:
    linear-gradient(135deg, #f6f0e8, #e9dfd0 60%, #ddd0bf);
}

.artboard[data-substyle="luxury-minimal"] .artboard__grid,
.template-card[data-substyle="luxury-minimal"] .template-card__pattern {
  background:
    linear-gradient(90deg, transparent 0 84%, rgba(0, 0, 0, 0.05) 84% 85%, transparent 85% 100%);
  opacity: calc(0.12 * var(--pattern-strength, 1));
}

.artboard[data-substyle="luxury-minimal"] .artboard__headline,
.template-card[data-substyle="luxury-minimal"] h3 {
  font-family: "Cormorant Garamond", "Noto Sans TC", serif;
  font-weight: 600;
  max-width: 10ch;
  line-height: 0.86;
  letter-spacing: -0.045em;
}

.artboard[data-substyle="luxury-minimal"] .artboard__panel--main {
  width: min(38%, var(--main-width, 48%));
}

.artboard[data-substyle="luxury-minimal"]::after,
.template-card[data-substyle="luxury-minimal"]::after {
  background:
    linear-gradient(0deg, transparent 0 90%, rgba(0, 0, 0, 0.08) 90% 91%, transparent 91% 100%);
  opacity: 0.65;
}

.artboard[data-substyle="luxury-minimal"] .artboard__image-frame {
  border: 1px solid rgba(0, 0, 0, 0.12);
}

.artboard[data-substyle="luxury-minimal"][data-variant="quietGallery"] .artboard__panel--main,
.template-card[data-substyle="luxury-minimal"][data-variant="quietGallery"] .template-card__overlay > div:nth-child(2) {
  max-width: 34%;
}

.artboard[data-substyle="luxury-minimal"][data-variant="haloCircle"] .artboard__image-frame {
  inset: 14% auto auto 58%;
  width: 26%;
  height: 52%;
  border-radius: 999px;
  box-shadow: 0 0 0 18px rgba(255, 255, 255, 0.18);
}

.artboard[data-substyle="luxury-minimal"][data-variant="offsetFrame"] .artboard__image-frame {
  inset: 8% auto auto 62%;
  width: 22%;
  height: 72%;
}

.artboard[data-substyle="swiss-grid"] .artboard__grid,
.template-card[data-substyle="swiss-grid"] .template-card__pattern {
  background:
    linear-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  opacity: calc(0.4 * var(--pattern-strength, 1));
}

.artboard[data-substyle="swiss-grid"] .artboard__headline,
.template-card[data-substyle="swiss-grid"] h3 {
  font-family: "Space Grotesk", "Noto Sans TC", sans-serif;
  font-size: clamp(2.1rem, calc(4.2vw * var(--headline-scale, 1)), 4.4rem);
  text-transform: uppercase;
  letter-spacing: -0.06em;
}

.artboard[data-substyle="swiss-grid"] .artboard__kicker,
.template-card[data-substyle="swiss-grid"] .template-card__meta span {
  font-weight: 700;
}

.artboard[data-substyle="swiss-grid"]::after,
.template-card[data-substyle="swiss-grid"]::after {
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(0, 0, 0, 0.18) 16% 16.7%, transparent 16.7% 100%),
    linear-gradient(0deg, transparent 0 78%, rgba(0, 0, 0, 0.18) 78% 78.8%, transparent 78.8% 100%);
  opacity: 0.7;
}

.artboard[data-substyle="swiss-grid"] .artboard__image-frame {
  outline: 2px solid rgba(0, 0, 0, 0.14);
  outline-offset: -10px;
}

.artboard[data-substyle="swiss-grid"][data-variant="wideRibbon"] .artboard__panel--main {
  inset: 10% auto auto 10%;
  width: 62%;
}

.artboard[data-substyle="swiss-grid"][data-variant="wideRibbon"] .artboard__image-frame {
  inset: auto auto 8% 10%;
  width: 80%;
  height: 18%;
}

.artboard[data-substyle="swiss-grid"][data-variant="monoStack"] .artboard__panel--main {
  inset: 10% auto auto 8%;
  width: 26%;
}

.artboard[data-substyle="swiss-grid"][data-variant="monoStack"] .artboard__image-frame {
  inset: 8% auto auto 40%;
  width: 18%;
  height: 84%;
}

.artboard[data-substyle="future-dashboard"] .artboard__grid,
.template-card[data-substyle="future-dashboard"] .template-card__pattern {
  background:
    linear-gradient(rgba(223, 247, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 247, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 76%, rgba(43, 168, 200, 0.18) 76% 77%, transparent 77% 100%);
  background-size: 20px 20px, 20px 20px, auto;
  opacity: calc(0.48 * var(--pattern-strength, 1));
}

.artboard[data-substyle="future-dashboard"] .artboard__headline,
.template-card[data-substyle="future-dashboard"] h3 {
  font-family: "Space Grotesk", "Noto Sans TC", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.07em;
}

.artboard[data-substyle="future-dashboard"] .artboard__panel--side,
.template-card[data-substyle="future-dashboard"] .template-card__footer {
  border-top: 1px solid currentColor;
  padding-top: 10px;
}

.artboard[data-substyle="future-dashboard"]::after,
.template-card[data-substyle="future-dashboard"]::after {
  background:
    linear-gradient(90deg, transparent 0 72%, rgba(72, 217, 255, 0.24) 72% 73%, transparent 73% 100%),
    linear-gradient(0deg, transparent 0 22%, rgba(72, 217, 255, 0.12) 22% 23%, transparent 23% 100%);
  opacity: 0.8;
}

.artboard[data-substyle="future-dashboard"] .artboard__image-frame {
  box-shadow:
    0 0 0 1px rgba(72, 217, 255, 0.24),
    0 0 36px rgba(72, 217, 255, 0.12);
}

.artboard[data-substyle="future-dashboard"] .artboard__panel--main {
  background: rgba(5, 15, 22, 0.28);
  padding: 18px;
  backdrop-filter: blur(6px);
}

.artboard[data-substyle="future-dashboard"][data-variant="scanMatrix"] .artboard__image-frame {
  inset: 10% auto auto 58%;
  width: 32%;
  height: 78%;
}

.artboard[data-substyle="future-dashboard"][data-variant="wideRibbon"] .artboard__image-frame {
  inset: 68% auto auto 4%;
  width: 92%;
  height: 18%;
}

.artboard[data-substyle="future-dashboard"][data-variant="jewelBlock"] .artboard__image-frame {
  inset: 18% auto auto 66%;
  width: 18%;
  height: 28%;
}

.artboard[data-substyle="cyber-glitch"] .artboard__grid,
.template-card[data-substyle="cyber-glitch"] .template-card__pattern {
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255, 0, 102, 0.18) 12% 16%, transparent 16% 28%, rgba(0, 255, 255, 0.16) 28% 34%, transparent 34% 100%),
    linear-gradient(0deg, transparent 0 72%, rgba(255, 255, 255, 0.14) 72% 74%, transparent 74% 100%);
  background-size: 100% 100%, 100% 22px;
  opacity: calc(0.52 * var(--pattern-strength, 1));
}

.artboard[data-substyle="cyber-glitch"] .artboard__headline,
.template-card[data-substyle="cyber-glitch"] h3 {
  font-family: "Space Grotesk", "Noto Sans TC", sans-serif;
  text-shadow:
    2px 0 rgba(255, 0, 102, 0.42),
    -2px 0 rgba(0, 255, 255, 0.35);
  transform: skewX(-4deg);
}

.artboard[data-substyle="cyber-glitch"] .artboard__image,
.template-card[data-substyle="cyber-glitch"] .template-card__image {
  mix-blend-mode: screen;
  filter: saturate(1.15) contrast(1.08);
}

.artboard[data-substyle="cyber-glitch"]::after,
.template-card[data-substyle="cyber-glitch"]::after {
  background:
    linear-gradient(180deg, transparent 0 8%, rgba(255, 255, 255, 0.12) 8% 9%, transparent 9% 14%, rgba(255, 0, 102, 0.12) 14% 16%, transparent 16% 100%);
  opacity: 0.9;
}

.artboard[data-substyle="cyber-glitch"] .artboard__image-frame {
  filter: drop-shadow(8px 0 0 rgba(255, 0, 102, 0.25))
    drop-shadow(-8px 0 0 rgba(0, 255, 255, 0.2));
}

.artboard[data-substyle="cyber-glitch"][data-variant="scanMatrix"] .artboard__panel--main {
  inset: 8% auto auto 8%;
  width: 38%;
  transform: skewX(-4deg);
}

.artboard[data-substyle="cyber-glitch"][data-variant="monoStack"] .artboard__image-frame {
  inset: 6% auto auto 70%;
  width: 16%;
  height: 88%;
}

.artboard[data-substyle="cyber-glitch"][data-variant="narrowPoster"] .artboard__image-frame {
  inset: 42% auto auto 8%;
  width: 26%;
  height: 48%;
  transform: rotate(-7deg);
}

.artboard[data-substyle="street-collage"] .artboard__grid,
.template-card[data-substyle="street-collage"] .template-card__pattern {
  background:
    linear-gradient(145deg, transparent 0 22%, rgba(255, 245, 236, 0.2) 22% 36%, transparent 36% 48%, rgba(255, 245, 236, 0.14) 48% 62%, transparent 62% 100%),
    linear-gradient(0deg, transparent 0 80%, rgba(255, 245, 236, 0.24) 80% 83%, transparent 83% 100%);
  opacity: calc(0.58 * var(--pattern-strength, 1));
}

.artboard[data-substyle="street-collage"] .artboard__headline,
.template-card[data-substyle="street-collage"] h3 {
  font-family: "Oswald", "Noto Sans TC", sans-serif;
  font-weight: 700;
  max-width: 8ch;
  text-transform: uppercase;
  line-height: 0.88;
}

.artboard[data-substyle="street-collage"] .artboard__image-frame {
  box-shadow: -12px 12px 0 rgba(255, 245, 236, 0.14);
}

.artboard[data-substyle="street-collage"]::after,
.template-card[data-substyle="street-collage"]::after {
  background:
    linear-gradient(135deg, transparent 0 18%, rgba(255,245,236,0.16) 18% 30%, transparent 30% 48%, rgba(255,245,236,0.12) 48% 61%, transparent 61% 100%);
  opacity: 0.85;
}

.artboard[data-substyle="street-collage"] .artboard__panel--main {
  background: rgba(0, 0, 0, 0.12);
  padding: 12px;
}

.artboard[data-substyle="street-collage"][data-variant="flyerCut"] .artboard__image-frame {
  inset: 10% auto auto 60%;
  width: 28%;
  height: 66%;
  transform: rotate(8deg);
}

.artboard[data-substyle="street-collage"][data-variant="jewelBlock"] .artboard__image-frame {
  inset: 54% auto auto 62%;
  width: 20%;
  height: 20%;
  transform: rotate(-11deg);
}

.artboard[data-substyle="street-collage"][data-variant="edgeCrop"] .artboard__image-frame {
  inset: 0 auto auto 64%;
  width: 36%;
  height: 100%;
}

.artboard[data-substyle="editorial-cover"] .artboard__grid,
.template-card[data-substyle="editorial-cover"] .template-card__pattern {
  background:
    linear-gradient(90deg, transparent 0 70%, rgba(255, 255, 255, 0.12) 70% 71%, transparent 71% 100%),
    linear-gradient(0deg, transparent 0 86%, rgba(255, 255, 255, 0.16) 86% 87%, transparent 87% 100%);
  opacity: calc(0.28 * var(--pattern-strength, 1));
}

.artboard[data-substyle="editorial-cover"] .artboard__headline,
.template-card[data-substyle="editorial-cover"] h3 {
  font-family: "Cormorant Garamond", "Noto Sans TC", serif;
  font-weight: 700;
  font-size: clamp(2.5rem, calc(5.6vw * var(--headline-scale, 1)), 5.8rem);
  max-width: 7ch;
  line-height: 0.84;
}

.artboard[data-substyle="editorial-cover"] .artboard__panel--side,
.template-card[data-substyle="editorial-cover"] .template-card__footer {
  align-items: flex-end;
  text-align: right;
}

.artboard[data-substyle="editorial-cover"]::after,
.template-card[data-substyle="editorial-cover"]::after {
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(255,255,255,0.16) 8% 8.6%, transparent 8.6% 100%),
    linear-gradient(0deg, transparent 0 91%, rgba(255,255,255,0.16) 91% 91.8%, transparent 91.8% 100%);
  opacity: 0.72;
}

.artboard[data-substyle="editorial-cover"] .artboard__kicker,
.artboard[data-substyle="editorial-cover"] .artboard__layout,
.template-card[data-substyle="editorial-cover"] .template-card__meta span {
  font-family: "Manrope", sans-serif;
  letter-spacing: 0.14em;
}

.artboard[data-substyle="editorial-cover"] .artboard__panel--main {
  inset: 8% auto auto 8%;
  width: 52%;
}

.artboard[data-substyle="editorial-cover"] .artboard__panel--side {
  inset: 8% 6% auto auto;
  width: 18%;
}

.artboard[data-substyle="editorial-cover"] .artboard__image-frame {
  inset: 22% auto auto 56%;
  width: 30%;
  height: 56%;
}

.artboard[data-substyle="editorial-cover"][data-variant="narrowPoster"] .artboard__image-frame {
  inset: 18% auto auto 64%;
  width: 18%;
  height: 68%;
}

.artboard[data-substyle="editorial-cover"][data-variant="scanMatrix"] .artboard__panel--main {
  inset: 12% auto auto 10%;
  width: 34%;
}

.artboard[data-substyle="editorial-cover"][data-variant="scanMatrix"] .artboard__image-frame {
  inset: 10% auto auto 50%;
  width: 42%;
  height: 78%;
}

.template-card[data-substyle="luxury-minimal"] h3 {
  font-family: "Cormorant Garamond", "Noto Sans TC", serif;
}

.template-card[data-substyle="swiss-grid"] h3,
.template-card[data-substyle="future-dashboard"] h3,
.template-card[data-substyle="cyber-glitch"] h3 {
  font-family: "Space Grotesk", "Noto Sans TC", sans-serif;
}

.template-card[data-substyle="street-collage"] h3 {
  font-family: "Oswald", "Noto Sans TC", sans-serif;
}

.template-card[data-substyle="editorial-cover"] h3 {
  font-family: "Cormorant Garamond", "Noto Sans TC", serif;
}

.template-card.layout-split .template-card__image {
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%);
}

.template-card.layout-left-image .template-card__image {
  clip-path: polygon(0 0, 46% 0, 46% 100%, 0 100%);
}

.template-card.layout-strip .template-card__image {
  clip-path: polygon(0 72%, 100% 54%, 100% 100%, 0 100%);
}

.template-card.layout-frame .template-card__image {
  clip-path: polygon(56% 10%, 92% 10%, 92% 78%, 56% 78%);
}

.template-card.layout-poster .template-card__image {
  clip-path: polygon(10% 58%, 44% 42%, 60% 100%, 20% 100%);
}

.template-card.layout-grid .template-card__image {
  clip-path: polygon(62% 0, 100% 0, 100% 100%, 62% 100%);
}

.artboard[data-image-mask="circle"] .artboard__image-frame {
  border-radius: 999px;
}

.artboard[data-image-mask="diamond"] .artboard__image-frame {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.artboard[data-image-mask="slant"] .artboard__image-frame {
  clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}

.artboard.logo-mode .artboard__image,
.template-card.logo-mode .template-card__image {
  background-size: contain;
  inset: 16% 50% 16% 8%;
  clip-path: none;
}

body[data-mood="minimal"] {
  --accent: #c96a3b;
  --surface: #ede6dc;
}

body[data-mood="tech"] {
  --accent: #2ba8c8;
  --surface: #d9edf2;
}

body[data-mood="street"] {
  --accent: #d85a28;
  --surface: #ece0d2;
}

@media (max-width: 1200px) {
  .size-groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .template-card {
    grid-column: span 6;
  }
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .section-heading {
    display: grid;
    align-items: start;
  }
}

@media (max-width: 720px) {
  .workspace,
  .sidebar {
    padding: 14px;
  }

  .preset-grid,
  .split-grid,
  .stack-actions,
  .template-grid,
  .size-groups {
    grid-template-columns: 1fr;
  }

  .template-card {
    grid-column: 1 / -1;
  }

  .workspace__topbar,
  .stage__meta,
  .section-heading,
  .size-card__top,
  .template-card__meta,
  .template-card__footer {
    flex-direction: column;
  }

  .artboard__panel--main {
    width: 72%;
  }

  .artboard__panel--side {
    width: 48%;
  }
}