@font-face {
  font-family: Inter;
  src: url("./assets/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("./assets/noto-sans-sc-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@property --rim-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;
  font-family: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --u: min(1px, 0.2272727273vw);
  --blue: #2354ff;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: #000; }
body { margin: 0; color: #fff; background: #000; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid #9cb8ff; outline-offset: 4px; }
button { border: 0; }
button, input { -webkit-appearance: none; appearance: none; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.svg-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { display: block; }

.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: max(100svh, calc(638 * var(--u)));
  overflow: hidden;
  background: #000;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(ellipse calc(365 * var(--u)) calc(260 * var(--u)) at calc(180 * var(--u)) calc(340 * var(--u)), #030135 0%, #02011c 50%, #01000a 78%, transparent 100%);
}

.ambient { position: absolute; z-index: -2; pointer-events: none; }
.ambient-halo {
  left: calc(-107 * var(--u));
  top: calc(226 * var(--u));
  width: calc(520 * var(--u));
  height: calc(325 * var(--u));
  background: radial-gradient(ellipse, #0512bc 0%, #04096c 28%, #020335 51%, transparent 72%);
  filter: blur(calc(27 * var(--u)));
  opacity: .75;
  animation: halo-drift 12s ease-in-out infinite;
}
.ambient-core {
  left: calc(-24 * var(--u));
  top: calc(294 * var(--u));
  width: calc(360 * var(--u));
  height: calc(170 * var(--u));
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 40%, #103bff 0%, #071bdb 25%, #080377 50%, transparent 73%);
  filter: blur(calc(28 * var(--u)));
  opacity: .9;
  animation: core-drift 9s ease-in-out -3s infinite;
}

.site-header {
  position: relative;
  width: calc(372 * var(--u));
  margin-inline: auto;
  padding-top: calc(27 * var(--u));
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--u));
  color: #f4f6ff;
  text-decoration: none;
  font-family: Inter, Arial, sans-serif;
  font-size: calc(20 * var(--u));
  font-weight: 600;
  line-height: calc(24 * var(--u));
  letter-spacing: calc(-.55 * var(--u));
}
.brand-mark { width: calc(28 * var(--u)); height: calc(24 * var(--u)); flex: 0 0 auto; color: #dce8ff; filter: drop-shadow(0 0 calc(7 * var(--u)) rgb(85 125 255 / .18)); }
.hero-content { position: relative; width: calc(372 * var(--u)); margin: calc(122 * var(--u)) auto 0; }
h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  width: max-content;
  max-width: 100%;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: calc(34 * var(--u));
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.015em;
}
h1 > span { display: block; white-space: nowrap; }
.gradient-text {
  /* Keep descenders inside the gradient paint area without moving the panel. */
  padding-bottom: .18em;
  margin-bottom: -.18em;
  color: #adc7ff;
  background: linear-gradient(180deg, #d5dfff 1%, #a9c4ff 43%, #6d9bff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.editor-scene { position: relative; margin-top: calc(57 * var(--u)); height: calc(312 * var(--u)); }
.editor-scene::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--u)) auto auto calc(-1 * var(--u));
  width: calc(260 * var(--u));
  height: calc(172 * var(--u));
  border-top: calc(3 * var(--u)) solid #9ec8ff;
  border-left: calc(4 * var(--u)) solid #7199ff;
  border-top-left-radius: calc(24 * var(--u));
  filter: blur(calc(5 * var(--u)));
  mask-image: linear-gradient(145deg, #000, transparent 76%);
  pointer-events: none;
  animation: edge-breathe 6s ease-in-out -1s infinite;
}
.edge-bloom {
  position: absolute;
  z-index: -1;
  top: calc(-2 * var(--u));
  left: calc(-2 * var(--u));
  width: calc(271 * var(--u));
  height: calc(184 * var(--u));
  border-top: calc(4 * var(--u)) solid #304fff;
  border-left: calc(5 * var(--u)) solid #304fff;
  border-top-left-radius: calc(25 * var(--u));
  filter: blur(calc(6 * var(--u)));
  box-shadow: calc(-7 * var(--u)) calc(-5 * var(--u)) calc(24 * var(--u)) #2650ff, calc(-3 * var(--u)) calc(-3 * var(--u)) calc(43 * var(--u)) #1b40ff;
  mask-image: linear-gradient(140deg, #000 0 30%, transparent 77%);
  animation: edge-breathe 6s ease-in-out -1s infinite;
}
.editor {
  position: relative;
  width: 100%;
  height: calc(311 * var(--u));
  border-radius: calc(23 * var(--u)) calc(23 * var(--u)) 0 0;
  background: linear-gradient(130deg, #101048 0%, #0a092b 43%, #080715 90%);
  mask-image: linear-gradient(#000 0%, #000 37%, rgb(0 0 0 / .91) 57%, rgb(0 0 0 / .25) 76%, transparent 88%);
}
.editor::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent 70%, rgb(1 0 15 / .3) 89%, rgb(1 0 12 / .9));
}
.editor-surface {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 85% 24% at 25% 0%, rgb(31 67 255 / .65), transparent 100%);
  box-shadow: inset calc(2 * var(--u)) calc(2 * var(--u)) calc(11 * var(--u)) rgb(48 84 255 / .85);
  animation: surface-breathe 7s ease-in-out infinite;
}
.editor-rim {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  border: calc(2 * var(--u)) solid transparent;
  border-radius: inherit;
  background: linear-gradient(130deg, #fff 0%, #e4f5ff 8%, #9beaff 15%, #315cff 30%, rgb(16 30 147 / .1) 50%, transparent 70%) border-box;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  opacity: 1;
}
.editor-sweep {
  position: absolute;
  z-index: 7;
  inset: 0;
  border: calc(2 * var(--u)) solid transparent;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--rim-angle) at 50% 42%, transparent 0deg 255deg, #2854ff 282deg, #8bdfff 302deg, #fff 312deg, #507eff 320deg, transparent 333deg 360deg) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .85;
  animation: rim-orbit 8s linear infinite;
}
.toolbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  height: calc(66 * var(--u));
  gap: calc(12 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-bottom: 1px solid rgb(105 106 210 / .12);
}
.canvas-switcher { position: relative; flex: 0 0 auto; }
.canvas-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
  width: calc(129 * var(--u));
  height: calc(40 * var(--u));
  border-radius: calc(12 * var(--u));
  background: linear-gradient(180deg, #2637ac, #1b226d);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
  font-size: calc(16 * var(--u));
  font-weight: 550;
  letter-spacing: calc(-.35 * var(--u));
  transition: background .2s;
}
.canvas-button:hover, .canvas-button[aria-expanded="true"] { background: linear-gradient(#3448cf, #242b82); }
.canvas-mark { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: 0 0 auto; color: #dce8ff; }
.chevron { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: #c2ccff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.tool-buttons { display: flex; gap: calc(8 * var(--u)); align-items: center; }
.tool-button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: calc(38 * var(--u));
  height: calc(40 * var(--u));
  padding: calc(6 * var(--u));
  border-radius: calc(9 * var(--u));
  background: transparent;
  transition: background .2s, transform .2s;
}
.tool-button svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); fill: none; stroke: #effaff; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 calc(3 * var(--u)) #fff) drop-shadow(0 0 calc(7 * var(--u)) #1844ff) drop-shadow(0 0 calc(12 * var(--u)) #002bff); }
.tool-button svg { animation: icon-breathe 4.8s ease-in-out infinite; transform-origin: center; }
.tool-frame svg { animation-delay: -.6s; }
.tool-text svg { animation-delay: -1.2s; }
.tool-vector svg { animation-delay: -1.8s; }
.tool-button:hover svg, .tool-button:focus-visible svg { animation: none; opacity: 1; transform: scale(1.08); }
.tool-frame svg { stroke-width: 2.7; }
.tool-text svg { stroke-width: 2.4; }
.tool-vector svg { stroke: #4f9dff; stroke-width: 2; filter: drop-shadow(0 0 calc(2 * var(--u)) #566bff) drop-shadow(0 0 calc(7 * var(--u)) #0033ff) drop-shadow(0 0 calc(13 * var(--u)) #001aff); }
.tool-button:hover, .tool-button[aria-pressed="true"] { background: rgb(78 93 255 / .2); transform: translateY(calc(-1 * var(--u))); }

.panel-tabs {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(66 * var(--u));
  padding: 0 calc(14 * var(--u));
  gap: calc(1 * var(--u));
  border-bottom: 1px solid rgb(119 111 193 / .1);
  margin-right: calc(30 * var(--u));
}
.panel-tab {
  min-width: calc(74 * var(--u));
  height: calc(39 * var(--u));
  padding: 0 calc(13 * var(--u));
  border-radius: calc(12 * var(--u));
  font-size: calc(16 * var(--u));
  font-weight: 400;
  line-height: 1;
  color: #c8c6dd;
  background: transparent;
  transition: color .2s, background .2s;
}
.panel-tab:first-child { padding-inline: calc(13 * var(--u)); }
.panel-tab.active { color: #f1efff; background: linear-gradient(135deg, #202066, #1a184c); font-weight: 550; }
.panel-tab:hover { color: #fff; background-color: rgb(95 93 188 / .12); }
.search-row { position: relative; margin-right: calc(30 * var(--u)); padding: calc(13 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid rgb(121 111 181 / .11); }
.search-field {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  width: calc(316 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: 1px solid transparent;
  border-radius: calc(12 * var(--u));
  color: #b9b8d0;
  background: linear-gradient(110deg, #1d1c39, #171626);
  transition: border-color .2s, background .2s;
}
.search-field:focus-within { border-color: #565be5; background: #20203d; }
.search-field > svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: 0 0 auto; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; }
.search-field input { width: 100%; min-width: 0; border: 0; padding: 0; outline: none; color: #dddaf2; background: transparent; font-size: calc(16 * var(--u)); letter-spacing: calc(-.2 * var(--u)); }
.search-field input::placeholder { color: #c8c4dd; opacity: 1; }
.search-field input:focus-visible { outline: none; }
.search-field input::-webkit-search-cancel-button { cursor: pointer; }
.search-field kbd { display: none; border: 1px solid #434162; border-radius: 4px; padding: 1px 5px; font-size: 11px; color: #a9a4cf; }
.panel-content { position: relative; height: calc(112 * var(--u)); overflow-y: auto; scrollbar-width: none; padding: calc(23 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); }
.panel-content::-webkit-scrollbar { display: none; }
.panel-content h2 { margin: 0; color: #9691b1; font-size: calc(16 * var(--u)); line-height: 1.25; font-weight: 500; letter-spacing: calc(-.3 * var(--u)); }
.panel-items { display: grid; gap: calc(3 * var(--u)); margin-top: calc(12 * var(--u)); }
.panel-item { display: flex; align-items: center; gap: calc(10 * var(--u)); width: 100%; padding: calc(7 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: transparent; color: #b6b2d3; font-size: calc(14 * var(--u)); text-align: left; }
.panel-item svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.panel-item:hover, .panel-item.selected { background: rgb(75 75 163 / .25); color: #fff; }
.empty-state { margin: calc(5 * var(--u)) 0; color: #b7b0d1; font-size: calc(14 * var(--u)); line-height: 1.5; }
.canvas-menu { position: absolute; z-index: 20; top: calc(47 * var(--u)); left: 0; width: calc(185 * var(--u)); padding: calc(7 * var(--u)); border: 1px solid #33336a; border-radius: calc(12 * var(--u)); background: #16162e; box-shadow: 0 10px 30px #0008; }
.canvas-menu p { margin: calc(6 * var(--u)) calc(8 * var(--u)) calc(9 * var(--u)); color: #8c88ad; font-size: calc(11 * var(--u)); }
.canvas-menu button { display: flex; align-items: center; gap: calc(10 * var(--u)); width: 100%; padding: calc(8 * var(--u)); border-radius: calc(6 * var(--u)); background: transparent; font-size: calc(13 * var(--u)); text-align: left; }
.canvas-menu button:hover { background: #2a2a50; }
.workspace-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border: 1px solid #9898cc; border-radius: 2px; }
.workspace-check { margin-left: auto; visibility: hidden; color: #9baaff; }
[aria-pressed="true"] .workspace-check { visibility: visible; }
.tool-toast { position: absolute; z-index: 10; left: 50%; top: calc(76 * var(--u)); width: max-content; max-width: 95%; padding: calc(10 * var(--u)) calc(15 * var(--u)); border: 1px solid #4544a0; border-radius: calc(9 * var(--u)); background: #15152f; color: #dfdfff; font-size: calc(13 * var(--u)); pointer-events: none; box-shadow: 0 8px 25px #0006; opacity: 0; transform: translate(-50%, calc(5 * var(--u))); transition: opacity .2s, transform .2s; }
.tool-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.editor-scene.is-interacting .editor { mask-image: linear-gradient(#000 0%, #000 74%, rgb(0 0 0 / .4) 93%, transparent 100%); }

.canvas-menu:not([hidden]) { transform-origin: 24px top; animation: menu-reveal .2s cubic-bezier(.2, .8, .2, 1) both; }
.panel-item { animation: item-reveal .32s ease-out both; }
.panel-item:nth-child(2) { animation-delay: .04s; }
.panel-item:nth-child(3) { animation-delay: .08s; }
.panel-item:nth-child(n + 4) { animation-delay: .12s; }

@keyframes rim-orbit {
  to { --rim-angle: 360deg; }
}
@keyframes halo-drift {
  0%, 100% { transform: translate3d(calc(-7 * var(--u)), 0, 0) scale(.98); opacity: .62; }
  50% { transform: translate3d(calc(18 * var(--u)), calc(-13 * var(--u)), 0) scale(1.07); opacity: .88; }
}
@keyframes core-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.96); opacity: .72; }
  50% { transform: translate3d(calc(14 * var(--u)), calc(7 * var(--u)), 0) scale(1.08); opacity: 1; }
}
@keyframes edge-breathe {
  0%, 100% { opacity: .65; }
  50% { opacity: 1; }
}
@keyframes surface-breathe {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
@keyframes icon-breathe {
  0%, 100% { opacity: .72; transform: scale(.97); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes item-reveal {
  from { opacity: 0; transform: translateY(calc(5 * var(--u))); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-reveal {
  from { opacity: 0; transform: translateY(calc(-4 * var(--u))) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 700px) {
  :root { --u: 1.35px; }
  .hero { min-height: max(100svh, 900px); }
  .site-header { width: min(1120px, calc(100% - 96px)); padding-top: 34px; }
  .brand { font-size: 23px; gap: 3px; line-height: 28px; }
  .brand-mark { width: 32px; height: 28px; }
  .hero-content { width: 620px; margin-top: 117px; }
  h1 { font-size: 60px; letter-spacing: -.015em; line-height: 1.3; font-weight: 600; }
  .editor-scene { width: 502.2px; margin-top: 68px; margin-inline: auto; }
  .hero::before { background: radial-gradient(ellipse 650px 470px at 50% 510px, #030135, #01000b 75%, transparent); }
  .ambient-halo { left: calc(50% - 405px); top: 360px; width: 730px; height: 430px; filter: blur(50px); }
  .ambient-core { left: calc(50% - 298px); top: 430px; width: 480px; height: 230px; filter: blur(40px); }
  .search-field:focus-within kbd { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .editor-sweep { display: none; }
}