/* ============================================================
   CARDS FOR KNOTS — DESIGN TOKENS (v2)
   Cool futuristic. Cool grey surface ladder, near-black-with-blue
   canvas, electric indigo primary, cyan secondary. The legacy
   variable names (--cfk-maroon, --cfk-gold) are reused so every
   component picks up the new palette without renaming.
   ============================================================ */

:root {
  /* ---------- COLOR ---------- */
  /* Surface — cool neutral ladder */
  --cfk-paper:        #ffffff;
  --cfk-surface:      #f5f7fa;
  --cfk-surface-2:    #eceff4;
  --cfk-surface-3:    #dbe0e8;
  --cfk-canvas-bg:    #0a0c10;
  --cfk-canvas-bg-2:  #11141b;
  --cfk-canvas-grid:  rgba(140,170,220,0.04);

  /* Ink — deep cool */
  --cfk-ink:          #0b0d12;
  --cfk-ink-2:        #3b424e;
  --cfk-ink-3:        #6b7280;
  --cfk-ink-4:        #aab1bd;
  --cfk-ink-on-dark:  #f3f5f9;
  --cfk-ink-on-dark-2:#9aa4b6;

  /* Accents — primary electric indigo (was maroon), secondary cyan
     (was gold). Variable names retained for backward compat with
     existing component code. */
  --cfk-maroon:       #4f46e5;
  --cfk-maroon-hover: #4338ca;
  --cfk-maroon-soft:  #e8e7ff;
  --cfk-gold:         #06b6d4;
  --cfk-gold-soft:    #d6f3fa;
  --cfk-gold-deep:    #0891b2;

  /* Semantic */
  --cfk-success:      #15a36b;
  --cfk-success-soft: #d4f4e2;
  --cfk-warn:         #d97706;
  --cfk-warn-soft:    #fdecd2;
  --cfk-danger:       #e1394d;
  --cfk-danger-soft:  #fde0e3;
  --cfk-info:         #4f46e5;
  --cfk-info-soft:    #e8e7ff;

  --cfk-line:         #e6e9ef;
  --cfk-line-strong:  #c8cdd6;
  --cfk-line-dark:    rgba(243,245,249,0.10);

  /* ---------- TYPE ---------- */
  --cfk-font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --cfk-font-ui:      'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --cfk-font-body:    var(--cfk-font-ui);
  --cfk-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --cfk-font-tamil:   'Noto Serif Tamil', 'Latha', serif;
  --cfk-font-hindi:   'Noto Serif Devanagari', 'Mangal', serif;

  --cfk-text-2xs: 10px;
  --cfk-text-xs:  11px;
  --cfk-text-sm:  12px;
  --cfk-text-md:  13px;
  --cfk-text-base:14px;
  --cfk-text-lg:  16px;
  --cfk-text-xl:  18px;
  --cfk-text-2xl: 22px;
  --cfk-text-3xl: 28px;
  --cfk-text-4xl: 36px;
  --cfk-text-5xl: 48px;
  --cfk-text-6xl: 64px;
  --cfk-text-7xl: 88px;

  /* ---------- SPACING ---------- */
  --cfk-s-0: 0;
  --cfk-s-1: 2px;
  --cfk-s-2: 4px;
  --cfk-s-3: 6px;
  --cfk-s-4: 8px;
  --cfk-s-5: 10px;
  --cfk-s-6: 12px;
  --cfk-s-8: 16px;
  --cfk-s-10:20px;
  --cfk-s-12:24px;
  --cfk-s-16:32px;
  --cfk-s-20:40px;
  --cfk-s-24:48px;
  --cfk-s-32:64px;
  --cfk-s-40:80px;

  /* ---------- RADIUS ---------- */
  --cfk-r-xs: 3px;
  --cfk-r-sm: 5px;
  --cfk-r-md: 8px;
  --cfk-r-lg: 12px;
  --cfk-r-xl: 18px;
  --cfk-r-2xl:24px;
  --cfk-r-full: 999px;

  /* ---------- SHADOW ---------- */
  /* Cool-tinted to match neutral surfaces */
  --cfk-sh-1: 0 1px 2px rgba(15,20,30,0.05);
  --cfk-sh-2: 0 2px 4px rgba(15,20,30,0.06), 0 1px 2px rgba(15,20,30,0.04);
  --cfk-sh-3: 0 4px 12px rgba(15,20,30,0.08), 0 2px 4px rgba(15,20,30,0.04);
  --cfk-sh-4: 0 12px 32px rgba(15,20,30,0.12), 0 4px 8px rgba(15,20,30,0.05);
  --cfk-sh-5: 0 24px 64px rgba(15,20,30,0.18), 0 8px 16px rgba(15,20,30,0.06);
  --cfk-sh-inset: inset 0 1px 0 rgba(255,255,255,0.6);
  --cfk-sh-paper: 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(15,20,30,0.06);

  /* ---------- MOTION ---------- */
  --cfk-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --cfk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --cfk-dur-1: 120ms;
  --cfk-dur-2: 200ms;
  --cfk-dur-3: 320ms;

  /* ---------- Z ---------- */
  --cfk-z-canvas: 1;
  --cfk-z-floating: 50;
  --cfk-z-popover: 100;
  --cfk-z-toolbar: 150;
  --cfk-z-modal:  200;
  --cfk-z-toast:  300;
}

