:root {
  color-scheme: light;
  --ds-ink: #17212b;
  --ds-muted: #627083;
  --ds-line: rgba(24, 38, 56, 0.12);
  --ds-line-strong: rgba(24, 38, 56, 0.18);
  --ds-surface: rgba(255, 255, 255, 0.84);
  --ds-surface-strong: #ffffff;
  --ds-surface-soft: rgba(247, 250, 253, 0.9);
  --ds-accent: #167ea2;
  --ds-accent-2: #23c49f;
  --ds-accent-3: #3f69e6;
  --ds-warn: #ef8a38;
  --ds-danger: #d94d63;
  --ds-shadow-sm: 0 8px 24px rgba(21, 33, 49, 0.08);
  --ds-shadow-md: 0 16px 44px rgba(21, 33, 49, 0.12);
  --ds-shadow-lg: 0 24px 72px rgba(21, 33, 49, 0.14);
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 22px;
  --ds-radius-xl: 28px;
}

html {
  scroll-behavior: smooth;
}

body.mk-page {
  color: var(--ds-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 6%, rgba(35, 196, 159, 0.12), transparent 28rem),
    radial-gradient(circle at 92% 0%, rgba(63, 105, 230, 0.1), transparent 24rem),
    linear-gradient(180deg, #f8fbfd 0%, #eef4f8 100%);
}

body.mk-page *,
body.mk-page *::before,
body.mk-page *::after {
  box-sizing: border-box;
}

body.mk-page a {
  color: inherit;
  text-decoration: none;
}

body.mk-page :is(h1, h2, h3, h4, p) {
  letter-spacing: 0;
}

body.mk-page :is(.site-header, .topbar) {
  border-bottom: 1px solid var(--ds-line);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
}

body.mk-page :is(.brand, .mk-brand) {
  color: var(--ds-ink);
  font-weight: 850;
}

body.mk-page :is(.brand-mark, .logo-mark, .mk-brand-mark) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

body.mk-page :is(.brand-mark, .logo-mark) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.page-index .brand {
  gap: 0;
}

body.page-index .logo-mark {
  width: auto;
  height: 42px;
  display: block;
}

body.page-index .logo-mark img {
  width: auto;
  height: 100%;
}

body.mk-page :is(.brand-name, .mk-brand-name) {
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.mk-page :is(.brand-tag, .mk-brand-tag) {
  color: var(--ds-muted);
}

body.mk-page :is(.panel, .tool-stage, .hero-copy, .hero-upload, .cta-panel, .control-card, .point-card) {
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.76));
  box-shadow: var(--ds-shadow-md);
  backdrop-filter: blur(14px);
}

body.mk-page :is(.panel-body, .panel-section, .control-card) {
  color: var(--ds-ink);
}

body.mk-page :is(.eyebrow, .hero-kicker, .kicker, .badge, .header-link) {
  border: 1px solid rgba(22, 126, 162, 0.14);
  color: #176f87;
  background: rgba(35, 196, 159, 0.08);
}

body.mk-page :is(.hero-copy, .sub, .hero-copy p, .drop-copy, .hint, .status, .brand-tag, .viewer-title span, .section-title span) {
  color: var(--ds-muted);
}

body.mk-page :is(.section-title, .panel-title) {
  color: var(--ds-muted);
  font-weight: 850;
}

body.mk-page :is(.dropzone, .empty-state, .codebox) {
  border: 1.5px dashed rgba(22, 126, 162, 0.2);
  background:
    linear-gradient(180deg, rgba(22, 126, 162, 0.04), rgba(35, 196, 159, 0.05)),
    rgba(255, 255, 255, 0.9);
}

body.mk-page :is(.dropzone.dragover) {
  border-color: var(--ds-accent);
  background:
    linear-gradient(180deg, rgba(22, 126, 162, 0.08), rgba(35, 196, 159, 0.09)),
    rgba(255, 255, 255, 0.96);
}

body.page-index :is(.nav-cta, .primary-btn, .secondary-btn),
body.page-svgtrace button,
body.page-svgtostl button,
body.page-stl-viewer button {
  font-weight: 800;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

body.page-index :is(.nav-cta, .primary-btn),
body.page-svgtrace button:not(.secondary):not(.ghost),
body.page-svgtostl button:not(.secondary):not(.ghost),
body.page-stl-viewer button.primary {
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-2));
  box-shadow: 0 14px 32px rgba(22, 126, 162, 0.2);
}

