@import "https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;600;700;800&family=Oxanium:wght@400;600;700&display=swap";
.draw-world[data-v-76f8b8ca] {
  background: radial-gradient(circle at 12% 12%, #ffaa782e, #0000 35%),
    radial-gradient(circle at 88% 84%, #f793bf29, #0000 28%),
    linear-gradient(#4a1809 0%, #5c2008 40%, #4c1708 100%);
}
.draw-panel[data-v-76f8b8ca] {
  background: linear-gradient(145deg, #ffc9a41f, #0000 52%),
    oklab(25.0294% 0.0499091 0.0426735);
  border: 1px solid #e59b7380;
}
.draw-eyebrow[data-v-76f8b8ca] {
  color: #ffbe95;
}
.draw-title[data-v-76f8b8ca],
.draw-section-title[data-v-76f8b8ca],
.draw-label[data-v-76f8b8ca] {
  color: #ffe8d7;
}
.draw-secondary-btn[data-v-76f8b8ca] {
  color: #2d1409;
  background: #fff4eb;
  border-color: #de9b72;
}
.draw-secondary-btn[data-v-76f8b8ca]:hover {
  background: #ffe6d5;
}
.draw-tool-btn[data-v-76f8b8ca] {
  color: #3a1b0d;
  background: #fff4ebf2;
  border: 1px solid #d29673;
}
.draw-tool-btn[data-v-76f8b8ca]:hover {
  background: #ffe8d8;
}
.draw-tool-btn--active[data-v-76f8b8ca] {
  color: #fff;
  background: #2f68d6;
  border-color: #2f68d6;
}
.draw-save-btn[data-v-76f8b8ca] {
  color: #fff;
  background: #1f9a6a;
  border: 1px solid #1f9a6a;
}
.draw-save-btn[data-v-76f8b8ca]:hover {
  background: #19895f;
}
.draw-save-btn--disabled[data-v-76f8b8ca] {
  cursor: not-allowed;
  color: #f2e6dc;
  background: #968675;
  border-color: #968675;
}
.draw-text-input[data-v-76f8b8ca] {
  color: #2d1409;
  background: #fff7f0f7;
  border-color: #d29673;
}
.draw-text-input[data-v-76f8b8ca]::placeholder {
  color: #7e5740;
}
.draw-canvas-shell[data-v-76f8b8ca] {
  border-color: #d9a17f;
}
.draw-gallery-card[data-v-76f8b8ca] {
  background: oklab(26.9378% 0.0532616 0.0447702);
  border-color: #cd8e6a;
}
.draw-feed-list[data-v-76f8b8ca] {
  max-height: 74vh;
  padding-right: 0.2rem;
  overflow-y: auto;
}
.draw-feed-list[data-v-76f8b8ca]::-webkit-scrollbar {
  width: 0.45rem;
}
.draw-feed-list[data-v-76f8b8ca]::-webkit-scrollbar-thumb {
  background: #e49e76b3;
  border-radius: 999px;
}
.draw-muted[data-v-76f8b8ca] {
  color: #ffc8a2;
}
.draw-canvas[data-v-76f8b8ca] {
  aspect-ratio: 8/5;
  touch-action: none;
}
.cursor-trail[data-v-7270d051] {
  z-index: 80;
  pointer-events: none;
  mix-blend-mode: screen;
  position: fixed;
  inset: 0;
}
.panel-shell[data-v-4a591bf4] {
  max-width: 920px;
}
.panel-header[data-v-4a591bf4] {
  margin-bottom: var(--space-3);
  border: 1px solid color-mix(in oklab, var(--border) 44%, transparent 56%);
  background: linear-gradient(
      155deg,
      color-mix(in oklab, var(--accent) 12%, transparent 88%),
      transparent
    ),
    color-mix(in oklab, var(--surface) 78%, #7a3412 22%);
  border-radius: 0.95rem;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  display: flex;
}
.panel-header__title[data-v-4a591bf4] {
  font-size: clamp(1.2rem, 2.8vw, 1.8rem);
  line-height: 1.1;
  font-family: var(--font-title);
  margin: 0.38rem 0 0;
  font-weight: 800;
}
.panel-header__back[data-v-4a591bf4] {
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent 60%);
  min-height: 2.4rem;
  color: var(--text-strong);
  background: color-mix(in oklab, var(--surface-soft) 72%, var(--accent) 28%);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: pointer;
  border-radius: 0.8rem;
  padding: 0.42rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
}
.panel-header__back[data-v-4a591bf4]:hover,
.panel-header__back[data-v-4a591bf4]:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 72%, white 28%);
  outline: none;
  transform: translateY(-1px);
}
.panel-section__top[data-v-4a591bf4] {
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  display: flex;
}
.panel-lock[data-v-4a591bf4] {
  border: 1px solid color-mix(in oklab, var(--accent) 44%, transparent 56%);
  min-height: 2.3rem;
  color: var(--text-soft);
  background: color-mix(in oklab, var(--surface) 82%, #5a2207 18%);
  font: inherit;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 0.75rem;
  padding: 0.35rem 0.8rem;
  font-size: 0.74rem;
}
.panel-form[data-v-4a591bf4] {
  gap: 0.8rem;
  max-width: 34rem;
  margin-top: 1rem;
  display: grid;
}
.panel-form--settings[data-v-4a591bf4] {
  max-width: 100%;
}
.panel-field[data-v-4a591bf4] {
  color: var(--text-soft);
  gap: 0.4rem;
  font-size: 0.9rem;
  display: grid;
}
.panel-input[data-v-4a591bf4] {
  border: 1px solid color-mix(in oklab, var(--accent) 52%, transparent 48%);
  background: color-mix(in oklab, var(--surface-soft) 76%, #ffd4b5 24%);
  min-height: 2.7rem;
  color: var(--text-strong);
  border-radius: 0.82rem;
  padding: 0 0.88rem;
  font-family: inherit;
  font-size: 0.94rem;
}
.panel-input[data-v-4a591bf4]:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 78%, white 22%);
  box-shadow: var(--ring);
  outline: none;
}
.panel-actions[data-v-4a591bf4] {
  flex-wrap: wrap;
  gap: 0.6rem;
  display: flex;
}
.panel-submit[data-v-4a591bf4],
.panel-reset[data-v-4a591bf4] {
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent 60%);
  min-height: 2.48rem;
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0.82rem;
  padding: 0.35rem 0.95rem;
  font-size: 0.74rem;
  font-weight: 700;
}
.panel-reset[data-v-4a591bf4] {
  color: var(--text-soft);
  background: color-mix(in oklab, var(--surface-soft) 86%, transparent 14%);
}
.panel-submit[data-v-4a591bf4] {
  color: #2f1305;
  background: color-mix(in oklab, var(--accent) 62%, #f8b0c8 38%);
  border-color: color-mix(in oklab, var(--accent) 80%, white 20%);
}
.panel-feedback[data-v-4a591bf4] {
  min-height: 1.2rem;
  margin: 0;
  font-size: 0.84rem;
}
.panel-feedback--error[data-v-4a591bf4] {
  color: #ffb4b4;
}
.panel-feedback--success[data-v-4a591bf4] {
  color: #b6ff9f;
}
@media (width<=640px) {
  .panel-header[data-v-4a591bf4] {
    flex-direction: column;
    align-items: stretch;
  }
  .panel-header__back[data-v-4a591bf4] {
    width: 100%;
  }
  .panel-section__top[data-v-4a591bf4] {
    flex-direction: column;
  }
  .panel-lock[data-v-4a591bf4],
  .panel-actions[data-v-4a591bf4] {
    width: 100%;
  }
  .panel-submit[data-v-4a591bf4],
  .panel-reset[data-v-4a591bf4] {
    flex: 1;
    min-width: 0;
  }
}
*,
:before,
:after,
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #3b82f680;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}
.fixed {
  position: fixed;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.h-11 {
  height: 2.75rem;
}
.h-auto {
  height: auto;
}
.min-h-screen {
  min-height: 100vh;
}
.w-full {
  width: 100%;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-full {
  max-width: 100%;
}
.flex-1 {
  flex: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
  cursor: pointer;
}
.resize {
  resize: both;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-6 {
  gap: 1.5rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-\[\#d29673\] {
  --tw-border-opacity: 1;
  border-color: rgb(210 150 115 / var(--tw-border-opacity, 1));
}
.border-\[\#d6ab90\] {
  --tw-border-opacity: 1;
  border-color: rgb(214 171 144 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-700 {
  --tw-border-opacity: 1;
  border-color: rgb(4 120 87 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-rose-700 {
  --tw-border-opacity: 1;
  border-color: rgb(190 18 60 / var(--tw-border-opacity, 1));
}
.bg-\[\#2c1207\] {
  --tw-bg-opacity: 1;
  background-color: rgb(44 18 7 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.p-1 {
  padding: 0.25rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.text-\[\#ffc8a2\] {
  --tw-text-opacity: 1;
  color: rgb(255 200 162 / var(--tw-text-opacity, 1));
}
.text-\[\#ffe6d6\] {
  --tw-text-opacity: 1;
  color: rgb(255 230 214 / var(--tw-text-opacity, 1));
}
.text-\[\#ffead8\] {
  --tw-text-opacity: 1;
  color: rgb(255 234 216 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 #0000000d;
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}
@media (width>=640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:p-5 {
    padding: 1.25rem;
  }
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (width>=1024px) {
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-\[340px_minmax\(0\,1fr\)\] {
    grid-template-columns: 340px minmax(0, 1fr);
  }
}
@font-face {
  font-family: Pokemon Solid;
  src: url(/assets/fonts/pokemon-solid.ttf) format("truetype");
  font-display: swap;
}
@property --drift-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 25deg;
}
@property --aura-power {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.35;
}
:root {
  --bg-void: #1a0902;
  --bg-deep: #371303;
  --bg-mid: #4a1c04;
  --bg-soft: #6d3011;
  --cloud: #d5a97f;
  --sand: #8f4f1f;
  --surface: #2f1103;
  --surface-soft: #491b03;
  --panel: #5b2508;
  --text-strong: #fff2e1;
  --text-soft: #f3d5b2;
  --border: #b26a33;
  --accent: #f39fba;
  --accent-strong: #f6b5cb;
  --success: #d2ff7a;
  --radius-shell: clamp(1.4rem, 2vw, 2rem);
  --radius-panel: 1.2rem;
  --radius-chip: 999px;
  --space-1: clamp(0.45rem, 0.42vw + 0.35rem, 0.65rem);
  --space-2: clamp(0.7rem, 0.75vw + 0.45rem, 1rem);
  --space-3: clamp(1rem, 1vw + 0.6rem, 1.4rem);
  --space-4: clamp(1.25rem, 1.25vw + 0.8rem, 2rem);
  --space-5: clamp(1.8rem, 2vw + 1rem, 2.8rem);
  --shadow-soft: 0 22px 50px #00000059;
  --shadow-inset: inset 0 1px 0 #ffe9cd33;
  --ring: 0 0 0 2px color-mix(in oklab, var(--accent) 75%, white 25%);
  --font-title: "Baloo 2", "Trebuchet MS", sans-serif;
  --font-brand: "Pokemon Solid", "Baloo 2", sans-serif;
  --font-body: "Oxanium", "Verdana", sans-serif;
  --drift-angle: 25deg;
  --aura-power: 0.35;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  min-height: 100dvh;
  color: var(--text-strong);
  font-family: var(--font-body);
  background: radial-gradient(circle at 50% -30%, #74361a 0%, #0000 55%),
    linear-gradient(#3f1803 0%, #1a0902 100%);
  margin: 0;
}
#app {
  min-height: 100dvh;
}
.world {
  isolation: isolate;
  min-height: 100dvh;
  padding: clamp(1rem, 2.3vw, 2rem);
  position: relative;
  overflow-x: clip;
}
.world:before {
  content: "";
  z-index: -2;
  background-image: linear-gradient(
      var(--drift-angle),
      #270d01db 5%,
      #622a0e80 52%,
      #180701e6 100%
    ),
    url(/assets/brand/background.png);
  background-position: 50%, 50%;
  background-repeat: no-repeat;
  background-size: cover, cover;
  animation: 16s ease-in-out infinite alternate driftHue;
  position: fixed;
  inset: 0;
}
.world:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
      circle at 70% 20%,
      rgb(255 170 124 / calc(var(--aura-power))) 0%,
      transparent 38%
    ),
    radial-gradient(circle at 28% 72%, #ff7bab2e 0%, transparent 44%),
    repeating-linear-gradient(90deg, #ffd7b50a 0 1px, transparent 1px 58px);
  mix-blend-mode: screen;
  animation: 7s ease-in-out infinite alternate pulseAura;
  position: fixed;
  inset: 0;
}
.device-shell {
  width: min(1120px, 100%);
  padding: var(--space-3);
  border: 2px solid color-mix(in oklab, var(--border) 74%, #2f1305 26%);
  border-radius: var(--radius-shell);
  background: linear-gradient(
    175deg,
    color-mix(in oklab, var(--panel) 68%, #91532b 32%) 0%,
    color-mix(in oklab, var(--surface-soft) 74%, #2b1002 26%) 55%,
    color-mix(in oklab, var(--surface) 88%, black 12%) 100%
  );
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  margin-inline: auto;
}
.device-shell__status {
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.68rem;
  display: flex;
}
.status-pill,
.status-chip {
  border-radius: var(--radius-chip);
  align-items: center;
  gap: 0.4rem;
  display: inline-flex;
}
.status-pill {
  background: color-mix(in oklab, var(--surface) 72%, #804010 28%);
  border: 1px solid color-mix(in oklab, var(--border) 40%, transparent 60%);
  padding: 0.28rem 0.68rem;
}
.status-chip {
  background: color-mix(in oklab, var(--accent) 18%, var(--surface) 82%);
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent 68%);
  padding: 0.22rem 0.74rem;
}
.status-dot {
  background: #8f5b2f;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
}
.status-dot--active {
  background: var(--success);
  box-shadow: 0 0 9px #d2ff7ae6;
}
.site-nav {
  z-index: 20;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  border: 1px solid color-mix(in oklab, var(--border) 45%, transparent 55%);
  background: color-mix(in oklab, var(--surface) 65%, #7f3a14 35%);
  border-radius: 1rem;
  padding: 0.62rem 0.78rem;
  display: flex;
  position: sticky;
  top: 0.75rem;
  box-shadow: 0 14px 24px #00000038;
  container: nav/inline-size;
}
.site-nav__top {
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  display: flex;
}
.site-nav__brand {
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  display: flex;
}
.site-nav__logo {
  border: 2px solid color-mix(in oklab, var(--accent) 65%, #291004 35%);
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 50%;
  width: 2.35rem;
  height: 2.35rem;
  box-shadow: 0 8px 14px #0000003d;
}
.site-nav__title {
  letter-spacing: 0.06em;
  font-size: 1.02rem;
  line-height: 1;
  font-family: var(--font-brand);
  display: block;
}
.site-nav__subtitle {
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
}
.site-nav nav {
  min-width: 0;
}
.site-nav__toggle {
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent 65%);
  background: color-mix(in oklab, var(--surface-soft) 72%, var(--accent) 28%);
  min-height: 2.1rem;
  color: var(--text-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
  border-radius: 0.68rem;
  justify-content: center;
  align-items: center;
  padding: 0.3rem 0.8rem;
  display: none;
}
.site-nav__toggle:hover,
.site-nav__toggle:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 72%, white 28%);
  box-shadow: var(--ring);
  outline: none;
}
.site-nav__list {
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.site-nav__list a,
.site-nav__action {
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent 70%);
  min-width: 5.7rem;
  color: var(--text-strong);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  background: color-mix(in oklab, var(--surface-soft) 82%, var(--accent) 18%);
  border-radius: 0.75rem;
  justify-content: center;
  align-items: center;
  padding: 0.44rem 0.75rem;
  font-family: inherit;
  font-size: 0.82rem;
  text-decoration: none;
  transition: transform 0.22s, border-color 0.22s, background-color 0.22s;
  display: inline-flex;
}
.site-nav__list a:hover,
.site-nav__list a:focus-visible,
.site-nav__action:hover,
.site-nav__action:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 62%, white 38%);
  background: color-mix(in oklab, var(--surface-soft) 60%, var(--accent) 40%);
  outline: none;
  transform: translateY(-2px);
}
.paint-modal {
  z-index: 130;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background: #0804029e;
  place-items: center;
  padding: 1rem;
  display: grid;
  position: fixed;
  inset: 0;
}
.paint-modal__card {
  border: 1px solid color-mix(in oklab, var(--border) 56%, transparent 44%);
  background: linear-gradient(130deg, #ffdcbb1f, transparent 46%),
    color-mix(in oklab, var(--surface) 86%, #2b0c03 14%);
  border-radius: 1.1rem;
  gap: 0.75rem;
  width: min(92vw, 30rem);
  padding: 1.1rem 1.05rem;
  display: grid;
  box-shadow: 0 24px 34px #0000006b, inset 0 1px #fff0e224;
}
.paint-modal__eyebrow {
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
}
.paint-modal__title {
  color: var(--text-strong);
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  line-height: 1.2;
}
.paint-modal__text {
  color: var(--text-soft);
  margin: 0;
  font-size: 0.88rem;
}
.paint-modal__input {
  border: 1px solid color-mix(in oklab, var(--accent) 52%, transparent 48%);
  background: color-mix(in oklab, var(--surface-soft) 76%, #ffd4b5 24%);
  width: 100%;
  height: 2.7rem;
  color: var(--text-strong);
  border-radius: 0.82rem;
  padding: 0 0.88rem;
  font-family: inherit;
  font-size: 0.96rem;
}
.paint-modal__input:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 78%, white 22%);
  box-shadow: var(--ring);
  outline: none;
}
.paint-modal__feedback {
  min-height: 1.2rem;
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.2;
}
.paint-modal__feedback--error {
  color: #ffb4b4;
}
.paint-modal__feedback--success {
  color: #b6ff9f;
}
.paint-modal__actions {
  justify-content: flex-end;
  gap: 0.55rem;
  display: flex;
}
.paint-modal__button {
  border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent 60%);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 0.82rem;
  min-width: 6.6rem;
  min-height: 2.45rem;
  padding: 0.3rem 0.85rem;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  transition: transform 0.22s, border-color 0.22s, background-color 0.22s;
}
.paint-modal__button--ghost {
  background: color-mix(in oklab, var(--surface-soft) 86%, transparent 14%);
  color: var(--text-soft);
}
.paint-modal__button--primary {
  background: color-mix(in oklab, var(--accent) 62%, #f8b0c8 38%);
  color: #2f1305;
  border-color: color-mix(in oklab, var(--accent) 80%, white 20%);
}
.paint-modal__button:hover,
.paint-modal__button:focus-visible {
  outline: none;
  transform: translateY(-1px);
}
.screen {
  border-radius: var(--radius-panel);
  border: 2px solid color-mix(in oklab, var(--border) 55%, transparent 45%);
  background: linear-gradient(130deg, #ffe4ca14, transparent 44%),
    color-mix(in oklab, var(--surface) 84%, #180701 16%);
  gap: var(--space-3);
  padding: clamp(0.8rem, 1.4vw, 1.4rem);
  display: grid;
  position: relative;
  overflow: hidden;
  container: screen/inline-size;
}
.screen:before {
  content: "";
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  filter: saturate(0.9) contrast(1.04);
  background-image: radial-gradient(circle at 15% 18%, #ffffff4d 0%, #0000 46%),
    url(/assets/brand/logo2.jpg);
  background-size: cover, cover;
  position: absolute;
  inset: 0;
}
.screen > * {
  z-index: 1;
  position: relative;
}
.section {
  border: 1px solid color-mix(in oklab, var(--border) 36%, transparent 64%);
  border-radius: var(--radius-panel);
  padding: var(--space-4);
  background: linear-gradient(145deg, #ffe6ce14, transparent 35%),
    color-mix(in oklab, var(--surface-soft) 84%, #1d0902 16%);
  position: relative;
  box-shadow: inset 0 1px #ffebdb1f;
}
.section__eyebrow {
  color: color-mix(in oklab, var(--accent-strong) 70%, white 30%);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
}
.section__title,
h1 {
  font-family: var(--font-title);
  letter-spacing: 0.01em;
  color: var(--text-strong);
  margin: 0;
  font-weight: 800;
  line-height: 1.02;
}
h1 {
  text-transform: uppercase;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-family: var(--font-brand);
  letter-spacing: 0.09em;
  line-height: 1.08;
}
.section__title {
  margin-top: 0.5rem;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
}
.section__text {
  color: var(--text-soft);
  max-width: 68ch;
  margin-top: 0.9rem;
  line-height: 1.6;
}
.hero {
  gap: var(--space-4);
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  display: grid;
}
.hero__copy > p {
  max-width: 58ch;
  color: var(--text-soft);
  margin-top: 1rem;
  line-height: 1.56;
}
.hero__actions {
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
  display: flex;
}
.cta {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid #0000;
  border-radius: 0.9rem;
  justify-content: center;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.4rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.22s, box-shadow 0.22s;
  display: inline-flex;
}
.cta:hover,
.cta:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.01);
}
.cta--primary {
  color: #3a1401;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  box-shadow: 0 8px 16px #f39fba4d;
}
.cta--primary:hover,
.cta--primary:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 90%, white 10%);
}
.cta--ghost {
  color: var(--text-strong);
  border-color: color-mix(in oklab, var(--accent) 44%, transparent 56%);
  background: color-mix(in oklab, var(--surface) 72%, var(--accent) 28%);
}
.cta--icon {
  min-width: 4.1rem;
  min-height: 3.3rem;
  padding: 0.28rem 0.8rem;
}
.cta--icon img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 2.6rem;
  height: 2.6rem;
  display: block;
}
.hero__stats {
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.hero__stats li {
  border-radius: var(--radius-chip);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent 65%);
  color: var(--text-soft);
  background: color-mix(in oklab, var(--surface-soft) 74%, #b05722 26%);
  padding: 0.46rem 0.64rem;
  font-size: 0.8rem;
}
.hero__stats strong {
  color: var(--text-strong);
}
.hero__media {
  border: 2px solid color-mix(in oklab, var(--accent) 62%, #2f1003 38%);
  background: radial-gradient(circle at 22% 20%, #7c2f0d 0%, #240b01 100%);
  border-radius: 50%;
  justify-self: center;
  width: min(100%, 330px);
  margin: 0;
  overflow: hidden;
  box-shadow: 0 18px 30px #00000059;
}
.hero__media img {
  aspect-ratio: 1;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  display: block;
}
.gallery-grid {
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.2rem;
  display: grid;
}
.gallery-card {
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--border) 72%);
  background: linear-gradient(
      170deg,
      #ffe4cc38 0%,
      #ffe4cc08 36%,
      transparent 100%
    ),
    color-mix(in oklab, var(--surface-soft) 78%, #2a0f03 22%);
  border-radius: 1rem;
  padding: 0.6rem;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  position: relative;
  box-shadow: inset 0 1px #ffefdf2e, 0 10px 20px #0003;
}
.gallery-card:after {
  content: "";
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(120deg, #0000 20%, #ffd1e852 46%, #0000 72%);
  transition: opacity 0.22s;
  position: absolute;
  inset: 0;
}
.gallery-card:hover {
  border-color: color-mix(in oklab, var(--accent) 70%, white 30%);
  transform: translateY(-3px);
  box-shadow: inset 0 1px #ffefdf38, 0 16px 24px #00000047;
}
.gallery-card:hover:after {
  opacity: 1;
}
.gallery-card__media {
  border: 1px solid color-mix(in oklab, var(--border) 48%, transparent 52%);
  background: color-mix(in oklab, var(--surface) 82%, black 18%);
  border-radius: 0.86rem;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.gallery-card__media img {
  aspect-ratio: 1;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  transition: transform 0.26s;
  display: block;
}
.gallery-card:hover .gallery-card__media img {
  transform: scale(1.035);
}
.gallery-card__caption {
  inset-inline: 0;
  color: var(--text-strong);
  font-family: var(--font-title);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  background: linear-gradient(#0000 0%, #130601db 100%);
  margin: 0;
  padding: 0.6rem 0.75rem 0.62rem;
  font-size: 0.95rem;
  position: absolute;
  bottom: 0;
}
.feature-grid {
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.2rem;
  display: grid;
}
.feature-card {
  border: 1px solid color-mix(in oklab, var(--border) 34%, transparent 66%);
  background: color-mix(in oklab, var(--surface) 74%, #7a3512 26%);
  border-radius: 0.95rem;
  padding: 1rem;
}
.feature-card__tag {
  border-radius: var(--radius-chip);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent 68%);
  background: color-mix(in oklab, var(--accent) 24%, var(--surface) 76%);
  margin: 0;
  padding: 0.2rem 0.52rem;
  font-size: 0.68rem;
  display: inline-flex;
}
.feature-card h3 {
  font-size: 1.2rem;
  font-family: var(--font-title);
  letter-spacing: 0.02em;
  margin: 0.7rem 0 0.48rem;
}
.feature-card p {
  color: var(--text-soft);
  margin: 0;
  line-height: 1.45;
}
.community-grid {
  gap: var(--space-2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1rem;
  display: grid;
}
.community-card {
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent 65%);
  color: inherit;
  background: linear-gradient(
      155deg,
      color-mix(in oklab, var(--accent) 20%, transparent 80%),
      transparent
    ),
    color-mix(in oklab, var(--surface-soft) 80%, #2d0f03 20%);
  border-radius: 0.95rem;
  padding: 1rem;
  text-decoration: none;
  transition: transform 0.22s, border-color 0.22s;
}
.community-card:hover,
.community-card:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 80%, white 20%);
  outline: none;
  transform: translateY(-2px);
}
.community-card__name {
  font-family: var(--font-title);
  margin: 0;
  font-size: 1.1rem;
}
.community-card__handle {
  color: color-mix(in oklab, var(--accent) 70%, white 30%);
  margin: 0.4rem 0 0;
  font-size: 0.88rem;
}
.community-card__note {
  color: var(--text-soft);
  margin: 0.45rem 0 0;
  line-height: 1.45;
}
.faq-list {
  gap: 0.75rem;
  margin-top: 1rem;
  display: grid;
}
.faq-item {
  border: 1px solid color-mix(in oklab, var(--border) 36%, transparent 64%);
  background: color-mix(in oklab, var(--surface) 72%, #703112 28%);
  border-radius: 0.82rem;
  overflow: clip;
}
.faq-item summary {
  cursor: pointer;
  padding: 0.95rem 1rem;
  font-weight: 600;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item[open] summary {
  border-bottom: 1px solid
    color-mix(in oklab, var(--border) 32%, transparent 68%);
}
.faq-item p {
  color: var(--text-soft);
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  line-height: 1.5;
}
.site-footer {
  margin-top: var(--space-3);
  border: 1px solid color-mix(in oklab, var(--border) 44%, transparent 56%);
  background: linear-gradient(
      155deg,
      color-mix(in oklab, var(--accent) 16%, transparent 84%),
      transparent
    ),
    color-mix(in oklab, var(--surface) 78%, #7a3412 22%);
  border-radius: 0.95rem;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  display: flex;
}
.site-footer__meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  display: inline-flex;
}
.site-footer__copy {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-soft);
  margin: 0;
  font-size: 0.72rem;
}
.site-footer__contract {
  border-radius: var(--radius-chip);
  border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent 58%);
  background: color-mix(in oklab, var(--surface-soft) 70%, var(--accent) 30%);
  max-width: min(100%, 31rem);
  min-height: 1.82rem;
  color: var(--text-strong);
  font: inherit;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.22rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 700;
  transition: transform 0.22s, border-color 0.22s;
  overflow: hidden;
}
.site-footer__contract:hover,
.site-footer__contract:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 80%, white 20%);
  outline: none;
  transform: translateY(-1px);
}
.site-footer__contract--empty {
  cursor: default;
  opacity: 0.65;
}
.site-footer__contract--empty:hover,
.site-footer__contract--empty:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 42%, transparent 58%);
  transform: none;
}
.site-footer__copied {
  color: #b6ff9f;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 700;
}
.site-footer__social {
  flex-wrap: wrap;
  gap: 0.55rem;
  display: flex;
}
.site-footer__social-link {
  border: 1px solid color-mix(in oklab, var(--accent) 32%, transparent 68%);
  background: color-mix(in oklab, var(--surface-soft) 74%, var(--accent) 26%);
  width: 2.15rem;
  height: 2.15rem;
  color: var(--text-strong);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 0;
  text-decoration: none;
  transition: transform 0.22s, border-color 0.22s;
  display: inline-flex;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  border-color: color-mix(in oklab, var(--accent) 80%, white 20%);
  outline: none;
  transform: translateY(-2px);
}
.site-footer__social-link svg {
  fill: currentColor;
  width: 0.9rem;
  height: 0.9rem;
}
.section[data-reveal] {
  will-change: transform, opacity;
}
.has-observer-reveal .section[data-reveal] {
  opacity: 0;
  transition: opacity 0.62s, transform 0.62s;
  transform: translateY(1.9rem) scale(0.98);
}
.has-observer-reveal .section[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
@supports (animation-timeline: view()) {
  .has-view-timeline .section[data-reveal] {
    animation: linear both revealOnScroll;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
}
@container nav (width<=42rem) {
  .site-nav__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    display: grid;
  }
  .site-nav__list a {
    width: 100%;
    min-width: 0;
  }
}
@container nav (width<=28rem) {
  .site-nav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width<=760px) {
  .site-nav {
    align-items: stretch;
  }
  .site-nav__top {
    width: 100%;
  }
  .site-nav__toggle {
    display: inline-flex;
  }
  .site-nav nav {
    width: 100%;
    display: none;
  }
  .site-nav.site-nav--open nav {
    margin-top: 0.58rem;
    display: block;
  }
  .site-nav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-nav__list a,
  .site-nav__action {
    width: 100%;
    min-width: 0;
    font-size: 0.76rem;
  }
}
@container screen (width<=52rem) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero__media {
    width: min(68vw, 300px);
  }
  .feature-grid,
  .community-grid,
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container screen (width<=34rem) {
  .feature-grid,
  .community-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}
@media (width<=540px) {
  .world {
    padding: 0.6rem;
    padding-left: max(0.6rem, env(safe-area-inset-left));
    padding-right: max(0.6rem, env(safe-area-inset-right));
    padding-bottom: max(0.6rem, env(safe-area-inset-bottom));
  }
  .device-shell {
    padding: 0.7rem;
  }
  .device-shell__status {
    font-size: 0.6rem;
  }
  .status-chip {
    display: none;
  }
  .site-nav {
    padding: 0.55rem;
    top: 0.4rem;
  }
  .site-nav__title {
    font-size: 0.9rem;
  }
  .paint-modal__card {
    width: min(95vw, 27rem);
    padding: 0.95rem;
  }
  .paint-modal__actions {
    justify-content: stretch;
    width: 100%;
  }
  .paint-modal__button {
    flex: 1;
    min-width: 0;
  }
  .hero__actions {
    flex-direction: column;
  }
  .cta {
    width: 100%;
  }
  .site-footer {
    justify-content: center;
  }
  .site-footer__meta {
    text-align: center;
    justify-content: center;
    width: 100%;
  }
  .site-footer__contract {
    width: 100%;
    max-width: 100%;
  }
  .site-footer__copy {
    text-align: center;
    width: 100%;
  }
  .site-footer__social {
    justify-content: center;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  :before,
  :after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}
@keyframes driftHue {
  0% {
    --drift-angle: 24deg;
  }
  to {
    --drift-angle: 37deg;
  }
}
@keyframes pulseAura {
  0% {
    --aura-power: 0.22;
  }
  to {
    --aura-power: 0.42;
  }
}
@keyframes revealOnScroll {
  0% {
    opacity: 0;
    transform: translateY(2rem) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}