/* ============================================================
   BASE — scoped to v2 root so the legacy .asib-app-root chrome
   on the rest of the site stays untouched.
   ============================================================ */
.cfk-v2-root, .cfk-v2-root *, .cfk-v2-root *::before, .cfk-v2-root *::after { box-sizing: border-box; }

/* Theme-coloured arrow cursor.
   The artwork keeps its 24×24 viewBox but the SVG is rendered at
   16×16 device pixels — matching the native host cursor size on
   macOS / Windows / Linux so the editor's pointer feels like the
   OS arrow rather than an oversized override. The vertical
   indigo→light-blue gradient (#003aff → #90a8f9) is preserved.
   A 1px white stroke keeps the silhouette legible against both
   the light paper and the near-black canvas backdrop. Hotspot
   sits on the tip at the rendered (3, 1). The trailing "auto" is
   the fallback for browsers that reject SVG cursors. */
:root {
  --cfk-cursor-default:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' width='16' height='16' viewBox='0 0 24 24'><path d='m18.853 14.147-13-13.00004c-.142-.144-.356-.185996-.544-.109-.187.077-.309.26-.309.462v18.00004c0 .189.107.362.276.447.17.084.373.067.523-.047l3.521-2.641 2.732 5.464c.089.176.265.277.448.277.075 0 .151-.017.223-.053l4-2c.247-.124.347-.424.224-.671l-2.638-5.276h4.191c.202 0 .385-.122.462-.309s.035-.401-.109-.544z' fill='%234f46e5' stroke='white' stroke-width='1.4' stroke-linejoin='round'/></svg>") 3 1, auto;
  /* Native OS cursors for text / move / resize — the OS already
     renders these in a system-tuned style (Mac retina I-beam, etc.)
     so we just delegate. Only the default arrow keeps the custom
     indigo SVG so the editor's idle pointer carries brand colour.
     Rotation is the one context where no OS-native cursor matches
     intent, so we ship a curved-arrow indigo SVG of our own. */
  --cfk-cursor-text:        text;
  --cfk-cursor-move:        move;
  --cfk-cursor-resize-ns:   ns-resize;
  --cfk-cursor-resize-ew:   ew-resize;
  --cfk-cursor-resize-nwse: nwse-resize;
  --cfk-cursor-resize-nesw: nesw-resize;
  /* Rotation cursor — indigo curved arrow. 16×16, hotspot at the
     centre 8 8 so it spins around the cursor's anchor when the
     user grabs the rotation grip. White halo + indigo stroke for
     legibility on both light paper and the dark canvas. */
  --cfk-cursor-rotate:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'><g stroke-linecap='round' stroke-linejoin='round'><path d='M19 12 A7 7 0 1 1 12 5 M19 12 V7 M19 12 H14' stroke='white' stroke-width='3.5'/><path d='M19 12 A7 7 0 1 1 12 5 M19 12 V7 M19 12 H14' stroke='%234f46e5' stroke-width='1.6'/></g></svg>") 8 8, grab;
  /* Pen tool cursor — calligraphy nib pointing toward the cursor's
     hotspot at the bottom-left tip (the same place a real pen lays
     ink). White outer stroke for legibility on dark and light
     surfaces; maroon body matches the brand brush. Falls back to
     'crosshair' on browsers that reject SVG cursors. */
  --cfk-cursor-pen:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'><g stroke-linejoin='round' stroke-linecap='round'><path d='M3 21 L7 17 L9 19 Z' fill='white' stroke='white' stroke-width='3.5'/><path d='M7 17 L17 7 L20 10 L10 20 Z' fill='white' stroke='white' stroke-width='3.5'/><path d='M3 21 L7 17 L9 19 Z' fill='%237a1f2b'/><path d='M7 17 L17 7 L20 10 L10 20 Z' fill='%237a1f2b' stroke='%237a1f2b' stroke-width='1'/><path d='M14 10 L18 14' stroke='white' stroke-width='1.4'/></g></svg>") 2 18, crosshair;
}