body.page-index .secondary-btn,
body.page-svgtrace button.secondary,
body.page-svgtostl button.secondary,
body.page-stl-viewer button:not(.primary) {
  color: var(--ds-ink);
  border: 1px solid var(--ds-line);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 18px rgba(21, 33, 49, 0.05);
}

body.page-svgtrace button.ghost,
body.page-svgtostl button.ghost {
  color: var(--ds-muted);
  border: 1px solid var(--ds-line);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: none;
}

body.mk-page :is(.nav-cta, .primary-btn, .secondary-btn, .icon-btn, .text-btn, .shape-btn, .tool-card, button):hover {
  transform: translateY(-1px);
}

body.mk-page :is(.nav-cta, .primary-btn, .secondary-btn, .icon-btn, .text-btn, .shape-btn, .tool-card, button):active {
  transform: translateY(0);
}

body.mk-page :is(.icon-btn, .text-btn, .shape-btn, .tab, .shape-layer, .tool-card) {
  border: 1px solid var(--ds-line);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(21, 33, 49, 0.04);
}

body.mk-page :is(.tool-card) {
  overflow: hidden;
}

body.mk-page :is(.tool-card:hover, .icon-btn:hover, .text-btn:hover, .shape-btn:hover, .shape-layer:hover, .tab:hover) {
  border-color: var(--ds-line-strong);
  box-shadow: var(--ds-shadow-sm);
}

body.mk-page :is(label, .field) {
  color: var(--ds-muted);
  font-weight: 750;
}

body.page-svgtrace :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea),
body.page-svgtostl :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea),
body.page-stl-viewer :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea),
body.page-freecad :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea) {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, 0.96);
  color: var(--ds-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.page-svgtrace :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea):focus,
body.page-svgtostl :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea):focus,
body.page-stl-viewer :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea):focus,
body.page-freecad :is(input:not([type="range"]):not([type="checkbox"]):not([type="color"]), select, textarea):focus {
  border-color: rgba(22, 126, 162, 0.4);
  box-shadow:
    0 0 0 4px rgba(22, 126, 162, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  outline: none;
}

body.mk-page input[type="range"] {
  accent-color: var(--ds-accent);
}

body.mk-page input[type="color"] {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, 0.96);
}

body.mk-page details.settings-group,
body.mk-page .panel-section,
body.mk-page .section,
body.mk-page .control-card {
  border-color: var(--ds-line);
}

body.mk-page .status {
  font-weight: 650;
}

body.mk-page .empty,
body.mk-page .empty-state {
  color: var(--ds-muted);
}

body.mk-page .window-title,
body.mk-page .viewer-title strong,
body.mk-page .drop-title,
body.mk-page .section-title h2,
body.mk-page .panel-title,
body.mk-page .tool-card h3 {
  color: var(--ds-ink);
}

body.page-freecad .topbar,
body.page-freecad .sidebar,
body.page-freecad .inspector {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
}

body.page-freecad .scene-shell {
  background:
    radial-gradient(circle at 18% 16%, rgba(22, 126, 162, 0.14), transparent 24rem),
    linear-gradient(180deg, #edf4fb, #dde7f3);
}

body.page-index .site-header {
  background: rgba(248, 251, 253, 0.84);
}

body.page-svgtrace .site-header,
body.page-stl-viewer .site-header,
body.page-svgtostl .topbar,
body.page-freecad .topbar {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 14px;
}

body.page-index .tool-icon,
body.page-svgtrace .upload-icon,
body.page-stl-viewer .upload-icon {
  box-shadow: inset 0 0 0 1px rgba(22, 126, 162, 0.08);
}

body.page-svgtrace .app,
body.page-svgtostl .layout,
body.page-stl-viewer .hero {
  gap: 18px;
}

body.page-svgtrace .panel,
body.page-svgtostl .panel,
body.page-stl-viewer .panel,
body.page-freecad .sidebar,
body.page-freecad .inspector {
  box-shadow: var(--ds-shadow-md);
}