@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap');

:root {
  --v-paper: #FFF7EC;      
  --v-paper-2: #FFEFD9;    
  --v-card: #FFFFFF;
  --v-ink: #1C1A27;        
  --v-ink-2: #55526A;      
  --v-line: #1C1A27;
  --v-soft-line: #EADFCF;

  
  --v-nine: #EDEFF4;
  --v-boss: #9FD8C2;
  --v-director: #E8672C;
  --v-camera: #4C8DF6;
  --v-motion: #A36BEA;
  --v-story: #35B178;
  --v-craft: #D4A418;
  --v-sound: #E8558A;
  --v-people: #19B3B3;
  --v-brand: #C08A5E;

  
  --v-wash-orange: #FFE1CF;
  --v-wash-blue: #DCE8FF;
  --v-wash-purple: #EEDFFF;
  --v-wash-green: #D8F3E4;
  --v-wash-yellow: #FFF0B8;
  --v-wash-pink: #FFDDE9;
  --v-wash-teal: #D2F4F2;
  --v-wash-mint: #E0F4EC;

  --v-cta: #FF6B3D;        
  --v-cta-ink: #1C1A27;

  --v-radius: 22px;
  --v-radius-sm: 14px;
  --v-pop: 4px 4px 0 var(--v-ink);       
  --v-pop-sm: 3px 3px 0 var(--v-ink);
  --v-pop-lg: 6px 6px 0 var(--v-ink);

  --v-font-display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --v-font: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}


.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 700 17px/1 var(--v-font); letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  padding: 16px 24px; min-height: 52px; border-radius: 999px;
  background: var(--v-cta); color: var(--v-cta-ink);
  border: 2.5px solid var(--v-ink); box-shadow: var(--v-pop);
  transition: transform .12s ease, box-shadow .12s ease, background .15s;
}
.v-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--v-ink); }
.v-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--v-ink); }
.v-btn:focus-visible { outline: 3px solid var(--v-camera); outline-offset: 3px; }
.v-btn--ghost { background: var(--v-card); }
.v-btn--ink { background: var(--v-ink); color: #fff; box-shadow: 4px 4px 0 var(--v-cta); }
.v-btn--sm { padding: 10px 16px; min-height: 42px; font-size: 15px; box-shadow: var(--v-pop-sm); }
.v-btn[disabled] { opacity: .55; cursor: not-allowed; }

.v-card {
  background: var(--v-card); color: var(--v-ink);
  border: 2.5px solid var(--v-ink); border-radius: var(--v-radius); box-shadow: var(--v-pop);
}
.v-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 13px/1 var(--v-font); padding: 7px 12px; border-radius: 999px;
  border: 2px solid var(--v-ink); background: var(--v-wash-yellow); color: var(--v-ink);
}
.v-input {
  width: 100%; font: 500 18px/1.2 var(--v-font); color: var(--v-ink);
  padding: 16px 18px; min-height: 56px; border-radius: 16px;
  background: #fff; border: 2.5px solid var(--v-ink); box-shadow: inset 0 -3px 0 rgba(28,26,39,.06);
}
.v-input::placeholder { color: #8A8699; }
.v-input:focus { outline: 3px solid var(--v-camera); outline-offset: 2px; }

.v-sticker { 
  display: inline-block; font: 800 14px/1 var(--v-font-display); padding: 8px 12px; border-radius: 10px;
  border: 2px solid var(--v-ink); background: var(--v-wash-yellow); transform: rotate(-3deg); box-shadow: var(--v-pop-sm);
}


.v-crew svg.crew { overflow: visible; }


.n9-tb, .n9-tb-panel {
  --n9-flate: #FFFFFF; --n9-flate-2: var(--v-paper-2); --n9-blekk: var(--v-ink); --n9-blekk-2: var(--v-ink-2);
  --n9-linje: var(--v-soft-line); --n9-kant: var(--v-ink); --n9-fokus: var(--v-camera);
}


html body.studio-embedded { background: var(--v-paper); color: var(--v-ink); color-scheme: light;
  --paper: var(--v-paper); --ink: var(--v-ink); --ink-2: #3E3B4E; --ink-3: var(--v-ink-2); --line: #E6D8C4; --font-text: var(--v-font); }
html body.studio-embedded :is(input, textarea, select) { color-scheme: light; }
html body.studio-embedded .input { background: #fff; color: var(--v-ink); border-color: var(--v-ink); }
html body.studio-embedded .btn { border-radius: 999px; }
html body.studio-embedded h2 { font-family: var(--v-font-display); }
html body .utkast-strip a { color: var(--v-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--v-cta); text-decoration-thickness: 2px; text-underline-offset: 3px; }

html body.studio-embedded > :is(.v-nav, .v-foot), html body.studio-embedded .v-bar { display: none !important; }


:root:root { --font-mono: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; }
svg.crew text { font-family: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif; }