/* Cool aurora wash sitting behind the editor chrome. Provides a
   subtle indigo / cyan / violet refraction underneath frosted
   surfaces (top bar, left + right rails, modals) so the glass
   shaders have something to bend. Scoped to .cfk-v2-root so the
   legacy .asib-app-root pages on the rest of the site are
   unaffected. */
.cfk-v2-root::before {
  content: '';
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 720px at 8% -10%,  rgba(79,70,229,0.10), transparent 60%),
    radial-gradient(900px 600px at 100% 12%, rgba(6,182,212,0.10), transparent 60%),
    radial-gradient(820px 520px at 35% 110%, rgba(124,58,237,0.08), transparent 60%);
}
.cfk-v2-root > * { position: relative; z-index: 1; }

/* Glass surfaces — frosted morphism utilities applied sparingly
   to chrome (top bars, side rails, popovers, modals, floating
   toolbars). Avoid on dense text tables and the dark canvas. */
:root {
  --cfk-glass-paper:   rgba(255, 255, 255, 0.72);
  --cfk-glass-surface: rgba(245, 247, 250, 0.70);
  --cfk-glass-rail:    rgba(245, 247, 250, 0.76);
  --cfk-glass-strong:  rgba(255, 255, 255, 0.86);
  --cfk-glass-overlay: rgba(10, 12, 16, 0.46);
  --cfk-glass-edge:    rgba(255, 255, 255, 0.65);
  --cfk-glass-border:  rgba(200, 205, 214, 0.55);
  --cfk-glass-blur:    saturate(140%) blur(18px);
  --cfk-glass-blur-lg: saturate(150%) blur(28px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --cfk-glass-paper:   var(--cfk-paper);
    --cfk-glass-surface: var(--cfk-surface);
    --cfk-glass-rail:    var(--cfk-surface);
    --cfk-glass-strong:  var(--cfk-paper);
  }
}
.cfk-v2-root .cfk-glass {
  background: var(--cfk-glass-paper);
  backdrop-filter: var(--cfk-glass-blur);
  -webkit-backdrop-filter: var(--cfk-glass-blur);
  border: 1px solid var(--cfk-glass-border);
  box-shadow: inset 0 1px 0 var(--cfk-glass-edge), var(--cfk-sh-3);
}
.cfk-v2-root .cfk-glass-rail {
  background: var(--cfk-glass-rail);
  backdrop-filter: var(--cfk-glass-blur);
  -webkit-backdrop-filter: var(--cfk-glass-blur);
}
.cfk-v2-root .cfk-glass-strong {
  background: var(--cfk-glass-strong);
  backdrop-filter: var(--cfk-glass-blur-lg);
  -webkit-backdrop-filter: var(--cfk-glass-blur-lg);
}
.cfk-v2-root, .cfk-v2-root .asib-canvas-stage {
  cursor: var(--cfk-cursor-default);
}
.cfk-v2-root {
  font-family: var(--cfk-font-ui);
  color: var(--cfk-ink);
  background: var(--cfk-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--cfk-text-base);
  line-height: 1.5;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
/* Hard reset for buttons / inputs — the host WordPress theme
   (loobek) injects padding, min-width, line-height and an
   uppercase text-transform on every <button>, which inflates
   the bare-bones unstyled buttons used throughout the v2 editor
   (shape tiles, ruler chips, layer-row controls, …). Resetting
   here keeps the inline styles in those components authoritative. */
.cfk-v2-root button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
  margin: 0;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  box-shadow: none;
  text-decoration: none;
  /* Restore the browser default for <button> — the loobek theme
     sets text-align:left on all buttons, which makes labels in
     plain (non-flex) buttons (e.g. the right-rail Properties /
     Layers tab pills) drift to the left edge of their 140px slot
     instead of centering. Components that need a different
     alignment (icon + text rows in the top bar, etc.) use
     display:flex with justifyContent and override locally. */
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}
.cfk-v2-root button:hover,
.cfk-v2-root button:focus,
.cfk-v2-root button:active {
  background: none;
  color: inherit;
  box-shadow: none;
  transform: none;
}
/* Same reset rationale as buttons — the loobek theme adds
   padding (7px 15px), line-height (30px), min-height, an outline,
   text-transform and letter-spacing to every input/select on the
   page. Those defaults clip the small numeric inputs in the
   floating toolbar (width 34px → content area collapses to ~2px),
   shift label baselines in the inspector, and force selects to
   render with the theme's chrome. We override here once. */
.cfk-v2-root input,
.cfk-v2-root select,
.cfk-v2-root textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-transform: none;
  letter-spacing: normal;
  line-height: normal;
  padding: 0 8px;
  margin: 0;
  min-width: 0;
  min-height: 0;
  width: auto;
  height: auto;
  background: var(--cfk-paper);
  border: 1px solid var(--cfk-line);
  border-radius: var(--cfk-r-sm);
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 0;
  vertical-align: middle;
  box-sizing: border-box;
}
.cfk-v2-root select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cfk-ink-3) 50%),
    linear-gradient(135deg, var(--cfk-ink-3) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 55%,
    calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.cfk-v2-root input:focus,
.cfk-v2-root select:focus,
.cfk-v2-root textarea:focus {
  border-color: var(--cfk-gold);
  box-shadow: 0 0 0 3px rgba(181,138,74,0.18);
}
.cfk-v2-root input::placeholder { color: var(--cfk-ink-4); }
/* Tiny numeric inputs in the floating toolbar. box-sizing keeps the
   inline `width` set by JSX inclusive of the 1-px border on each
   side; padding is small but non-zero so 3-digit values like "100"
   or "400" don't clip at the edges. Inline width overrides this
   default when the input needs more room (e.g. brush Size up to
   400). */
.cfk-v2-root .cfk-toolbar-num {
  padding: 0 4px;
  box-sizing: border-box;
  text-align: center;
}
/* Hide the spinner buttons WebKit / Firefox add to type="number"
   inputs — the floating toolbar uses its own − / + buttons. */
.cfk-v2-root input[type="number"]::-webkit-inner-spin-button,
.cfk-v2-root input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cfk-v2-root input[type="number"] { -moz-appearance: textfield; }

/* Boot splash — shown while React mounts */
.cfk-v2-boot {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--cfk-paper); z-index: 9999;
  transition: opacity 200ms ease;
}
.cfk-v2-boot.gone { opacity: 0; pointer-events: none; }
.cfk-v2-boot .mark {
  font-family: var(--cfk-font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--cfk-ink);
  letter-spacing: -0.01em;
}
.cfk-v2-boot .mark span { color: var(--cfk-maroon); }

/* ============================================================
   COMPONENTS
   ============================================================ */

.cfk-v2-root .asib-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--cfk-r-md);
  font-family: var(--cfk-font-ui);
  font-size: var(--cfk-text-md);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--cfk-ink);
  background: var(--cfk-paper);
  border: 1px solid var(--cfk-line);
  transition: background var(--cfk-dur-1) var(--cfk-ease),
              border-color var(--cfk-dur-1) var(--cfk-ease),
              transform var(--cfk-dur-1) var(--cfk-ease);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
}
.cfk-v2-root .asib-btn:hover { background: var(--cfk-surface); border-color: var(--cfk-line-strong); }
.cfk-v2-root .asib-btn:active { transform: translateY(0.5px); }
.cfk-v2-root .asib-btn:focus-visible { outline: 2px solid var(--cfk-gold); outline-offset: 2px; }

.cfk-v2-root .asib-btn-accent,
.cfk-v2-root .asib-btn-primary {
  background: var(--cfk-maroon);
  color: #fff;
  border-color: var(--cfk-maroon);
}
.cfk-v2-root .asib-btn-accent:hover,
.cfk-v2-root .asib-btn-primary:hover {
  background: var(--cfk-maroon-hover);
  border-color: var(--cfk-maroon-hover);
}

.cfk-v2-root .asib-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cfk-ink-2);
}
.cfk-v2-root .asib-btn-ghost:hover { background: var(--cfk-surface-2); color: var(--cfk-ink); border-color: transparent; }

.cfk-v2-root .asib-btn-danger {
  background: var(--cfk-paper);
  color: var(--cfk-danger);
  border-color: var(--cfk-line);
}
.cfk-v2-root .asib-btn-danger:hover { background: var(--cfk-danger-soft); border-color: var(--cfk-danger); }

.cfk-v2-root .asib-btn-sm { height: 26px; padding: 0 9px; font-size: var(--cfk-text-sm); }
.cfk-v2-root .asib-btn-lg { height: 40px; padding: 0 18px; font-size: var(--cfk-text-base); }

.cfk-v2-root .asib-btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
}
.cfk-v2-root .asib-btn-icon.asib-btn-sm { width: 26px; height: 26px; }

.cfk-v2-root .asib-input {
  height: 32px;
  padding: 0 10px;
  border-radius: var(--cfk-r-sm);
  border: 1px solid var(--cfk-line);
  background: var(--cfk-paper);
  color: var(--cfk-ink);
  font-size: var(--cfk-text-md);
  outline: none;
  transition: border-color var(--cfk-dur-1) var(--cfk-ease),
              box-shadow var(--cfk-dur-1) var(--cfk-ease);
}
.cfk-v2-root .asib-input:focus { border-color: var(--cfk-gold); box-shadow: 0 0 0 3px rgba(181,138,74,0.18); }
.cfk-v2-root .asib-input::placeholder { color: var(--cfk-ink-4); }

.cfk-v2-root .asib-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--cfk-r-full);
  font-size: var(--cfk-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--cfk-surface-2);
  color: var(--cfk-ink-2);
  border: 1px solid transparent;
}
.cfk-v2-root .asib-pill-gold    { background: var(--cfk-gold-soft); color: var(--cfk-gold-deep); }
.cfk-v2-root .asib-pill-maroon  { background: var(--cfk-maroon-soft); color: var(--cfk-maroon); }
.cfk-v2-root .asib-pill-success { background: var(--cfk-success-soft); color: var(--cfk-success); }
.cfk-v2-root .asib-pill-warn    { background: var(--cfk-warn-soft); color: var(--cfk-warn); }
.cfk-v2-root .asib-pill-danger  { background: var(--cfk-danger-soft); color: var(--cfk-danger); }
.cfk-v2-root .asib-pill-outline { background: transparent; border-color: var(--cfk-line); color: var(--cfk-ink-2); }

.cfk-v2-root .asib-card {
  background: var(--cfk-paper);
  border: 1px solid var(--cfk-line);
  border-radius: var(--cfk-r-lg);
  box-shadow: var(--cfk-sh-1);
}

.cfk-v2-root .asib-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26,22,18,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--cfk-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cfk-fade-in 200ms var(--cfk-ease) both;
}
.cfk-v2-root .asib-modal {
  background: var(--cfk-paper);
  border-radius: var(--cfk-r-xl);
  box-shadow: var(--cfk-sh-5);
  border: 1px solid var(--cfk-line);
  max-width: 480px;
  width: calc(100% - 32px);
  overflow: hidden;
  animation: cfk-modal-in 280ms var(--cfk-ease-out) both;
}
@keyframes cfk-fade-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes cfk-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes cfk-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.cfk-v2-root .cfk-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.cfk-v2-root .cfk-scroll::-webkit-scrollbar-thumb { background: var(--cfk-line-strong); border-radius: 999px; }
.cfk-v2-root .cfk-scroll::-webkit-scrollbar-track { background: transparent; }

.cfk-v2-root .cfk-display { font-family: var(--cfk-font-display); font-weight: 500; letter-spacing: -0.015em; }
.cfk-v2-root .cfk-display-italic { font-family: var(--cfk-font-display); font-style: italic; font-weight: 400; }
.cfk-v2-root .cfk-mono { font-family: var(--cfk-font-mono); font-feature-settings: 'ss01'; }

.cfk-v2-root .cfk-grain::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Hide WP/site chrome when a v2 surface is mounted */
body.cfk-v2-active { margin: 0 !important; overflow: hidden; }
body.cfk-v2-active #wpadminbar,
body.cfk-v2-active .ts-store-notice,
body.cfk-v2-active .sticky-wrapper,
body.cfk-v2-active .ts-header,
body.cfk-v2-active .breadcrumb-title-wrapper,
body.cfk-v2-active #group-icon-header,
body.cfk-v2-active footer.footer-container,
body.cfk-v2-active .site-header,
body.cfk-v2-active .site-footer { display: none !important; }
body.cfk-v2-active #main.wrapper,
body.cfk-v2-active .page-container,
body.cfk-v2-active #main-content,
body.cfk-v2-active #primary,
body.cfk-v2-active article.page,
body.cfk-v2-active article.post {
  margin: 0 !important; max-width: none !important; padding: 0 !important; width: 100% !important;
}
body.cfk-v2-active.admin-bar { margin-top: 0 !important; }